how to change font color in a column when I hover over anywhere on a section in wordpress? - html

I made a transparent menu with white text on it and when we hover it the whole topbar becomes white and the text becomes invisible because of the same color.
I want to change the font colors to black of all the items in the columns when we hover anywhere on the top bar.
I am using elementor.
This is my website:
http://ha123.epizy.com
Please suggest if there is a plugin for this or any code. As a newbie I would be really happy to learn from you guys.
Thanks.

You could solve this using custom CSS code. If you use Elementor Pro, you could put this CSS inside of the plugin somewhere, but if not you can just add it either in the Customizer in Wordpress, or in a custom (child) theme.
Something like this could work in your case:
.elementor-widget-ekit-nav-menu:hover .elementskit-navbar-nav > li > a {
color: black;
}
You might actually also be able to solve this using Elementor itself in the style settings somewhere, but that depends on how everything is set up and which elements you are using.

Related

How to change button color inside anchor and menu-separator class in wordpress

Hey guys I am new to wordpress and have this task of getting green button to blue. So I found this button but its in anchor tag in class menu-separator is there any way that I can type custom css to make color blue.
right now I have this
.menu-separator .button{background-color: blue !important;}
Wont work because a is missing.
First off you put
.button
You need
a button
Also you cloud use this
<buttton style="background-color: green;">blah blah</button>
Though obviously you'll want to use CSS but just to test to make sure the problem isn't coming from somewhere else try that as well if the whole buttoninstead of .button doesn't work
Also we can't see all your code so this makes it a little harder to help because I don't know how nested the button is.

How to change text box font color if font color is white(default by theme)?

I installed triggered scrollbox and it's working but text box where you have to write your e-mail has white background and white font(font for whole theme is white). SO i would like to change it to any other color.
Thing is that i can't acces CSS to change it so i have to do it somehow in HTML but i don't know how.
This is the code:
[gravityform id="9" title="true" description="true"]
So question is how can I modify this gravity form code that change color of font?!
Vital information: other solutions can't help(CSS, etc.) bcs wordpress there is bought and it's pretty limited so i'm looking for a solution in HTML that can be implemented particulary in this line code.
You can set styles for input element in your HTML like this:
<input style="color: pink !important; background-color: black !important">
May be you need (may be not) to add !important to your styles to overwrite existing ones.
You can install plugin for custom css and add your custom css there to overide gravity form css.
Here is one simple plugin to do that: Cssor
Write the below css in your style.css
input{
color: #000; // if it is not applying, use ! important
}
It works for all input boxes

custom CSS - stuck, i've tried all sorts of combinations

I know this must be simple, but I am just absolutely stuck! I want to change the below to www.readyprint.biz:
When you hover a button (e.g. products) it’s purple/lavender – i want to change it to blue
I want to change the social icon colours – at moment it’s purple/lavender, i want to change it to white
I've tried:
.color-linen #menu-primary li.current-menu-item>a:hover{
background: #42b1fe;
}
But that doesnt work.... same logic I applied to the social icons. I right click the icons in browser, click inspect, and try and figure it out on the CSS section.
please help!
This is a wordpress site by the way, and I'm using a CSS plugin to handle the CSS.
Thanks all!
I think u have already fixed the issue didn't u?
When I visit readyprint.biz the menu item is blue when I hover the mouse.
Maybe u should refresh your webpage.
Edit:
To change the icon to white.
Go to the code:
color-linen #footer a:focus {
color: #565656;
}
Change the #565656 to #000000

css element dissapears behind padding border

I need your help.
The Title in the green Box "News" appears right under this Link.
http://www.mjart.ch/category/news/
But because of this weird Template I'm using, there are sometimes some imperfections. On this Site here
http://www.mjart.ch/portfolio/
the Green title seems to disappear behind the padding border. I really don't know why.
What I found out is that there are 2 different CSS styles. The first one that works is a .blog-title and the second one is a .single-title. But both are same styled. I would be happy about some help.
Hi if you dont want to change the structure of the template you can add this css rules
.page-id-21 .single-page{
margin:0;
}
.page-id-21 .single-page .single-content{
margin-left: 25px;
}
I added a .page-id-21 class, otherwise in the contact page you will add a margin.
This can be a solution, another is to search the correct template page, if it's a premium plugin it will have it, and you dont need to add the css rules.

Cannot find where this color is declared at

I have inherited a wordpress site using a theme. There is a background color on hover in the portfolio section of the site that we want changed. I cannot find where this color is declared at so I can change it. I thought it was an element called gallerySelectorList but nothing I did changed the color. The demo site of this theme is here : http://demo.pixelentity.com/?surreal
If anyone can help me that would be great I am losing my mind trying to track this thing down and change it. I posted on the creator of the theme's forum but got no where.
Within the Chrome Developer Tools you can invoke the :hover state of any element. In this case, you want to do so for the li wrapping the link. When do we do this, we see the color is set here:
.gallerySelectorList li:hover {
background: #83103e;
}
This code is located within your HTML file:
It looks like it's not actually a hover, but more so being faded in background color. Found then pink color in the class thumbTextWrap.
.thumbImage .thumbTextWrap { background:#8b133c; }
When I changed that or removed it changed the background hover color as needed in the dev tools.