Changing Color of the Search Box on HP

[prozac131]

Hi,

I’m assuming there is an easy answer for this, but I’m but having trouble finding out how to change the color of the hompage sign up/search form. I don’t see it as an option under “Styling Options”, “Header Section.”

Thank you — Justin

[SQadmin]

Hi, Those colors are taken from the primary button background color and hover color set in Sweetdate -> Styling options

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[prozac131]

Yes, that worked, thanks for the fast response!!! I love your template.

[LKr]

Hi!
Is there any way to make these colors (of the search/register box on the home page and primary button background) independent of each other? And is it possible to make search box transparent-ish?
Which files do I need to change?

Thank you!

[SQadmin]

This is the css you need to modify to style it separately:

COPY CODE

.form-header {
    border-left: 10px solid rgba(31, 168, 209, 0.3);
    border-right: 10px solid rgba(31, 168, 209, 0.3);
    border-top: 10px solid rgba(31, 168, 209, 0.3);
}
.form-search, .form-header {
    background: none repeat scroll 0 0 #0296C0;
}
.form-search {
    border-left: 10px solid rgba(31, 168, 209, 0.3);
    border-right: 10px solid rgba(31, 168, 209, 0.3);
}

.form-search.custom div.custom.dropdown a.selector, .form-search.custom div.custom.dropdown a.current, .form-search.custom select {
    border: 1px solid #1FA8D1;
}
.form-search.custom div.custom.dropdown a.current, .form-search.custom input[type="text"], .form-search.custom input[type="password"], .form-search.custom select {
    background-color: #1FA8D1;
}

To make it transparent you need to set the background on the form in rgba form(rgba(31, 168, 209, 0.3);) instead of hex

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[scingalls]

How do you change the border around the search box? I want to change the small border around the search box to a different color.

[scingalls]

Also, how do I change the text color?

[Abe]

Roberts code above shows how to change the border. You need to change rgba values to your own.
This CSS is for the color

COPY CODE

.form-wrapper p, .form-wrapper a, .form-wrapper label, .form-wrapper button {
    color: #000000 !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts