-
AuthorPosts
-
January 26, 2016 at 4:27 pm #572196
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 #572525Hey 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!
ElliottJanuary 27, 2016 at 2:02 pm #572869Hi 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 #573053Hey!
Please change your second code to following one
.contact-tabs .js_active .top_tab .tab { padding: 12px 70px 0px 70px; }
Cheers!
YigitJanuary 27, 2016 at 6:02 pm #573112Hi 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, 11 months ago by cordellbrewer. Reason: Update
January 28, 2016 at 1:47 pm #573715Hey!
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,
VinayJanuary 28, 2016 at 3:29 pm #573772Hi Vinay,
Perfect.
Thanks so much :)
January 29, 2016 at 1:15 am #574216You 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 -
AuthorPosts
- You must be logged in to reply to this topic.