I find a nice Twitter widget for our sidebar that I liked the design of, but for some reason when I put it in the sidebar every widget below it gets slightly messed up. Namely, it seems to take away the margin or padding of the widgets, shift them all the way to the left of the widebar, and add in some weird bullet point thing. Any help would be greatly appreciated! Here's the page:
www.helaspadc.com/?page_id=184

Thanks!

Hi Polk,

It looks like you're twitter widget CSS file is loaded last.
Which means that anything in this file that conflicts with another css file is what gets displayed.

You'll need to use Firebug to track down the source of the CSS and either change the files or eliminate the duplicate rules.

Here's a tutorial on using Firebug to track down CSS -

www.ostraining.com/blog/wordpress/firebug-wordpress-css/

Also you might want to review the lessons on setting up a child theme in WordPress. With a child theme you'll be able to make these changes and they won't be overwritten by updates to the WordPress core or the plugin itself.

www.ostraining.com/courses/session/lates...-themes/child-theme/

And also check out this tutorial for a quick way to create a child theme.
www.ostraining.com/blog/wordpress/ne-click-child-theme/

Let us know if that helps or you have more questions.

Cheers,
Ed

Hey Ed, Thanks so much for your help with this. So I did a little investigating and read over the firebug tutorial--I'll confess I'm familiar with firebug and use it, but mainly just to tinker with small bits of code or find where things need to be changed/edited, so not that familiar with finding conflicting CSS--but I do see something that may be the problem.

I noticed when checking the CSS paths of the widgets both before and after the twitter widget that the ones below it are missing something. Specifically, the text ones above the twitter widget have the following path:

html body.custom div#container div#page div#content_box div#sidebars div#sidebar_1.sidebar ul.sidebar_list li#text-11.widget

Then you have the same with the twitter one:
html body.custom div#container div#page div#content_box div#sidebars div#sidebar_1.sidebar ul.sidebar_list li#my_twitter_widget-3.widget

Then after that things get messed up. The next two are as follows:
html body.custom div#container div#page div#content_box div#sidebars div#sidebar_1.sidebar li#thesis-search-widget-3.widget

html body.custom div#container div#page div#content_box div#sidebars div#sidebar_1.sidebar li#text-12.widget

Again, just using my limited knowledge here, but both of the ones below are missing the "ul.sidebar_list" tag in their CSS path, so somehow the twitter widget's CSS has screwed that up, which would definitely explain the alignment and bullet points to the side of each widget.

I'm guessing I need to go into the CSS of the twitter widget specifically and do something there so the widgets below it inherit the ul.sidebar_list properties, but--and apologies again for my limited knowledge on this--but any idea what to look for?!

Thanks so much

Hi Ryan,

Take a look at the screen shot. You can see I added the line:
And the bullets disappeared. If you want to edit layout.css you can add this line at the bottom. But when you update your template your changes will be overwritten.

The best thing to do is make a child theme for this site. Then add new rules to the layout.css file you create in the child theme. These will overwrite the original style sheet.Then when there is an update your changes won't be wiped out.

Create new rule for li in the child theme. to redefine how it works.

Also this site is using cache very heavily, which is good, but you may not see your changes until you clear the cache completely and maybe even refresh your browser.

See if that helps.
Cheers,
Ed

Great, thanks so much, Ed! I just renewed my subscription with OSTraining after a year of absence and am extremely glad I did!

Yeah I'll confess I haven't been good about using child themes, but that's something I really should do. And I don't think the screen shot game through in your post so would you mind posting that again?

And also thanks for the reminder about flushing the cache. I've had that problem more than a few times when trying to show these changes to my client.
-Ryan

Sorry about forgetting the screen shot. Here it is.

Cheers,
Ed

no worries! Thanks! I'll see if my rudimentary CSS skills can do the trick with this! Looks pretty straightforward though, so thanks for my screen shot and code

Glad you're back with us Ryan.

Keep asking questions. Be sure to check our new courses too. We've added a lot in the last year.

Cheers,
Ed

Thanks! Yeah I'm just taking up wordpress now after learning joomla, hence the new questions :) And will absolutely take a look at the new tutorials!

Btw made the change in that line and worked like a charm. Only weird thing is that it's still aligned odd--basically with no margin/padding, and I tried adding that manually in firebug and it works but unfortunately also does that to the correct widgets above it (basically giving it some extra margin). It's an imperfect fix but I think it'll have to do unless you have any other suggestions!

And just out of curiosity, why is it the font-size and line-height lines were blocked out in those widgets and not the top ones. I'm guessing the CSS from the twitter widget is conflicting with that, but not exactly sure how to write code that basically says at the end of the twitter widget CSS "end your code here. go back to original CSS."

Thanks again and glad to be back!

Those were blocked out in Firebug because they were inherited from somewhere else. Here's a tutorial that is very basic but touches on the topic of inheritance in Joomla. It's the same everywhere so this might give you some clues.

www.ostraining.com/blog/coding/firebug-logos/

Css style sheets just use whatever is last as most important, unless something is marked as !important - if you want in depth info check this page www.w3.org/TR/CSS2/cascade.html

or just the quick and dirty - css-tricks.com/when-using-important-is-the-right-choice/

So you might put !important on the margins and padding to make sure it's carried on throughout the site.

or just make new rules with new names and change the template for the plugin to use your new names. Harder but more permanent.

Cheers,
ed