CSS - Nintex Style

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

Complex CSS is also welcome  

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:

• fa-toggle-on: Font Awesome Icons 
• fa-toggle-off: Font Awesome Icons 

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. 

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  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.

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

Oh - I will -  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

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..

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

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

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 .

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