Color of the register/search form background on the Home Page.

[LKr]

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

Thank you!

[LKr]

Nevermind, I figured it out.

[SQadmin]

Ok, great. If anybody else is interested this is the css code:

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;
}

With latest carousel:

COPY CODE

.form-footer {
    background: url("../images/patterns/gray_pattern.gif") repeat scroll 0 0 #F8F8F8 !important;
    border-bottom: 10px solid #FAFAFA !important;
    border-left: 10px solid #FAFAFA !important;
    border-right: 10px solid #FAFAFA !important;
    color: #777777 !important;
}

Without carousel:

COPY CODE

.form-footer {
    background: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    color: #777777 !important;
}

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

[gideon1210]

Is this text put in sweetdate-child/style.css

[JohnDoe]

No.. WP-admin -> style options -> quick css

Thanks admin for this btw 🙂

[JohnDoe]

O admin i tried this code but the border fottom of form.search doesn’t change , look :

http://i41.tinypic.com/13yi3y0.png

My css :

.form-header {
border-left: 10px solid rgba(192,192,192,1);
border-right: 10px solid rgba(192,192,192,1);
border-top: 10px solid rgba(192,192,192,1);
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}
.form-search, .form-header {
background: none repeat scroll 0 0 #c0c0c0;
}
.form-search {
border-left: 10px solid rgba(192,192,192,1);
border-right: 10px solid rgba(192,192,192,1);
border-bottom: 10px solid rgba(192,192,192,1);
-webkit-border-bottom-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
border-bottom-right-radius: 25px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}

.form-search.custom div.custom.dropdown a.selector, .form-search.custom div.custom.dropdown a.current, .form-search.custom select {
border: 1px solid #ffffff;
}
.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: #ffffff;
}

[JohnDoe]

O admin i tried this code but the border bottom of .form-search doesn’t change , look :

http://i41.tinypic.com/13yi3y0.png

My css :

.form-header {
border-left: 10px solid rgba(192,192,192,1);
border-right: 10px solid rgba(192,192,192,1);
border-top: 10px solid rgba(192,192,192,1);
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}
.form-search, .form-header {
background: none repeat scroll 0 0 #c0c0c0;
}
.form-search {
border-left: 10px solid rgba(192,192,192,1);
border-right: 10px solid rgba(192,192,192,1);
border-bottom: 10px solid rgba(192,192,192,1);
-webkit-border-bottom-right-radius: 25px;
-moz-border-radius-bottomright: 25px;
border-bottom-right-radius: 25px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}

.form-search.custom div.custom.dropdown a.selector, .form-search.custom div.custom.dropdown a.current, .form-search.custom select {
border: 1px solid #ffffff;
}
.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: #ffffff;
}

[SQadmin]

Hi, I added the missing style with the form-footer in the initial code.

Cheers

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

[JohnDoe]

That border is still not changing..
i have tried editing with the quick css , also inside the app.css itself
both didn’t show any results.

please help me on this, its f*cking my home page up.

Thanks in advance.

[SQadmin]

Hi,
That css needs to be added to Sweetdate – Styling options – Quick css.
I have modified the above code and you need to add the part without Latest carousel

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

[JohnDoe]

i have carousel turned off and used your footer code in the quick css, still showing the pink bar and the arrow..

[JohnDoe]

This reply has been set as private.

[SQadmin]

It looks like you haven’t added that part:
.form-footer {
background: none !important;
border-bottom: none !important;
border-left: none !important;
border-right: none !important;
color: #777777 !important;
}

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

[JohnDoe]

ok now the bar is gone but there’s still a purple arrow , any idea?

[JohnDoe]

Found it, was the .notch

changed it in quick css too :

.form-search .notch {
position: absolute;
bottom: -10px;
left: 20px;
margin: 0;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
padding: 0;
width: 0;
height: 0;
}

[LordDax]

Hy JohnDoe, i see your work.. nice!!! can you share your css? 😉

[JohnDoe]

i could point you in the right direction to do things @lordax , i don’t want an exact copy of my site on the web 😉

[LordDax]

Thanks JonDoe you are right 😉 but i make it a different version by myself 😉

This is my version of my css. Now i need to choose a more dark color. ( i like the scroll of new user)

.form-header {
border-left: 10px solid rgba(192,192,192,1);
border-right: 10px solid rgba(192,192,192,1);
border-top: 10px solid rgba(192,192,192,1);
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}
.form-search, .form-header {
background: none repeat scroll 0 0 rgba(141, 58, 97, 0.5);
}
.form-search {
border-left: 10px solid rgba(192,192,192,1);
border-right: 10px solid rgba(192,192,192,1);
border-bottom: 10px solid rgba(192,192,192,1);
box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
}

.form-search.custom div.custom.dropdown a.selector, .form-search.custom div.custom.dropdown a.current, .form-search.custom select {
border: 1px solid #ffffff;
}
.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: rgba(31, 168, 209, 0.3);
}
.form-footer {
background: url(“../images/patterns/gray_pattern.gif”) repeat scroll 0 0 rgba(31, 168, 209, 0.3) !important;
border-bottom: 10px solid #FAFAFA !important;

border-bottom-right-radius: 25px;
-moz-border-radius-bottomleft: 25px;
border-bottom-left-radius: 25px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.8);
-webkit-border-bottom-right-radius: 25px;
border-left: 10px solid #FAFAFA !important;
border-right: 10px solid #FAFAFA !important;
color: #777777 !important;
}

[JohnDoe]

Link me your site.
mail me at arno.agten@gmail.com

[airsidworld]

Hi,
I’m using [kleo_search_members before=”” profiles=1] in a page and when I change the color text in sweetdate => styling options under button, the text in [kleo_search_members before=”” profiles=1] still white.
How can I change the font color please?

[SQadmin]

Hi, You can change search form labels color by adding this css to Sweetdate – Styling options – Quick css or in sweetdate-child/style.css

COPY CODE

.form-search label {
    color: #FFFFFF;
}

Change #ffffff with your own color

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

[msalvador29]

How do I alter the fonts for the text in the form?

http://tinypic.com/r/6qeijm/5

I was able to change the header and text to black using:

.form-search, .form-header, .form-header h4 {
color:#000000;
}

But I want to be able to change the font-family of the h4, p and label as well as the color of the label to black as well.

Also, how do I change the colour of the buttons there. I want to make the sign up button black (but I don’t want a uniform change across the site of all buttons that colour. And I want to make the Facebook button blue.

Thank you.

[SQadmin]

Hi, try to add the following lines in quick css:

COPY CODE

.form-wrapper .reg-form-details,
.form-wrapper label,
.form-wrapper h4 { font-family: Tahoma, Geneva, sans-serif; color: #000000; }

.form-wrapper .button.front-form-button { background: #ff0461; border: none; }
.form-wrapper .button.front-form-button:hover { background: #ed0058; border: none; }

.form-wrapper .button.facebook { margin-left: 10px; background: #3b5a9b; border: none; }
.form-wrapper .button.facebook:hover { background-color: #496bb2; border: none; }

Regards,
Robert

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

[Abe]

To change the color, add the color attribute to the css, like this example

COPY CODE

.form-search .button {color: black;}

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.

[csme]

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

i don’t understand this. I like the css style for the register box the theme comes with, i just want to make the register box more transparent.

[Abe]

Hello, Easy way with this CSS

COPY CODE

.form-search, .form-header, .form-footer {
    background: rgba(0,0,0,0.5);
    border: none;
}

0.5 is the transparency from 0 to 1

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