Changing color on Tabs

rss

Posted by Mr. Gustavsen - Jun 10 ’16 at 06:14

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
    Dmitry Kozlov
    Admin
    Member for: 6 years 2 months 20 days
    #1 by Dmitry Kozlov Jun 12 ’16 at 02:19

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

    .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: [#007]FFF;
    	border-color: [#003]EFF;
    	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
    Member
    Member for: 3 years 6 months
    #2 by Mr. Gustavsen Jun 13 ’16 at 11:37

    Great, just what i needed.. Thanks.. :-)

  • wdeffner
    Member
    Member for: 3 years 2 months 17 days
    #3 by wdeffner Oct 25 ’16 at 03:32

    [#2]: 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
    Moderator
    Member for: 3 years 2 months 14 days
    #4 by YuriyMedvedev Oct 25 ’16 at 09:27

    [#3]: Hi!

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

     .ui-tabs-panel[aria-hidden='false']{
         background: [#9]AF !important;
         border-color: [#9]AF !important;
    }
  • wdeffner
    Member
    Member for: 3 years 2 months 17 days
    #5 by wdeffner Oct 25 ’16 at 09:59

    [#4]: 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
    Moderator
    Member for: 3 years 2 months 14 days
    #6 by YuriyMedvedev Oct 26 ’16 at 05:21

    [#5]: Try this one. please:

    .ui-tabs-panel[aria-hidden='false'], .ui-tabs-active{
    	background: [#9]AF !important;
    	border-color: [#9]AF !important; 
  • wdeffner
    Member
    Member for: 3 years 2 months 17 days
    #7 by wdeffner Nov 3 ’16 at 05:55

    [#6]

    Tried this, but without success. Nothing changed. Thank you, Wolfgang
  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 2 months 20 days
    #8 by Dmitry Kozlov Nov 3 ’16 at 05:57

    [#7]: Could you drop HTML-source of the form page to [email protected]?

  • wdeffner
    Member
    Member for: 3 years 2 months 17 days
    #9 by wdeffner Nov 4 ’16 at 04:06

    [#8]: 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

     

Displaying 1 to 9 of 9 messages