Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 6, 2015 at 7:22 pm #407233
    simonac

    Hi,

    i need to change the color (and size) of the font in tabs – active and not active. The same for the body – here also when hovered for not active tabs.

    Also the tabs should reach to the end of the tab box no matter how long the text is.

    Thanks Simon

    March 7, 2015 at 6:40 pm #407528
    Andy

    Hi simonac!

    Use this for border color:

    .js_active .tab {
border-color: blue;
}
.js_active .active_tab_content {
border-color: blue;
}

    Use this for background color of inactive tabs and white font color:

    .main_color .sidebar_tab, .main_color .tabcontainer .tab {
background: blue;
color: white;
}

    Use this for blue font color of active tab:

    .main_color .template-archives .tabcontainer a, #top .main_color .tabcontainer .tab:hover, #top .main_color .tabcontainer .tab.active_tab {
color: blue;
}

    Adjust color as needed.

    Regards,
    Andy

    March 8, 2015 at 3:57 pm #407674
    simonac

    Hi Andy,

    thanks for your answer!

    Two things:
    1. When hovering a non active tab the background color should change and not the font color.
    2. Is it possible that the boxes of the headings reach over the complete weidth of the tab container?

    Thanks a lot!!

    Simon

    March 9, 2015 at 4:05 pm #408202
    Yigit

    Hi!

    1- Please add following code to Quick CSS 

    .tabcontainer .tab:hover {
  background-color: orange;
  color: white!important;
}

    2- Can you please post a screenshot and show the changes you would like to make? Not sure if i understood you clearly

    Regards,
    Yigit

    March 9, 2015 at 4:57 pm #408249
    simonac

    Hi Yigit,

    the code worked thanks!

    nr. 2 see screenshot:

    1

    Regards

    March 9, 2015 at 5:03 pm #408255
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    div .main_color .tabcontainer .active_tab {
  color: #212121!important;
}
@media only screen and (min-width: 1440px) {
.js_active .top_tab .tab {
  padding: 12px 27px 14px 27px;
}}

    Cheers!
    Yigit

    March 9, 2015 at 8:00 pm #408405
    simonac

    The code changes the active tab’s font but nothing else.
    If i try without the first part also nothing changes.If i play with min-width it gets to long and flows over in a second line.

    March 9, 2015 at 9:24 pm #408469
    Josue

    Hi!

    Try with this:

    @media only screen and (min-width: 767px) {
    .top_tab .tab {
        padding: 12px 0 14px 0 !important;
        width: 20.07%;
        font-size: 14px;
        text-align: center;
    }
}

    Cheers!
    Josue

    March 10, 2015 at 12:01 pm #408751
    simonac

    You made it Josue!!!

    Thanks!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘change tab style – font color – body color – border color’ is closed to new replies.