In elementUI the default background-color is white ; when choosing the them:dark , it is black, but how can I customise the bg-color by myself?
I have tried to add the style property at the el-menu tag , but it didn't work
<el-menu style="{background-color: rgb(36,36,36)!important}"
I try to find the source code of the css file of el-menu tag and I try to change some setting relating to background-color, don't work either
the menu component just like
somebody told me I can code like this
<el-menu style="{backgroundColor: yello}.." but it didn't work
The class for that particular element is not modifiable, have a look:
:class="{
'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark',
'el-menu--collapse': collapse
}"
So your choices are:
Wrap it in a custom <div class="my-specific-selector and target it with .my-specific-selector .el-menu
Override the CSS for the dark theme
Copy + paste contents of component into your own file, adjust accordingly, use that instead.
you can try put background color directly like this
<el-menu
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
style="height: 61px;"
></el-menu>
Related
I am trying to use vuetify v-stepper but I want to remove the icon in v-stepper-step. How do I remove the icon in v-stepper-step? I have tried adding. I have tried doing a combination of adding edit-icon, append-icon, and even selecting it in style scoped with a property of display: none.
Code that I tried is something like this:
<v-stepper-step
:key="`${stepHeader}-step`"
:step="index + 1"
editable
class="stepper"
complete
edit-icon=""
append-icon=""
>
...
</v-stepper-step>
You can add this to your styling:
.v-stepper__step__step {
display: none
}
I have solved it. I put a color="transparent" prop in v-stepper-step
You can still inspect the icon though. For my case, it's enough.
I want to change carousel-item.active display property block to flex.I change it in css but when I change slider it first gives display:block than make my cude run.display:flex,I want that bootstrap doesn't give display:block than display:flex.Give only display:flex
Set your CSS like this:
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: flex;
}
The carousel-item-next and carousel-item-prev classes are temporarily assigned to your slides during the transitions, so you have to make sure they have the same display property as the active slide.
If this isn't working, what version of Bootstrap are you using? I have tested it in a JSFiddle.
In other words, my question is what does <v-toolbar light>'s light actually means?
After I change
Vue.use(Vuetify, {
theme: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
}
})
Nothing happens to <v-toolbar> and I have to apply color attribute to every element, e.g. <v-btn color="primary">primary</v-btn>.
After I specific a color, keyword dark will only affect font color.
e.g. <v-toolbar color="primary" dark> will show primary color and white font.
That is not what I want, how to replace default darkand light with totally custom theme colors. example theme
You can edit the dark and light theme css by going into the vuetify code and editing their style files. They use stylus and any edits should be reflected immediately. To find the style code go to:
yourproject/node_modules/vuetify/src/stylus/settings/_theme.styl
and in there you'll find
$material-light := {
...
}
and
$material-dark := {
...
}
which have the styling for background, fonts, cards, etc.
You should be able to edit it as you see fit.
Otherwise to save editing your node modules folder you can do the following:
create a folder called stylus in your src folder
create a file called main.styl
add this to that file: #import '~vuetify/src/stylus/main'
Then in your main.js add this import './stylus/main.styl
If you then restart your app the styles should now be working from your import.
Edit your src/main.styl file before the import statement and any changes will override the default
eg:
//src/stylus/main.styl
$material-light.background = #36EF45
$body-font-family = 'Raleway'
$alert-font-size = 18px
#import '~vuetify/src/stylus/main'
Anything you don't change will stay with the default.
I search how to deactivate the transition on compose data-bind,
because it not beautiful and little bug with my content html on chrome.
Because i have a scroll horizontal print on end on my transition and disaspear after move my mouse.
The content is in iFrame.
Thanks
You can disable transitions for compose by removing the "transition" option from the binding declaration.
Instead of:
<div data-bind="router: { cacheViews: false, transition: 'entrance' }"></div>
use:
<div data-bind="router: { cacheViews: false }"></div>
This example is for Durandal 2.0, although earlier versions work the same way.
There's more info in the docs here in the "Additional Settings" section.
(The transition framework is pluggable, so you can also write your own, using the default "entrance" transition as an example.)
Also need to remove the second parameter in setRoot call:
// Was
app.setRoot('viewmodels/shell', 'entrance');
// Done
app.setRoot('viewmodels/shell');
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; }