Facebook button at the bottom

9thartwave · Member · Mar 22, 2013 at 10:10 pm
Copy link

Add topic to favorites
Hello, how can I color a facebook button on the bottom, next to the RSS one.

moreover, how can I add fb or twitter buttons on the top or bottom of the pages, and not in the sidebar? without any likes etc, just the fb button to connect my blog with my fb page

thanks

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Mar 25, 2013 at 7:09 pm
Copy link
Hello, how can I color a facebook button on the bottom, next to the RSS one.

The buttons in the footer of the Portfolio theme are setup using what is called a CSS sprite. It uses an image to with all of the buttons together and then moves a window to show only the correct image for each link in the HTML.

Here is the image used by the theme:
http://s2.wp.com/wp-content/themes/premium/portfolio/images/social-icons.svg

It’s called like this in the theme CSS:
```
footer[role="contentinfo"] nav.social ul li a {
  background: url(http://s2.wp.com/wp-content/themes/premium/portfolio/images/social-icons.svg) no-repeat;
  display: inline-block;
  opacity: .25;
  height: 16px;
  width: 16px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
footer[role="contentinfo"] nav.social ul li a:hover {
  opacity: 1;
}
```
If you upload a new image with a different color and adjust the url() value in that CSS block and add it back to your Appearance → Custom Design → CSS editor, you can change the color of the buttons.

If you would like to learn more about CSS sprites, start here:

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
designsimply · Member · Mar 25, 2013 at 7:10 pm
Copy link
moreover, how can I add fb or twitter buttons on the top or bottom of the pages, and not in the sidebar? without any likes etc, just the fb button to connect my blog with my fb page

There is not a way to do that built into the theme options, so one way to do it would be to simply add it manually using HTML to each page.

Types of WordPress Editors
9thartwave · Member · Mar 25, 2013 at 7:33 pm
Copy link
any way to change the size of the grey buttons (make them slightly bigger)
designsimply · Member · Mar 25, 2013 at 8:33 pm
Copy link
Not unless you adjust the image the same way I described above for the color. If you made the CSS sprite image bigger, you would also need to adjust the width and height in the CSS shown above and also add additional adjustments to control what part of the image shows up for each social media option:
```
footer[role="contentinfo"] nav.social ul li:first-child {
  margin-left: 0;
}
footer[role="contentinfo"] nav.social ul li.twitter a {
  background-position: 0;
}
footer[role="contentinfo"] nav.social ul li.facebook a {
  background-position: -17px;
}
footer[role="contentinfo"] nav.social ul li.google a {
  background-position: -34px;
}
footer[role="contentinfo"] nav.social ul li.flickr a {
  background-position: -51px;
}
footer[role="contentinfo"] nav.social ul li.rss a {
  background-position: -68px;
}
```
Note that this is the unchanged CSS from the theme. To make it work with a new image, you would need to upload the adjusted image and then determine what “background-position” values to used based on the new image.

If you’d like to get additional design consulting help, you may want to try hiring a designer to make some of the more involved updates:
http://en.support.wordpress.com/customize-my-site/request-theme-customization/

No items found.