Hi!
I’d like to tweak two things on my site and am not sure how. I’d appreciate suggestions!
It’s about this site: http://www.silkmanagement.ch/
1. The email and phone number have a black background. I did this within the text widget. I’d like it to turn hot pink (maybe with black writing instead of white) upon hover. I tried adding something like background-hover: #f81289; but it didn’t work. How would I best style this?
2. I created my contact form 7 with a black background. It’s nice, but obviously now the problem is that any writing isn’t visible. People would be typing their message blindly. Can I make it so that any text typed into the form is white?
Thank you!
Jele
Hi Jele,
1. Background Hover isn’t a valid property. You’re looking for :hover. Please open the widget that has the background you wish to change on hover and head over to the widget styles sidebar. Open the Attribute settings group and set the class to background-hover and then save.
Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:
.background-hover:hover { background: #f81289 !important; }How does that look?
You might also need to install the SiteOrigin CSS Editor.
2. Open your custom CSS and replace:
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { background-color: rgba(255,255,255,0); border-left: #f2f2f2; border-right: #f2f2f2; border-top: #f2f2f2; color: rgba(255,255,255,0); width: 100%; }With:
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { background-color: rgba(255,255,255,0); border-left: #f2f2f2; border-right: #f2f2f2; border-top: #f2f2f2; color: rgba(255,255,255,1); width: 100%; } input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus { color: #fff; }Hi Alex, thanks so much.
1. Almost, not quite. :D It works great, but it’s turning the widget background pink, not the text background. I was thinking of simply this: http://www.silkmanagement.ch/wp-content/uploads/2017/05/Text-BG.jpg
2. Perfect, it looks awesome! Thanks
Hi Jele,
1. Ah, sorry about that. Please follow the previously outlined steps to set a widget class but this time set the class to text-hover and then save. Please navigate to WP AdminAppearanceCustom CSS and add the following CSS:
.text-hover a:hover { background: #f81289 !important; }How does that look?
Hi Alex, thanks! Unfortunately it doesn’t appear to make any difference though. :(
Hi Jele,
Where did you add the text-hover class? I ask as I can’t seem to see it in your markup. To clarify, the text-hover class is required for the CSS to be able to work.
Hi!
I added background-hover to the widget class under “atrributes”. (This must be correct because I did not change it from when I initially tried and got the pink widget background.)
I deleted the custom css though when I realized it didn’t work (to avoid clutter)
Hi Jele,
The selector was changed in my previous response to text-hover, if you would like to retain the background-hover class please use the following CSS instead:
.background-hover a:hover { background: #f81289 !important; }Oh of course. I should have seen that. Thanks, everything worked perfectly!
There is another issue with that part of the site though, can I ask you about it in this thread?
I used the layout slider to place the email and phone number in the center (more or less) underneath the text block. But it just doesn’t stay there. It moves around seemingly at random. Sometimes when I refresh or load the site, it’s in the middle, right now it’s way to the left. What can I do about that?
Hi Jele,
We’d like to help you, but can you please start a new thread with your question? This will allow others who have similar issues to find related posts easily. Sorry about this!
Page: New Thread
If you’re a premium user, you’re entitled to priority email support. If you would like to make use of that please follow the instructions found on your dashboard Page: Dashboard
Will do!