9 replies to this topic

[elucia]

Hi there

http://wordpressbygirlfriday.com/hcdg/our-dentists

The font for the dentists is in italics and I would like it to have No Style. I am also planning on using the Tabber Widget on the home page, and the titles are in italics there, too (http://wordpressbygirlfriday.com/hcdg/)

I'm looking in the style sheet for Tabber Widget template (it's called "rounded-light.css) but do not see where I can adjust this...?

thanks for your help!

Elaine

[Josh]

Hi,

You can just add it to the end of your themes stylesheet.

.tabber-widget-tabs a {
 font-style: normal;
}

Please let us know how this works out for you.

Josh

[elucia]

thanks very much!

[Sherry Brimacombe]

Hi – I want to do the exact same thing as Girl Friday but for some reason it won't work for me. I tried putting the code in the style.css of my chled theme and that didn't work so then I put it into the tabber rounded-light.css and that didn't work either — am I doing something wrong?

Please let me know, THX! Sherry

http://bh.sherrybrimacombe.com/

Also! I would like to know how to get rid of the bottom padding or margin (whatever it is) so the bottom of the tab does not have that brown line – would also like to make the top have less padding too – about half of what's there.

Plus one more thing -- is it possible to get rid of the little black arrows?

Edited by Sherry Brimacombe, 16 May 2011 - 05:10 PM.

[Sridhar Katakam]

@Sherry

Add the following at the end of child theme's style.css:

ul.tabber-widget-tabs {
 list-style: none;
}

ul.tabber-widget-tabs a {
 font-style: normal;
}

.tabber-widget-content img, .tabber-widget-content p {
 padding-top: 0 !important;
}

.tabber-widget-rounded-light .tabber-widget-content {
 background: transparent !important;
}

#tabber_widget-3 {
 padding-top: 0.8em;
}

[Sherry Brimacombe]

Thanks Sri -- that worked great!

Question: if I am making changes to the text colours on the tabs and the tabs themselves should I be putting my changes in the child theme css or in the tabber widget css?

Thanks a bunch!

Sherry

[Sridhar Katakam]

Child theme css is better because plugin's css will be overwritten during plugin upgrade.

[Sherry Brimacombe]

Hi Srihdar -- well that sounds right ... ok... so attached is a copy of the tabber css file that I'm using on the site above with my edits. How do I incorporate them into my child theme css so that I can reinstall tabber to it's original version?

Thanks so much for your help!

Sherry

(sorry but I didn't know how to upload the .css file...)

/*
Name: Rounded Corners Light
Class: tabber-widget-rounded-light

Note: Rounded corners are not supported in Internet Explorer 6, 7, or 8.

Notice: If the Class changes or the file is renamed, you must resave all widgets that use this template.
*/
/* SHERRY edited this for Bryce */

/* Style Tabs */

.tabber-widget-rounded-light {
color: #000;
padding: 0 !important;
margin: 0 !important;
}
.tabber-widget-rounded-light ul.tabber-widget-tabs {
list-style-type: none;
padding: 0 !important;
margin: 0 !important;
}
.tabber-widget-rounded-light ul.tabber-widget-tabs li {
float: left;
list-style-type: none !important;
padding: 0 !important;
margin: 0 !important;
border: none;
}
.tabber-widget-rounded-light ul.tabber-widget-tabs li:before {
content: "" !important;
}
.tabber-widget-rounded-light ul.tabber-widget-tabs a {
display: block;
/*padding: 6px 10px;*/
padding: 8px 18px;
font-size: 1em;
text-decoration: none !important;
/*margin: 1px;*/
margin: 6.5px;
margin-left: 0;
color: #000;
/*background: #444;*/
background: #d1ac7a;
-moz-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;

}
.tabber-widget-rounded-light ul.tabber-widget-tabs a:hover {
/*color: #FFF;*/
color: #e3c8a3;
/*background: #111;*/
background: #77562a;

-moz-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;

}
.tabber-widget-rounded-light ul.tabber-widget-tabs a.selected,
.tabber-widget-rounded-light ul.tabber-widget-tabs a.selected:hover {
margin-bottom: 0;
color: #fff;
/*background: snow;*/
background: #000000;
/*border-bottom: 1px solid snow;*/
/*cursor: default;*/
}

.tabber-widget-rounded-light .tabber-widget-content {
/*padding: 10px 10px 8px 10px;*/
padding: 0 !important;
margin: 0;
clear: both;
/*background: snow;*/
background: #77562a;
}

/* Style Content */

.tabber-widget-rounded-light .tabber-widget-content {
text-align: left;
}
.tabber-widget-rounded-light .tabber-widget-content .tabber-widget-title {
margin-top: 0;
}
.tabber-widget-tabs a {
font-style: normal;
}

[Sridhar Katakam]

Quote

How do I incorporate them into my child theme css so that I can reinstall tabber to it's original version?

Copy and paste.

Copy all the code and paste it at end of child theme's style.css.

If you find (using Firebug of course) that styles in in style.css are getting overridden by plugin's, use !important for style rules in style.css.

[Sherry Brimacombe]

Hi Sridhar -- you were correct I had to put !important in fron tof all of my changes for them to work. Thanks again for all of your help!

Sherry