I've already put my downloaded Montserrat font-pack inside my public/dist/fonts/ directory, how will I replace Roboto as my font.
Depends on your font, you would need to put the css that changes the original font after the materialize css file in your html
* {
font-family: 'Montserrat';
}
if it doesn't work, just simply add !important at the end, it will be working.
Related
I want to change the sidebar width in docusaurus, I am only allowed to change the width of sidebar in a particular page.Can anyone suggest me a solution
In version ~2.0.0 you can create your own CSS files (/src/css/custom.css) by defining it in the docusaurus.config.js. There you can set your override styles. When inspecting the page, there's Docusaurus sets the variable for --doc-sidebar-width: 300px; I was able to override that variable with an !important:
:root {
--doc-sidebar-width: 250px !important;
}
How can I change the font for all items in Vuetify from Roboto to another.
I use Vuetify, there is a default Roboto font. I want to change it to another. Changing the font in the variables.scss file does not help, because each class has a specific Roboto font.
#import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap');
#import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');
$body-font-family: 'Oxygen';
$title-font: 'Comfortaa';
$heading-font-family: 'Oxygen';
However, when I use classes like this:
class = "text-md-h6 text-lg-h6 .text-xl-caption"
the Roboto font is still used.
#media (min-width: 1024px)
<style>
.v-application .text-xl-caption {
font-size: 0.75rem !important;
font-weight: 400;
line-height: 1.25rem;
letter-spacing: 0.0333333333em !important;
font-family: "Roboto", sans-serif !important;
}
What do I need to do to change the font in all places?
This should work by setting the font variables in variables.scss file as documented here. A couple things to check if it doesn't work:
The file should be in an expected folder src/[sass, scss or styles]. Docs.
Vuetify Loader should be installed along with sass and sass-loader as dev dependencies
Variables file only contains variables, not imports. Fonts could be declared/imported in main or elsewhere.
it's a bad practice to use !important for most of the cases and unfortunately because those font-family styles also have !important CSS will only use the style with a more specific selector so You also have to use !important. You can try something like .v-application .v-application--wrap * with !important. so it will be like :
.v-application .v-application--wrap * {
font-family: $body-font-family !important;
}
and if you have different styles for different classes , you can just put all of them inside a .v-application .v-application--wrap { } and sass will process them for you. but also note that other vuetify classes might use more specific selectors , so in those cases you have to use more specific selectors for those specific cases.
I want to make a progress bar with background linear-gradient and use pre-defined theme colors in scss in vue. Such as:
.progress{
background-image: linear-gradient(to right, $start-color 0%, $start-color 50%, $end-color 50%, $end-color 100%);
}
50% is dynamic changed by code in vue. If I write the style in :style="{}" then I can't use the pre-defined scss color $start-color and $end-color
You should use the :export block from Interoperable CSS under CSS modules.
As an example consider the below given extracts, first in your sass file that has colors defined (say colors.scss):
$primaryColor: #fcf5ed;
$secondaryColor: #402f2b;
:export {
primaryColor: $primaryColor;
darkColor: $secondaryColor;
}
With that setup along with your style loaders (which you currently must have setup) you can just import the file like usual js modules like below in your Vue application:
import colorVariables from 'colors.scss'
colorVariables.primaryColor // => Will now have the value of the color as a string.
Now you can just use the :style binding of the Vue to define the linear-gradient. You can read more on export in the following link : Interoperable CSS - :export under CSS modules.
I am trying to put background image in my store.
I edit global.css file I set Performance Force Compilation = true and cache =no.
I change color of body
I put background image
like below
body{
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#555;
background:#555 url('../img/flowerbg114.gif')repeat
background-size: contain
}
But nothing changes in my front office :(
My img file is under img folder under the selected theme..
Thank you for your time :)
try below CSS
body {
font:normal 11px/14px Arial, Verdana, sans-serif;
color:#555;
background:url(../img/flowerbg114.gif) #555 repeat;
background-size: contain;
}
After each line you end, or each css property you complete, place ; .
Check it and it will be working fine now.
Thank you
The problem was the theme I was using was probably overriding some of the style changes. I found out that it has a module which helps to set some properties like background picture or store logo. When I use the user interface of that module I managed to change the background easily.
I suggest that you edit header.tpl and change line 40
after {$HOOK_HEADER} </head>
from:
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
to:
<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if} style="background:url({$img_dir}page/background{math equation='rand(1, 6)'}.png) repeat-x top center">
This should select a random number between 1 and then load the background image with that number in the filename. Just create background1.png, background2.png, etc.
Note: will override the body tag in global.css.
Make a file name of a page, and then put the pictures inside
Annexation place the file in img Directory
I'm trying to set the background image of my Windows 8 app. In the CSS for the page I did:
body {
background-image: url("images/logo.png");
background-color: #00522c;
}
The background color works but the images does not.
Assuming you're using what the default template generates, you have a pathing issue (the images directory is not at the same level in the folder hierarchy as the css file)
Try
background-image: url("/images/logo.png");
or if you want to be really explicit:
background-image: url("ms-appx:///images/logo.png");