Support » Plugins and Hacks » Twitter Widget Pro » [Plugin: Twitter Widget Pro] Styling Reply Retweet Favorite buttons

[Plugin: Twitter Widget Pro] Styling Reply Retweet Favorite buttons

  • Hello,

    I love this plugin, works great. A few updates ago the Reply, Retweet, and Favorites links had buttons.

    Then the next day there was another update that removed the buttons and left text links.

    Checking the plugin’s site forum (which you post in at all), and finding the author on Twitter, he said I needed a .css file. Plus I discovered I needed the Twitter everything-spritev2.png file.

    The author stopped replying probably busy.

    So my question now is what name should the .css file have and where do I put it on the server.

    Reading the .css file I learned the path to the .png file : wp-content/plugins/twitter-widget-pro/images/everything-spritev2.png

    Feels like I’m on the verge of solving the problem. Looks like I need the correct name of the .css file. I tried style.css and put in the wp-content/plugins/twitter-widget-pro/ directory, which didn’t work.

    So I think with the right name and location the .css should render the buttons.

    Hopefully someone here has the answer. Thanx in advance.


Viewing 15 replies - 1 through 15 (of 20 total)
  • No body has an answer ?

    I would think most would like the styling on the widget.

    If it already works for someone else I would appreciate the help.

    Never understood how it worked one day and the following day it was completely gone. So it had to be included in one of the updates.

    I tried grabbing older version and it has never appeared again.

    Plugin Author Aaron D. Campbell


    You can add styling for the widget to your theme’s style.css file. I’m not sure why you ever had that styling because no styles have every been included with the plugin. You can use this code, making sure that the image url is correct for your site.

    .widget_twitter .intent-meta a {
    	background: url(images/everything-spritev2.png); /** from Twitter ressources */
    	display: inline-block;
    	height: 16px;
    	text-indent: -9999px;
    	width: 16px;
    .widget_twitter .intent-meta a.in-reply-to {
    	background-position: 0 center;
    .widget_twitter .intent-meta a:hover.in-reply-to {
    	background-position: -16px center;
    .widget_twitter .intent-meta a.favorite {
    	background-position: -32px center;
    .widget_twitter .intent-meta a:hover.favorite {
    	background-position: -48px center;
    .widget_twitter .intent-meta a.retweet {
    	background-position: -80px center;
    .widget_twitter .intent-meta a:hover.retweet {
    	background-position: -96px center;
    Plugin Author Aaron D. Campbell


    Actually, it looks like all this is covered in an FAQ: http://wordpress.org/extend/plugins/twitter-widget-pro/faq/


    Still doesn’t work !

    I checked the faq.

    Guess what ? The url that should show the css working doesn’t show the web intents !


    The web intents are blank.

    Does anyone have this working ? I truly think something is wrong I’ve followed the directions over and over. Wait a few months and try again.

    I edited the theme using the WP editor and pasted the code you provided.

    In theory that goes into my theme style.css right ? That’s essentially what you’re saying to do with vague explanations.

    You just say you can do everything with the css and check the faq.

    Seems like something wrong. Not just on my end.

    Really anyone have this working ?

    Plugin Author Aaron D. Campbell


    You’re right, the image that was needed to properly display web intents on http://essencetheme.com didn’t propagate properly to all our servers. I fixed the issue and the intents now show properly no matter what server you hit (before you had roughly a 50-50 chance of seeing them properly).

    If you’ve put the CSS in your stylesheet perhaps you missed the part of the FAQ that says “You’ll need to get the “Everything” sprite from Twitter’s Image Resources.” That’s the image that the CSS refers to, so you’ll need to have that and make sure that it’s in the right place for how the CSS is referencing it (in the case of the sample CSS it would need to be in an images directory that resides in the same directory as your CSS file).

    To try to be clear here though, while I try to help out as best I can I do *not* offer free support for my free plugins. This especially includes things like writing CSS to style them how you want. The plugin is used on thousands of sites and I make no money off it, so I just can’t possibly do that (I have bills to pay like everyone else). Having said that, I’m always available for hire (as are many great developers) and I love to work on my plugins!

    Yes I have the file in the proper location. Oh well.

    50 / 50

    Plugin Author Aaron D. Campbell


    The 50-50 was the chance of seeing it properly on the essencetheme.com site because that’s how many of our servers the image was on. Now that it’s on all of them you’ll definitely see it correctly. You can also see it working on http://bluedogwebservices.com/ and http://xjracing.com/ all running basically the same code.

    Yeah me again =(.

    Yes those two links work because their your sites. I checked back when you posted last and you have 32 sites. So I’m sure you can show me 32 examples of sites that successfully show the web intents.

    Is there any way you can hard code this in your next release please ?

    Seems like you have the follow and avatar built in already, why not the web intents ?

    I also wanted to valign “middle” or center the avatar. Found the code but didn’t take my change.

    The web intents is more important to me to have working.

    Thank you.

    Plugin Author Aaron D. Campbell


    The examples are all from my sites because I don’t track who else is using my plugin. I’m sure other people are using the web intents, I just don’t know who.

    As for hard coding them in, they ARE an option that’s easily available (checkbox in the widget settings), but when it’s on you get three unstyled links (which work).

    This back and forth seems to be about styling them using the icons that Twitter supplies. This will never be added to the plugin. I’m very adamant about keeping the plugin free of styles so that people using it can style it however they want.

    As for the avatar, you can style it however you want using CSS, similar to everything else in the widget.

    It might be worth it for you to look into hiring a developer to get it set up how you want.

    Seems like there’s other threads about your plugin also asking about styling.

    Seems like they can’t get it to work either.

    Either way thanx.


    This is a great plugin unfortunately its only half complete. I believe I have found the answers to your dilemma after hours and hours of searching.

    Hit me up and I will share with u. Send me your contact info.

    How do I send you a private message ?

    You have mail.

    Thanx sent an e-mail you can edit out your address now.

    Step 1: Get the twitter sprite here, install into widget folder.

    Step 2: Create a CSS file and drop the CSS code from Aaron (scroll up).

    Step 3: Hard code the css file with the wp-twitter-widget.php file

    // CSS added within plugin begins
    function wptuts_styles_with_the_lot()
        // Register the style like this for a plugin:
        wp_register_style( 'custom-style', plugins_url( '/style.css', __FILE__ ), array(), '20120208', 'all' );  
        // For either a plugin or a theme, you can then enqueue the style:
        wp_enqueue_style( 'custom-style' );
    add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );
    // CSS added within plugin ends

    *be sure to make the url correct for the css file and the sprite image file

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Plugin: Twitter Widget Pro] Styling Reply Retweet Favorite buttons’ is closed to new replies.
Skip to toolbar