Custom styles
ojczeo opened this issue · 6 comments
@Godofbrowser is there any possibility to disable default styles? Package is awesome 🥇 (especially directive way of defining dialogs!!! 🔥 ), but it's little bit hard to customize styles (default styles conflicts with custom ones). What's easiest way to achieve customization?
Thanks @ojczeo.
The styles can be customized without conflicts just that you may need to nest some css selectors.
During the cause of developing this plugin i wanted a something that anyone can take full ownership of. I thought of creating themes for the plugin but this has it's limitation. Then i was wondering, what exactly will developers want to customize? The colors, the layout itself or both... customizing the layout to some extent might break the plugin, but it's fine for the colors. So i was thinking of providing a detailed documentation of the layout and how they can be customized.
What do you think/suggest?
@Godofbrowser nice solutions are provided here: https://github.com/ElemeFE/vue-msgbox#install or here https://github.com/Deveodk/vue-toastr#usage- styles are builded to css file, you can import them if you want, but also you can define your own
@ojczeo Exporting the css into a separate file is a nice idea and it's also very easy to implement but i'll need to think through how this affects the initial setup process. Especially when installation is done through npm.
Thanks for the tip.
A nice option to start would be a prop for a custom CSS class for the main wrapper, with that we could create some custom CSS overrides based on the wrapper class.
btw great job and thanks @Godofbrowser
@ImpossivelPT Thanks. I think that would be a better option as it would be backward compatible. I have been as regards exporting the css file separately, it'll be a breaking change which i was planning to implement in a major release. This should be a quick fix for now.
Please use basic css, ex:
.dg-btn-loader .dg-circle {
background-color: green;
}