Style Adjustments to Customer Service page

Hello,

I would like to make some style adjustments to our Customer Service page.
I would like to know how I can change the Font-color, Border-color and Background color of:

1. Button + Button on hover
2. Active tabs
3. Non-active tabs

I’ve included a picture of the parts I’d like to adjust.
Hopefully you can help me out with this.

Regards Roel

Attachments:

You must be logged in to view attached files.

Hello,

As we can see, you are using WPBakery page builder elements to create these tabs. So you need to edit this page via Dashboard -> Pages and configure it to your needs.

Regards

There’s only a limited way to edit layout with WPbakery page.
I am not able to change colors of any borders or tab colors on this page.

I can only pick a color for the tabs (See image), but not a specific color that we use for the layout of our entire website.
This is the color I would like for the button/tab background: #8f619e
And the color for the border: #595959

It probably needs some CSS adjustments. Really hope you can help us out with this.

Attachments:

You must be logged in to view attached files.

Try to use the following CSS code

/* Button style */

.wpcf7 input[type=submit] {
	color: white;
	background-color: Blue;
}

.wpcf7 input[type=submit]:hover {
	background-color: red;
}

/* Active tab style */

body.wpb-js-composer .vc_tta-color-purple.vc_tta-style-modern .vc_tta-panel.vc_active .vc_tta-panel-title>a,
body.wpb-js-composer .vc_tta-color-purple.vc_tta-style-modern .vc_tta-tab.vc_active>a {
	color: white;
	background-color: Blue;
}

body.wpb-js-composer .vc_tta-color-purple.vc_tta-style-modern .vc_tta-panel.vc_active .vc_tta-panel-title>a i:before {
	border-color: white;
}

/* Non-active tabs */

body.wpb-js-composer .vc_tta-color-purple.vc_tta-style-modern .vc_tta-tab>a,
.wpb-js-composer .vc_tta-color-purple.vc_tta-style-modern .vc_tta-panel .vc_tta-panel-heading {
	border: none;
}

body.wpb-js-composer .vc_tta-color-purple.vc_tta-style-modern .vc_tta-panel .vc_tta-panel-title>a,
body.wpb-js-composer .vc_tta-color-purple.vc_tta-style-modern .vc_tta-tab>a {
	color: white;
	background-color: red;
}

body.wpb-js-composer .vc_tta-color-purple.vc_tta-style-modern .vc_tta-tab > a:hover {
	background-color: green;
}

But remove your previous CSS code before http://prntscr.com/ltokmn

Thank you for taking the time to find out the CSS code. Much appreciated !

You are welcome.

[Author]

Posts