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

Oooo I love Checkbox 1. And your radio boxes! This is very cool.

Complex CSS is also welcome happy.png 

Wow, awesome!

Henning Eiben Rhia Wieclawek Thanks! I suspect some of this will become obsolete with the upcoming form updates, but this really just spawned from a desire to provide contextual clues in form labels for different types of data being collected (i.e. email, phone, date-picker, etc.).

It's a rough prototype currently, but I've done some experimenting with the CSS::before selector to inject leading font-awesome icons on form labels based on a specified CSS class (i.e. faUser). Also as you saw, some custom icons for checkboxes/choice controls.

Rhia Wieclawek‌ Here's the icons used for Checkbox 1:

Who said forms have to be ugly? :-P

I wish there was a "love" reaction. This is great. We use Font Awesome a lot in my company but mainly for their intranet product. It definitely brings the form up to the next level as far as aesthetics - as you say - contextual clues. Some folks (like myself) navigate more by colours and shapes than by letters and numbers, and this makes my soul happy.

Hi Patrick,

this is "awesome" ;-)

I try to implement this code it is really great. But I have question. How did you put the Icons at the submit button? I tried but don't have a clue...

Thank you

Oliver

Oliver Schneider‌ Let me do a little clean-up in my code/sample and I'll share it out on the Nintex Xchange so you can just grab it and use as needed. I'll check back in once I do to let you know it's up. happy.png

Hi Patrick,

It is really looks good. Can you please explain, what steps I need to follow to use these features.

Hey Rhia, once you put in your Google CSS, how did you then apply the font to the labels ?

Hey Dan!

I just used the css class on 'em -- .fredericka for example, or whatever the class is named

I suppose if I wanted more colours or spacing or whatever I'd have to build it all into that class.. but at least once the font is loaded it's easy to add in to any class with "font family: 'name';"

Update: Once I have my O365 environment set up I'll start compiling the catalogue happy.png Was hoping to start tonight but my environment is being cranky.

...She said, in April. 

THIS IS STILL ON MY RADAR.

I WILL NOT FORGET.

This is brilliant

I have only just stumbled across this post...missing so much!

SHHH DON'T PAY ATTENTION TO IT! (I still haven't started the catalogue. But I think about it daily. At least it's a useful thread!)

‌ ‌ thanks for the kind words! I've got some free time this morning and am working to package this up into an Xchange asset so you can better explore it. Will check back in soon!

Hello All,

I've added an Xchange asset out on the marketplace to demonstrate how to use CSS to create "font-awesome forms." Check it out! Font Awesome Forms using CSS  

Rhia Wieclawek‌ – feel free to pillage anything you see here for your CSS Catalogue! If you have any questions, I'd be happy to help. wink.png

Henning Eiben‌ Ryan Greenaway‌ Ramana Thakkallapally‌ Oliver Schneider‌ Rhia Wieclawek‌

Oh - I will - grin.png I love Font Awesome.

https://twitter.com/BachmannRa/status/892277233355771904

Well, guess what I'm doing Friday.

‌ haha – success!

I would have said victim of your success wink.png

Hi Everyone,

I also wanted to have radio buttons look more like buttons, But then soon realized it could be used in other form controls

Currently I am using it with Radio buttons and Labels to render as tabs or buttons. See below..

Demo

Just take note that the CSS control variable can be inserted as per below.

demo 2

demo 3

here is the CSS code that you can copy anywhere into your CSS files.

.customtab {float: right;  } 
.customtab tr {float:right;  } 
.customtab label {background: #D8D8D8;
                  padding: 5px 15px 5px 15px;  
                  border: none;
                  margin-left: 3px;
                  margin-right: 3px;           
                  position: relative;    
                  border-radius:5px 5px 5px 5px; 
                  left: 3px;  
                  cursor:pointer;         
                  border-bottom:none;         
                  text-align:center;
                  color: #0072C6;}
.customtab label:hover {background: #0072C6;color:#D8D8D8;}
.customtab a{color: #0072C6;text-decoration: none;}
.customtab a:hover {color: #D8D8D8;}  .customtab /type=radio] {display: none; }
                   type=radio]:checked ~ label {background: #0072C6;
                                border-bottom: 1px solid white;     
                                z-index: 2;
                                color: #D8D8D8;}  

Hope this helps happy.png

GREAT convo!  Thank you for getting this started, Rhia!

Anyone here know how to rename a SP ribbon button on Nintex form view?  Found NWF$('#RibbonSaveButton').hide(); to hide a button.  We want to direct users to the Cancel button to close a form and would like to rename the ribbon button from Cancel to Close.  Ideas?  Thanks!

Are you using Nintex for SharePoint OnPrem? If so, the Cancel button displayed in the ribbon correspond to the Cancel button displayed on the form and you can simply rename it by populating "Close" in "Button label" field in the control settings of the button wink.png.

Hope this helps

Sorry, I neglected to indicate that we're in SP for O365.  Thank you, Caroline!  

As a work-around, I changed the Save and Continue button to read 'Save and Close' and set redirect to the home page.  Users can use ribbon Cancel to close with no changes, and use the form Save and Close button to save changes.  

I don't know if I really helped you but I'm glad that you've found a workaround wink.png

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings