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!
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;
}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";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!
Right on, glad you got it working.