By Neil on November 26, 2014
This tutorial builds on a previous detailed WordPress tutorial where I showed how to create and style a Gravity Form from scratch. In the previous tutorial we created all the fields and styled them so they fitted in with the overall style of the website theme. Also we created a DIV around the form and formatted it so that the form floated central on the page and had a border top that created a solid black line.
In this new tutorial we add some extra code to the CSS stylesheet in this DIV that adds a background. First a solid gray background is placed behind the form and then we add an image. There are two key bits of code here, one is the background CSS styling and the other is the inclusion of the “overflow: auto;” code that ensures the background stretches around everything within the DIV. A little bit of extra general formatting is done to increase the DIV width and add some padding.
If you want to learn more about Gravity Forms click here to visit their official website.
It looks like one has to become a real CSS expert to really make good use of Gravity forms! You appear to have a VERY intimate knowledge of CSS and the specifically that used by GF. I paid for this plug-in in hopes of having it do all this work. If I was was that good with CSS could have just built the forms with HTML/PHP/and CSS and saved the money! GAK!
I feel your pain here Alan. I too when I started expected all styling etc to be nice with a paid for forms plugin. Kind of one of the reasons I have made some videos so I can share what I have figured out over the years.
Thanks mate, this has helped a lot for those that are learning. Just wanted to let you know you’re helping people!