ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   claudioccm
   Member

   Hello,

   I'm not a coder, and I'm struggling to customize my thematic child theme. I've learned a lot from this forum, but I still have some noob dificulties when it comes to edit the html and php files.

   I've added the "addthis" plugin to get this great feature to my blog, but I want to customize the looks of the button. For that I need to place a code snippet right before the closing tag of the <div class="entry">, but I can't find where it is. I've looked where the "addthis" tutorial directed me to go, but I think Thematic is more advanced/complex than the majority of the themes. Can anyone help me out to find that div?

   Thank you in advance.

   Cláudio

   Posted 13 years ago #
2. 

   em hr
   Moderator

   I think that you'd want to filter the thematic_postfooter to insert before the closing of .post div or rebuild template loops to insert at the closing of .entry-content div.

   -Gene

   Posted 13 years ago #
3. 

   claudioccm
   Member

   haha, thank you HR, but unfortunately, that was greek to me.
   Thank you a lot for your attention.

   Posted 13 years ago #
4. 

   em hr
   Moderator

   Why dont you post exactly what code you want paste right before the closing tag of the <div class="entry"> and let me know on what pages/templates you would like it to appear and I'll give it a go toward coming up with a solution.

   Posted 13 years ago #
5. 

   claudioccm
   Member

   Hey HR, thank you a lot for your interest in my problem.

   The code is:

   <a href="http://www.addthis.com/bookmark.php"
   class="addthis_button"
   style="text-decoration:none;">
   <img src="http://s7.addthis.com/static/btn/sm-plus.gif"
   width="16" height="16" border="0" alt="Share this Post" /> Share this Post

   I need it to be shown at the end of each post.

   Here is a link to my site - www.claudiomendonca.com

   Thank you again.

   Posted 13 years ago #
6. 

   em hr
   Moderator

   Hi-

   I tested that plugin and inserting the code you pasted manually. The code you want to insert produces a an orange button with a white plus symbol which is exactly what the plugin will do for you if you set the appropriate settings.
   Activate the plugin then log in to the WP admin on the left there is a menu item labeled "settings" toggle it open and the "add this" section should be somewhere near the bottom. Once you're in that section you'll see a dropdown selection menu labeled "Button Style" Select the style "Plus" and this will output the same as the code you pasted here. No messing with the code it's all right there.

   Hope that helps- Gene

   Posted 13 years ago #
7. 

   claudioccm
   Member

   I've done that, with teh plugin. I couldn't find any input field, in the plugin menu, that adds the text I need to appear. That's why I'm trying to mess with the code. Thank you a lot HR.

   Posted 13 years ago #
8. 

   em hr
   Moderator

   Here is one way to do it add your button code to $add_this_code

   function child_postfooter_link($output) {
   	$add_this_code = ''; // put your "add this" code here
   	$my_meta_sep = '<span class="meta-sep meta-sep-share-this"> | </span>';
   	$my_code = $my_meta_sep . $add_this_code . '</div><!-- .entry-utility -->';
   	return preg_replace('/<\/div><!-- .entry-utility -->/',$my_code, $output);
   }
   add_filter('thematic_postfooter','child_postfooter_link');

   Posted 13 years ago #
9. 

   claudioccm
   Member

   Hey man,

   that code worked perfectly. Thank you very much!!!

   Best regards,

   Posted 13 years ago #
10. 

    claudioccm
    Member

    I was testing this code, and it really does the trick, but I saw a minor problem on it, that I could use some help.

    On the filter posted above, the "addthis" button is inserted in the meta info area, and that won't work well for themes that doesn't show meta info. I was trying to edit the code to insert the "addthis" to the end of the post, and not at the meta info area.

    Thanx in advance

    Posted 13 years ago #
11. 

    em hr
    Moderator

    Try this:

    function child_postfooter_link($output) {
    	$add_this_code = ''; // put your "add this" code here
    	$my_code = '</div><!-- .entry-utility --><span class="my-add-this">' . $add_this_code. '</span>';
    	return preg_replace('/<\/div><!-- .entry-utility -->/',$my_code, $output);
    }
    add_filter('thematic_postfooter','child_postfooter_link');

    Posted 13 years ago #
12. 

    claudioccm
    Member

    Thank you a lot man. Now it's great. Thank you a lot for your attention.

    Posted 13 years ago #
13. 

    jo
    Member

    Hello,
    Thank you, this post was very helpful in getting the addthis button under my posts. However, I am trying to get a custom icon image to show to the left of the word share (instead of the red and white cross). Does anyone know how to go about doing this? All my attempt so far have been unsuccessful.
    here is the link to my site: www.smitten-cat.com

    Thanks for any help!

    Jo

    Posted 13 years ago #
14. 

    em hr
    Moderator

    Hi Jo,

    For better efficiency my code above should be altered to use str_replace instead of preg_replace like so:

    function child_postfooter_link($output) {
    
    	$add_this_code = do_action( 'addthis_widget' );
    
    	$my_code = '</div><!-- .entry-utility --><span class="my-add-this">' . $add_this_code. '</span>';
    	return str_replace('/<\/div><!-- .entry-utility -->/',$my_code, $output);
    }
    add_filter('thematic_postfooter','child_postfooter_link');

    Also note that this plugin will break with Thematic if set to: "menu type:static" in the admin>settings>AddThis

    So back to your question, How to change the image... I think I'm getting this right if not correct me.

    In the admin you have addthis set to "menu type: toolbox" & "button style: plus". If this is true then the plugin has the plus image set as the background img of a span. You just need to add something like this to your style.css to declare your own image:

    #main .at300bs at15t_expanded, #main .at300bs at15t_compact { background: red; }

    -Gene

    Posted 13 years ago #
15. 

    jo
    Member

    Hi Gene,

    Thank you for your help. Unfortunately i have been unable to get the image to appear in place of their icon, but I will keep playing with it. There must be an error somewhere in my code, I will update when I figure it out.
    Thanks again!

    Jo

    Posted 13 years ago #
16. 

    em hr
    Moderator

    Sorry Jo. My mistake above. That code was flawed

    Try:

    #main .at15t_compact { background: red; }

    Posted 13 years ago #
17. 

    jo
    Member

    Hi Gene,

    The new code worked perfectly. Thank you so much!!

    Jo

    Posted 13 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.