CSS - Nintex Style

[rhia]

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

Screenshot	CSS
	.lblPanelHeader { background-color:#001E60; font-size:16px; color:#ffffff; }
	.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:

I JUST WANT A GREY INPUT!

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:

  ....

[eiben]

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]

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

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

[ptemmerman]

Hey Rhia, 

Here is a minimalist design for Nintex Forms Desktop:

White-Green CSS 

Greetings,

Pieter

[rhia]

Thank you! Great start

[cju]

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]

Definitely  

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

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]

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

[rhia]

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.

[andrew_x_childr]

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:

#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;
}