Skip to main content

Hey folks!

I've an idea, and I'd like to source your input to help me put it together.

I'm not great with CSS just yet, I'll admit; I go Googling about, and I play with the things I find. Sometimes they work, most times they don't.


So, I had a thought: A CSS Catalogue, for Nintexers, by Nintexers - separated by form types, easily browsable.

This is not intended to be super fancy or like, how to make a bird fly across your form if your name is Toby, but simple things, in a very simple format:

((EXAMPLES ONLY))

ScreenshotCSS
199778_pastedImage_6.png.lblPanelHeader {
background-color:#001E60;
font-size:16px;
color:#ffffff;
}
199779_pastedImage_7.png.btnManager input {
background-color:#c8102e;
color:#ffffff;
font-size:14px;
}

The thought here is that, from people's kind contributions, I'd do the following:

  • Take each submission;
  • Categorize it by type (panel, input, button, etc)
  • Make a "catalogue" type page (so you can see many and compare)  to add it to, with a Title of Contents -- this would then be PDF'd and updated as needed, and linked from here.

Why am I doing this? Because I know there are others just like me:

  • I suck at CSS.
  • I learn by example & doing; I retain by teaching.
  • Googling has led me down some very sad roads, where I end up applying things that don't work in a Nintex forms context. See, this monstrosity:

199781_pastedImage_9.png

I JUST WANT A GREY INPUT! cry.png

It can be simple! Just toss some things out there - you never know what might help someone else..

SCREENSHOT + CSS

Any questions / suggestions? Please comment!


PS Look at this button I made:

199782_pastedImage_16.png cool.png .... plain.png

Yes, I'd agree, that the guide needs to have a reference to the CSS Class. If this is designed for people who know nothing about CSS then knowing which class to add to the control might not be obvious.

Rhia et all... this is a good start and I'd like to see where I can contribute as well. I'm putting some thoughts together on how it could be hosted via the web, post it to the Xchange and even copy/pastable for users to see the example, find the code, etc.

Keep it up... 

Image result for i'll be back meme

Fantastic idea and start. Thank you so much, Rhia, and all who have contributed!

Not sure where I read this, but it's invaluable when designing forms. If you are referencing a style sheet:

The link to the CSS style sheet goes in:
Nintex form settings > Advanced > Custom CSS includes 
 
You will see the changes referenced when previewing or doing a new form, but will not see the changes when working with the form.
If you want to see what the style sheet will do to your form (“live”),
Put this: @import url("/Style%20Library/css/xxxx.css");  
In Form Settings > Custom CSS  as the first line.

This is great! I will add it in happy.png 

Thanks ! It's certainly going to be a work in progress, and we will take any contributions we can get! I'm still hoping to get some more simple copy & paste button and control modifications. 

I can't for the life of me figure out how to CSS an input...

And here a snippet to add extra padding to the right of multiple choices checkboxes to be added to the Custom CSS:

.mycss_checkboxes .nf-filler-control-inner label {
padding-right: 25px;
}

If you want to apply this to all multiple choice controls, leave the .mycss_checkboxes out.

Thanks! I cleared the default CSS on the control on the form and added this CSS to the form's Custom CSS.

Good Idea Rhia Wieclawek‌

-If create a catalog that explain what class to use for each section with an screenshot showing all section of a page.

-Also making a minimal CSS that allow us to not having OOTB Nintex branded form (same as SharePoint minimal.master master page) is a quick start

- Lastly, I have been asked internally to create a Nintex form which has similar look and feel same as PowerApp or Modern SharePoint online UI (simple, clean) for our office 365 users. I was wondering if someone else has done it? 

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

Just provided feedback! I'd never even stopped to think about this thread...  oops... I think I have more comments, now plain.png 

Done!

Look forward to see Universal Forms soon and hope it support building wizard form and tab capability OOTB happy.png

Thanks Ehsan Hakimi‌. 

Universal Forms already has multipage complete.

220448_pastedImage_1.png

Cheers,

Euan

Is this an upgrade to on prem forms?

T.

Hi Anthony Parker‌,


We are currently working on a new version of the Responsive Forms designer that will replace the existing Responsive Forms designer. We will first bring it to Office 365 with SharePoint 2013, 2016 and 2019 at a later date.

Have a look at this blog post about some of the functionality you can expect.

Happy to answer any more questions you may have.

Cheers,

Euan

You can add the code to a workflow constant once and just add the workflow constant under the customer javascript in forms.

Has an ETA been set out for the launch of Responsive forms to On-Prem 2016?

Rhia, where do you keep this nifty catalog???? I would seriously love to get a copy!

Can someone please provide access to the Catalogue?

I would love a copy of the CSS Catalogue. If available. @rhia 

@Arianeb wrote:

I would love a copy of the CSS Catalogue. If available. @rhia 



Anyone managed to get the link??? @rhia  

@rhia did you publish the catalogue somewhere? Starting to build a form now and hacking through the css using the browser develop tools is really time consuming.

Terribly disappointed to have gone through the 10 pages of this thread to find out the catalog was abandoned :smileysad:


That was a great idea ! Too bad I don't have the time to do it myself.


Keep up the good work :smileytongue:


 

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings