How to add search box at the top of the main area?

Question

Hello,

I am using the theme SnowFlat. 

 

I added a search box at the top of the main area through "Widget Anywhere" Plugin.

Widget HTML Code: 

---

<div class="qa-search">
<form method="GET" action="../search">
<input type="text" name="q" value="" class="qa-search-field">
<input type="submit" value="Search" class="qa-search-button">
</form>
</div>

---

 

I have two problem:

1- How can I color the search box at the top of the main area?

2- How can I remove the default search box?

 

I would be happy if you can help me. Thanks.

 

 

 

 

 

 

Answer 1

Regarding the color changes, the main CSS classes you need to change are located in the qa-styles.css file and are the following ones:

.qam-search.turquoise .qa-search {
    background: #1abc9c;
}
.qam-search.turquoise .qa-search-field:focus {
    border-color: #117964;
}
.qam-search.turquoise .qa-search-button {
    background-color: #117964;
}

Regarding removing the search box, it is a bit more complex. Assuming your current fallback search bar works fine in different devices, you will have to:

1. Comment the 2 calls to $this->qam_search(...) located in qa-theme.php. They are the qam_search and sidepanel functions:

//    $this->qam_search('the-top', 'the-top-search');
//    $this->qam_search();

2. In snow-core.js you could comment the JS code for toggling the search box

//    $('#qam-search-mobile').click(function () {
//        $(this).toggleClass('active');
//        $('#the-top-search').slideToggle('fast');
//    });

3. In the qa-styles.css you'll have to get rid of the magnifier icon displayed in lower resolution devices. You can follow a simple approach by adding this CSS rule:

@media (max-width: 979px) {
    .qam-search-mobile {
        background-image: initial;
        border-left: initial;
    }
}

Comments

Thank you very much.
I remove the search box only using this command:
//    $this->qam_search();

and I changed colors in a different way.