cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

Custom CSS Includes

Jump to solution

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?

Labels: (1)
0 Kudos
Reply
10 Replies
Workflow Hero

Re: Custom CSS Includes

Jump to solution

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.

0 Kudos
Reply
Workflow Hero

Re: Custom CSS Includes

Jump to solution

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

Reply
Workflow Hero

Re: Custom CSS Includes

Jump to solution

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

Reply
Workflow Hero

Re: Custom CSS Includes

Jump to solution

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?

0 Kudos
Reply
Workflow Hero

Re: Custom CSS Includes

Jump to solution

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

0 Kudos
Reply
Workflow Hero

Re: Custom CSS Includes

Jump to solution

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.

0 Kudos
Reply
Workflow Hero

Re: Custom CSS Includes

Jump to solution

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

0 Kudos
Reply
Workflow Hero

Re: Custom CSS Includes

Jump to solution

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

0 Kudos
Reply
Workflow Hero

Re: Custom CSS Includes

Jump to solution

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

Many thanks for your support and sorry for disturbing!

Bye

Reply