I have a navigation, where I use:
.header-link:after { .... background-color: red; .....}
I have this in my global scss stylesheet, affecting all pages.
On one specific page I need this :after element to be different color. When I use the same code and put it in the page specific css style sheet:
.header-link:after { .... background-color: white; .....}
It naturally rewrites the original one and all pages become this new color. As the page specific CSS stylesheet is imported after the global css stylesheet.
How do I apply this new background color, so that only the specific page is affected and it's not rewriting the original one on other pages?
Why don't you use an ID on the page that goes against your rules ?
Normal Css
.header-link:after { .... background-color: red; .....}
Specific Page, but with an id="pageHeaderWhite" on ou per example, and then create the custom rule.
#pageHeaderWhite .header-link:after { .... background-color: white; .....}
Your CSS specificity triggers because a rule with an ID is stronger than a rule with only class: selector.
Hope it works!
apply different classes
use another way of targeting this element - by ID
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 want to replace the main "hero" background I have on one of my pages. Since I am using Wordpress, I am forced to use custom CSS (I cannot edit HTML).
I have tried targeting the div where the current photo is contained using class selectors as shown below:
.header .custom-mobile-image {
background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg);
}
Here is the HTML code i am trying to target:
<div class="header custom-mobile-image" style="background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/education-books.jpg"); background-color: rgb(106, 115, 218); padding-top: 74.5938px;">
The link to the page itself: http://thenovelcolumn.com/the-10x-rule
The target photo is the first one on the page with three opened books in the center.
I expected my CSS code to change this photo to whatever the link specifies it to, but the photo remains unchanged.
Your selector should be .header.custom-mobile-image (i.e no space between the two classes - they both are assigned to the same element, the space would mean a parent / child relation)
And you should add !important in that rule to override the more specific style attribute.
That's because styles from "style" attribute have bigger specificity than any styles you might add with classes and even id's: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
So in this case only way is to use !important:
.header.custom-mobile-image {
background-image: url(https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg) !important;
}
here we go:
.header.custom-mobile-image {
background-image: url("https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-
Rule-Image-2-e1555476700855.jpg") !important;
}
Writing inline css (style="some:css;") is not the best idea. It will allways neglect styles from your .css file.
As someone already mentioned it's about specificity.
Weakest are type selectors (html tags and pseudo elements), then goes classes, then id's
if you have inline css, it will apply styles over .css file. Only thing stronger than inline css is using !important
I am using a child theme of "freestore". (https://en-gb.wordpress.org/themes/freestore/)
I am attempting to add some content to one of my pages using simple HTML and CSS.
I've managed to successfully change CSS styles in the theme via the style.css, however I am trying to add my own HTML and then CSS to style it.
I have created the page 'home' and through the wordpress tinymce text editor I can add my HTML fine. When I try to add the CSS via my style.css, it doesn't apply the styles. I can however add the styles inline, but I would like to add the styles externally.
Example:
On the wordpress text editor I would add the line:
<div id="cssTest">TEXT</div>
In my style.css file I would add:
#cssTest {
background-color: red;
}
The CSS style is not applied. However adding the following to the HTML editor will work fine:
<div id="cssTest" style="background-color: red;">TEXT</div>
My question is either:
How can I apply my styles via an external stylesheet?
Should I be creating my own template for that page and adding the HTML there?
check if child themes style.css has Text Domain: freestore-child parentthemename-child. Any css id/class element you add would be implemented.
Best way would be to create custom.css file and enque it in your child theme's functions.php via wp_enqueue_style function.
I believe it's best practice to create page template for specific pages like home.
Most likely there is a CSS rule that belongs to your original theme which is more "specific" than the rule you are trying to apply. To check this, inspect the element with the browser tools and look which CSS rule is applied to that element.
If that rule would for example be
.content main .section_1 .gxt1 {
background-color: black;
}
, you'd have to overwrite it adding a rule which has a higher specifity, like
.content main .section_1 .gxt1 #cssTest {
background-color: red;
}
If the original rule contains an !important, you also have to add !important. So to overwrite
.content main .section_1 .gxt1 {
background-color: black !important;
}
, you would need something like
.content main .section_1 .gxt1 #cssTest {
background-color: red !important;
}
How can I turn all text on a page to a specific color?
Content (HTML and CSS) is user generated, so I cannot control classes for specific elements.
Since the page's html, classes, etc can vary tremendously (user generated), I can't write CSS that will target elements individually.
Originally, I had tried to use !important on the body like below, but forgot that any targeted CSS would override it.
body {
color: white !important;
}
Is my only option to use javascript to apply an inline style to every element?
Use * selector, not only body.
* {color: #fff !important}
You can use Universal selector (i.e *) selector to select any element on page:
html * {
color: white !important;
}
OR You can use directly use like this:
* {
color: white !important;
}
From the statement user generated, we can see that users will be able to add some inline styles, even !important ones. Then, your only solution is javascript (jquery example):
$("*").css("color", "#FFF");
Or filter the html to remove the styles with HTMLPurifier, which you should be using to filter the javascript anyway (to avoid MANY kind of attacks on your web.
OLD ANSWER:
Use this within your html's head (not in the stylesheet) because it has preference over the styles in separated files:
<style>
* {
color: #FFF!important;
}
</style>
Hello I want to added a pop-up login screen using downloaded code. However the problem is the CSS file that comes with it conflicts with my exiting one.
Is there any way to have a style sheet just apply within a set of div tags or any other method to make this work? thanks.
You can't make a style sheet only apply within div (or any other) tags, but you could put your login code within a div, give it a specific id (say 'login') and then place #login before all the styles in the login CSS. This will make them only applicable within that div.
So, if for example your login CSS has a line:
form { border: none; }
it would become:
#login form { border: none; }
...and the same for every other entry. That's the easiest way I can think of - assuming of course you can't just have the pop-up load a separate HTML file and not include your main CSS.
You can use Inherited CSS Classes for example -
.newParentClass .theConflictClass{
/*Override unnecessary CSS properties and use the one you wanted*/
/*In case if this doesn't work you can fallback to "!important" */
border: 1px solid #f00 !important;
}