Im trying to have some backend code generate some styling for me, and it prints the css class and style just fine.
following style is printed at the top of the page.
.655c6933-5ae9-4089-a576-df528bf6c823 {
background-color:#f2f2f2;
}
and as you can see in the image below the class on the html is identical, but the style issent applied, and when I add a custom style in chrome the css selector is article.\36 55c6933-5ae9-4089-a576-df528bf6c823.
this is quid confusing and I can't figure out where this /36 space is comming from ?
here you can see and test the problem as well:
https://jsfiddle.net/569r1p7x/
See this answer in regards to classes that start with numbers.
To get around this, the following works for me;
<style>
.\36 55c6933-5ae9-4089-a576-df528bf6c823 {
background-color: #f2f2f2;
}
</style>
And...
<article class="655c6933-5ae9-4089-a576-df528bf6c823">Hello World</article>
The \36 represents the number 6 which is the first character in your CSS class. The number 6 is removed from the CSS declaration in replacement for the escaped version.
Related
I am working on a website, https://wordpress-625707-2032312.cloudwaysapps.com/, with the WP Shopify Plugin, and trying to change the default button colors. I have gone into dev tools and found the div class to change the button background. I can clearly see it's labeled as "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton"
But when I use this class for my css changes, it doesn't work. The change is "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton {
background-color: #D71614 !important;
}"
Why is this not working?? I can't attach screenshots since I'm too new on here...sorry!
Actually you are pretty lost here.
This is not actually a class:
wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton
There are 4 classes there, separated by spaces. The last one is actually unique for the first button. And in css, when you are styling a class, you should start with a dot, like: .class-name
The code you are looking for is:
.wps-btn.wps-btn-secondary.wps-add-to-cart {
background: red;
}
We concatenate 3 classes here with dots and NO spaces.
You should take a look at CSS Selectors:
https://www.w3schools.com/cssref/css_selectors.asp
Is there any ways to add custom css prefix class for thousand of line css codes?
I found some solutions, not fully ok
method1
We could search and replace in editor, but it is not correct for all the cases like float value css.
method2
I googled and showed me like wrapping custom css class. like below
.myprefix .btn {}
.myprefix .text-muted {}
// this solution is not cool
I want like .myprefix-btn, .myprefix-text-muted, .myprefex-bg ?
if you are using SCSS then you can achieve this by following code:
.myprefix{
&-btn{
color: red;
}
&-text-muted{
color: green;
}
}
Make sure your html inherit those btn, text with parent myprefix.
Enclose your whole CSS with a class-name of your choice.
Example:
.myprefix {
/*Source files*/
}
Now you have an SCSS file.
Then go to this link and copy paste your code and convert it to CSS file.
You'll notice that all the your CSS classes have be preceded with myprefix
What are all the css style classes that has to be changed to restyle dojo filtering select ?
Note: I am using claro theme.
I want to
1.Set the style for one particular filteringselect with id QuickSearchPane_SelectBox
2.Set the style for all other filteringselect
I found a few like:
.claro .dijitTextBox .dijitInputInner
.claro .dijitInputField .dijitPlaceHolder
.claro .dijitSelect
But these are not giving the desired effect. I am not even able to change the background colors.
For Menu
[dijitpopupparent="QuickSearchPane_SelectBox"] > .dijitComboBoxMenu .dijitMenuItem
This seems to work.
You can use the following CSS class to start styling your dijit/form/FilteringSelect;
This example will style all instance of dijit/form/FilteringSelect:
https://jsfiddle.net/ofgcd24n/
.dijitInputInner {
background-color: green !important;
}
.dijitMenuItem {
background-color: orange;
}
This other example below will style only ONE instance of dijit/form/FilteringSelect, please note the use of Descendant combinator as selector (where you use the ID for your widget DOM):
#widget_stateSelect .dijitInputInner {
/* your style*/
}
Generally you can use (in Chrome Dev Tool) Event Listen Breakpoints for click/mouse down, so when you open you FilteringSelect, you can block execution, and check with the inspector its HTML structure and see additional CSS classes you want to override with your styles.
More about CSS selector:
https://www.w3.org/TR/css3-selectors/
If you need more details, please post your HTML and CSS and desired layout so we can work out a specific solution.
Let's say I want to include my content to somebody elses site. Is there a way to make my style unique and cannot be overriden by his css files.
I have my content in a div with specific ID. If I write my css like this
#divId a {
color:red;
}
The link color can still be overriden by his style. I hope the question is understandable...
#divId a {
color:red !important;
}
This will give your style precedence, but if he later uses !important in his own style for the same element it will follow normal cascading rules and override yours.
The Best would be if you would create different classes for action like this to not having trouble leater for example if you want some elements always red creade class like this :
.always-red {
color : red !important;
}
And create different files for this called helpers or something else. so now if you would like some different elements always red you can use it simply like this :
<div class="col-md-12 always-red">
// Some html in here which text color will be always red
</div>
So far I have tried to change the cell padding to 0, but ng-grid wants it to be 5 pixels. I originally made a css class called test with the following definition
test {
padding:0;
}
then i figured out that ng-grid is overriding it with the class called ngCellText so the only way to overwrite inline css is to add important
test{
padding:0 !important;
}
and this didn't work either. By the way my jade (no bracket html)(it also has a little bootstrap) looks like this
div.test
div.row-fluid.span12
div(my ng-grid document)
so then, since that didn't work, I looked at cellTemplate. Here is the default html for it
<div class="ngCellText ng-scope col0 colt0 (**input test class here**)"
ng-class="col.colIndex()">
<span ng-cell-text="" class="ng-binding">***0***</span>
</div>
This is great and it gets rid of the padding, but as you can see "0" is hardcoded since this if from an inspected element using chrome. How would I be able to do this using my ng-grid field? Also, if you have any other ideas on how to fix this please feel free on pitching in. Preferably I would like to get the !important working or anything else since the way I have ng-grid set up is so I can put it in different places of my website so custom css would be best!
This can help:
div.ngCellText[class*="col"] {
padding: 0;
}
But seems you can just override it like this:
.ngCellText {padding: 0;}