Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #191149

    hello,
    how can we change the colors of the tabs that we drag from content element?
    thanks

    indiatravelz

    #191296

    Hi Indiatravelz!

    You can find the css style of the Tab element on css > shortcodes.css:

    #top .tabcontainer{
    background: transparent;
    }
    
    .tabcontainer{
    margin: 30px 0;
    position: relative;
    width:100%;
    clear: both;
    overflow: hidden;
    background: transparent;
    }
    
    .tab_titles{
    position: relative;
    width:100%;
    clear: both;
    float:left;
    z-index: 5;
    }
    
    .widget .tabcontainer{
    margin-top:0px;
    }
    
    .js_active .tab_content{
    visibility: hidden;
    clear: both;
    padding: 10px 19px;
    overflow:auto;
    position: absolute;
    top:0;
    z-index: 0;
    left:120%;
    width:100%;
    }
    
    .js_active .tab{
    cursor:pointer;
    margin:0 -1px 0 0;
    display: block;
    float: left;
    z-index: 2;
    position: relative;
    padding:12px 16px;
    top:1px;
    font-size: 11px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-style: solid;
    border-width:1px;
    }
    
    .js_active .top_tab .tab{
    border-bottom: none;
    padding:12px 16px 14px 16px;
    }
    
    .js_active .active_tab{
    z-index: 4;
    position: relative;
    font-weight: bold;
    }
    
    .js_active .tab_titles .tab:first-child{
    border-top-left-radius:  2px;
    }
    
    .js_active .tab_titles .tab:last-child{
    border-top-right-radius: 2px;
    }
    
    .js_active .active_tab_content{
    display: block;
    visibility: visible;
    z-index: 3;
    position: relative;
    overflow:auto;
    border-style: solid;
    border-width:1px;
    border-radius: 2px;
    left:0;
    width:auto;
    }
    
    .tabcontainer .tab_icon{
    margin-right: 7px;
    font-size: 13px;
    }
    
    .tab_inner_content{
    margin: 11px 0;
    left:-200%;
    position: relative;
    }
    
    .active_tab_content .tab_inner_content{
    left:0;
    position: relative;
    }

    Can you please post a screenshot of what you’re trying to do?

    Best regards,
    Ismael

    #191425

    Hi,
    thanks for your reply.
    I didn’t understand where exactly should I add the codes you have just sent me
    Do you mean:
    enfold-> styling-> quick css?
    or is there somewhere else and how do i get there

    please see sample on the bottom of the following page:
    http://indiatravelz.com/customized-guide-books/

    also we would like to make the tabs bigger regardless to the length of the text.

    thank you in advance
    indiatravelz

    #191517

    Hi!

    Please add following code to Quick CSS in Enfold theme options

    div .main_color .tabcontainer .active_tab_content { background-color: #cccc63; color: white; }
    .js_active .top_tab .tab { padding: 30px 50px 32px 50px; }

    If this is not what you meant, please post a screenshot

    Best regards,
    Yigit

    #220878

    Hi, I see the codes above

    I would like my ACTIVE tab to be light grey AND the ACTIVE tab CONTENT the same color

    What code to put in CSS?

    http://bevlogenverf.nl/woon-interieur-design/#tab-id-2

    #220879

    I would also like to change the size of the font inside the tab

    #221134

    Hi!

    You can use this on Quick CSS:

    .js_active .active_tab_content {
    background: gray;
    }
    
    .js_active .active_tab {
    background: gray;
    font-size: 15px;
    }

    Change the css values.

    Regards,
    Ismael

    #221189

    thanks that worked great

    and if i want to change the font size and color of the NON active tabs too?

    #221586

    Hi!

    Use

    
    .js_active .tab_content{
    background: gray;
    }
    
    .js_active .tab{
    background: gray;
    font-size: 15px;
    }
    

    Best regards,
    Peter

    #221591

    Hi, that changes the NON active tabs too?

    #221795

    Hey!

    Please try flushing your browsers cache. Peter’s code seems to be working fine on my end http://i.imgur.com/HoaA89f.jpg

    Cheers!
    Yigit

    #221810

    Hi. I think my question was not clear enough

    Now the active tab is a big font and also bold

    the other 2 not active tabs are small

    i want all the fonts in all tabs to look the same

    only the background color of the active tab different

    #221814

    Hey!

    Please add following code to adjust active tabs font size

    .js_active .active_tab { font-size: 11px; }

    and following for non active titles

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

    Cheers!
    Yigit

    #242932

    Hallo

    I like to change the Style from the tabs as follow:

    1. The Fonts from the Tab titles should be 15 px in Main Content font color (#666666) and bold
    2. The Background from the active tab title should be in the primary color (#a81010) and the fonts color should change in white (#ffffff)
    3. The Background from active tab should be white (#ffffff), the Fonts in main content font color (#666666)

    Is this possible and please can you help me.

    Best regards,

    Dieter

    • This reply was modified 6 years, 11 months ago by  fotos4friends.
    #244228

    Hi!

    Each of those is already listed within the css above. If you need further assistance in customizing the individual elements we recommend looking into a freelance developer from somewhere like Microlancer, Codeable or http://kriesi.at/contact/customization

    Individual customization like the above is outside of what we cover through support but we will often provide it as long as our current queue is low. For right now its unfortunately quite high so if you need more detailed customization a freelance developer is the best route to go.

    Regards,
    Devin

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘changing the colors of tabs in content element’ is closed to new replies.