Twitter Widget Pro
Styling Reply Retweet Favorite buttons (21 posts)

  1. DoubleSixx
    Posted 3 years ago #


    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.


  2. DoubleSixx
    Posted 3 years ago #

    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.

  3. Aaron D. Campbell
    Plugin Author

    Posted 3 years ago #

    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;
  4. Aaron D. Campbell
    Plugin Author

    Posted 3 years ago #

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

  5. DoubleSixx
    Posted 3 years ago #


    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 ?

  6. Aaron D. Campbell
    Plugin Author

    Posted 3 years ago #

    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!

  7. DoubleSixx
    Posted 3 years ago #

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

    50 / 50

  8. Aaron D. Campbell
    Plugin Author

    Posted 3 years ago #

    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.

  9. DoubleSixx
    Posted 3 years ago #

    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.

  10. Aaron D. Campbell
    Plugin Author

    Posted 3 years ago #

    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.

  11. DoubleSixx
    Posted 3 years ago #

    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.

  12. lazytv
    Posted 3 years ago #


    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.

  13. DoubleSixx
    Posted 3 years ago #

    How do I send you a private message ?

  14. lazytv
    Posted 3 years ago #

    You have mail.

  15. DoubleSixx
    Posted 3 years ago #

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

  16. lazytv
    Posted 3 years ago #

    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

  17. lazytv
    Posted 3 years ago #

    If you get the sprite over top the 'reply, retweet, favorite' text then have a look at your theme CSS (hint: in the CSS that defines the widgets).

    Specifically display:inline;

    Hope this helps.

  18. Chris Patterson
    Posted 3 years ago #

    I was having a similar problem with the icons not appearing. I opened my page in Firebug, and noticed that the 'intent-meta' content that the CSS is supposed to style was not actually being generated, despite the option being checked.

    I don't want to spend a whole lot of time going through the code, but in line 607 of wp-twitter-widget.php, simply reversing the == to != makes the icons appear. That's clearly backwards, so there's a problem somewhere in there with the way the 'showintents' arg is being set.

  19. Chris Patterson
    Posted 3 years ago #

    Correction to myself: I had enabled the intents in the global options, but it wasn't enabled in the options of the actual widget on the widget page. I'm not sure if this behavior is intentional or not.

  20. DoubleSixx
    Posted 3 years ago #


    Thanx for trying to help, I followed your instructions and still no web intents.

    I've often wondered why there were Global and Widget setting but didn't want to hire a web developer to answer the question.

    Take care.

  21. Aaron D. Campbell
    Plugin Author

    Posted 3 years ago #

    The global settings affect new widgets (like setting defaults that you can override with widget settings) as well as working as default settings for the shortcodes.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Twitter Widget Pro
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic