Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] Varying the styling for each widget (http://forum.bytesforall.com/showthread.php?t=16891)

megavolt Mar 1, 2012 06:52 AM

[SOLVED] Varying the styling for each widget
 
I am a newbie to both Wordpress and Atahualpa.
I am making a website and I wanted to have a border around the widget container in my left sidebar. Therefore in the Atahualpa settings - Style Widgets - Widget container, I added the following style:
margin: 25px 0 25px 0;
border: solid 3px #875500;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 10px 10px 10px 10px;

This works fine for me except that it makes a border around all the widgets in every sidebar. I do not really know if this style change was placed in the right place or not. Can someone please explain to me how I can have the border JUST for the widget in the left sidebar? At one point I figured that if I could find the place where each widget gets it's styling from, I could change the color of the border to the same color of the background - that way it won't be seen. But I can't figure out where it is that I need to make the change.

Can someone please point me in the right direction?
Thank you

lmilesw Mar 1, 2012 07:16 AM

To style specific widgets you need to determine the selector for the widget (I use Firebug) and then put the necessary CSS in the CSS Inserts box in the theme options. For instance the widget ID might be #category-3 or #text-2.

Where you put the styling is meant to style all widgets so if you have some style you want as the default style you put it there.

megavolt Mar 8, 2012 09:22 PM

Thank you for your reply. I've done what you have said, but I am not that familiar with PHP. The theme that I am using (Atahualpa) seems to be putting a lot of the styling in the PHP .
I have found the ID and the class, but I am not sure what to do with this. Can you please put me on the right path?
Thank you

lmilesw Mar 8, 2012 09:39 PM

I am not talking about PHP. I am talking about CSS. If you give a link to a site and a specific idea of what you want to do I can perhaps helpl.

megavolt Mar 8, 2012 11:31 PM

Thank you.
The site is: www.myappliancetips.com

I wanted to have a border around the menu (widget) on various menu pages such as:
http://www.myappliancetips.com/large-appliances/

On the other hand, I do NOT want the border on the right sidebar widgets, such as found on the front page. I realize that my placement of the border is not in the right place, but I don't know where the right place is.

In most themes the style.css is huge and has most of the styling for the theme. In Atahualpa, they seem to put much of the styling elsewhere. As you can obviously see, I am a newbie and not a professional website builder.

Thanks again

juggledad Mar 9, 2012 04:50 AM

What you want to do is style the WIDGET containers (ato->Style WIDGETS->Widget Container) as you are doing, then add a CSS Insert statement to shut off the border on widgets in the right sidebar
HTML Code:

td#right div.widget {
border: none;
}

p.s. if you want the images on the home page to each be wrapped in a border, put them each in their own text widget

megavolt Mar 9, 2012 07:01 AM

Thanks. My main problem was that I didn't know where to add this CSS Insert. I tried putting it where I put my original styling for the widgets was, but it didn't work. Then I tried it in style.css, but that didn't work either. Then I stuck it in css.php, and THAT worked.
Thank you so much.

juggledad Mar 9, 2012 07:07 AM

No don't edit css.php since you will loose it next upgrade. put it in ato->Add HTML/CSS Inserts->CSS Inserts and it will become a theme option and be there next upgrade.

megavolt Mar 9, 2012 07:20 AM

Did it. and it works.
Thanks once again


All times are GMT -6. The time now is 05:18 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.