PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Layout of header text and form fields

  1. 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
  2. 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
  3. 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
  4. 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.