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;
}
Related
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
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 made a sign up form with a submit button at the bottom. When deploying the code on the website, the button appears to have an unwanted grey background colour but only in a WordPress article. When tested outside WordPress, it appears fine. It seems WordPress changes it for some reason. Does anyone know why this might be?
This looks like an issue with specificity. In CSS, if you have not given style to your button element, it will inherit the style of the parent element. For example: If your "article" class contains a style for button elements...
.myArticle button {
background-color: #232323;
color: black;
}
Your button in that article, if not given its own id/class will receive that style. To change this, simply give your button its own id/class.
For example:
#myButton {
background-color: "color";
color: "color";
}
Furthermore, looking at the image you linked to. The reason the two buttons are styled differently may be to do with the input type. In CSS you can also select inputs by attribute. Example:
.myArticle input[type=submit] {
background-color: #232323;
color: black;
}
Either way, I would just consider giving the button you're having trouble with, an ID. From there you should be able to manually style it. ID's are one of the most specific selectors, no styles should overwrite that. Hopefully I've understood your question correctly, and this helps.
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>