Tabs' background color and border.

Home Forums Jevelin Theme Tabs' background color and border.

Home Forums Jevelin Theme Tabs' background color and border.

This topic contains 9 replies, has 2 voices, and was last updated by  Shufflehound Support 1 day, 22 hours ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • marcos
    Participant

    Hi there,

     

    I don’t know how to set a border for the tabs element (just the top part though, as you can see in the screenshot attached)

     

    Also the non-selected element, has a background colour that I’d need to change.

     

     

    Thanks!

    Attachments:
    You must be logged in to view attached files.

    Hi @marcos,

     

    I hope you are well today and thank you for your question.

     

    You can try achieving this using Yellow Pencil editor as described in the below page.

     

    https://support.shufflehound.com/how-to-change-almost-any-element/

     

    Best regards,
    Shufflehound team

    I tried but I couldnt do ii with Yellow Pencil. Actually I dont like that tool. Overrides the code and become a mess sometimes..

     

    Could you please tell me how to do it without it?

     

     

    Thanks

    Could you please share me the page URL from your site where it is displaying so that I can help you to achieve it?

    https://flowabroad.com/

     

    The mentioned element is at the bottom of the page,

     

    thanks again!

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .wpb-js-composer .vc_tta.vc_general .vc_tta-tab {
        border: 1px solid #000;
    }
    
    .vc_tta-tabs-list .vc_tta-tab a {
        top: 0;
    }
    
    .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab>a:focus,
    .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab>a:hover {
        background-color: #aee4ea;
    }

    Hi, thanks for your answer! the fist part worked perfectly, however I still cannot change the background color for the hover element.

    Also, If you take a closer look, the background doesnt cover the entire element..

     

    https://prnt.sc/mzf4y7

     

     

    Thanks!

    Just try changing above shared CSS code as following.

    .wpb-js-composer .vc_tta.vc_general .vc_tta-tab {
        border: 1px solid #000;
    }
    
    .vc_tta-tabs-list .vc_tta-tab a {
        top: 0 !important;
    }
    
    .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab>a:focus,
    .wpb-js-composer .vc_tta-color-white.vc_tta-style-flat .vc_tta-tab>a:hover {
        background-color: #aee4ea !important;
    }

     

    Could you tell me how to hide the bread-cramps from here?

     

    https://flowabroad.com/blog/

     

     

    thanks

    To help us keep support thread separates could you please create a new thread for each of your other questions instead of asking them in your single thread as it makes the thread messy and hard to read.

     

    If you want to you can also add reference of this thread in your newly created thread.

     

    We would be more than happy to help you with your new thread.

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