CSS - Nintex Style

  • 23 February 2017
  • 97 replies
  • 184 views
rhia
Userlevel 6
Badge +15

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

97 replies

E
Badge +7

Maybe you would also need a column "instructions", where you could put something like "add 'btnManager' to css-class attribute in control" or "create panel and inside create lables and add css-class to panel".

rhia
Userlevel 6
Badge +15

Yep! Definitely happy.png there will be an instructions section at the front - good call.

For now, just need contributions.. and no one has stepped up yet!

P
Badge +1

Hey Rhia, 

Here is a minimalist design for Nintex Forms Desktop:

White-Green

White-Green CSS 

Greetings,

Pieter

rhia
Userlevel 6
Badge +15

Thank you! Great start grin.png

C
Userlevel 5
Badge +9

That's a good idea !

What do you think about users are asking for help regarding CSS and we help them and this way it's easier for you to get content !

I can do lot of things with CSS but I'm not a designer and I need a beautiful image/example that I then will be able to reproduce using CSS.

What do you think about that ?

rhia
Userlevel 6
Badge +15

Definitely grin.png 

i plan on going through the community and then pulling out CSS from helpful posts, as well happy.png 

and then, of course, I have questions about things I've seen that I'd like to have CSS for -- and I'll post those as well

rhia
Userlevel 6
Badge +15

This thread will see life soon .. just haven't quite had time yet !

rhia
Userlevel 6
Badge +15

Applying a different font via CSS:

@import url(//fonts.googleapis.com/css?family=Fredericka+the+Great);

.fredericka{
font-family: 'Fredericka the Great';
}   

The bolded bits can be any font from the Google catalogue.

Did not realize how easy this was. Definitely going into the catalogue.

A
Badge +5

Here's a bit of CSS that I've used for creating a floating validation error message box.  (Credit: inspired by / stolen from arno at https://community.nintex.com/thread/2447.)

Screenshot:

CSS error message

CSS:

#onetIDListForm{
     margin: 0 auto;
}

@keyframes fadeIn  {
    from {opacity: 0;}
    to {opacity: 1;}
}
.nf-validation-summary{
     position: fixed;
     top: 150px;
     width: 280px;
     left: 15px;
     background-color: white;
     border: 2px solid red;
     border-radius:10px;
     animation: fadeIn 1s;
     z-index:9;
}
A
Badge +5

Ooh, and here's another one: this takes away the header row and checkboxes from List View controls.

tr.ms-viewheader, tr.ms-vhltr, tr.ms-vh-icon, td.ms-vb, td.ms-addnew, td.ms-vb-firstCell{
    visibility: collapse;
}
rhia
Userlevel 6
Badge +15

I'm intrigued .. can you post a screenshot of a before & after?

I applied this to one of my forms but nothing happened that I noticed... not sure what I was looking for though!

A
Badge +5

For sure.  Here are some screenshots:

Without CSS:

list view without CSS

With CSS (note that the "+ Add document" link is also gone):

list view with CSS

S
Badge +7

Resize Multi Select Box.

.nf-lookup-addremove button{Width:60px !Important}
.nf-lookup-addremove select{Width:230px !Important}

Before...

After...

Note, change doesn't show on design view.

rhia
Userlevel 6
Badge +15

Thank you!! 

S
Badge +7

Reduce space around fields....

This is amending the default CSS on a form. I've made this change and then exported and uploaded it as a default template so all forms are set to this. Also my grid is set to 5 x 5 for smaller adjustments. Nothing stopping you adding this to your base css either.

CSS changed from 10 to 5.

Before...

After

rhia
Userlevel 6
Badge +15

thank you for your contributions! I'll be working on this as soon as I get some time ^^

O
Badge +4

Hi,

to Change

  • background-Color 
  • hide Sidenavigation
  • resize siteicon

Put this code into a ScriptEditor on your Page:

<style>
.ms-core-overlay { background-color: transparent; }
body #s4-workspace { background-color: #FFFFFF; }
.ms-siteicon-img { top: 0px; left: 15px; max-width: none; max-height: none; width: 169px; height: 80px; float: left;}
#sideNavBox{ display:none !important; }
#contentBox{ margin-left: 20px !important; }
</style>‍‍‍‍‍‍‍

Before:

After:

E
Badge +7

Sometimes you just want to center a form on a page.

Before:

200761_pastedImage_1.png

After:

200762_pastedImage_2.png

Needed CSS:

table#onetIDListForm { width: 100%; }‍

If you really want to make sure, you're styling the right table, you might want to use JavaScript instead:

NWF$(function() {
    NWF$("table#onetIDListForm:has(div.nf-non-dialog-outer)").css("width", "100%");
});‍‍‍

200763_pastedImage_3.png

O
Badge +4

The same with Forms:

#sideNavBox{ display:none !important; }

#contentBox{ margin-left: 20px !important; }

body #s4-workspace { background-color: #FFFFFF; }
‍‍‍‍‍
O
Badge +4

Hi Henning,

there is a "shortcut". Just use:

#onetIDListForm{
     margin: 0 auto;
}

O
Badge +4

Another one:

Hide Ribbonrow in Forms. Not really CSS but also useful wink.png

Enter this into Custom JavaScript:

NWF$("#s4-ribbonrow").hide();

Before:

After:

rhia
Userlevel 6
Badge +15

This is amazing you guys, keep it coming! I'll have a lot of time in April to start putting this catalogue together. I promise, it's coming!

F
Badge +7

Great idea ‌.  Definitely Bookmarking this.

T
Badge +4

Along these lines, I've also added this line. It will then move the form up so there isn't such a gap from top of page to form. You could just place in your CSS as listed below the jQuery. The jQuery simply ensures that it is added after CSS is loaded.

NWF$('#formFillerContainer').css('top', '40px');

OR

#formFillerContainer {

  top: 40px !important;

}

 

P
Badge +8

Rhia Wieclawek‌ – I love the idea! I've done some font-awesome CSS integration with Nintex Forms that I can contribute, although it may be a little more involved given the dependancies.

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings