i got a little css problem, when i try to change something for just specific page or post. Like in this case i would like to change the background color of the entry content of page number 2458. And its working
#post-2458 .entry-content {
background-color: #fff;
}
But right here i use same logic and i try to change the col 8 background color for page 2458, but it does not workss. Sure if i do it without #post-2458 it changes, but it changes for all pages and i would like to do that only for page of that id.
#post-2458 .col-md-8 {
background-color: #fff;
}
Am i missing something out? could you advice how to adjust that code pls? BTW im using custom css plugin to put in that codes.
Thank you
Try overriding it with this:
#post-2458 .col-md-8 {
background-color: #fff!important;
}
Try add some id to div which you want to change and operate directly on id. Don't use col-md-8 to avoid troubles. When you want to make changes only for one element id is the best option and I has a bigger importance than class and don't use !important if you can fix something smarter.
If I were you I would do few things:
Add !important to see if it's all about the style weights.
#post-2458 .col-md-8 {
background-color: #fff !important;
}
Go to inspect tab of your browser and check which styles overrides yours or which styles you just overridden. In most cases you can override other styles just by correct reference.
For example this might NOT work:
#post-2458 .col-md-8 {
background-color: #fff;
}
But this could work, since maybe you are trying to override background-color given by the reference .col-md-8.sidebar-right
#post-2458 .col-md-8.sidebar-right {
background-color: #fff;
}
There are lots of maybe's, since it is hard to give you proper solution without a link to the website in which your problem occurs. Check the weights and make sure to override correct styles. I hope it helps!
Related
I have some CSS that colors a row on my table on hover.
tr:hover {
background: gray !important;
}
However, it also highlights the filter row on the table. So I did Inspect and find it has <tr class="MuiTableRow-root MuiTableRow-hover"...etc
So, my question is, how can I modify the above code so that it applies only to that class shown above?
Edit: First attempt at apply class.
.MuiTableRow-root MuiTableRow-hover {
tr:hover {
background: gray !important;
}
}
As pointed out in the comments, please take a look at the documentation for class selectors.
You are having trouble to combine the class with the element's tag.
In this case they are written together like this:
tr.MuiTableRow-hover:hover {
background: gray !important;
}
When the HTML tag has the class: Write the tag and . and then the class
When the HTML tag has some element inside with a certain class, separate them with a space
Do yourself a favor and search for CSS tutorials to teach you the basics. It's not very hard to learn if you can spare the time
A little bit advanced is trusting CSS Specificity and leaving out !important. If your selector is more specific (or your CSS was loaded later) your style will be applied even without use of !important.
tr.MuiTableRow-hover:hover {
background: gray;
}
The css rule should look like this:
tr.MuiTableRow-hover:hover {
background: gray !important;
}
Note that using !important is not best practice so better if you try to avoid it if possible
I try to override Bootstrap styles and all works perfect. But I noticed that when the user presses a primary button
<button class="btn btn-primary">Test</button>
It shows an blue outline and I can't remove it. I tried to override a class:
.btn:focus {
outline: none;
}
But it doesn't work. It still shows this f***ing blue outline. And I can't find where it declared because I am a noobie in CSS.
P.S. If it can help I use the Chrome browser v.56.
Not the best way, but try !important.
I guess your bootstrap-styles are loaded after your other styles so you get overwritten.
EDIT: also consider using more precise selector´s would be a better way to go (see comment)
also check this
There are some ways to achieve that. These ways intended to uprise specificity of selector. The easiest way is to use !important for css rule:
.btn:focus { outline: none !important; }
Try this:
Worked for me. It's box shadow
.btn-outline-primary:focus, .btn-outline-primary.focus {
box-shadow: unset !important;
}
I have been testing Disqus and noticed I can hardly see the comments I have entered. They seem to be in a white/pale grey font.
Is there any way to change the font color to black
here is the link
http://w3code.in/2015/10/send-private-message-using-facebook-api/
I added this snippet to the main css file to fix it for good:
#dsq-content #dsq-comments .dsq-comment-body {
color: #fff;
background-color: #ffffff;
}
Adjust the color values to your preference.
But for Chrome, the issue might be the order of execution. Javascript is executed after the CSS, which may be overwriting your customization. You'll have to change styles using javascript and then put it after disqus script.
it's really easy to do:
#disqus_thread {
background: red;
}
You can use elements' inspector to find classes and ids. Have fun!
I'm having problems with my CSS markup in my code.
I'm building a control and my plan is to add a standard class to it so it has a fixed layout and add any userdefined css classes behind it, to personalise the control. but during my tests I noticed a problem which I can't resolve.
when I have an element like this
<div class="test1 test2"></div>
and underlaying code in another stylesheet file.
.test1
{
width: 200px;
height: 200px;
background-color: red;
}
.test2
{
background-color: yellow;
}
then it doesn't matter if I put test1 first or test2. the div will always be yellow only because test1 is written last on the css file.
if I replace test2 with test1 in the css file itself then the div will always be red.
how can I make the background-color overwrite incase its added a second time depending on the order its written in the className itself?
I also want to take notice I don't want to force users to use the !important tag. I already know about this and yes that works fine but I need it without. Any ideas on how to resolve this issues is welcome. I'm open for alternatives
You could make it so .test2 when combined with .test1 becomes yellow
.test1.test2{
background-color: yellow;
}
a better way tough is not to work like this at all. have a read of this article instead. It explains a technique for CSS called BEM (Block, Element, Modifier) which is pretty awesome. When trying to modify a existing style it will look like:
.test{
width: 200px;
height: 200px;
background-color: red;
}
.test--warning{
background-color: yellow;
}
and your div will look like <div class="test test--warning">
You can twiddle the precedence of the class's selectors like this:
.test2[class*=test2]
{
...
}
This should make class test2 override other classes that have only class name selectors.
(sorry, this part is not correct)
If you want to lower test1's precedence, you could do it like this:
[class*=test1]
{
...
}
(I haven't tested this, you might need to name it *[class*=test1] instead)
I been researching for a long time and posted here because I couldn't find a good answer. thx to the answers and responses here I was able to find an article over the problem I'm facing here CSS howto
What I'm trying to do is not possible because of the order css in generated. What I wanted is my css to work between browser default and external or internal stylesheets. I will look for an alternative solution to my project.
I'm making a widget for my user so they can include in their website.
In file style.css which hosted in my user website:
p {
font-size: 0;
}
In my widget - widget.css:
#mydiv {
font-size:12px;
}
However, when user include my CSS widget on their website. My CSS won't work and the one work is style.css. How to make my widget.css always work on top ?
I tried !important and it not work:
You can use !important next to the declaration; like this:
#mydiv {
font-size:12px !important;
}
Some people will claim that using !important is always bad practice but that's not the case. In fact, when making a plug-in or widget that's going to run in other people's sites, then that's when it's actually good practice. Take a look here: http://css-tricks.com/when-using-important-is-the-right-choice/
Edit: after seeing your image in the question, the problem is that it seems the ID ulcfrmcontainer refers to the container of the list and not the actual li elements within the containers. Try with this:
#ulcfrmcontainer li{
font-size:12px !important;
}
p is an existing html balise, and mydiv is an id, probably which select the parent div of your paragraph.
CSS apply rules following priority levels.
Here more informations:
W3C wiki about selector priority
Tips and tricks about it
Try to solve your problem with those informations, and use "!important" only if there is no other solutions.
(Good article to determine if use !important is the right solution :))
Hope it will help you to understand and resolve your problem :)
Wrap your widget in a div with an id that is unlikely to be used in the users site like 'widget-wrapper-div'. Or you could be more descriptive by including a one or two word description of the widget in the id such as 'partsearch-widget-wrapper'.
<div id="widget-wrapper-div">
<div>
Widget code...
</div>
</div>
Then in your CSS you would start each style rule with #widget-wrapper-div
#widget-wrapper-div div{
font-size: 12pt;
}
You have 2 options:
The right way:
1) Make sure your path to the element is exactly right. For example
.wrapper div p {}
2) Make sure your css file is include AFTER the other one
The other way (if the 1st doesn't work)
Use !important. Like this:
font-size:12px!important;
EDIT
Looking at your latest screenshots it looks like you're adding the font-size to a div with id #ulcfrmcontainer instead of to unordened list.
Might wanna try:
#ulcfrmcontainer ul {
font-size:12px;
}