Changing color on Tabs

[Mr. Gustavsen]

Hi,

New to SPform, and also to CSS J.. Can I change the background color on tabs and outline on fields without changing theme?

Regards Christian

[Dmitry Kozlov]

Sure, here is a sample. Insert the code below into CSS-editor of Forms Designer:

Code: Select all

.ui-widget-content {
	border-color: #C5C5C5;
}

.ui-widget-header {
	background-image: none;
	background-color: #E9E9E9;
	border-color: #DDDDDD;
}

.ui-widget-header .ui-state-default {
	background-image: none;
	background-color: #F6F6F6;
	border-color: #C5C5C5;
}

.ui-widget-header .ui-state-active {
	background-image: none;
	background-color: #007FFF;
	border-color: #003EFF;
	color: white !important;
}

.ui-widget-header .ui-state-active a {
	color: white !important;
}


.fd_control input[type="text"], 
.fd_control textarea, 
.fd_control select,
#fd_form .ms-dtinput input[type="text"], 
#fd_form .ms-dttimeinput input[type="text"],
#fd_form .ms-inputuserfield,
#fd_form .ms-rtefield, 
#fd_form .ms-rtefield2, 
#fd_form .ms-longfileinput, 
#fd_form .ms-fileinput,
#fd_form .ms-taxonomy-fieldeditor
{
    border-color: #C5C5C5;
}

[Mr. Gustavsen]

Great, just what i needed.. Thanks..

[wdeffner]

Hi, this works fine.

In addition I would like to change the background of the whole area that ist associated with the tab. Is tehre a way without using theme roller?

Thank you!

Wolfgang

[YuriyMedvedev]

Hi!

To change BGC of content in active tab you can use this in CSS:

Code: Select all

 .ui-tabs-panel[aria-hidden='false']{
     background: #9AF !important;
     border-color: #9AF !important;
}

[wdeffner]

Hi,

I've tried to add this css-code to the css-code above (#1) and tried it without the code from above but the background color of the active tab never changed.

Any idea? I am using Sharepoint 2013, changing the tab-color worked fine.

Thank you!

Wolfgang

[YuriyMedvedev]

Try this one. please:

Code: Select all

.ui-tabs-panel[aria-hidden='false'], .ui-tabs-active{
	background: #9AF !important;
	border-color: #9AF !important; 

[wdeffner]

Tried this, but without success. Nothing changed. Thank you, Wolfgang

[Dmitry Kozlov]

Could you drop HTML-source of the form page to support@spform.com?

[wdeffner]

Hi,

with some help I found this solution. It only works in combination.

Normal 0 21 false false false DE X-NONE X-NONE MicrosoftInternetExplorer4

.ui-tabs-panel {

background-color: #f1f1f1;

}

.ui-tabs-panel.ui-widget-content {

background-color: #f1f1f1;

}


Wolfgang