Archived topic

How to customize the default WP search form on prime to match the template demo

3 replies · Started by Adrien on August 9, 2020

Viewing posts 1–4 of 4

August 9, 2020 at 12:00 pm #1394369

Dear Generatepress Team,

First of all thank you so much for the new update. It's incredible!!!

I need your help. I'm using prime template and since i don't use Woocommerce for this site, I'd just like to use the default WP search form that I have added into element to replace Prime Woocommerce ajax search form.
This is the code I'm now using :

<?php get_search_form(); ?>

Here is the styling I have now:

.wp-search {
margin-left: 30px;
margin-right: 30px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}

#masthead .site-branding,
.wp-search {
margin-bottom: 20px;
}

I am trying to style it to get as close as possible to your Prime template but i'm stuck.
I would really appreciate if you could help me there.

Here are two screenshots to give you more details:
https://tinyurl.com/yxghjj9w
https://tinyurl.com/yxfwfe8s

Thank you so much in advance for your help and time. Best, Adrien

August 9, 2020 at 1:14 pm #1394436

Hi there,

Give this CSS a shot:

.wp-search form.search-form {
    display: flex;
}

.wp-search form.search-form label {
    flex-grow: 1;
    padding-right: 5px;
}

.wp-search input[type=search] {
    width: 100%;
    box-sizing: border-box;
}

August 10, 2020 at 5:23 am #1395232

Dear Tom,

It worked perfectly!
Thank you so much for taking the time to help me. I really appreciate it.
Best, Adrien.

August 10, 2020 at 9:40 am #1395783

Glad I could help! :)

This archived topic is closed to new replies.

Start building better websites today.