JQuery Tabs - Local Style Override - CSS

(7 posts) (2 voices)

1. 

   nonprofitpartners
   Member

   I would like to custom style the framed tabs on a local basis but not change the master CSS. I copied the /* Framed Tabs and added a new /* Framed Tabs - Blue in the CSS. See Below. However when I apply the [tabs_framed-blu] it does not work correctly. Is my logic all wrong in just copying and pasting a new CSS section and changing the code name ?

   /* Framed Tabs
   -------------------------------------------------------------- */
   .tabs_framed{padding:0;margin:0;list-style-type:none;clear:left;height:25px;border-bottom:1px solid #E5E5E5;}
   .tabs_framed a{border:1px solid #E5E5E5;background:#fafafa;padding:7px 30px;margin-right:2px;color:#ccc;}
   .tabs_framed a:hover{text-decoration:none;background:#fff;color:#999;}
   .tabs_framed a.current{cursor:default;border-bottom:1px solid #fff;color:#333;background:#fff;}
   .tabs_framed_content{display:none;background-color:#fff;border:1px solid #E5E5E5;border-width:0 1px 1px 1px;padding:15px 30px;}
   .tabs_framed_container{margin-bottom:40px;}

   /* Framed Blue Tabs JOE JOHNSON Added
   -------------------------------------------------------------- */
   .tabs_framed-blu{padding:0;margin:0;list-style-type:none;clear:left;height:25px;border-bottom:1px solid #003366;}
   .tabs_framed-blu a{border:1px solid #003366;background:#fafafa;padding:7px 30px;margin-right:2px;color:#ccc;}
   .tabs_framed-blu a:hover{text-decoration:none;background:#ff3300;color:#999;}
   .tabs_framed-blu a.current{cursor:default;border-bottom:1px solid #ff3300;color:#333;background:#fff;}
   .tabs_framed_content-blu{display:none;background-color:#fff;border:1px solid #003366;border-width:0 1px 1px 1px;padding:15px 30px;}
   .tabs_framed_container-blu{margin-bottom:40px;}

   Sincerely,
   Joe Johnson

   Posted 7 months ago #
2. 

   Elliott
   Support

   Hello nonprofitpartners,

   If your still using the shortcode then that wouldn't work. Since you want to make it so each one is different you would need to output the HTML like so,

   <div class="tabs_framed_container">
   <ul class="tabs_framed">
   <li><a href="#" class="current">tab1</a></li>
   <li><a href="#">tab2</a></li>
   <li><a href="#">tab3</a></li>
   </ul>
   <div class="tabs_framed_content" style="display: block;">tab 1</div>
   <div class="tabs_framed_content" style="display: none;">tab 2</div>
   <div class="tabs_framed_content" style="display: none;">tab 3</div>
   </div>

   Instead of using the shortcode. You could then change the classes to tabs_framed-blue, etc etc.

   Posted 7 months ago #
3. 

   nonprofitpartners
   Member

   Not each tab being different in the same display set. I would like to override the "Modular" tab CCS style, so locally I could have more control over the background color, the tab text color, the tab width, padding etc....

   Your suggestion looks like trying to make each tab different within a set.

   Does this make any sense ?
   Sincerely,
   Joe JOhnosn

   Posted 7 months ago #
4. 

   Elliott
   Support

   I'm not sure I understand nonprofitpartners. If you just want to change the default CSS for the framed tabs then you would edit the Framed Tabs section in the style.css file.

   Posted 7 months ago #
5. 

   nonprofitpartners
   Member

   We are using this site for educational purposes for nonprofits. Different pages cover different topics. I would like to be able to use JQuery Tabs on these different pages. But on some examples (pages) I would like the framed tabs to be a blue framed tab color and another page I may want the framed tab color to be orange instead of the standard CSS which is a clear Tab background.

   Does this help ?

   Sincerely,

   Posted 7 months ago #
6. 

   Elliott
   Support

   In that case what I suggested in my previous post should be working for you. Go ahead and try it out.

   I forgot to mention though that you'll need to embed the tabs script,

   <div class="tabs_framed_container">
   <ul class="tabs_framed">
   <li><a href="#" class="current">tab1</a></li>
   <li><a href="#" style = 'background: red;'>tab2</a></li>
   <li><a href="#">tab3</a></li>
   </ul>
   <div class="tabs_framed_content" style="display: block;">tab 1</div>
   <div class="tabs_framed_content" style="display: none; background: red;">tab 2</div>
   <div class="tabs_framed_content" style="display: none;">tab 3</div>
   </div>
   <script type = 'text/javascript' src = 'http://localhost/wp-content/themes/awake/lib/scripts/tabs.min.js'></script>

   Just replace http://localhost/ with your domain name. I also put some inline styling on the HTML so you can see how to style it.

   Posted 7 months ago #
7. 

   nonprofitpartners
   Member

   Thank you, let me try and work with these.

   Sincerely,

   Posted 7 months ago #

RSS feed for this topic

Reply

You must log in to post.