Where do i edit the css file for Twitter Widget Pro?

I am experiencing the same issue.

To get around the issue I have just added the CSS into my theme CSS. Not an ideal solution but seems to work.

Have you found a better solution?

Owen984

If you ever find it please post instructions.

I’ve been trying to get the web intents icons to show up for the longest time.

Aaron will tell you to check the FAQ, but no real instructions are available.

Many plugins have a feature that let you edit the CSS from WordPress, this would a nice feature.

Nice plugin, oh well.

And The Answer Is…
The readme.txt file (inside your twitter-widget-pro plugin folder) has a TON of good information about using and styling this widget. Sample CSS snippets start on line 73.

You can add custom CSS rules to style the widget right in your theme’s stylesheet. You can use style.css (assuming you’re using a child theme that won’t be overwritten). Or, if you use a custom css file for modifying your theme, you can use that.

My personal practice is to simply create a section called /* PLUGIN MODIFICATIONS */ at the end of my theme’s stylesheet. I keep the custom CSS rules for ALL my plugins in that section. It’s very convenient for editing, plus having it all in one place means I never have to go on a time-consuming witch hunt for rogue code that might be hiding… anywhere… due to previous edits in other files that I’ve long since forgotten about.

@owen984: Actually, this IS the “ideal solution,” and a MUCH better practice than editing plugin files directly. Why? Because any edits made directly to plugin files will be automatically overwritten every time the plugin is updated.

Bonus Suggestion:
If you don’t have the Firebug AddOn for Firefox (or Firebug Lite for Chrome), get it and spend an hour or so on YouTube learning how to use it. Seriously. It will save you enormous amounts of time and aggravation. Firebug can show you INSTANTLY exactly what classes/ids you need to target. It has live preview functionality so you can test modify your CSS rules directly in your browser without actually touching your stylesheet (thereby ensuring you’ll get what you want with no unintended consequences). Once you’re happy with your tweaks, it’s just a matter of copying and pasting the revised CSS from your Firebug window into your theme’s REAL stylesheet.

Happy WordPressing!

I’m new to WordPress, CSS, etc., but have managed to customize some areas of my site using CSS. I’m using the Thesis theme. I’d like to make some changes to the Twitter Widget Pro, namely: change the margins (height and width), change the padding, and change the font size for the default Title (too small.)

I can see where it makes sense to make changes within the Thesis theme CSS, but when that theme gets updated, as it does every so often, will I lose my modifications?

Also, if I end up making the changes to the Twitter Widget Pro, which I realize could also be updated, where do I made those changes – in the “twitter-widget-pro/wp-twitter-widget.php” (which is active) or in another another file?

There’s a warning not to make changes to the active file in case of a fatal error. Not having much experience in this area, I don’t want to make things worse just to make a few modifications. Thanks in advance to anyone who can help clarify!

I agree with just customizing the plug-in’s style using custom css in your theme.

That being said, maybe something is wrong with my plugin, but it is very hard to style effectively when there are no class or id hooks around the entire twitter widget div or the tweet list (see the sample below).

<div>
  <h3>
    <span class='twitterwidget twitterwidget-title'>MyCompany on Twitter</span>
  </h3>
  <ul>
    <li>
      <span class='entry-content'>MyCompany has done something cool</span>
      <span class='entry-meta'>
        <span class='time-meta'>
          <a href="https://twitter.com/MyCompany/statuses/12345" target="_blank">about 2 days ago</a>
        </span>
        <span class='from-meta'>from web</span>
      </span>
    </li>
  </ul>
  <div class="follow-button">
    <a href="https://twitter.com/MyCompany" class="twitter-follow-button" title="Follow @MyCompany" data-lang="en" target="_blank">@MyCompany</a>
  </div>
</div>

Would it be possible to add some hooks (obviously I can change the code myself but that sort of defeats the whole plug-in concenpt)

add a hook to the main div

$widgetContent = $args['before_widget'] . '<div>';

add a hook to the list

$widgetContent .= '<ul>';

add a hook to the list item

$widgetContent .= '<li>';

Thanks