Jump to content


Welcome to the forum:

Welcome to the iThemes, PluginBuddy and WebDesign.com forum. We've created several tutorial video's to help you get you started with using the forum, please check them out!

Also take note of the forum guidelines.


Support hours:

Our moderators actively respond to forum support requests during normal business hours which are Monday-Friday, 8am - 5pm Central Standard Time, typically within one business day. Although some moderators choose to work during the weekends, we can not guarantee immediate attention to your requests. Thanks for understanding.

What is included with support:

Premium support includes theme/plugin issues such as: bugs encountered under normal operation, how to use basic features, basic WordPress help, and basic help with customization (meaning we point you to resources and will help in more depth as time allows). More information.

How to change font style in Tabber Widget tab?


This topic has been archived. This means that you cannot reply to this topic.
9 replies to this topic

#1 elucia

elucia

    Advanced Member

  • Members
  • Others: All Plugins, Builder
  • PipPipPip
  • 563 posts

Posted 09 April 2011 - 06:35 PM

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

#2 Josh

Josh

    Ithemes Developer

  • Moderators
  • Others: All Plugins, All Themes, BackupBuddy, Flexx
  • 2,778 posts

Posted 11 April 2011 - 08:21 AM

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
Hey if you haven't looked at the iThemes codex check it out here!
There are some plugin walkthrough videos on our youtube channel check it out!

#3 elucia

elucia

    Advanced Member

  • Members
  • Others: All Plugins, Builder
  • PipPipPip
  • 563 posts

Posted 11 April 2011 - 12:33 PM

thanks very much!

#4 brite

brite

    Advanced Member

  • Members
  • Others: BackupBuddy, Toolkit
  • PipPipPip
  • 160 posts

Posted 16 May 2011 - 06:41 PM

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.


#5 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 16 May 2011 - 11:58 PM

@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;
}


#6 brite

brite

    Advanced Member

  • Members
  • Others: BackupBuddy, Toolkit
  • PipPipPip
  • 160 posts

Posted 17 May 2011 - 03:17 PM

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

#7 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 17 May 2011 - 09:34 PM

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

#8 brite

brite

    Advanced Member

  • Members
  • Others: BackupBuddy, Toolkit
  • PipPipPip
  • 160 posts

Posted 20 May 2011 - 12:54 PM

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;
}

#9 sridhar

sridhar

    Advanced Member

  • Members
  • Others: BackupBuddy
  • 22,262 posts

Posted 20 May 2011 - 12:58 PM

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.

#10 brite

brite

    Advanced Member

  • Members
  • Others: BackupBuddy, Toolkit
  • PipPipPip
  • 160 posts

Posted 20 May 2011 - 06:05 PM

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