I am currently creating a project in ExtJS 7.2
How can I change the entire application font-family dynamically
Like allowing the user to select the best font by example from drop-down list and that has to be applied to the entire application.
I know that I can create the file {project-folder}\classic\sass\var\all.scss and just update the font-family inside it as the following
$font-family: 'Tahoma' !important;
but how can I change this value dynamicly ?
thanks
You can use Ext.util.CSS to add css rules.
// as no * rule exists, you have to create a new stylesheet
Ext.util.CSS.createStyleSheet("* {font-family: 'Tahoma';}", "some-id")
Then you can update * rule with :
Ext.util.CSS.updateRule('*', "font-family", "Roboto");
Don't use !important here because of font-ext, font-awesome and font-pictos packages
Related
For example : with Tailwind:
<div className="md:hidden">Hello</div>
will result the div hidden after the breakpoint md - which after Tailwind doc , it is 768px;
I would like to be able to do the same, but for custom widths, so not 768px;
And I Don't want to write it in the CSS file and I dont want to modify Tailwind files.
I would like to be still inline . Is it possible?
Documentation
If you need to use a one-off breakpoint that doesn’t make sense to include in your theme, use the min or max modifiers to generate custom breakpoint on the fly using any arbitrary value.
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
<!-- ... -->
</div>
Its been 2 whole days i can't find any solutions.I have no solutions yets:( I'm having color states. I'll select from color picker a color, I'll update that particular color state:
Requirement is if I pick from color picker it must be passed from react js property or variables to scss variable n override them. it must be done via reacrjs to scss if it can be done from js to css then it can be done from reacr js to scss whats that one thing which m missing on it.
App.js
{
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
}
ex: primary: '#1976D2' I'll pick in update to primary: '#ffffff' something like:
App.js
changeColor(e){
this.setState({primary:e.target.value}) // the value is updated to #ffffff
}
Now, I need to pass this.props.primary to .scss something like:
variables.scss
$primary:this.props.primary
login.scss
.btn{
background-color:$primary
}
my need is it must be dynamic if i pick from color picker it must be passed from react js property or variables to scss variable n override them
We can do it inline styling but I wanna do it the way defined above (via .scss).
Is it possible?or is the any better way?
something like this
https://vuetifyjs.com/en/style/theme
vuejs uses theme thats overides to scss variables
Vue.use(Vuetify, {
theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
}
})
can anyone please explain me how they r doing I'm not understanding
First. Just to clarify. You are not able to change SASS variables from browser. Because how it works: SASS code -> compiled into CSS -> CSS is sent from server to browser -> . So we actually should searching "how to override by JS something that was SASS variable in consistent way".
The only way I see doing that is using CSS custom properties. Take a look into spec to understand their caveats(e.g. it cannot be used as part of size value in #media) and about support in browsers.
I'm not really sure if SASS supports compiling variables into CSS custom properties. Take a look into css-vars mixin. With using
$css-vars-use-native: true;
you will get your variables exported as CSS custom properties. Unfortunately it means you need to change you existing styles to use var() from mixin for variables you want being able to override later
Then your code will be able to override any of custom properties as easy as
document.body.style.setProperty('--primaryColor', myColorValueFromDatePicker)
Take a look into fine and short article on how to change custom properties with JS
NB since custom properties uses the same cascade approach as any CSS you additional get ability to apply changed value on any part of DOM:
document.querySelector('#previewBlock').style.setProperty(....);
I would use Styled Components instead. There you can pass your styling by props
https://www.styled-components.com/docs/advanced
After upgrading bootstrap-select.min.js version from 1.12.4 to 1.13.1 all height style of controls on my site are broken. The height is properly styled if I include 1.12.4/js/bootstrap-select.min.js but not 1.13.1/js/bootstrap-select.min.js
All CDNs are from https://cdnjs.cloudflare.com/ajax/libs.
I am using Bootstrap 4
Upgraded includes
bootstrap-select/1.13.1/css/bootstrap-select.min.css
// controls height is broken when using this include
bootstrap-select/1.13.1/js/bootstrap-select.min.js
ajax-bootstrap-select/1.4.3/css/ajax-bootstrap-select.min.css
ajax-bootstrap-select/1.4.3/js/ajax-bootstrap-select.min.js
Downgraded includes
// bootstrap-select/1.12.4/css/bootstrap-select.min.css
// controls height working when using this line with upgraded includes
bootstrap-select/1.12.4/js/bootstrap-select.min.js
// ajax-bootstrap-select/1.4.3/css/ajax-bootstrap-select.min.css
// ajax-bootstrap-select/1.4.3/js/ajax-bootstrap-select.min.js
Make sure you have specified HTML5 using <!doctype html>.
See Different height of select with HTML5 and Bootstrap Select for the more detailed answer
I need to make the cs-cart home page full width and I'm not able to sort out how to do that.
I can change the "maximal widht" parameter but it affect the whole website.
Any suggestions ?
Thanks !
You can use hook index:content to add all content into a new div that can have different class for homepage and base on that you can change the css only for hompage
For doing that you can use My Changes add-on:
Please add files:
1.
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.pre.tpl
with content
{if $runtime.controller=='index'}<div class="homepage">{/if}
2.
design/themes/[THEME_NAME]/templates/addons/my_changes/hooks/index/content.post.tpl
with content
{if $runtime.controller=='index'}</div>{/if}
Please add custom CSS:
please add css and save
.homepage .container-fluid{ max-width: 100%; }
The custom modification is for CS-Cart 4.2.x / 4.3.x on Responsive theme and also require My Changes add-on to be active.
The header has a navigation menu I'd prefer to keep, but it's taking up too much space. What can I do to make it look good on mobile?
One possibility is to use togglers - buttons that make its inner content appear/disappear. The uraniumjs library contains some widgets, one of them being a very simple yet useful toggler implementation. It also does that unobtrusively.
You will need to include the uranium js file, so you can just use it. Then, you can do it as explained below.
You need to transform your menu code into three parts: a wrapper container, a "button" section and a content section. To identify each of those parts, use these data attributes:
data-ur-set="toggler"
(add this attribute to the wrapper)
data-ur-toggler-component="button"
(add this attribute to the "button" section)
data-ur-toggler-component="content"
(add this attribute to the content section)
You need to include these CSS rules somewhere too:
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
display: block;
}
You can see a small example running here: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b.
Both the Bloomingdales and the Macys mobile sites use that approach. You can see it working there.