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.
Related
I want to disable text input in the "basic-select" component, from the "vue-search-select" package
because there are already ready-made styles for it, and I would not want to create a separate customized select
is it possible? Tell me please
I guess there is no explicit API to disable text input because this package is going to make a "searchable" select component. The text input can be hidden using CSS, however.
.search {
display: none;
}
/* or even better */
.ui.search.dropdown > input.search {
display: none;
}
However, you should be careful about the selector you choose. Depending on your project, it might have some side effects. It might be better to add a custom class to the component and use it as follows:
.my-custom-class .ui.search.dropdown > input.search {
display: none;
}
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
The default Vuetify font family is Roboto and I would like to change this. I found other solutions that changes the font family globally. I don't want to change it globally, I only want to change it for a specific element. How to do this?
<template>
<v-container>
<div class="text-h4">Text family I want to change</div>
<div class="text-h6">Text family I dont want to change/give another font family</div>
</v-container>
</template>
Update
Vuetify declares the font on .v-application and unfortunately also declare the font as !important on .v-application .text-hN. I can suggest you some ideas to modify your font:
If you want to change every text-h4: You can override the style of text-h4 by modifying its default ($headings then
'h4') https://vuetifyjs.com/en/features/sass-variables/#example-variable-file
If you want to keep default text-h4: You can remove the text-h4 class and use your own class custom-header with copied rules of text-h4 plus your font-family rule. You won't need higher specificity, nor to use !important.
Something like:
.custom-header {
font-size: 2.125rem !important; /* from .text-h4 */
line-height: 2.5rem; /* from .text-h4 */
letter-spacing: .0073529412em !important; /* from .text-h4 */
font-weight: 400; /* from .text-h4 */
font-family: YOUR_FONT_FAMILY, Roboto, sans-serif;
}
Previous answer
Give your element another class:
<div class="text-h4 anotherClassForExample">Text family I want to change</div>
Override the font-family of this new class in your css.
I was in a similar position before, I had some basic css knowledge and started using frameworks. I strongly recommend you to master CSS before using a UI framework. Starting by using a framework looks faster, shinier and easier but in the long term it is not. You will be blocked a lot and maybe in the future you will change to another one or even want to not use any.
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.