Tagged: , , , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 26, 2016 at 4:27 pm #572196
    cordellbrewer

    Hi,

    I have made a child theme of Enfold and have used the ALB custom class PHP snippet to add a custom class to any ALB element.
    I have used the Tabs element and given it a custom class (contact-tabs). I have used the Tabs element on other areas of the site and don’t want to affect those. I am using top tabs and have icons in the tab title area. Here is the CSS I have used:

    /* To center the tabs on the Contact page when additional padding is added*/
    .contact-tabs .tab_titles {
    position: relative;
    width: 1052px !important;
    clear: both;
    float: none;
    margin: 0 auto;
    }

    /* To add some space between the icons in the tabs on the Contact page */
    .contact-tabs .js_active .top_tab .tab {
    padding: 12px 70px 0px 70px;
    }

    The second bit of CSS works (.js_active .top_tab .tab) if I target that class only without prefixing it with my custom class.

    So please could you help me out with getting it to work using my custom class which I have added.

    Thank you.

    January 27, 2016 at 3:19 am #572525
    Elliott

    Hey Cordell!

    This would not work?

    .contact-tabs .tab {  }

    Can you take a screenshot and highlight exactly what your trying to do so we can get a better idea?

    Cheers!
    Elliott

    January 27, 2016 at 2:02 pm #572869
    cordellbrewer

    Hi Elliot,

    That bit of CSS you provided does not work.

    I have provided a link to 2 screenshots:
    1. is what I currently have.
    2. is what I want to achieve.

    I also provided a link to the page in my previous post.

    So essentially what I want is 5 icons used as tab titles, centered on the page and spaced apart.

    This CSS achieves it:

    .contact-tabs .tab_titles {
    position: relative;
    width: 1315px !important;
    clear: both;
    float: none;
    margin: 0 auto;
    }

    .js_active .top_tab .tab {
    padding: 12px 70px 0px 70px;
    }

    But the second bit also affects other Tab elements I have used elsewhere on the site. I only want it to affect the one used on this page.

    Thank you.

    January 27, 2016 at 5:07 pm #573053
    Yigit

    Hey!

    Please change your second code to following one 

    .contact-tabs .js_active .top_tab .tab {
padding: 12px 70px 0px 70px;
}

    Cheers!
    Yigit

    January 27, 2016 at 6:02 pm #573112
    cordellbrewer

    Hi Yigit,

    It doesn’t work. That is the first bit of CSS that I tried from my original post.

    Edit: I have added the padding inline in the mean time. I have to continue with the project. I have duplicated that page so you can still take a look. The link is provided.

    Thx.

    • This reply was modified 8 years, 10 months ago by cordellbrewer. Reason: Update
    January 28, 2016 at 1:47 pm #573715
    Vinay

    Hey!

    To align the tab icons in equal space please add the below code to the Quick CSS

    
.contact-tabs .tab_titles {
    display: flex;
    justify-content: space-between;
}

    If you still have issues please create admin access and share it in private content

    Regards,
    Vinay

    January 28, 2016 at 3:29 pm #573772
    cordellbrewer

    Hi Vinay,

    Perfect.

    Thanks so much :)

    January 29, 2016 at 1:15 am #574216
    Vinay

    You are welcome Sir,

    In future if you have any questions please feel free to get in touch with us.

    Thank you for using enfold.

    Cheers!
    Vinay

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