1

[Ricardo]

Ricardo

#2219

Hey,

I would like to have my social media buttons, that now only appear when you click to see the full post, to always appear on the front page, on the left side above the tags (above the grey line to be exact). Can somebody help me with this?

http://fastforwardandrewind.com/

[Kenneth John Odle]

Kenneth John Odle

#19388

You can use a graphene action hook widget area, plus a bit of php.

You can see what I did here: http://blog.kjodle.net/2011/11/04/graphene-action-hook-widgets-an-easy-way-to-modify-your-blog/

Except that you would do the opposite, PHP wise. Take a look and see if that will work for you, and if you have questions/problems, let me know.

Ken

[Anonymous]

Anonymous

#19389

What happens when you change your social sharing options to show on “top of posts” instead of “bottom of posts” which is the default, I think.

[Ricardo]

Ricardo

#19390

@ Josh Then the buttons would show above the content, and I want them below it 🙂

@ Kenneth Thanks, I am going to read through the text and try it out!

[Anonymous]

Anonymous

#19391

Excellent Post Ken. Bookmarked!

[Ricardo]

Ricardo

#19392

Maybe we can also add this info to the themes wiki?

http://wiki.khairul-syahir.com/graphene-theme/wiki/Main_Page

[Ricardo]

Ricardo

#19393

@ Kenneth Thanks, the post made this really easy to achieve! The only thing I would like to do now is to have a little more space above and less space below. What is the best way to do this? 🙂

And a weird problem, the Twitter counter seems to always be on ’47’.

[Anonymous]

Anonymous

#19394

Do me a favor and post the code you inserted into your custom widget. I think your div tags are mucking with things.

The twitter counter… I’ve seen this problem before. If it was “42”, I’d understand the significance 😉

[Ricardo]

Ricardo

#19395

Sure 🙂

<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style ">

<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>

<a class="addthis_button_tweet"></a>

<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>

<a class="addthis_counter addthis_pill_style"></a>

</div>

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4eb1b0cc416e1e9b"></script>

<!-- AddThis Button END -->

[Kenneth John Odle]

Kenneth John Odle

#19396

Three options:

1) Add custom CSS to the existing class, like this:

.addthis_toolbox {padding: 6px 0 6px 0;}

2) Wrap your code above in a new division that you can style inline or via child theme. (Best if you want to make dramatic changes.)

3) Add inline style to the existing div:

<div class="addthis_toolbox addthis_default_style " style="padding: 6px 0 6px 0;">

Option #3 is probably easiest, but some CSS experts frown upon inline styling. I think you can get away with it here, though.