Custom CSS Includes


Badge +1

I created a form where I used some custom CSS in the Form Settings->Custom CSS to style the form the way I wanted.  After getting the form styled I figured that I would probably use a lot of the custom styling in other forms at a later date and decided it would be more advantageous to move the script to a separate CSS file and reference the file.  I therefore created a .css file with the script from the form and copied it to a central library on the site.  Next I removed all the script specified in the Custom CSS section and instead referenced the .css file I uploaded to the server in the Form Settings->Custom CSS includes in the Advanced section.  Here is where my problem occurs.  

When I put custom styles in the Custom CSS section of the form settings, those changes are immediately available in both the form designer and the preview.  Alternatively, if I leave the Custom CSS section blank and instead reference an external CSS file in the Custom CSS includes section with the same CSS code then I don't see any of the styling when using the designer but it shows up when I preview the form.  This makes if very difficult to use a referenced CSS file as I really need to be able to see the styling as I'm designing the form.  

Am I missing something?  Is there a way to make the form designer use the referenced CSS when designing the form or am I forced to copy it to the Custom CSS section just to be able to see it in the designer?


10 replies

Userlevel 6
Badge +15

I have a feeling that the Custom CSS panel is coded to only receive CSS, which would ignore any external references..

This is good to know though, something I've not tried myself yet.

Userlevel 5
Badge +14

you can use @import rule in custom CSS settings to make include available at both design and runtime

Badge +3

I tried to use @import url('myURL'); in the Custom CSS section of the form settings but it does not change the CSS in the form designer. The preview is OK. 

Any ideas about that?

Thanks

Userlevel 5
Badge +14

I'm not  sure, I would need more info.

is it an url local to site or sharepoint or is it external link?

what style(s) should it change?

have you checked developer console whether there are not reported any errors to access or process css file?

have you checked DOM explorer whether your custom styles are not overruled by default or some other styles?

Badge +3

Hi Marian,

Thanks for your answer!

It is the url of another site on the same farm.

I added @import url('mySiteURL/Style%20Library/Nintex/corporate.css'); in the Custom CSS section of the form.

My goal is to implement a form at the farm level and to have classes for labels and inputs in the colors of my company. As I said the preview is OK but not in the Nintex form designer.

In the developer console, the css file is called

Thanks

Userlevel 5
Badge +14

it should work across sites, as far as you have sufficient permissions to access file on the other site.

have you tried to close and reopen designer after the change?or maybe flush browser caches?

maybe it just needs a complete reload.

Badge +3

Hi!

Which permission level is needed to read file from another site? Is "Read" enough?

Already tried close an reopen and flush browser caches.

What do you mean by "complete reload"?

Thanks

Userlevel 5
Badge +14

read on site, read on library and read on file should be enough.

Badge +3

Ooops! Typing mistake... @inport instead of`@import !!

Many thanks for your support and sorry for disturbing!

Bye

Userlevel 5
Badge +13

Hi all,

 

Our UX team are doing some research into our style builder for Universal Forms. We would appreciate your feedback on your current experience in styling your forms in any platform.

 

If you would like to provide feedback, please fill out the survey at Applying styles in Nintex Forms 

 

Thanks,

Euan

Reply