I have some external CSS file with this class defined
.abilityButton {
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: black;
visibility: hidden;
cursor: pointer;
margin: auto;
float: left;
z-index: 10;
}
Then I have the same class defined in the main file, with some properties, that I need to define dynamically by php. Looks like this:
.abilityButton {
width: ".(($inner_cell_space/4) * 0.92)."px;
height: ".(($inner_cell_space/4) * 0.92)."px;
border-top: solid ".(($inner_cell_space/4) * 0.04)."px lightgrey;
border-left: solid ".(($inner_cell_space/4) * 0.04)."px lightgrey;
border-bottom: solid ".(($inner_cell_space/4) * 0.04)."px darkgrey;
border-right: solid ".(($inner_cell_space/4) * 0.04)."px darkgrey;
}
My problem is in the external file, where only those 3 background properties work. Other simply disappear and are not shown in the browser development tool.They are obviously also not applied and i do not understand the problem.
I am convinced that there is nothing that could possibly override them directly, so I have no idea how to explain this behaviour.
What I need is to explain, why are properties in the external file discarted and how to prevent it.
EDIT 1
MS Edge renders the page correctly. So the problem is probably i chrome itself.
ctrl + shift + r doesnt work.
Inspecting the element result: Chrome now says that the source CSS does contain the properties (but they are not applied)
One thing to remember is that the stylesheets are cascading. It's possible they are being overwritten elsewhere.
You should use element inspector in your browser to target elements which should have styles, and scroll down the sidebar to see if they are being applied, but are being overwritten by something else.
Sometimes a fix for this is just being more specific in your CSS.
Since the css rules aren't showing up in the inspector, it's probably either caching, or you're editing the wrong file/not uploading the file after making changes.
Have you tried doing a hard-refresh using ctrl+shift+r or cmd+shift+r? The external css file might be cached by your browser. Maybe I'm stating the obvious, but it has happened to me more often than I'd like to admit.
Related
When we scroll the fields on UI for going the last column, the CSS is breaking down and also tried to use the custom CSS, but when we use it at that time, the last field has been disappearing. This has been happening from last one month, not sure because of the updated chrome(100.0.4896.127) and also tried in Edge(101.0.1210.32)as well and don't know the issue is related to sencha/extjs 2.3 or browser related issue. Any suggestion/Help will be really helpful.
enter image description here
Override the .x-grid3-row css and
Add the display: inline-table; property in your custom css file. Then it should work fine.
.x-grid3-row {
cursor: default;
border: 1px solid #ededed;
border-top-color: #fff;
width: 100%;
display: inline-table;
}
I am basically trying to build a chrome extension where I will be displaying my modules in all the sites.
Basic extension usage -
When I click on my extension there will be many popup modals which will be rendered in websites.
Problem -
These extension popup modals as a specific set of CSS which is being overwritten by the site CSS.
Sass Approach -
To avoid overwrite in css from existing site to extension I used the following approaches,
CSS Specificity
Where I had a parent class for my extension modal and inside it I will be writing all my css classes.
.parent{
& .header{
//css properties
}
}
CSS reset
Where when loading my extension all basic elements will be set to initial
input[type="text"]{
all:initial;
border-radius: 3px;
padding: 8px 10px;
width: inherit;
border: 1px solid #c8ccd0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
visibility: inherit;
font-weight: 200;
line-height: 0;
}
Using !important
All these approaches I tried but still there are few cases where my CSS is being overwritten by the existing sites.
Failure Cases -
For example - In my extension modal if I have a button element and I have given background-color as blue
button{
background-color:blue;
}
In the site where the extension is loaded as a property of
button{
background-color:red !important
}
Then it automatically takes the site property and its being overwritten in my extension css.
Solution Needed
It will be great if someone provides me a idea how to use a css for extension so that its not going to be affected by existing sites CSS.
Make sure when you write css you either follow
BEM(Block Element Modifier) technique.
You can give a specific pefix to the css class or id.
You can try injecting custom html tags which you can then use to point the styles out.
You could do with writing the CSS more specifically to prevent the !important tags overwriting your CSS.
For example:
div.CLASS-NAME > button.CLASS-NAME {
background-color: blue;
}
Might be worth reading up on CSS specificity - http://tutorials.jenkov.com/css/precedence.html
I'm using the most recent version of Wordpress in combination with a theme.
On that theme there is some css code I don't need/want and which makes my customized page look bad. This would be one example:
#content table {
border: 0;
margin: 0 0px 24px 0;
text-align: left;
width: 100%;
vertical-align: top;
}
#content tr {
vertical-align: top;
}
So far I always commented out such parts directly on the style.css of that theme. But like that I'll always loose my changes whenever I update that theme.
Now I've started to bring all my changes into the custom css directory of that theme. This works good for changes, however I have no idea how to remove the part I'm usually commenting out.
Any idea how to do that?
This question aims also to such changes where I'm commenting out parts of that style:
#content tr td {
border-top: 1px solid transparent;
/*
padding: 6px 24px;
vertical-align:top;
*/
}
Hopefully you understand what I mean :)
You need to create a child theme and then import the functions.php and style.css in it.
Then add your changes here.
You will never lose it whenever you will update your theme.
Please let me know if you want code too...
Since you are using a separate custom css file, commenting will obviously not work as your main css file will still contain some of the same style sets. So, to remove a style set entirely do the following on your custom CSS file.
#content table {
display:none!important;
}
You can do this for each style set or add them all together, separating them with a comma. i.e.
#content table, #content tr {
display:none!important;
}
In regards to the second part of your question, you can't remove just part of a style set but you can overwrite it by continuing to use the !important declaration and using opposite values such as changing padding from 24px to 0px if you don't want any padding. You will need to realign to your preference or set it to baseline which is the default. (Again, this goes in your custom css file)
#content tr td {
padding: 0px 0px!important;
vertical-align:baseline!important;
}
Notice that I didn't include border-top: 1px solid transparent; because your main CSS will still apply this part of the style so you only need to overwrite anything you don't want or wish to change on your custom CSS being that there is no way for you to comment style sets in the same manner as you would using a single CSS file.
If you've found it helpful please mark this as the accepted answer to your question. Thanks.
I am using a plugin on one of my pages and there seems to be a small conflict with bootstrap and the css of the plugin.
Here is an image of the issue:
Are you can see, the two selects are pretty long and they are on two seperate lines. The CSS code from Bootstrap that is causing that is:
select {
background-color: #ffffff;
border: 1px solid #cccccc;
width: 220px;
}
When I turn that attribute off in the Firefox Console, it renders it normally.
How can I go about ignoring the width in the select without messing with the core CSS?
Make an new rule that will override the last one.
select {
width: initial;
}
if you want this rule to apply only to that specific select, and not all of them, just give it an id, and use the width:initial rule in it's rule set
I'm just trying to make the cursor a custom image. I have followed all instructions everywhere but it still will not work:
CSS:
body, html {
margin: 0px; padding: 0px;
border: 1px solid red;
cursor: url(images/rsz_red_crosshair.gif), crosshair;
}
The image is 32x32. The stylesheet is linked properly because the border is showing. The second option (the built in crosshair) works fine. Just wondering what I'm doing wrong, I'm sure it's fairly obvious to others.
Your style syntax is correct and I've implemented it myself just to be sure. I would confirm the location of your image.
This css should solve your problem. Include the URL in quotation mark and make sure path is correct.
body {
margin: 0px;
padding: 0px;
width:100%;
cursor: url('http://icons.iconarchive.com/icons/hopstarter/plastic-mini/32/Cursor-icon.png'), auto;
}