recently I was working on an app using Vuetify and had trouble to change the Vuetify default colors. So I finally ended with this:
https://github.com/vuetifyjs/vuetify/issues/299
Which as its says, I added the following code:
<style lang="stylus">
#require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
$theme := {
primary: #009688
accent: #FFC107
secondary: #00796B
info: #B2DFDB
warning: $red.base
error: $red.base
success: $green.base
}
#require '../node_modules/vuetify/src/stylus/main.styl'
</style>
In App.vue
So when I tested changing colors in the app, it worked as expected, so far so good. Then I noticed that it changed the size of the icons, as pictured below:
Before
After
So, my question is:
Is there a way to solve this problem by not using CSS? If so, how? Or if there's no way, then, how should I solve it using CSS?
You can give icon size in px using size property in Vuetify icons.
<v-icon size="25">home</v-icon>
Or
you can use x-small, small, medium, large and x-large in v-icon tag
e.g.
<v-icon small>home</v-icon>
Unfortunately in the current version (0.17.6) you will need css to create a custom icon size.
If you wanted to set a custom default size of your icons across your app you will need to target it will css.
To target icons size you can use the following:
.icon {
font-size: 20px;
}
If you are using Vuetify v1.0.0-alpha.1 or later, <v-icon>
component has a size attribute which you can use to set an exact
size.
here is the sample inline css from v-icon
<v-icon style="font-size: 5px;">home</v-icon>
here is my sample pen
https://codepen.io/anon/pen/LdpgmY
I recommend just using an <i> tag and setting the icon classes yourself if you can. <v-icon> doesn't provide much advantage anyways and the v-icon class is the one that's setting a specific font-size when all you really want is font-size: inherit.
I'm not sure that the change of colors is giving you the issue with the change of icons size, but if you don't want to set the icon size each time, you can optionally pass in custom variables to overwrite the global defaults like this:
$icon-size: 20px;
You can find more information about this in the Vuetify Documentation
Related
I am trying to change my website to make color palette swapping easier, as we are still trying to find colors that work still. We are using Vue and Vuetify with SCSS generating our main CSS file. We are using almost exclusively Vue SFCs. I am currently stumped by a V-Tab issue where the "active" bar underneath won't change color.
The main issue is that, when using Vuetify components, in-file CSS has little impact. When I pass color="#ffffff" as a prop, it works wonderfully, everything is great. However, I cannot use CSS to change the colors in the same way at all (the produced code actually has the bar in a different div outside of the tab element).
I have tried overwriting the v-tabs-slider-wrapper element style every which way I could think of, to no avail
I have tried using SCSS functions inside the computed section of the SFC
I have tried basic CSS and SCSS
I have tried v-binding the color attribute to a computed function that referenced the SCSS function
I have tried using classes, ids, names, etc.
I tried background-color in all iterations as well, as a hope
If any one can help me, I'd appreciate it.
<template>
<v-tabs class="tabs">
<v-tab>Thing</v-tab>
<v-tab-item>Inner Thing</v-tab-item>
</v-tabs>
</template>
<script>
export default { };
</script>
<style lang="scss" scoped>
#import "../styles/main.scss";
.tabs div {// this was the only way to get the tab **text** to change, doesn't work for the slider bar
color: getColor_fromText("color"); //defined in main.scss
}
</style>
Did you try the color property of the slider?
<v-tabs-slider color="yellow"></v-tabs-slider>
Example here:
https://vuetifyjs.com/en/components/tabs/#custom-icons
If you want to change the background color of a specific tab you could try something like this:
<v-tabs
:background-color="activeTab === highlightTab ? 'deep-purple accent-4' : ''"
v-model="activeTab"
>
See full example (click on the second tab):
https://codepen.io/DomHaas/pen/qBZrZVy
I have a react numpad component in my code and I need to change its size, but I cannot modify its CSS, theme or something like that properly.
I've already realized that some style like colors or fonts may be changed in node_modules\react-numpad\build, but omething like size or align I cannot change. Somebody help me, please , after looking to the following template code.
import NumPad from 'react-numpad';
<NumPad.Number
onChange={(value) => { console.log('value', value)}}
label={'Total'}
placeholder={'my placeholder'}
value={100}
decimal={2}
/>
When we click on the component, we get the numpad open. I need this numpad to be something much bigger than the standard one.
Your Numpad is dynamically added to the document.
You can change it's CSS. If you inspect it, you will get a element with MuiPaper-root class, using this class name you can change it's CSS.
.MuiPaper-root{
width: 500px;
height: 500px;
font-size: 25px;
}
If you want to change color of number being displayed you can do this,
.MuiPaper-root .MuiButtonBase-root{
color:blue;
}
Like this you can change CSS for whatever you want.
Note: Don't change any CSS directly in node_modules folder, instead you can override the CSS in your custom CSS file.
Is there an easy way to change font size for some none-header text with Semantic-UI, without make changes to the theme or use plain css?
I see for some elements, like button, one could use large, massive and so one. Perhaps something like this is possible for "normal text" also, but I cannot in the documentation see how, but I might be blind?
Semantic UI does not have that out of the box. You can write a CSS class that does it for you.
.large.text {
font-size: 2rem;
}
This would make <p class="large text">Hi there</p> have a size that is twice the size of the baseline text size.
You can also add your own CSS to component's .overrides file for the theme you are using and it will be available in your app.
For example, if you are using 'default' theme, you can add the following to button.overrides :
.large.text {
font-size: 12px;
}
site.variables contains the default font size of the page, it can be changed there as well if it's to be changed everywhere
It is possible to be done in Fomantic-UI from version 2.7.2.
Fomantic-UI is a fork of Semantic-UI with ongoing development.
<span class="ui large red text">example of large text</span>
docs: https://fomantic-ui.com/elements/text.html
I am using below css to change the font size of every component of primefaces
.ui-widget{
font-family:Arial,sans-serif;font-size: 90% !important;
}
But its look like something not working ,Wizard tab font size is very big,While Button very small. Can some please help me to resolve the issue.
I'm working with Twitter Bootstrap 3.2.0 and I need to change the color of the "navbar" from basic black to another color. I've tried everything and I can't get it to change in CSS.
I have gotten it to work properly in an add-in that calls a CDN yet I need to control it myself in CSS.
I have properly loaded the bootstrap files in the proper order.
Does anyone have a method that will let me change this - either with a style sheet or in-line command.
Thanks very much!!!
Just go here: http://getbootstrap.com/customize/ and customize the navbar then download the customized Boostrap.
As long as you use the default navbar, it's as simple as to target the .navbar-default class, like this:
.navbar-default {
background-color: #FC0;
border-color: #E7E7E7;
}
And onbiously you can play with screen sizes, use different colors based on which page you are and so on
I made a Bootply to show you