Tab questions

Support
#1

hi,

I have several questions concerning the TABS section of this page:
http://nimuefichtenbauer.com/sos-breakup-program/

  1. How can I reduce the gap between the first and second headline?

  2. How can I make the Tab Titles larger and in bold?

  3. How can I use a pic instead of a font for the Tab titles?

  4. How can I include an image in the tabs-text so that the text flows around it?

thank you!
nimue

#2

Hi Nimue,

1. Please the class mtn to the second custom headline to remove the margin on top of it. You can find more info about the css classes available to use here.

2. Please add this in the custom CSS:

.x-nav-tabs.top>li a {
    font-size: 1.3em;
    font-weight: 700;
}

3. This would require more custom code where you should target each tab through CSS add adding the image as the background image for the tab. It should be something like this:

#x-section-6 .x-nav li:nth-child(1) a {
    background-image: url(URL_OF_THE_IMAGE);
}

Note that the code above will only target the first that. You will have to create other CSS declarations for the other tabs.You can find more information here as well as this link

4. This would as well require a more specific custom CSS as well. Please check this link on how you could do that.

Hope these help.

#3

Thank you Jade!!!

the first and second worked really well for me!

What kind of CSS would you add if I want to change the font color, background color and background hover color to get a look like this?

#4

Hi,

To achieve that, you can add the code below in Custom CSS

body .x-nav-tabs>li>a {
    color: #fff;
    background-color: #000;
}

body .x-nav-tabs>.active>a, 
body .x-nav-tabs>.active>a:hover {
    color: #fff !important;
    background-color: #20bec6;
}

Hope that helps.

#5

Thank You!

#6

You are most welcome!