how to change a background color of dot controls in v-carousel?
this is for vuetify
<v-carousel
hide-controls
:cycle="false"
light
>
<v-carousel-item>
// not work
.v-carousel__controls
background blue !important
.v-carousel__controls__item
color red !important
the class not work
I found that removing the scoped attribute did the trick, so this works:
<style> /* <-- remove scoped here if you have it*/
.v-carousel__controls{
background: blue !important
}
.v-carousel__controls__item{
color: red !important
}
</style>
Related
I've been trying to change the background color of the popover body but it's not changing the color. If I remove scoped from styles then it works but when I use scoped and use deep selector, the color doesn't apply.
This is my code
<template>
<div>
<button
:id="callToAction"
>click me
</button>
<b-popover
:target="callToAction"
triggers="click blur"
custom-class="my-popover-class"
>
<div>Edit Me</div>
</b-popover>
</div>
</template>
<style scoped>
*>>>.my-popover-class {
background: black !important;
color: white !important;
}
*>>>.my-popover-class .popover-body {
color: white !important;
background: black !important;
}
</style>
I am familiar with this issue because I use Bootstrap-vue for almost all of my projects.
If I have to override any of the bootstrap components, I just simply remove the scoped from style. If you need to use scoped and also want to override bootstrap components then you should select its wrapper selector and nest it.
For the first selector, you shouldn't need a deep selector, as the class is added to the root element of the popover, which has the data-v-**** attribute from the scoped tag.
The second one you'll need one, but you need to place it after .my-popover-class. That way your selector will be rendered as .my-popover-class[data-v-****] .popover-body, which should work.
<style scoped>
.my-popover-class {
background: black !important;
color: white !important;
}
.my-popover-class >>> .popover-body {
color: white !important;
background: black !important;
}
</style>
Example on codesandbox
I want to remove or change the background of the subtitles. I've changed the background-color and background but it doesn't work. can the background change?
::cue {
color: red;
background-color: blue; //or background: blue;
}
the subtitle color changes to red but the background doesn't change at all
I tried the following:
::cue {
color: red;
// take an absurd big outline, because background is only behind the text
outline: 500px solid blue;
// dont know why background-color is not working but background-image does the job
background-image: linear-gradient(blue, blue);
}
I am using vue carousel and I want to change tge color of the pagination dots' borders. I don't know how and if it's even possible. I looked up the style of this buttons in dev tools and tried to rewrite the style. But nothing works
vue-carousel has two properties that control the color of the dots:
paginationColor - (default: #000000) The fill color of the active pagination dot. Any valid CSS color is accepted.
paginationActiveColor - (default: #efefef) The fill color of pagination dots. Any valid CSS color is accepted.
For example:
<carousel paginationColor="gray" paginationActiveColor="red">
demo
Try this in your global CSS
.v-carousel__controls__item{
color: #FFC400 !important;
}
There is a work-around that can give you full control over the dots and their appearance with pure CSS, using pseudo-elements. Make the existing dots transparent, and use ::after to create new dots that you can style as you like.
.VueCarousel-dot {
position: relative;
background-color: transparent !important;
&::after {
content: '';
width: 10px;
height: 10px;
border-radius: 100%;
border: 2px solid black;
background-color: gray;
position: absolute;
top: 10px;
left: 10px;
}
&--active::after {
background-color: red;
}
}
This is not an ideal solution, however the provided options for styling dots in Vue Carousel are quite limited, and if you have a strict style guide to follow, this solution can give you the control you need.
I want to remove all the margin in v-btn. I tried this one but it's not working.
.v-input__append-outer {
margin: 0 !important;
}
I also added class="ma-0" in <v-btn> but it didn't work.
I am trying to give an element in my page a custom colour but all attempts are foiled by the Vuetify enforcing the important! on the component themes. I have followed the docs and tried:
v-list-item.selection(class="red--text")
and
v-list-item.selection(color="red")
then got desperate and tried
.selection {
color: red
}
and
.theme--light.v-list-item {
color: red
}
But the theme color just overrules everything by applying:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: rgba(0, 0, 0, 0.87) !important;
}
What do?
You can overwrite it by adding the same rule in your App.vue:
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
color: red !important;
}
Or you can increase specificity by adding your own class to that element:
<div class="custom-list-item"></div>
...
.custom-list-item {
color: red !important;
}
Or you can specifically change color of all elements inside it, if it works for you:
.theme--light.v-list-item * {
color: red !important;
}
One might work (but not a good practice at all):
.theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled).selection {
color: red !important;
}
// it's more than Vuetify's style the `.selection` specificity
Edit:
The answer I gave above will not work if you use scoped style
As working around myself, and have read a comment here. I don't think change Vuetify's style in a Vuetify component is easy. Instead, by using a Vuetify's component, you should predefine the colors you'll ever use, and then you could use those colors in the components you want.
To workaround without configuring Vuetify, then you can:
Combine inline style + !important
<v-list-item style="color: red !important">Content</v-list-item>
Don't use Vuetify's component, use vanilla html (for this component) instead