Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • February 18, 2019 at 3:15 pm #1068389
    osukaru

    Hello,
    please help :)
    I would like individual tabs (currently all in yellow) to each in a different color

    https://tinyurl.com/yatng982

    and customize the home page so that the yellow part occupies 20% from the bottom when the page is opened

    February 18, 2019 at 6:10 pm #1068512
    Jordan Shannon

    Hey osukaru,

    Please provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    February 19, 2019 at 11:50 am #1068883
    osukaru

    there is a link? ;)
    https://tinyurl.com/yatng982

    February 19, 2019 at 12:54 pm #1068922
    Jordan Shannon

    Hi,

    Add this to quick css and adjust the colors to whatever you need:

    #av-tab-section-1 .av-tab-section-tab-title-container{
margin-top:-20px!important;
}
#av-tab-section-1 .av-tab-section-tab-title-container a:first-child{
height:110px!important;
background:yellow!important;
}
#av-tab-section-1 .av-tab-section-tab-title-container a:nth-child(2){
height:110px!important;
background:green!important;
}
#av-tab-section-1 .av-tab-section-tab-title-container a:nth-child(3){
height:110px!important;
background:blue!important;
}
#av-tab-section-1 .av-tab-section-tab-title-container a:last-child{
height:110px!important;
background:red!important;
}

    Best regards,
    Jordan Shannon

    February 19, 2019 at 2:05 pm #1068977
    osukaru

    it works great, that’s what I meant.
    could I ask for help with mouseover?

    Currently, when you hover over the picture is correct.
    after hitting the button (you can not see the picture because it is still white)
    How to make the effect on the all area of the button?

    Additionally, the active tab has a white background.

    Thank you very much!

    February 21, 2019 at 7:51 pm #1070079
    Jordan Shannon

    Hi,

    Apologies for the delay. So you want to change the text color on hover? So the text is a color, but the background is white?

    Best regards,
    Jordan Shannon

    February 26, 2019 at 11:13 am #1071706
    osukaru

    Hi,
    when i hover image on inactive tab all works properly.
    When i hover area outside the image on inactive tab (the image is white, it should be colored)
    Active tab works properly on hover, but when active the image is not white, it should be white.

    Thank you for support.

    February 27, 2019 at 9:21 pm #1072387
    Jordan Shannon

    Hi,

    Apologies for having trouble understanding. When the tab is selected/active the background should be white and the text colored correct?

    Best regards,
    Jordan Shannon

    March 4, 2019 at 11:55 am #1074311
    osukaru

    Yes :)

    March 7, 2019 at 5:07 am #1075739
    Jordan Shannon

    Hi,

    Resize the text images to the same size as the tabs. 240.5×110. That way, when you hover the tab you are hovering right on the image.

    Best regards,
    Jordan Shannon

    March 8, 2019 at 5:09 pm #1076420
    osukaru

    I tried, but it did not work properly.

    I think… I found my problem.
    the selected area is a problem.

    When hover this area:

    .av-active-tab-title .av-tab-section-image:hover {
    filter: none;
}

    When hover outside this area (but image still have filter “filter: brightness(0) invert(1);”):

    #av-tab-section-1 .av-tab-section-tab-title-container a:first-child:hover {
    background: #fff !important;
}

    How remove filter when hover outside this area?

    March 11, 2019 at 10:33 pm #1077522
    Jordan Shannon

    Hi,

    Please provide admin info in the private area so we can log in and look into this issue further.

    Best regards,
    Jordan Shannon

    March 14, 2019 at 2:58 pm #1078715
    osukaru
    This reply has been marked as private.
    March 21, 2019 at 3:16 am #1081128
    Vinay

    Hi,

    The credentials you provided are incorrect. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    CSS Snippet:

    
/* CSS - */

#av-tab-section-1 .av-tab-section-tab-title-container a:first-child:hover span{
filter: grayscale(100%);
}
#av-tab-section-1 .av-tab-section-tab-title-container a:nth-child(2):hover span{
filter: grayscale(100%);
}
#av-tab-section-1 .av-tab-section-tab-title-container a:nth-child(3):hover span{
filter: grayscale(100%);
}
#av-tab-section-1 .av-tab-section-tab-title-container a:last-child:hover span{
filter: grayscale(100%);
}

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Best regards,
    Vinay

    March 21, 2019 at 7:27 pm #1081537
    osukaru

    As always, help at the highest level.
    Thank you very much :)

    March 21, 2019 at 10:45 pm #1081590
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help please let us know here the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘individual tabs in a different color’ is closed to new replies.