Change color of entire form

Posted by oren944 - Feb 5 ’15 at 04:12

• 

  Dmitry Kozlov

  Admin

  Member for: 8 years 4 months 2 days
  #1 by Dmitry Kozlov Feb 6 ’15 at 05:33

  Sure, you can override particular styles with the help of CSS or even define your own theme with the help of theme roller as described in our blog:

  http://formsdesigner.blogspot.com/2013/03/sharepoint-forms-styling.html

  link flag
• 

  schuess

  Member

  Member for: 7 years 11 months 28 days
  #2 by schuess Nov 17 ’15 at 02:13

  Has anything changed with the different versions of spfom? I downloaded the theme css , hover it does not seem to effect the styles. I know jquery-ui has had some version changes over the years. Which version are we supposed to be using at this point?

  link flag
• 

  rostislav

  Moderator

  Member for: 6 years 8 months 17 days
  #3 by rostislav Nov 18 ’15 at 06:13

  [#2]:

  In recent versions of FD the jQuery version is 1.11.3. When you download a theme, select the "Stable, for jQuery1.6+" option, then use the jquery-ui.min.css file. This will change styling of jQuery controls like the accordion and the tab control, but not others, like buttons, related items, etc. Other controls are styled via regular Sharepoint themes (Gear icon -> Change the look).

  link flag
• 

  schuess

  Member

  Member for: 7 years 11 months 28 days
  #4 by schuess Nov 25 ’15 at 10:40

  [#3]: Having issues trying to change the input field border color, especially on focus. Can you provide some guidence?

  link flag
• 

  rostislav

  Moderator

  Member for: 6 years 8 months 17 days
  #5 by rostislav Nov 25 ’15 at 12:12

  [#4]:

  Don't know your particular use-case, but here's an example. If you add "myinput" CSS classname to an input field in Forms Designer, then adding the following CSS to the CSS editor will do it:

  .myinput input:focus {
  
      border-color:red;
  
  } 

  link flag
• MFatima

  Member

  Member for: 6 years 1 month 19 days
  #6 by MFatima Feb 25 ’16 at 12:03

  Hi - I have downloaded a theme from themeroller, it applies the color on the tabs and accordions but not to the buttons. Is there a possibility to chnage their colors as well using 'Style' or CSS Editor? Thanks

  link flag
• 

  rostislav

  Moderator

  Member for: 6 years 8 months 17 days
  #7 by rostislav Feb 26 ’16 at 08:12

  [#6]:

  Hi,

  Apply the following CSS classes to your buttons:

  ui-button ui-corner-all ui-widget 

  (simply paste into the CSS Class box for each button in Forms Designer)

  link flag
• MFatima

  Member

  Member for: 6 years 1 month 19 days
  #8 by MFatima Mar 1 ’16 at 12:10

  Hi - I applied this script to the CSS Class but the color of the buttons still unchanged. However, I noticed that it bumped the size up to one pt. What else do i need to do?

  link flag
• 

  rostislav

  Moderator

  Member for: 6 years 8 months 17 days
  #9 by rostislav Mar 2 ’16 at 05:58

  [#8]:

  Add the following line to the JS editor:

  $( "input[type='button']" ).button();

  link flag
• MFatima

  Member

  Member for: 6 years 1 month 19 days
  #10 by MFatima Mar 2 ’16 at 10:05

  [#9]: Hi - thanks for the reply, it has bold the texton the button but dint apply the color on the buttons which it used on the accordions and  header.

  link flag

Show more messages