Search function on HP | PenciDesign Support

Fjura replied

5 years ago

Customer Reply

think I got it, this worked

.widget.penci-searchbox-home input[type="text"] {
color: #F58D43;
}

Fjura replied

5 years ago

Customer Reply

may I ask one last question please? I added the code like this, but when I type to the box, the color of the text is white on white background, is it possible to change the color of the text that is typed in?

https://www.lenivakucharka.sk/

.widget.penci-searchbox-home input[type="text"]{
    max-width: 100%; 
    font-size: 20px; 
    text-align: center; 
    background: #fff; 
    border-color: #F58D43; 
    color: #ffffff;
}
.widget.penci-searchbox-home input[type="text"]::placeholder {
  color: #F58D43;
  opacity: 1;
}
.widget.penci-searchbox-home input[type="text"]:-ms-input-placeholder {
  color: #F58D43;
}
.widget.penci-searchbox-home input[type="text"]::-ms-input-placeholder {
  color: #F58D43;
}

Fjura replied

5 years ago

Customer Reply

worked great, thank you!

PenciDesign replied

5 years ago

Staff Reply

Hi,

You can change the background, text colour by replacing the code I sent with this code:

<aside id="search-2" class="widget widget_search penci-searchbox-home">
    <form role="search" method="get" class="pc-searchform" action="https://www.lenivakucharka.sk/">
        <div>
            <input type="text" class="search-input" placeholder="Type and hit enter..." name="s">
         </div>
    </form>
</aside>

And add more this code to Customize > Custom CSS:

.widget.penci-searchbox-home input[type="text"]{
    max-width: 100%; 
    font-size: 20px; 
    text-align: center; 
    background: #ff0000; 
    border-color: #0064ff; 
    color: #ffffff;
}
.widget.penci-searchbox-home input[type="text"]::placeholder {
  color: #ffffff;
  opacity: 1;
}
.widget.penci-searchbox-home input[type="text"]:-ms-input-placeholder {
  color: #ffffff;
}
.widget.penci-searchbox-home input[type="text"]::-ms-input-placeholder {
  color: #ffffff;
}

Note:

Change value ff0000 to change the background color

Change value 0064ff to change the border color

Change all values ffffff on the above code to change the color for the text.

Best Regards,

PenciDesign

Fjura replied

5 years ago

Customer Reply

Thank you, I tried it and it worked, just neede to change the URL to my website. May I ask, is it also possible to change the background color and text color? Thank you

PenciDesign replied

5 years ago

Staff Reply

Hi,

Please try to add more this code to the very TOP of Customize > Featured Slider > General > Add Google Adsense/Custom HTML Code Below Featured Slider:

<aside id="search-2" class="widget widget_search">
    <form role="search" method="get" class="pc-searchform" action="https://www.lenivakucharka.sk/">
        <div>
            <input type="text" class="search-input" placeholder="Type and hit enter..." name="s" style="max-width: 100%; font-size: 16px; text-align: center;">
         </div>
    </form>
</aside>

Best Regards,

PenciDesign

Fjura started the conversation

5 years ago

Conversation Start

Hello,

may I just ask, is there an option to make the search function more visible, like having it for example on the homepage in full width right under the carousel?

thank you