Page 1 of 1

Changing color on Tabs

Posted: 10 Jun 2016
by 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

Re: Changing color on Tabs

Posted: 12 Jun 2016
by 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;
}

Re: Changing color on Tabs

Posted: 13 Jun 2016
by Mr. Gustavsen
Great, just what i needed.. Thanks.. :-)

Re: Changing color on Tabs

Posted: 25 Oct 2016
by 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

Re: Changing color on Tabs

Posted: 25 Oct 2016
by 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;
}

Re: Changing color on Tabs

Posted: 25 Oct 2016
by 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

Re: Changing color on Tabs

Posted: 26 Oct 2016
by YuriyMedvedev
Try this one. please:

Code: Select all

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

Re: Changing color on Tabs

Posted: 03 Nov 2016
by wdeffner
Tried this, but without success. Nothing changed. Thank you, Wolfgang

Re: Changing color on Tabs

Posted: 03 Nov 2016
by Dmitry Kozlov
Could you drop HTML-source of the form page to support@spform.com?

Re: Changing color on Tabs

Posted: 04 Nov 2016
by 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