Application Question Page Styling

GuildPortal admin site link to the original post

This bit of CSS is needed to center and move the application form down the page a little bit, so it will match the other pages of your site. Also, it adds a banner image as a background image, so you'll have to find your banner image url.

Code

Add this css to your custom css (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard tab).

#pnlQuestions { margin: 300px auto 0 auto; }
#Form1, #ctl01 { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/HelpSite.png) center 10px no-repeat; }
#ctl01 { padding-top: 300px; }

Customizing

• Center the form and move it down using the "#pnlQuestions" line of css. The number in red is the top margin, it moves the form questions down that far. The "auto 0 auto" means it centers the form horizontally and sets the bottom margin to zero.
  
  
• The "#ctl01" is for the New user registration page, the padding in red should be the same as the margin in red to fit your banner image.
  
  
• The "#Form1" bit of css adds the banner image. Change the url in orange to your site banner. The number in red adjusts the top margin of the image.

Edit (2/19/2011): Added css for the new user registration page as well.