Docs

[redsnapdragons]

Hello

I want my tabs element on this page

http://www.sandbox.helpsocial.com/web-and-mobile-apps/

To look like the code snippet box on Stripe that’s underneath the “Developer’s first” headline.

https://stripe.com/

How can I change the background add numbers, and target the spacing between the tabbed elements?

[Rupok]

Hi there,

Thanks for writing in! I can help you to get started. You can add this under Custom > CSS in the Customizer.

.x-nav-tabs.right {
    margin-left: 30px;
}
.x-nav-tabs > li > a {
	background-color: transparent;
	box-shadow: none;
}
.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
	box-shadow: none;
}
.x-nav-tabs {
	border: none;
	box-shadow: none;
}
.x-nav-tabs > li {
	border: none !important;
}

Hope this helps.

Cheers!

[Christopher]

Hi there,

Please use code shortcode for tabs content, please see : http://demo.theme.co/integrity-1/shortcodes/code/

Please add following code in Customize -> Custom -> Global CSS :

ul.x-nav.x-nav-tabs.right {
    margin-left: 27px;
}

In regards with adding line number, regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Hope it helps.

[redsnapdragons]

How do I change the padding around the main content? I want the words closer to the edge of the big box. How would I remove the shadows around the box?

Also, how do I change the color of the tab if it is active? How would I target the color of the text on the tab?

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

/* main content padding */
.x-tab-content .x-tab-pane {
    padding: 15px;
}

/* remove main content border */
.x-tab-content  {
    border:0;
}

/* inactive color */
.x-nav-tabs > li > a {
    background-color: transparent;
    color: #d8d8d8;
}

/* active tab and hover color */
.x-nav-tabs>.active>a, 
.x-nav-tabs>.active>a:hover {
     background-color: #fff;
     color: #272727;
}

Hope that helps.

[redsnapdragons]

Yes it does!

How can I remove the border of the tabs? I just want to have the active tab change color and the rest have no border between and around them.

[Rue Nel]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you for understanding.

[redsnapdragons]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

.x-nav-tabs.left>.x-nav-tabs-item, .x-nav-tabs.right>.x-nav-tabs-item,.x-nav-tabs.left, .x-nav-tabs.right {

    border-bottom: none;
}
.x-nav-tabs.right>li a {
    border-left: none;
}

.x-nav-tabs {
    border: none;
}
li.x-nav-tabs-item.active a {
    background-color: #f8f8f8 !important;
}

Hope that helps.

[Author]

Posts