Formatting My Forms - Ability to apply CSS to my form as a whole and to columns on my form

ArdeviaForum

• Created August 18, 2016 14:30

Original Post by Sandy (Imported from Ardevia Forum)

Hi,

 

Wondering if you can help me, I am wanting to apply some styling to my form and have questions on the following:

 

1  How can I apply a background style to my whole form and/or groups/columns on my form?
2  How can I apply a border to go around my form or groups on my form?

 

If you could please supply some basic examples it would be much appreciated.

 

Thank You
Sandy 

0

• 

  ArdeviaForum

  • August 18, 2016 17:37

  Original Post by Andrii Berezovskyi (Imported from Ardevia Forum)

  Hello Sandy

  Thank you for using Ardevia Rich Forms.

   

   

  Soon we will release app for styling different Rich Forms components/areas ( buttons, fields, labels, background/tabs areas,  other ).For now you can use next approach. I created css file with styles configuration for:

  - background for whole form

  - groups

  - border for whole form

  - border for groups

   

   

  and prepeared small demo how to upload and start using it.

   

   

  Steps:

  1.Create Folder for styles in SiteAssets

  2.Upload css file into it

  3.Create proper path to this file

  Proper path looks like: https://YOUR_SITE_COLLECTION_URL/SiteAssets/FOLDERNAME/FILENAME.css

   

  In my case it will looks:

  FOLDERNAME=DemoListStyles

  FILENAME=DemoList.css

   

   

  4.Insert this path into code below

  <link href=" https://INSERT_PATH_HERE" rel="stylesheet" type="text/css">

   

   

  In my case it will looks:

  <link href="https://MY_SITE_COLLECTION_URL/SiteAssets/DemoListStyles/DemoList.css" rel="stylesheet" type="text/css">

   

   

  5.Add Script editor webpart, insert code with this link to css file into it

  6.Save form

   

  All this steps you can see in demo below

  Demo:

  ApplyStylesRF - YouTube

   

   

  Create CSS File:
  1.Create file with name DemoList.css
  2.Add code into it and save file

   

  /* Whole Form Styles */
  .ard-formwebpart {
   background-color: #F0FFF0 ;
   border: solid 2px gray;
  }
  
  /* Group Styles */
  .ard-formwebpart .ard-group:not(.ard-group-locked):not(.ard-design-fields-area){
   background-color: #F0E68C ;
   border: solid 2px blue;
  }
  

   

   

  If you want change colors or borders styles or add some new styles you must modify css file and upload it one more time.

   

  Thank You
  Ardevia support

  0

Please sign in to leave a comment.