I would like to change the style of the clear input icon, but can not change it.
<a-input placeholder="Basic usage" allowClear />
In my css, I use the classname ant-input-suffix and write
.ant-input-suffix{
background-color: #ffa;
}
Classname ant-input-clear-icon doesn't work either.
What can I do to change it?
What you are running to is probably a specificity (what is specificity in css) problem.
To fix your problem (if it is specificity) you can do:
span.ant-input-suffix {
background-color: #ffa;
}
To better target your elements we would need to see more HTML before giving a concrete answer
Related
I have an Ionic Vue3 app. I'd like to change the background color of the whole page. I'm new to Ionic but I believe the way this has to be done (due to the use of Web Components/Shadow DOM) is to modify the --ion-background-color CSS custom property rather than trying to set the value of the normal CSS property, so this works:
.ion-page {
--ion-background-color: red;
}
...but this doesn't:
.ion-page {
background-color: red;
}
Fine, so I do the former, but the problem now is that all elements within the page (everything inside the <ion-page></ion-page> element which use that same custom property value now inherit the same background color.
Does anyone know how to scope the change of background colour of the ion-page element such that it doesn't cascade through descendent elements? Thanks :)
The solution here was to use local CSS custom property --background rather than the global property --ion-background-color. So the following works:
.ion-page {
--background: red;
}
I didn't previously realise there were different sets of CSS variables for different scopes.
I try everything on this and other forum to do it and not ask people..
But nothing happened! haha
I would like to know if someone here know how to change the background colors on Henson template on Squarespace ? (So also all the texte of the page).
I try this in the CSS section but it didn't worked.
#collection-5e827250f835166c09c3dcbe
{background-image:url("https://static1.squarespace.com/static/5c3a93e22487fd34bb34eaa9/t/5ea1dd8bda93e023950c5bcf/1587666340724/Background.jpg");
background-size:cover;
background-position:center;
}
And i try this in the injection code :
<style>
#collection-5e827250f835166c09c3dcbe {
background-color:#000;
}
</style>
Thank you in advance,
hope someone can help me!
The Henson template has a "title-card-overlay" that, if enabled, makes it non-obvious to change the initial background color of a the page.
To change the background color of a specific page, add the following CSS via the CSS Editor/Custom CSS:
#collection-57ae1156e3df28c4ce90ea48 .main-content {
background-color: #000000;
}
#collection-57ae1156e3df28c4ce90ea48 .title-card-overlay {
background-color: #000000;
}
Of course, in the above code, change the collection ID 57ae1156e3df28c4ce90ea48 to the ID of the page in question.
I am trying to change the background-color of my b-table headers, but the style is not being recognized.
<style scoped>
.b-table .table th {
background-color: #f3dcba !important;
}
</style>
Does anyone have any suggestions on possibility of fault?
I was going through the same issue, and the problem here is that you are trying to overwrite the style of a component that is not in the same scope as your Vue file.
One thing you can do, is to remove the scoped directive, and that would allow you to overwrite the style like so:
<style>
.b-table th { ... }
</style>
Be mindful that this might not be the best approach for this situation, and perhaps you should be creating a new slot for the table-headers, by creating some Custom Headers. Once you've done this, you should be able to insert some specific class for the table-header in question, and even insert other custom behaviours.
Some Ext JS container exposes CSS variables without any mixin. For example, fieldcontainer. In my custom theme I want to style two fieldcontainers differently using the available CSS variables for fieldcontainer.
I know it can be done by applying CSS. Is there a way to achieve it by setting the CSS variables?
For example,
.my-class-one {
$form-label-font-color: #FFFFFF
}
.my-class-two {
$form-label-font-color: #000000
}
Is it possible? If possible, where do I put this code?
You could do something like that:
Define a style in the sass/src/ folder:
.my-class-one .x-form-item-label{
color: $my-class-one-label-color;
}
.my-class-two .x-form-item-label{
color: $my-class-two-label-color;
}
...and initialize the variables in the sass/var/ like this:
$my-class-one-label-color: #FFFFFF;
$my-class-two-label-color: #000000;
You should put your scss variables in the sass/var/ folder and your styles in the sass/src/ folder.. And in these two folders keep the same structure as in your app folder. so if you write a style for your view in app/view/Home.js so place your style in the sass/src/view/Home.scss file.
Useful link: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
Above approach should work though i personally avoid adding style to internal class names.
Another approach could be defining a new UI for your container.
Have a look at:
Creating Custom Component UIs section in theming guide.
Is there a way to set the background colour of a div in blueprint?
I noticed that class=error will set the colour to pink (notify/success are similar):
<div class="error">
<p>whatever</p>
</div>
But I want to know if there is a way to set the div to some arbitrary color?
EDIT: I don't actually care about error/notify/success. I just want to be able to set the color of a div in a similar way that they do, but using a color of my choice.
Time to state the obvious - why can't you just override the div.error rule with your own?
div.error { background:black; color:#fff; } .. or are you not trying to break some sort of weird convention? If so you can use a different classname.
Just... define your own CSS class and set the background and/or (for font color) color properties to color values; then set a div to have that as one of its classes?
Yes, you can easily over-ride the CSS by specifying a rule for error in your main CSS file.
That should ideally over-ride the default colors. Else, just ensure that you use a higher specificity in your rule, something like: div.container div.error { color: red; }
You can set any color on this particular div by adding an id attribute:
<div class="error" id="myblueprint">
<p>whatever</p>
</div>
Then add in your CSS file:
#myblueprint { background:blue; }