Need help? Check out our Support site, then


Facebook button at the bottom

  1. 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 9thartwave.com.

  2. 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:
    http://css-tricks.com/css-sprites/

  3. 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.
    http://en.support.wordpress.com/editors/#text-editor

  4. any way to change the size of the grey buttons (make them slightly bigger)

  5. 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/

Topic Closed

This topic has been closed to new replies.

About this Topic