cancel
Showing results for 
Search instead for 
Did you mean: 
rhia
Nintex Newbie

CSS - Nintex Style

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

  ....

Reply
93 Replies
eiben
Nintex Newbie

Re: CSS - Nintex Style

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

Reply
rhia
Nintex Newbie

Re: CSS - Nintex Style

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!

Reply
ptemmerman
Nintex Newbie

Re: CSS - Nintex Style

Hey Rhia, 

Here is a minimalist design for Nintex Forms Desktop:

White-Green

White-Green CSS 

Greetings,

Pieter

Reply
rhia
Nintex Newbie

Re: CSS - Nintex Style

Thank you! Great start

Reply
cju
Nintex Newbie

Re: CSS - Nintex Style

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 ?

Reply
rhia
Nintex Newbie

Re: CSS - Nintex Style

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

Reply
rhia
Nintex Newbie

Re: CSS - Nintex Style

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

Reply
rhia
Nintex Newbie

Re: CSS - Nintex Style

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.

Reply
andrew_x_childr
Nintex Newbie

Re: CSS - Nintex Style

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