Change Tab design

3 posts from 2 voices

• Started 2 years ago by theprodigal
• Latest reply from theprodigal
• This topic is not a support question

Tags:

• tabs

1. 

   theprodigal
   Member

   Is there a way I can change the design of my Tabs in Avisio? I need to change the line color and the shading. Which part of style.css controls the behavior of Tabs.

   For example see the tabs (From the Bishop, From the Superintendent) in my front page: http://philmethodist.com

   Thanks!

   Posted 2 years ago #
2. 

   James Morrison
   Former Team Member

   Hey,

   Using Firebug, I can see that this code in style1.css (line 257) controls the active tabs:

   .frontpagetabs .transformed_tab.fpactive_tab, .more-link {
       background: url("../images/skin1/button.png") repeat-x scroll -37px -105px #FFFFFF;
       border: 1px solid #CCCCCC;
       color: #777777;
       text-shadow: 1px 1px 1px #FFFFFF;
   }

   and this code in style1.css (line 251) controls the inactive tabs:

   .frontpagetabs .transformed_tab {
       background: none repeat scroll 0 0 #F8F8F8;
       border: 1px solid #EEEEEE;
       color: #888888;
   }

   along with this default code in style.css (line 685):

   .frontpagetabs .transformed_tab, .more-link {
       border-radius: 15px 15px 15px 15px;
       cursor: pointer;
       display: block;
       float: left;
       font-size: 12px;
       line-height: 26px;
       margin: 0 5px 10px 0;
       padding: 0 13px;
       position: relative;
       top: -20px;
   }

   Hope this helps!

   James

   Posted 2 years ago #
3. 

   theprodigal
   Member

   Thank you James! This is very helpful. This should help me modify the tabs. I will install firebug as well.

   Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.