WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
How do I widen the search form? (4 posts)

  1. rltynexus
    Member
    Posted 1 year ago #

    I have positioned the search into my header using a child theme. Now I would like to restyle the header so that it is wider and possibly a little taller. Can anyone help me here? I'm not sure what parameters to change.

  2. gidd
    Member
    Posted 1 year ago #

    Hi, I think I have something useful for you.

    To change the twentytwelve header from your child theme,
    you need to copy the header.php from parent theme and put it into child theme directory.

    Then, you can edit the header.php in your child theme directory. After this, you need to write stylesheet in style.css in your child theme directory to make it wider and taller as you need.

    Your stylesheet should override the parent stylesheet. You can do so by adding "body" before the css selector.

  3. rltynexus
    Member
    Posted 1 year ago #

    Thanks gidd,

    I've already done this part,

    My Child header.php file calls for the search form and assigns is a style.

    </hgroup>
    
    <div class="header-search"><?php get_search_form(); ?></div>

    In the Child CSS styles the search form to place it in the header.

    .header-search {
        float: right;
        margin-top: 40px;
    
    }
    
    @media (max-width: 650px) {
        .header-search {
            margin-top:5px;
    
            text-align:center;
            float:none;
    
    }

    The form is where I want it, now I just want to make it bigger.

  4. rdg@me.com
    Member
    Posted 1 year ago #

    Your class 'header search' is an outer container which hosts the search form but won't do anything to style the form itself. I don't know if this is the best place to edit it (as it might have unwanted effects on other types of forms) but you can achieve what you're trying to do by modifying the style below (line 268 of the theme's css file)

    /* Form fields */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="url"],
    textarea {
    	padding: 6px;
    	padding: 0.428571429rem;
    	font-family: inherit;
    	border: 1px solid #ccc;
    	border-radius: 3px;
    }

    It might be worth seeing what other suggestions you get. I'm NO expert!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags