I have a Wordpress website which contains a lot of pre-written CSS-code. One of the prewritten code-snippets looks like this:
input[type=url] {
color: #666666;
... (a lot of other styling properties)
}
Now I wanted to create a design for a single page which contains an input field of type url.
<input type="url" id="input_url" class="dtd-settings-element"></input>
The problem is, that I want to style this input field completely on my own but the pre-written code is affecting that style. Is there a possibility to "deactivate" the pre-written CSS snippet for my new input field?
I know that I can overwrite all the attributes from the pre-written snippet in my dtd-settings-element class. But doing this for multiple elements would not be optimal.
Thanks in advance for pointing me in the right direction :)
EDIT:
Last thing I tried was:
input[type=url]:not(#input_url)
You can use the unique id of the input field with !important to target that element and just apply whatever style you want...
#input_url {
color: red !important;
}
You can try to override styling.
#input_url input[type=url] {
color: #000;
font-size: initial;
...
}
Unfortunately there is no way to deactivate pre-written CSS in your terms. All the possibilities you have already mentioned:
Override all class properties
Modify original styles
Change type attribute
However you can change tag from input to (for example) textarea.
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.
How do you change the color of a specific link on a post in WordPress? Do I just use CSS code right there in the post?
for example, this is what I did in the post:
<font color="FF00CC"></font>test
and
<font color="FF00CC">test</font>
it didn't work
I don't know how to give it a class name because it's just a single word so I'm not sure I can target it in the custom CSS section.
do you know how to change the link's hover, active, and visited states too? The color that I selected for the whole WordPress site I have is different in this particular word and I'm not sure why either.
I have a class name on this entire post as a side note because I did other CSS customizations on it in the custom CSS section. I just want to target this one link on this page tho.
You may do well reading through the basics of web design, or at least browsing the Basics of CSS. You should avoid using inline CSS unless you specifically need to, especially if you intend to use Pseudo-Classes such as :hover.
You may also consider reading over the basics of Semantic HTML5, because elements like <font> are obsolete and effectively unsupported.
Now to the root of your question, all you need to do is add a class to your link:
Test
Then in your Appearance > Customizer > Custom CSS you can target that with a very basic selector:
.test-link {
color: #F0C;
}
Also, since it's being selected via CSS you can now use the :hover pseudo-class, which is something you can't do with inline CSS (you would have to use inline JavaScript, which is enormously overkill for something so trivial):
.test-link:hover {
color: #0FC;
}
Take a look at the following snippet to see it in action.
.test-link {
color: #F0C;
}
.test-link:hover {
color: #0CF;
}
Test
You can write an inline CSS.
<a style="color: #FF00CC" href="http://www.google.com">test</a>
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css
I have created on css file for input type styling, by which, i am changing the style of input type textbox, and that i have used in my whole web page. But, now i got one problem, i want that, a particular input type, shouldn't be affected by my created css file. In short, i want css exception, for particular input type. So that... input styling remain same and not be effected by css styling.Any idea, how to achieve this.
Idea will be appreciated !!!
this is the code of my css file
input
{
color:#000000;
font-size:14px;
border:#666666 solid 2px;
height:24px;
margin-bottom:10px;
width:200px;
}
textarea
{
color:#000000;
font-size:14px;
border:#666666 solid 2px;
height:124px;
margin-bottom:10px;
width:200px;
}
and i want that, it should not be applied on this
<input type="image" src="images/loginbutton.png" style="width:80px;height:40px" />
The following selector will help you in CSS3 to exclude the image type:
input:not([type="image"])
If you don't want to rely on CSS3 - you probably don't, because of browser compatibility - you should change your initial selectors to be more specific like so:
input[type="text"], input[type="password"]
Edit: More in-depth explanation seems needed
The reason this will work, is because it won't specifically exclude any input types, but you will be only including the types that you do want to target.
So instead of saying I have a, b and c and I want to exclude b. You can say I want to only target a and c.
If you don't care about IE 8 and lower, you can use :not(). Otherwise you will need to either override all the styles you are applying for the image input or find some other way to make the selector more specific (such as adding a class to each input).
This might be too obvious to suggest, but could you put an id on the textarea that you don't want the style applied to? Then give this element it's own style?
Otherwise, you could try using a more specific set of descendant selectors to target that particular element.
You could give the input you DON'T want styled a class="nostyle", then define, in CSS ...
.nostyle {
margin: 0;
border: 0;
}
... or whatever you'd like non-styled inputs to be.
There are ways to do what you ask, but I would recommend not doing this. I would recommend making all of your styled elements (Including inputs, etc have actual classes in the CSS rather than just for the input. This way you can easily make items not have a class or have a different class.
I understand this does not answer your question but hopefully this will help you and if you do change it, as much as it's hassle to write more CSS, it's better in the long run, possibly something like this:
input.normal {
color:#000000;
font-size:14px;
border:#666666 solid 2px;
height:24px;
margin-bottom:10px;
width:200px;
}
input.alternate {
something:here;
}
Note, this is different than the older question How can I apply CSS on all buttons which are present in that page? because this is an already existing style. So given that a style, which we'll call "standard_label_style" already exists in an included CSS file, what can I do to say that all the labels on this page should have that style short of adding:
class="standard_label_style"
to each and every one? And yes, I know I could apply the styles ex-post-facto with a snippet of jQuery or JavaScript code. I'm just trying to learn how I'm supposed to do it with CSS.
Follow Up
I've gotten several comments that say just use syntax like this .standard_label_style, label... Unfortunately that does nothing like what I want. That would allow me to apply additional rules to the standard_label_style class, as well as rules to labels within this page, but would not allow me to apply that style to all the labels on this page. To see an example of this, here is a stylesheet and html to demonstrate. The label without a class will still not appear in red but that's what I'm hoping to have happen. I want to apply an existing class to all those labels on the page, not just the one with the class and without adding new styling on this page, the existing style should be the only style.
included.css:
.standard_label_style { color: red; }
test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
CSS doesn't really work like that.
You can apply a style to all labels directly:
label {
color: Lime;
}
or apply a class to all labels
.labelClass {
color: Lime;
}
<label class="labelClass"></label>
You can also have multiple selectors, so you could ammend your current style to be
.labelClass, label {
color: Lime;
}
What you can't do in standard CSS is something like
label {
.labelClass;
}
The good news is that there are a bunch of server side libraries which make CSS suck less and let you do exactly this kind of thing, see for example dotLess if you're using .NET which provides nested rules and a basic inheratance model.
To apply a style to every label on the page, use this CSS:
label {
/* styles... */
}
If you have an existing style (e.g. "standard_label_style") in the CSS already, you can apply that to every label:
.standard_label_style, label {
/* styles... */
}
This will affect every label through the site, so use with caution!
In your css file, can't you just put
.standard_label_style, label
{
//styles
}
.standard_label_style, label {
/* stuff */
}
I'm not sure you can... one possible workaround (feels a bit hackish though) is to attach the style to your body tag, then change the css to be this:
body.standard_label_style label{
//Your styles here
}
One of the most underused CSS tricks of all time: Give your bodies an id or class!
HTML:
<body id="standard_label_style">
<label>Hey!</label>
</body>
CSS:
#standard_label_style label{
the styles
}
will take the styles, while
HTML:
<body id="custom_label_style">
<label>Custom!</label>
</body>
Will not.
You are dealing here with CSS precedence. Declarations which are "more vague" (body tag, classes) are applied before declarations which are "less vague" (specific elements, inline CSS).
Thus your answer depends on how the stylesheet is defining label styles. If for example it says label {...}, then that's fairly specific, and your best bet is to use a more specific CSS style, see:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/ (good tutorial?)
CSS precedence
The level of "specificity" you need to override, as I said, depend on how specific your other stylesheet was. According to the link, "CSS embedded in the html always come after external stylesheets regardless of the order in the html".
There is also a chance that if you yourself define label {your custom css} that should work, if you import your stylesheet afterwards. It is what I would try first to see if it works. Have you tried this? What was the result?
Note that if you want to completely override the other stylesheet, you will need to also reset any CSS you are not using by settings its values to inherit or as appropriate.