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.
Related
I am trying to pull out all of the common styles used throughout an application and storing them in a stylesheet and material ui theme file - this way I can update the base styling of all input fields for example in one place.
I am using the react-select element in a component as a dropdown for a country code picker, although I cannot seem to use material ui's useStyle/makeStyles feature to call the theme's styling within the custom react-select's styling block.
Does anyone have any idea of how to use mui theme elements within the react-selects custom styling block?
I have a jsp page which I want to style using Materialize framework, but as soon as I add the href to materialize.min.css in my page (or in the entire project from the beginning), it overrides my existing styles from all the application and I want to be able to call Materialize only when I need it, not to change the whole style because it becomes a mess.
It's also the first time I'm using Materialize, so maybe I'm missing something.
That's how CSS frameworks work, generally. Most of them will normalize and apply a base style to your website, even if you are not using framework specific class names.
I usually work the other way around: I let my framework of choice control all of my UI, and when I want to override something, I use custom CSS styles. To do that, make sure you add a link to your own styles on the tag after the Materialize CSS link.
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
Is there any way to change material design theme colors just by button click?
Lets say I want my app to support personalization so every user can pick predefined theme color palette. Something similar to this: http://www.getmdl.io/customize/index.html. Is there any way to do that?
This Demo on MDL's website actually generates a brand new stylesheet whenever you pick two new colors for your theme. So you can generate different stylesheets for different themes. When the theme changed, you can remove the old style and dynamically add new style tag with the new styles in it.
Or if you use some library like react, you write your css in JS so you can change theme by change the css object in JS.
Can anyone tell me themes are better or CSS style sheets are better in asp.net for design?
Please explain the concept also with an example.
A theme can specify both .skin files and .css files. So there no reason not to use themes.
As for skins versus css: Go for css if its css'able.
You should combine them. Use your css files in the theme folder for your normal styling of all the html elements in your website (include all the generated elements).
In the skin file of a control, you can set the default css class. Other properties like the layout and default behaviour of the elements (sample: calender control) are editable here too.
Skin files are good for all layout specific configuration you can't easily do with css, but with the .net properties of the controls.
Basically themes is built for server controls. You can not use themes with html controls.
The css is used for server controls,html controls and tags. If you are using only server controls then you can use "theme" because you can enable or disable theme on control basis, page basis and whole website basis.
In my opinion CSS is best way to design website. because after rendering theme it shows the css style with controls and tags.
You can also use "Theme" and "CSS" together.
Same query is avilable at my post at following link.
ASP.NET 2.0, AppTheme: How can we utilize AppTheme in best way for my ASP.NET WEBSITE
It make you happy