Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • March 11, 2015 at 5:17 pm #409970
    simonac

    This topic was closed, and i have an additional question.

    https://kriesi.at/support/topic/change-tab-style-font-color-body-color-border-color/

    How can i change the font color when havoering the active tab?

    Regards Simon

    March 11, 2015 at 5:47 pm #409997
    simonac

    …also the active tab’s font is bold. I do not want this. How to manage this?

    i use this code now

    .js_active .tab { font-size: 15px; }
.js_active .active_tab { font-size: 15px; }

    this is what happens
    d

    March 12, 2015 at 5:40 am #410298
    Rikard

    Hey!

    It looks like you almost fixed it, correct?

    Please try this to fix the colour issue when hovering on an active tab: 

    .tab.active_tab:hover{
color:#09aace !important;
}

    Regards,
    Rikard

    March 12, 2015 at 11:16 am #410392
    simonac
    This reply has been marked as private.
    March 13, 2015 at 7:07 pm #411224
    Andy

    Hey!

    your font is not showing bold for me:

    but you could change it with this:

    div .main_color .tabcontainer .active_tab_content, div .main_color .tabcontainer .active_tab {
font-style: normal;
}

    instead of “normal” use “bold”, to see the difference.

    For your tab titles use this:

    @media only screen and (min-width: 767px) { 
.tab_titles {
width: 124.8px;
}}

    Cheers!
    Andy

    • This reply was modified 9 years, 9 months ago by Andy.
    March 14, 2015 at 12:00 pm #411486
    simonac
    This reply has been marked as private.
    March 16, 2015 at 3:56 am #411820
    Rikard

    Hey Simon!

    Please try the following CSS in your Quick CSS:

    .js_active .active_tab {
  font-weight: normal !important;
}

    Best regards,
    Rikard

    March 16, 2015 at 10:14 am #411988
    simonac

    Thanks Rikard, the code worked!

    But the problem with the other tab element is still there.

    The boxes of the tab headings do not reach over the complete width.

    March 16, 2015 at 10:15 am #411989
    simonac
    This reply has been marked as private.
    March 17, 2015 at 4:59 am #412755
    Ismael

    Hi!

    The tabs looks the same. Can you please provide a screenshot of the issue?

    EDITED: I can see the issue now. Please replace the code with this:

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

    Cheers!
    Ismael

    March 17, 2015 at 10:33 am #412828
    simonac
    This reply has been marked as private.
    March 18, 2015 at 4:47 am #413355
    Rikard

    Hi Simon!

    I think it will be difficult to make the tabs span 100% of the width all the time if you are going to have different amounts of tabs. Also, if you add more than 5 tabs the 6th one will display on a new line which probably won’t look very good.

    Regards,
    Rikard

    March 18, 2015 at 9:38 am #413481
    simonac

    So i could add a custom css class to each tab element. Would it then be possible? ( The second tab element has the class name “tabref” now.)

    Regards, Simon

    March 19, 2015 at 4:33 am #414141
    Rikard

    Hi Simon!

    Yes, if you have a unique class or id for each tab element it’s possible.

    Regards,
    Rikard

    March 19, 2015 at 10:28 am #414252
    simonac

    …could you please tell me how the code has to look like.

    the custom css name is “tabref”

    I tried this but it did not work

     @media only screen and (min-width: 767px) {
#tabref .top_tab .tab {
  padding: 12px 0 14px 0 !important;
  width: 25.1%;
  font-size: 14px;
  text-align: center;
  min-height: 50px;
}}
    March 20, 2015 at 4:45 am #415009
    Rikard

    Hi!

    Just using your unique ID should be enough, since it’s unique:

     @media only screen and (min-width: 767px) {
#tabref {
  padding: 12px 0 14px 0 !important;
  width: 25.1%;
  font-size: 14px;
  text-align: center;
  min-height: 50px;
}}

    If you want to be sure your CSS is targeting correctly, please try some very simple query like the following: 

    #tabref {
border:1px solid red !important;
}

    Regards,
    Rikard

    March 20, 2015 at 9:45 am #415153
    simonac
    This reply has been marked as private.
    March 21, 2015 at 5:16 am #415631
    Rikard

    Hi!

    I see that you have added a class instead of ID, this should do the trick:

    .tabref {
border:1px solid red !important;
}

    I just replaced #tabref with .tabref

    Regards,
    Rikard

    • This reply was modified 9 years, 9 months ago by Rikard.
    March 21, 2015 at 10:38 am #415694
    simonac

    Well, if i use this code to adjust the headline boxes of the tab element, it changes the complete width of the whole box.

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

    Isn’ the .top_tab missing somewhere? I tried to set it before and after the .tabref but withour success.

    Regards, Simon

    March 23, 2015 at 5:26 am #416198
    Rikard

    Hey!

    Looks like the class .tabref is applied to a surrounding div only, if you want to target items on a deeper lever in the DOM you would have to do something like this to target the tabs:

    .tabref .tab{
/* your code here */
}

    I think in your case you could benefit from hiring a freelance developer to help you out with this, or to learn CSS programming. The scope of this forum is limited to small Avia theme customisations and general problems with the same themes.

    Cheers!
    Rikard

    March 23, 2015 at 10:09 am #416282
    simonac

    THanks Rikard,

    i tired this code:

    .tabref  .tab {
  padding: 12px 0 14px 0 !important;
  width: 25.1%;
  font-size: 14px;
  text-align: center;
  min-height: 50px;
}

    and also this

    .tabref  .top_tab .tab {
  padding: 12px 0 14px 0 !important;
  width: 25.1%;
  font-size: 14px;
  text-align: center;
  min-height: 50px;
}

    both of them did not work. Nothing changes. I do not understand why this isn’t working…

    March 25, 2015 at 7:20 am #417570
    Ismael

    Hi!

    There’s a double space between tabref and tab. It should be:

    .tabref .tab {
  padding: 12px 0 14px 0 !important;
  width: 25.1%;
  font-size: 14px;
  text-align: center;
  min-height: 50px;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • You must be logged in to reply to this topic.