in my css file there is a class called .header
This class also exists in WordPress' stylesheet
as a result, both style files I call have the same class and the last one has an effect.
as a result, unwanted results occur
the solution is probably this;
#custom-div .header{
color:red;
}
but my style file is too big. It will be very difficult to add this to the beginning of the whole classes.
Is there any other solution?
Wordpress Admin Dashboard > Appearance > Customize > Additional CSS >
#custom-div .header{
color:red !important;
}
This code copy paste and Published.
1- You can change the name of your own style css code.
2- You can write the following code to the style css code in the related page.
#custom-div .header{
color:red !important;
}
Related
I am using a template (A). This has some CSS files and I want to inlcude an other template (B) in this template and the other template has also some CSS files. By including the css of template B in A, some forms are looking different because of the new CSS of template B.
How can I inlcude all CSS files of both template without replacing some forms.... Can I set a priority to one CSS? Or is there a tool where I can put more CSS files which will compress all CSS files to one?
Or can I use one CSS file to only one DIV?
CSS means "Cascading Style Sheets". Here "Cascading" means that If something is found two times than the last has priority. So link the CSS file at last which you want to give priority. You can also use !important to give priority. For instance:
color: red !important;
Here red will be used overall.
I’m not completely sure what you are trying to do.
However assuming you want to link more than 1 css file to page. You could play with priorities of CSS selectors. An ID for example has more priority than a Class. You could also make them more specific.
For example:
body ul li span {
Color: red;
}
Span {
Color: blue;
}
Here the span should be red
You should try to include the CSS you want for your login page only (template (B)) into your login page HTML only, like for instance:
index.html file :
<link rel="stylesheet" href="templateA.css">
login.html file :
<link rel="stylesheet" href="templateB.css">
The objective if simply to avoid conflicts between both template, you cannot use both of them on the same page it will cause a lot of bugs and slowdown your website a lot.
Please feel free to ask me in the comment if I'm not clear about anything.
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;
}
Is it possible to use existing css class as content in another class ?
I mean something like:
/* Contained in some library: */
.class1 { text-indent: 100 }
/* I can not change this: */
<span class="class2">
The definition for class2 is also contained in another library. So I can not change it directly.
/* But I want to do something like that in my CSS file: */
.class2 { .class1 }
I know it is not possible in that form. But maybe one can use some trick to achieve the behaviour without copying of the content of class1? I need this because I want to redefine class with content from another CSS class. Our project uses jQuery as well, but I would do it rather with CSS.
EDIT: I should explain more, I could not change how .class1 is defined, because this class is in a library, and I could not change mark up on span class.
It is imposible to do in standard CSS what you are commenting, as there is not pure inheritance.
Despite it doesn't apply with your code restrictions, this is the closer way to do it:
.class1, .class2 { text-indent: 100 }
.class2 {
/* Styles you want to have only in class 2 */
}
<span class="class2" />
On the other hand, as #A. Wolff has pointed out, you can still use js/jq to add class to specific elements: $(function(){$('.class2').addClass('class1')}); Then just set a specifc CSS rule for these elements.
In case you don't want to use JS, for something like that you'd need to use SASS or similar, which "compiles" to CSS.
CSS has no means to reference one rule-set from another.
Your options include:
Using multiple selectors for things with common rules
.menu,
.nav {
font-weight: bold;
}
.nav {
display: inline-block;
}
Using multiple classes on a single element
.menu {
font-weight: bold;
}
.nav {
display: inline-block;
}
<li class="menu nav">
Generating your CSS programatically
For example, with SASS
#mixin menu {
font-weight: bold;
}
.nav {
display: inline-block;
#include menu;
}
Yes, it is possoble.
Write:
.class1,.class2 {text-indent:100;}
.class1{color:red;}
.class2{font-size:30px;}
More info here.
Another option is to use LESS to do this. It's a very good tool and do some improvements to your CSS development.
Take a look at theirs documentation, it's very nice. About the compilers, I use Koala and recommend it.
You mentioned in one comment that you cannot use LESS, but I think perhaps you misunderstand how LESS (or another preprocessor) could help you. That is, you have not given any reason that I can see why you cannot use it (even in your update). As I understand your problem, you have the following parameters:
Cannot change html
Cannot change the css file that defines .class1.
You can change the css file that defines .class2.
If the above is correct, then here is how you use LESS (version 1.5+). You make your file defining .class2 a .less file. Then, to keep it clean, I believe you are going to have to do a two step process (it may be you can do step 2 without step 1).
Step One: Make the CSS into LESS
Create a file, let's say CSStoLESS.less and put this in it:
#import (less) /path/to/your/your-css-defining-class1.css;
This will import the css and make the processor consider it as LESS code. It is possible that the next step does that as well, I have not had opportunity to test it out.
Step Two: Use that file as reference in your LESS
By doing this in your .less file defining .class2:
#import (reference) /path/to/your/CSStoLESS.less;
.class2 { .class1; }
You are importing the previous css file that has been converted to less as reference only. This prevents you from getting duplicate selectors for .class1 or anything else contained in your original css file. Now you can use an inclusion of .class1 just like you show in your question to make the properties of .class1 become that of .class2.
It may be that this alone works:
#import (reference) /path/to/your/your-css-defining-class1.css;
.class2 { .class1; }
What I don't know is if the (reference) inclusion also defaults to making .css into LESS code like the (less) inclusion typecasting does in step one. I need to research this out more. If so, then it is a one-step, not a two-step process.
The best way would be to redeclare class1 just below your custom css ends and override it with the values that you are looking for. This way, the inherited values, that you cannot change + the values that you need to incorporate, both shall apply.
I am assuming you want whatever is in .class1 plus some extra properties in .class2
One way is to simply apply both classes to the element you want..
<span class="class1 class2" />
another is to name both classes when setting the properties
.class1, .class2 {text-indent: 100}
.class2{/*extra properties here*/}
You can define 2 classes in this way
.class1, .class2 { text-indent: 100 }
And it will work for you
Moreover if you want to ad some more in class2 then you can define it
.class2 { /*whatever you want here*/ }
Others mentioned SASS and LESS. Here's the solution of Stylus:
.class1
text-indent: 100
.class2
#extend .class1
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;
}
I am working on a website management utility for a friend of mine. In the index page, I have a link to a CSS stylesheet that came with a template I've bought. I use CKEditor to edit files, but the CSS stylsheet applies many bad styles to the editor.
I am not quite familiar with CSS (that's why I bought the template...) and I want to unlink the stylesheet only from the div/tag. I don't want to unlink it from the whole page, because it uses the stylesheet.
<div style="UNLINKED"> [CKEDITOR CODE GOES HERE] </div>
I don't know if it is possible, but I need to do something with it.
Thanks!
You must override the styles, there is no way to "unlink" a specific element from the page styles.
Therefore, for example, if your stylesheet defines bold text for all paragraphs like this:
p { font-weight: bold; }
you have to override that to bring the paragraph back to normal text:
div.unlinked p { font-weight: normal; }
Assign a class to the div and create style for it- the styles defined in the class will override global styles.
div.nostyle {
margin: 0;
padding: 0;
text-decoration: none;
border: 0 none;
}
<div class="nostyle">CKEDITOR CODE</div>
It cannot unlink the stylesheet once if was linked on the beginning.
Only some circumstances can help:
put the all the <div ... </div> period into an iframe.
or override all the style elements of the div
In this case, I would advise embedding the code into an iframe element. Otherwise, there is no way to avoid the cascade without overwriting every rule affecting the content with more specific rules.
ok, so the solution may be different for every dev. if it's ckeditor, try deleting the table selectors. for me the problem was with the <td> selector. thanks for the answers...
Easy! All you have to do is delete the code at the top of the HTML! Once you do, the page automatically unlinks from the stylesheet. No need to override what was provided. :)