Remove borders from jQueryUI skin

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
8/31/2011 10:04:28 AM
Gravatar
Total Posts 42

Remove borders from jQueryUI skin

Please how can I remove the borders shown for Html Content when using jQueryUI skin.

I saw this using firebug

.ui-widget-content {
    background: url("images/ui-bg_highlight-hard_100_f2f5f7_1x100.png") repeat-x scroll 50% top #F2F5F7;
    border: 1px solid #DDDDDD;
    color: #362B36;
}

Since this is gotten from ajax.googleapis, how can i change this behaviour in my site?

Thanks in advance

8/31/2011 10:18:13 AM
Gravatar
Total Posts 1991

Re: Remove borders from jQueryUI skin

Hi,

Add the following to the bottom of the style.css file in your skin folder.

.ui-widget-content { border: 0 none; }

Because this is lower in the style than the jQuery UI css from the Google CDN, it will take override the border: 1px solid #DDDDDD;

HTH,
Joe D.

8/31/2011 12:41:57 PM
Gravatar
Total Posts 42

Re: Remove borders from jQueryUI skin

Thanks so much Joe.

That solves it just perfect.

I have another challenge please.

Is there a way to "override" the left, center, and right panels.

I mean, Once I add an HTML content to the left panel, it takes up the whole column,

Such that if i now have an HTML Content in the center, there is a lot of blank space on the left.

I want to be able to add a center content and still use the space for the left panel in that region.

Thanks

You must sign in to post in the forums. This thread is closed to new posts.