Newbie here – How do we modify the CSS for individual plugins?

Bring up the page in your browser. View the source code (Page->View Source in IE, View->Page Source in Firefox) and search for some of the text in your widgets (CTRL-f).

Look for class=something in the surrounding div, span, or p tags. That class is what you want to modify in the CSS.

The CSS may be in style.css, so try there first. Then look for a plugin-specific file depending on the plugin. Some plugins may have the css coded inside the php file, so you just have to hunt for it. Search for the class name in all .css files under wp-content.

If you have Firefox, it is a lot easier. Install Firebug, bring up the page and hit F12. A window will open at the bottom of the screen. Click the HTML tab, then the icon that looks like an arrow pointing to a box. Hover the mouse over the item on the page you are interested in, and the lower right box will show the css for that item.

See below…

Ok I think I found the problem, but I don’t know how to fix it. I believe it’s not in the stylesheet, it’s in the code for the tags for the plugin. For example the code for the properly formatted titles of the above “widgets” is:

<li id=”text-3″ class=”clearFix widget widget_text”><h3 class=”widgettitle”>Text sidebar widget</h3>…..

While the errant is simply:

<h3 class=”widgettitle”>Mortgage Calculator</h3>

I can see the .js file that is all gibberish to me, but it seems I would like to add the “clearFix…” code to the Mortgage widget….but how? Thank you.

sorry to keep trickling in information…..but

in the WordPress editor, the referred to .css file says “inactive”. Could this be it? I see how to activate the whole plugin but can you activate individual files? If so how?

If you can post a link to your site, I might be able to give more specific help.

You can try adding the other classes to the Mortgage Calculator line, but the style may depend on the id=”text-3″ instead of the classes. If you want to try it, change this:

<h3 class="widgettitle">Mortgage Calculator</h3>

to this:

<h3 class="clearFix widget widtet_text widgettitle">Mortgage Calculator</h3>

or try one at a time to see which one might work.

I don’t know about the inactive .css file. AFAIK, you can’t activate individual files. That .css file may not be linked in to the template and so is inactive, but that is just a guess.

The site is:

yourboulderhomeblog.com

If you click the any page in the top nav, look in the left sidebar. You will see the properly formatted widgets/Category list, then below, the mortgage calculator which has no formatting.

In the code you will notice that the title “Mortgage Calculator” has the same h3 class as the above “Category” widget, but does not format. I just don’t get where the breakdown is.

In the header there is a reference to srp.css for the Mortgage Calculator, but it does not seem to be effecting anything. I must be missing something.

I would really appreciate some help following through with this. Once it clicks I think it will open up my understanding for the broad development concepts. Thanks!

One more quick thing, I noticed this same formatting issue with another simple plugin I installed – so I think this is a general concept I’m trying to figure out here rather than an error maybe?

I don’t know how much control you have over the Mortgage Calculator (MC). If you can, the simplest thing to do is enclose the whole thing in a div with a class of widget:

<div class='widget'>
<!-- Mortgage Calculator here -->
</div>

If you can’t do that, you can correct the body of the MC by copying the .widget style from line 486+ of style.css and pasting it into srp.css, then renaming it .srp_MortgageCalcwidget.

The header does not have a unique style, so unless you can modify the code, I don’t know of a way to change it without changing all h3 headers. If you can modify it, change from:

<h3 class="widgettitle">Mortgage Calculator</h3>

to:

<h3 class="widget widgettitle">Mortgage Calculator</h3>

If any of this solves your problem, please be sure to mark this topic ‘Resolved’.