is it possible to change the default bgcolor by web.config and without presets?
or, even with presets, is there a way for a preset to be a default one? I would like to keep URL short therefore not include the preset name
Related
I'm the beginner of react-native.
I'm going to provide change global font size function in my app.
User could change the font size in setting page, them the whole app font size will be adjusted.
After doing some research, it seems can't do it. So my idea now is create multiple global style sheet and apply it base on the user setting saved in storage.
But I found that it seems not work, because after create global style sheet, it need to import at the beginning of the app page.
How can I apply change the app global style or font size in react-native?
You might want take a look at useContext hook, it will give you a good way to handle app global style, suck as light or dark theme, your case, font is also not a problem.
Another way is using react-redux, create a global state for your font, and all your component will listen to the font value stored in the store.
Let's keep it abstract. How I would do it: create and assign a theme for your app where you define classes with different font-sizes etc. Save the preferences as classes in the async storage. After loading the up retrieve saved preferences from async storage and set those to your components as classes. Job done.
I'm making a website using Vue, and have added localization using vue-i18n, however there are some svg-images that also need to change with localization.
Is it possible to add the filename to the localization file like this:
"image" : "EnglishImage.svg"
or
"image" : "../assets/images/price/EnglishImage.svg"
And in the Vue something like: <img :src="$t('image')">
And have it change when the localization is changed?
As a quick temporary fix I used the following steps:
Place the images normally into the page
Run project
Use inspect to find the path for them. (it was something like "../img/EnglishImage.c9bc8f65.svg"
Add these paths to the Localization files
Not the best solution, but for now it works
I wish to allow users to switch the entire color-scheme of my site with a buttonpress.
I have 2 separate .less files with the same global variables, but different colors. The problem seems quite simple.. "swap 1 .less file for the other". But how do I actually accomplish this?
Of course, I could alter the entire site element-by-element in the .js based on the state of a singleton, but that seems like a duct-tape-solution.
One possible solution by example: say you have a div element that you wish to color its background differently in each theme. Load both .less files and edit them like this (add the theme class to the body element that wraps the whole document):
theme-1.less
body.theme-1 {
div.address {
background-color: yellow;
}
}
theme-2.less
body.theme-2 {
div.address {
background-color: fuchsia;
}
}
Then provide a mechanism for the user to change the theme (e.g. drop-down menu). When the user selects from the menu - say for example changing from theme-1 to theme-2 - issue this JS:
document.getElementsByTagName("body")[0].classList.replace("theme-1", "theme-2");
Generically you can do it in more than one way:
document.getElementsByTagName("body")[0].classList.replace(<currently-selected-theme>, <newly-selected-theme);
or
document.getElementsByTagName("body")[0].classList.remove(<currently-selected-theme>).add(<newly-selected-theme>);
The default font is a bit large for my target application.
I saw that loadTheme could change the primary theme color, but is there a way to change the default font size across all components?
IFontStyles has a variety of sizes specified, so is there a way to set the font size for all the fabric react components to "small" (FontSizes.small)?
I have tried to set the css font-size to something smaller directly in the outer containers and inside the Fabric component, but the components still seem to render around 14px (ms-font-size-m) once rendering goes inside the Fabric component.
The theme code is fairly confusing to me but it looks like fabric-react uses a combination of fabric-core scss, fabric-react scss and glamor (runtime js->css) to generate stylesheets as needed and return the classnames to react code for className property. There does not appear to be use of inline styles.
loadTheme can override font-szie.
I wanted to know how to theme a specific Container and not every Container in the whole app.
#ext-element-18 x-scroll-container
if I wanted to change a background color of this would it be?
app.scss
#ext-element-18 x-scroll-container{
background-color: #000;
}
this is not working
It's bad pratice to base your CSS on auto-generated id's like ext-element-18. It can change anytime. So what I suggest is you use the cls config
Give a cls attribute to your contrainer :
cls:'my-css-class'
Then use this class in your CSS or SCSS file to customize the component.
If you ever need to reach children of your component you can now do something like
.my-css-class .x-scroll-container{
// custom style
}
This works too;
Ext.get(Ext.fly('ext-groepen_detail-1').query('.x-scroll-container')).elements[0].style.backgroundImage = 'url("http://somedomain/path/to/test logo 2.jpg")';