Docs

[ggoudey]

Hello

I have found some CSS you guys provided me in the past related to the Tabs element. This works well as you can see on my home page.

I have a further request.

How do I do I change the color of the content part of the tabs? Also how do I adjust the padding within the content area so that I can include more content in a smaller area?

Thank you in advance… Andrew

http://www.peacelocalfood.info/

[Jade]

Hi Andrew,

Please add this code in the customizer:

.tg-grid-slider {
    background-color: #fff;
}

.x-section .x-container.width {
    width: 94%;
}

Hope this helps.

[ggoudey]

Is this for the tab element ? It looks like something for the grid.

[Rue Nel]

Hello There,

Thanks for updating in! The code should have worked with your current homepage settings. Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[ggoudey]

It is mostly the padding/margin around the ‘search’ shortcode in the content area. It would be nice if I could control this so that it did not take up so much room in a small space.

[Rad]

Hi there,

Please add this CSS as well with your preferred margin.

.x-search-shortcode {
margin-bottom: 5px;
}

Cheers!

[ggoudey]

Thank you for the code to adjust the search element. Sorry for the confusion in the early part of the post.

What I was looking for was more control over how the tabs element reacted to content. The goal was to have the dimensions of the tabs areas to remain the same, and I would adjust content to fit within these constraints. Having the ability to have a tab area size locked in, and to be able to adjust padding, font sizes, colors etc., would be excellent. Maybe this is to much to ask, but I would be grateful.

Anticipating that this might be to much to ask, I started working on an alternative solution. As you can currently see I have a five tab element at the top of the page with a grid in the first tab. This works well and achieves my goal. I have a grid in the second tab… but it won’t display. I’ve gone over everything numerous times but can’t get it to work. At times I get the feeling that the fast and furious edits I am making are getting choked at some bottleneck in the system. I’ve even had the settings of a configured and saved grid change on its own and I would have to reset and resave the settings.

http://www.peacelocalfood.info

[Lely]

Hi There,

Please try adding this custom CSS on Appearance > Customize > Custom > Edit Global CSS:

.x-tab-content>.x-tab-pane:not(.active) {
height: 0 !important;
overflow: hidden;
padding: 0;
display: block;
}

Hope this helps.

[ggoudey]

Thank you. I will give it a try.

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts