I want to build a material design dropdown as SPA container and add it to the AEM theme.
As AEM only allowing CSS changes in themes, I can't build a proper material design dropdown.
Related
The material UI elements utilized in Angular 14 styles are overridden in angular 15 material , and themes are not working. Is there any blog or docs that can be referred to follow the steps for a smoother migration.
Styles overridden in material components like input, select, autocomplete, text font etc.
tried following the official angular migration guide and executed the ng generate #angular/material:mdc-migration command to migrate the angular material components. The items are migrated as expected, But after migration the existing manual styles are overridden by the default material styles.
I have a web app all developed with a Bootstrap theme, now I would want to replace just the checkboxes inside the application with those coming from mdbootstrap, basically a Material Checkbox.
Is that possible to load just the part of the CSS related to the checkboxes and not all the rest?
Is there any other way to have just the Material checkboxes in a bootstrap theme ?
Of course you can. What you have to do is copy all of the relevant css from Material website into your own stylesheets. If you inspect element, you'll notice that all styles related to checkboxes revolve around .form-check class.
Once you copy all of the styles, rename them to match bootstrap's naming convention.
I want to create app that have this usecases:
Load dynamically style from some theme.
End user can define some theme with html, css, ... and install on the app.
After some research for choosing best solution for this problem we find out for state management we need some library or framework like Redux or mobx. For dynamically styling we decide to use fela.
this is supposed to be a shop app that can have different themes. user can change the theme and customize it to some degree. that's why we need to have some sort of dynamic style loading. components are the same.
Since Angular uses view encapsulation is it possible to support multiple themes in Angular 2? I mean the user should be able to click on a button and change the color theming of the whole application.
PS: I am using Angular 4 with angular-cli with SASS support.
Currently I am able to generate static themes with a _variable.scss file which is imported in each component's sass based stylesheet.
But, my requirement is end user should be able to choose his own color theme.
Ideally in non-angular websites I would just add a new compiled css file to the <head> tag using javascript. Since shadow DOM generates separate style for each component and adds them in to the <head> how I change the style for each component dynamically?
you can try the css method var(), for more details can read this blog
I have some experience with HTML and CSS, but these VS2013 generated sites include lots of stuff - bootstrap, modernizr, etc. I'm completely lost. Any advice how to change the navbar background color?
Visual Studio 2013's MVC 5 templates use twitter bootstrap for css styling. To customize twitter bootstrap in your MVC application, go to the twitter bootstrap download page and enter in the color values that you desire, then replace the twitter bootstrap files in your project with the one you customized and downloaded.