How to format Form Tabs widget with different colors and shape?

My form tabs widget is cutting across the frame edge into the background colour.. cant find out how to move it so it doesnt do this

Please advise

thanks

Russ

I found a code to change the tab shape, which has resolved my issue but need advice on how to change the background colour of the tabs, how can i do this and where?

 ps how do i change the font within the tab also.

thanks

Russ

I am glad to hear that you were able to resolve the first issue with form tab shape and I have several other threads that might be of use to you:

Make Form Tab Widgets rounded corner and change font color

Form Tabs: How to re-style their appearance?

Changing the look of the tabs on the form widget

Now the first one talks about the shape and color and the second one you will see quite a lot of images and different shapes so that is a good one to check out as well, while the third one holds a bit of extra info.

To answer your questions directly as well, this following code will change the background color of each tab:

/* change background color of all tabs */
.tabs-list li {
    background-color: blue;
}

/* change background color of the selected tab */
.tabs-list li.current {
    background-color: navy;
}

Of course if you have any questions, do let us know and we would be happy to assist with them.

Hi Ben

What are the colour codes for the tabs. you mentioned navy, blue, green, these aren't css colour codes, so please advise on the colour schemes. Where do I locate this code you mentioned?

sorry bit of a novice here

Russ

If you want to pick a color anywhere on the website page, you can use the extension or plugin of Google Chrome here. The ColorPick Eyedropper will let you get the Hex code for the color, you can use that then in your CSS. 

In CSS, you can declare colors, I believe, using 3 methods.

1. Use the name of the color (ex. red, blue, green, and so on.).

2. Using RGB format.

3. Using Hex code.

To learn more about this, you can check this guide.

I hope that helps.

Thank you.