Search Box Edits

[FilipinasForForeigners]

Hi SQ –

We would like to know (please see screenshot):

1) How to change the top color of the search box (& border if there is one) into a transparent background (we want to change the color to #363636 then set it at 50% transparency).

2) How to change the bottom color of the search box (& border if there is one) into a different color (we want to change the color to #363636).

PLEASE SEE THE NEW SEARCH BOX DESIGN attached.

Please advise us as a newbie and provide the correct path to any and all areas we need to edit whether it be in the WP admin and/or in the files on the server.

Thank you! 🙂

Attachments:

You must be logged in to view attached files.

[FilipinasForForeigners]

PS – we’ll need to know how to edit the color of the text boxes too, thanks. (y)

[Laura]

Hello, please add this to your style.css in Sweetdate-child theme:

COPY CODE

/* Search Box Borders Color */
.form-header {
border-left: 10px solid rgba(56, 49, 52, 0);
border-top: 10px solid rgba(146, 66, 93, 0);
border-right: 10px solid rgba(146, 66, 93, 0);
}
.form-search {
border-left: 10px solid rgba(221, 39, 101, 0);
border-right: 10px solid rgba(146, 66, 93, 0);
}
/* Form Background color */
.form-search, .form-header, div.alert-box, div.pagination span.current {
background: rgba(54, 54, 54, 0.51);
}
/* Border color of the buttons */
.form-search.custom div.custom.dropdown a.selector, .form-search.custom div.custom.dropdown a.current, .form-search.custom select {
border: solid 1px #363636;
}
/* Background color of the buttons */
.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: #363636;
}
/* Search Button colors */
.button:hover, .button:focus, .form-search .button, .form-search .button:hover, .form-search .button:focus, .wpcf7-submit:focus, .wpcf7-submit:hover, #rtmedia-add-media-button-post-update:hover, #rt_media_comment_submit:hover, .rtmedia-container input[type="submit"]:hover {
color: #ffffff; /* Text color */
background-color: #363636; /* Background Color */
border: 1px solid #363636; /* Border Color */
}
/* Form Footer  */
.form-footer {
color: #FDF9F9; /* Text Color */
padding: 20px 20px 10px;
border-left: 10px solid #363636;
border-bottom: 10px solid #363636;
border-right: 10px solid #363636;
background: #363636;
width: 360px;
}
/* Photos Border */
.carousel-profiles li {
border: 3px solid #363636;
}
/* Arrows Color */
a:not(.button), div#main a:not(.button), #header .form-footer a:not(.button) {
color: #F7F4F4;
}
/* Text color, change #FFF to the color of the text you need */
#header, #header .form-header .lead, #header label {
color: #FFFFFF;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[FilipinasForForeigners]

This reply has been set as private.

[FilipinasForForeigners]

Still waiting for your response.

[Laura]

Hello, is not showing the css i sent you, did you add it correctly? You can give me access to your ftp so i can check it out.

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[TheNewGuy]

I added the above script to my Sweetdate-Child theme style.css file as you’ve instructed above but I see no changes at all. How does this work? or How do you adjust the search box properties after pasting the script?

[Laura]

Hello, the code should be added with child theme activated, if it doesnt show, you need to add an !important before each ; and try again. Also cleaning cache/purge cache is needed if a caching or cdn is used.

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[TheNewGuy]

I have the child theme activated, I added a”!” before every “;” in the script I pasted, cleared the cache, opened the page in a new window and reloaded it just to make sure. I know the colors will remain the same until I change them or adjust the transparency, but where do those settings show up? I have no idea what menu or sub menu they will be in for adjustment. I know this is a simple request and I am fairly familiar with codes and scripts, but this is baffling.

[Laura]

Hello, its !important , not only !, if you prefer to share your login details of ftp and your website link so i can check it out 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[TheNewGuy]

Oh I’ll try that. I’m hosted on godaddy.com You’r referring to the login info right?

[TheNewGuy]

Ok, I’m at a total loss with this theme. I’ve managed to make a lot of changes to things I need, but there are a lot of things I can’t do still. Namely:
1.) Make the front page left side registration/search menu transparent/change color
2.) Move the front page registration/search menu over to the left a little more to make room for front page picture.
3.) Utilize another search form using all the profile fields without having them ALL show up on the front page registration/search menu when they are checked for the other menu.
4.) There HAS TO be a way to show on that search menu “Search within XX miles of Zip XXXXX” — Every dating site has this. That registration/search menu needs that.

This is just for starters. I’ve spent 4 days now trying to figure this out. I admit….I need help.

[TheNewGuy]

And the changes you suggested to the style.css page on child theme and I see no difference and no place to make the adjustments.

[TheNewGuy]

Ok, that transparency coding worked. Any ideas on the other issues I have?

[Laura]

Hello, please create a topic with all your questions as this one isnt created by you.

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts