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

This topic has 25 replies, 9 voices, and was last updated 10 years by Abe.

Author
October 9, 2013 at 22:35 #4086

LKr
Participant

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!

October 10, 2013 at 05:14 #4113

LKr
Participant

Nevermind, I figured it out.
October 11, 2013 at 00:07 #4145

SQadmin
Keymaster
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
October 11, 2013 at 12:10 #4187

gideon1210
Participant

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

October 11, 2013 at 14:14 #4191

JohnDoe
Participant

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

Thanks admin for this btw 🙂

October 11, 2013 at 14:47 #4193

JohnDoe
Participant

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

October 12, 2013 at 01:02 #4221

JohnDoe
Participant

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

October 12, 2013 at 02:36 #4233

SQadmin
Keymaster

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

October 12, 2013 at 12:23 #4260

JohnDoe
Participant

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.

October 12, 2013 at 19:34 #4272

SQadmin
Keymaster

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

October 12, 2013 at 19:36 #4273

JohnDoe
Participant

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

October 12, 2013 at 20:16 #4281

JohnDoe
Participant

This reply has been set as private.

October 12, 2013 at 20:42 #4288

SQadmin
Keymaster

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

October 12, 2013 at 21:06 #4292

JohnDoe
Participant

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

October 12, 2013 at 22:38 #4301

JohnDoe
Participant

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

November 6, 2013 at 20:17 #6116

LordDax
Participant

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

November 6, 2013 at 20:20 #6117

JohnDoe
Participant

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 😉

November 6, 2013 at 20:47 #6130

LordDax
Participant

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

November 6, 2013 at 20:49 #6131

JohnDoe
Participant

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

December 5, 2013 at 23:57 #7740

airsidworld
Participant

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?
December 7, 2013 at 02:20 #7828

SQadmin
Keymaster
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
December 10, 2013 at 14:32 #8068

msalvador29
Participant

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.
December 10, 2013 at 16:32 #8071

SQadmin
Keymaster
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
December 16, 2013 at 09:49 #8314

Abe
Keymaster
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.
January 24, 2014 at 09:54 #10150

csme
Participant

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.
January 27, 2014 at 15:28 #10298

Abe
Keymaster
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