Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Stylize Gravity forms to Look Treehouse-ish

Hello People! I am making a nifty Wordpress theme with gravity forms as a front end submission form plugin. I reall love treehouses form css stying. Super clean and usable.

How would I make my forms and submit button look like yours? my form http://www.pdxgeotag.com/mashin-up-over-here/

2 Answers

Hello Kahlil,

Are you simply just looking to adjust the styles of your form fields, buttons, etc. to mimic the styles displayed/similar to Treehouse?

Assuming you have CSS control over your WordPress theme, you will have to find the individual ids/classes related to each field and alter the CSS of each one to match a style similar to Treehouse.

I noticed all of your fields already have names, and some share classes - I can think of multiple ways to replicate the "look and feel" of the treehouse style. Here are a few hints of some CSS properties you should do some research on:

  • Border Radius
  • Box-Shadow
  • Background color
  • Border
  • Border-color
  • Also be sure to include full browser compatibility (i.e. -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing / -khtml-border-radius: 10px; / for old Konqueror browsers */ ).

These few things above in combination with basic properties (width, height, margins, padding, color, etc..) you can easily achieve some really cool and creative results! My best advice to you, try things out - don't be afraid to make a mistake, once you understand all of the properties you'll be able to easily create a look you like and maybe even go beyond that!

Let me know if this helps or if you require additional information.

Thank you! I figured it out and now am making my own snippet library in sublime