Support » Theme: Twenty Twelve » How do I widen the search form?

  • 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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.

    Thanks gidd,

    I’ve already done this part,

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

    <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 {

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

    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 */
    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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How do I widen the search form?’ is closed to new replies.