Easy Bootstrap Shortcode change css

Sparkling
1

Hey

I used Easy Bootstrap Shortcode for creating tabs.

I want to change colours of the tabs. Where do I find the css code to change the colours?

Thanks

2

Hello there,

I hope you are doing well today.

In order to change the color of the tabs, you will have to add some new CSS code.
Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

3

Hey

page with tabs

I like to change colour of:

  • tabscolour, textcolour and hovercolours
  • change colour or remove the grey line under the tabs and between the rows of the table
  • change hover colour when how over the rows

thanks

4

I already found how to change the tab colours except for hover.

Tabs and rows are white/light grey when hover them. Where can I change that? What is the css code I have to add for changing that. I also want to remove the grey line between the rows.

Any help would be much appreciated!

5

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

#page .tab-content td {
    border-top: 0;
}

#page .tab-content tr:hover {
    background-color: #a4de87;
}

You can change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

6

Great! I’m almost there.

When hover the tabs, they are grey. Can you give me the css code for changing the background and text colour for tabs when hover?

Thanks a lot!

7

Sure i can but when i tried to access your shared page again to develop custom CSS code it is only displaying the message “Nog eventjes geduld…”

Please make sure it is accessible so that i can help you.

8

Hey

It’s accessable again.

Thanks for the help!

9

Use below custom CSS code to change its color.

#page .nav-tabs>li>a:hover {
    background-color: #C8F04F;
    color: #fff;
    border-color: #C8F04F;
}
10

Super!!!

11

You are most welcome here :slight_smile: