I have edited my custom CSS to include ::selection{color: white; background: #2f3f58;} or multiple similar variations including copy/pasting and then editing code from W3Schools, W3C, stack overflow, and other sites. The code does nothing. I am using the http://alxmedia.se/themes/hueman/ Hueman theme and it has almost the exact same code that seemed to be working. So i copied this code into my custom CSS and edited it and that did not work either. Finally i disabled the theme CSS pertaining to selections. No matter what I do my selection color is the same red set in the theme options menu as a primary color. The hex for that red is not in the theme CSS however except in the commented out selection element that I am replacing. Is there any way to override the highlight color using CSS that is not the ::slection: element or am I using the element wrong?
the code is now
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
much thanks to #citizenen and is wonderful suggestion
That's the right element for selection color. You can use the "!important" property to raise the specificity and force the style over others. Also use "background-color" instead of just "background". Try changing it to this:
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
More on !important here: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
You are missing a closing brace in your CSS file (custom.css) that's preventing styles after that point from applying correctly. In the future, copy your code into a tool like Lint (http://csslint.net/) and it will find the errors for you.
Cheers!
Related
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
I've taken a look at many questions that I thought were a problem similar to mine but none of them worked for me which is why I'm posting this. I'm still new to programming (just know the basics) so please bear with me:
I own a website All Gaming Everything
please open any post on the website
The problem I was facing was that all of the <a> elements on the website were grey in color so using the custom CSS option in my wordpress theme, I just did
a:link { color:white; }
Now while this worked like a charm and all of my elements have the same color (white), I want the color of a:link as red on ONLY the body of the article since white prevents the visitor from seeing if there is any link on the post. I tried changing the aspects using inspect element and custom CSS but nothing seems to be working for me. I have access to both custom CSS and custom HTML editors on my wordpress theme so I'd really appreciate any help with this and once again sorry if I talked noobish (I am a noob).
You can use a css selector inherited. That means if you have a container with a <a> element as child for example
<div id="container">
Link
</div>
do in your css
#container a {
color: #ff0000;
}
or
div a {
color: #ff0000;
}
now all <a> in #container got red color, if no other declarations from wp stylesheets exists.
Take a look to some great websites like w3schools.com and get the basics of css selectors, childs, parents and much more.
Since you are using wordpress and the wygiswys wrap text inside <p></p> you can try:
p a:link{color:red};
and it will change the color of each link inside a paragraphe.
I visited your site and noticed all articles are wrapped in a div with a class "td-post-content". This way, all you have to do is create a CSS rule that targets anchor tags only within those divs.
Here:
.td-post-content a {
color: red;
}
It workd like a charm. I tested on the post below which has a link within the article body:
By the way, you don't need to use a:link on your CSS statements. Only a will do it. ;)
Cheers!
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
This question already has answers here:
Chrome Developer Tools: How to find out what is overriding a CSS rule?
(3 answers)
Closed 7 years ago.
When fiddling around with styles of sample code, I find the code has styles that will override my style because they will use a higher priority reference (e.g.: .div .class > .class).
I will encounter situations like this:
How do I find out what style is overriding my style? I want to avoid using !important because eventually I'll end up in the same situation.
EDIT: I'm not asking why this is happening. I already know about priority, hence why I mentioned that .div .class has a higher priority than .class. I want to trace what is actually being used instead of simply telling me it is "inactive". Also, I already know about Chrome Developer because the screen shot is from Chrome Developer.
EDIT: actual problem fixed, but the question still remains... is there an easier way to see what causes the override?
Fix: I just needed the selector in the proper order. .box first, then .box-blue.
In devtools, in the style inspector, choose Computed. Find the property you are interested in and click it. You will see a list of all the rules that apply to this property, with the active one at the top, and each with a file/line reference to where it is defined.
Consider the following HTML:
<style>
#foo { color: red; }
p { color: blue; }
</style>
<p id="foo">What color am I?</p>
You would see the following:
You can scroll up or down the styles tab in Dev Tools you use from the above example to find the selector overriding .box-blue. Once you found the enabled border-color in another style, then you can determine what selector overriding it.
When you styled .box-blue with border-color: red for example, it could be overriden with another style with the possibly same property, border. Because border: 1px solid blue could be a shorthand for border-width: 1px + border-style: solid + border-color: blue, Then it could be the possibly overriding the previous style.
There are browser extension that help with this. I use "Web Developer" in Firefox, but there are many others.
Chrome also has View > Developer > Developer Tools.
If you mouse over an item on the screen they will tell you its path (html > body > div.blah > span.foo) and what css styles were applied to that item.
There's no definitive way to infer which selector overrides a given style (as far as I know), but the dev tools interface is intuitive enough that it's normally straightforward to work it out.
Your overriden style shows with a strike through. To find out which selector overrides it, look for an unstruck version of the same rule.
Sometimes this is as easy as seeing:
color: red;
And having to look for a selector with:
color: blue;
Chrome dev tools actually sorts the selectors by priority, so if you find an overridden, style you can be guaranteed that the override will be in the same selector or in one of the ones above it.
But you'll have to remember that some rules are composed of others and you won't always find a corresponding rule with the same name. In your example your border-color rule is being overriden by the border rule from the above selector. The border rule is shorthand for specifying border-width, border-style and border-color.
In your image you can see the .box-blue class's border-color: #bce8f1 rule has been overridden by the border: 1px solid transparent (I cannot see the selector). You can see CSS files of the overridden CSS rules right side of the selectors in Inspect tool.
Sometimes CSS rules might be changed by the JavaScript. It might be shown as inline CSS.
In Firefox Developer Tools you can find it out in one click near the overridden property in the Inspector:
Overridden declarations
Starting in Firefox 43, overridden declarations have a magnifying
glass next to them. Click the magnifying glass to filter the rule view
to show only the rules applying to the current node that try to set
the same property: that is, the complete cascade for the given
property.
This makes it easy to see which rule is overriding the declaration:
https://www.youtube.com/watch?v=i9mDVjJAGwQ
Here's how it looks. Check out the video to see it in action.
Here is a simple explanation.
Certain selectors will override existing ones for example
p {
color: green;
}
.Paragraphs {
color: yellow;
}
#paragraph2 {
color: red;
}
<p>Lorem Ipsum</p>
<p class="Paragraphs">Lorem Ipsum</p>
<p id="paragraph2" class="Paragraphs">Lorem Ipsum</p>
<p class="Paragraphs" style="color: blue">Lorem Ipsum</p>
As shown the selector p is overridden by selector .Paragraphs and the selector #paragraph2 overrides .Paragraphs and the style attribute overrides #paragraph2 and of course any selector with !important will override mostly everything.
I have this site:
http://dl.dg-site.com/
In this site we have a menu arrow gray colored ...
How can I change the color of the white arrows without modifying anything else?
I found this code here ... and do not change color but only arrow
header,
nav>ul ul,
#magic-line,
#topbar.announcement_bar_style_3,
#topbar.announcement_bar_style_2,
#topbar.announcement_bar_style_1,
.testimonial_small p,
.ABs_pricing-table-2 .ABs_pricebox_feature:last-of-type{
border-bottom-color:#969696 !important;
}
Can you help me to solve this problem?
Thanks in advance!
#magic-line {
border-bottom-color: #fff !important;
}
The !important declaration is required since to override the rule you've shown in your question. Generally you should avoid using !important.
I suspect this is an off-the-shelf WordPress theme though, and the rule you showed in your question is injected into the page by the theme, so you may not be able to edit it directly. In which case the !important will be required, and you will need to ensure that your new rule appears after the rule that sets the gray border color.
If for some reason you can't load your custom styles after the theme generated styles then you will need a rule that is more specific to ensure it takes precedence, e.g.
nav #magic-line {
border-bottom-color: #fff !important;
}