Layout of header text and form fields « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

fsluijs
Member

Hi,

On this page I have some layout issues:
http://nieuw.prettig-weekend.nl/contact/

1. The middle two fields have a shadow in the box, the others do not. I'd like them to be the same, so all having shadows or none having shadows. How can I modify this?

2. The form fields seem to be indented when compared to the text. How can I get this aligned, preferably not indented at all?

Thanks!

Posted 12 years ago on Monday April 23, 2012 | Permalink

That's due to your theme's stylesheet, for instance you have this:

[css]
input[type="text"], input[type="password"], select {
padding: 8px;
font-size: 12px;
margin: 0;
padding-top: 8px;
border: 1px solid #DDD;
background: white;
font-family: Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
color: #666;
}

Which is only targeting input types of text, password and select (drop downs). You can update/change that to be:

[css]
input[type="text"], input[type="url"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea {
padding: 8px;
font-size: 12px;
margin: 0;
padding-top: 8px;
border: 1px solid #DDD;
background: white;
font-family: Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
color: #666;
}

For the indents your stylesheet has:

[css]
#content_wrapper .inner .inner_wrapper .sidebar_content ul {
margin-left: 20px;
}

That margin is your issue. So you could add this to your stylesheet:

[css]
ul.gform_fields {
margin-left: 0 !important;
}

Posted 12 years ago on Monday April 23, 2012 | Permalink

fsluijs
Member

Hi Rob, excellent advice!

The indent addition worked instantly. For the shades I looked up the styles in the style sheet and made the modifications. In the end, I choose not to add the style names to the style sheet like you suggested, but made my own file with a copy of those style atributes and imported this into the styles.css. So if the theme updates in the future, I still have the custom code, just need to check for updates in the sections that I copied.

For future reference - maybe this helps other users - I'm pasting the solution here. I'm using the Ares theme by Peerapong from ThemeForest.net

My style.css now looks like this:

/*
Theme Name: Ares
Description: Blog Magazine Newspaper Template
Version: 1.5.2
Author: Peerapong Pulpipatnan
Author URI: http://themeforest.net/user/peerapong
*/

@import "css/screen.css";

/*
Description: Import Prettig Weekend custom styles for Ares theme
Author: Frank's Website Advies
*/

@import "css/pw_ares_custom.css";

(http://pastie.org/3841667)

My pw_ares_custom.css looks like this:

/*
Area: Gravity Forms
Description: These additions are to correct a style issue for Gravity Forms in combination with Ares. This makes the Postcode and Plaats end up on the same line, instead of having a break in between.
Author: Frank's Website Advies
*/
#input_1_7 br { display: none !important; }
#input_3_2 br { display: none !important; }

/*
Area: Gravity Forms
Description: make sure the form fields are not indented compared to the text on a page.
Author: Frank's Website Advies
*/
ul.gform_fields {
margin-left: 0 !important;
}

/*
Area: Gravity Forms
Description: apply same style on phone, e-mail and website fields as on other fields in the form.
Author: Frank's Website Advies
*/
input[type="url"], input[type="email"], input[type="tel"], input[type="number"], select
{
	padding: 8px;
	font-size: 12px;
	margin: 0;
	padding-top: 8px;
	border: 1px solid #dddddd;
	background: #fff;
	font-family: Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
	color: #666;
}

input[type=url]:hover, input[type=email]:hover, input[type=tel]:hover, input[type=number]:hover
{
	border: 1px solid #999999;
}

input[type=url].blur, input[type=email].blur, input[type=tel].blur, input[type=number].blur
{
	color: #ccc;
	font-style: italic;
}

(http://www.pastie.org/3841667)

Thanks again for your help!

Posted 12 years ago on Monday April 23, 2012 | Permalink

Rob Harrell
Member

Right on, glad you got it working.

Posted 12 years ago on Tuesday April 24, 2012 | Permalink

This topic has been resolved and has been closed to new replies.