WordPress Jetpack sharing buttons displaying funny on custom theme

I currently have a custom themed blog running on wordpress with Jetpack installed.

I have enabled Sharing, and have dragged various social site sharing services into the “Enabled Settings” section (Facebook, Twitter, Google+, Digg, etc).

Read More

However, on my custom blog the sharing buttons are presented in a listed order without any sharing icons (just text).

Which means my sharing bar looks like this:

A Blog Post
DD/MM/YY

blah blah blah blah blah

> Facebook
> Twitter
> (This is empty, its supposed to be Google+ here)
> Digg
> Etc

Posted in Uncategorized

Does anyone know the default CSS to display these sharing icons in Jetpack, or am i doing something wrong?

Related posts

Leave a Reply

2 comments

  1. Right, turns out I left out a very important line of code to enable the plugins to work.

    <?php wp_footer(); ?>
    

    This has to be included immediately before the </body> tag in order for it to work.

    I didn’t include it in, and therefore it broke the plugin system, rendering any plugins that I’ve enabled to be useless.

    Once you’ve got that in the right place, Jetpack should show up clearly and you only need minor tweaking (font size, margins, etc) to assimilate it into WordPress.

    Hope that helps.

  2. For example ( http://css.maxdesign.com.au/listamatic/horizontal02.htm):

    HTML
    
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
    </ul>
    </div>
    
    CSS
    ul#navlist
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }
    
    #navlist li
    {
    display: inline;
    list-style-type: none;
    }
    
    #navlist a { padding: 3px 10px; }
    
    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    background-color: #036;
    text-decoration: none;
    }
    
    #navlist a:hover
    {
    color: #fff;
    background-color: #369;
    text-decoration: none;
    }