By adding the above, I've changed the Fanoe theme. I am thinking of a more generic solution so that wherever I place the button (CTAButton), it will take the default Bootstrap 3 styles.
One possible solution I am thinking of is to include all .btn, .btn-primary, etc. classes that ship with bootstrap and place them in a custom.css file and add !important to each and every single css. Is that ok?
The above css shouldn't really be overriding anything, it just adds the btn classes from Bootstrap. They don't exist in Fanoe, so wether you add them to the one of the existing stylesheets or create a new one is up to you. Adding them separately means that you don't have to worry about overwriting fanoe.css when upgrading, so that's actually a good idea. Creating links and button with Fanoes button class will work like it always did.
Your approach will also work, however adding all those !important's seems a bit much. I would still go for adding the theme color classes (dark, light, yelow etc.) to bootstraps button styling instead.
So, I can get all related classes from Bootstrap (normal state, hover, focus, etc.) and prefix them with .dark, .light, etc.
Actually, I am thinking of adding this to the CtaButton editor :-) Maybe the editor might specify the prefix class to add, then some magic behind the scenes, some css would be generated. Just an idea, i will think more of how to implement this.
Yes! There is definitely a lot that can be done to make it more clever :)
I do think the best thing is to add classes to whatever output you want it to generate and then having styling in site specific CSS (be it framework or custom code). I'm not a fan of injecting CSS on a site from a package as that easily generates conflicts, where either the site or the package CSS will get overwritten.
In a perfect world it wouldn't even be targeting Bootstrap OTB 3 but instead be super easy to configure to use any framework and/or custom classes.
You are more than welcome to do a pull request if you come up with something, raise issues/feature request on the tracker or post it here on the forum for further discussion.
Thanks Rune, I will work on something and share of course.
I have some background experience in Wordpress. There, there is a widget created by SiteOrigin (https://siteorigin.com/widgets-bundle/button-widget-documentation/). I find it really useful to use in Websites.
The idea came to my mind why not have something similar and even better in Umbraco as I am sure this is needed when non-technical editors are involved.
Bootstrap styles are overridden when integrating the button with Fanoe Starter Kit
Hello,
I've added this Grid property editor to an existing Umbraco installation having Fanoe starter kit installed.
Fanoe starter kit does define different css classes for rows (dark, light, etc.)
I noticed that the style of the button added are overridden by whatever the row has for a style (dark, etc.).
Is there a way to enforce bootstrap styles no matter what css is used on a website?
Thanks Bilal
Hi Bilal
Yeah, Fanoe only uses bootstraps grid/column system. Everything else is custom. Grid CTA Button only outputs for default Bootstrap 3.
In order to use the Boostrap 3 button colors you need to add the CSS for them. So add something like:
The colors don't don't really match up with Fanoes styling to well but that can easily be changed in the css :)
All the best
Rune
Hi Rune,
By adding the above, I've changed the Fanoe theme. I am thinking of a more generic solution so that wherever I place the button (CTAButton), it will take the default Bootstrap 3 styles.
One possible solution I am thinking of is to include all .btn, .btn-primary, etc. classes that ship with bootstrap and place them in a custom.css file and add !important to each and every single css. Is that ok?
Thanks, Bilal
The above css shouldn't really be overriding anything, it just adds the
btnclasses from Bootstrap. They don't exist in Fanoe, so wether you add them to the one of the existing stylesheets or create a new one is up to you. Adding them separately means that you don't have to worry about overwritingfanoe.csswhen upgrading, so that's actually a good idea. Creating links and button with Fanoesbuttonclass will work like it always did.Your approach will also work, however adding all those
!important's seems a bit much. I would still go for adding the theme color classes (dark,light,yelowetc.) to bootstraps button styling instead./Rune
Yes, now it makes more sense to me.
So, I can get all related classes from Bootstrap (normal state, hover, focus, etc.) and prefix them with .dark, .light, etc.
Actually, I am thinking of adding this to the CtaButton editor :-) Maybe the editor might specify the prefix class to add, then some magic behind the scenes, some css would be generated. Just an idea, i will think more of how to implement this.
Thanks Rune :)
Yes! There is definitely a lot that can be done to make it more clever :)
I do think the best thing is to add classes to whatever output you want it to generate and then having styling in site specific CSS (be it framework or custom code). I'm not a fan of injecting CSS on a site from a package as that easily generates conflicts, where either the site or the package CSS will get overwritten.
In a perfect world it wouldn't even be targeting Bootstrap OTB 3 but instead be super easy to configure to use any framework and/or custom classes.
You are more than welcome to do a pull request if you come up with something, raise issues/feature request on the tracker or post it here on the forum for further discussion.
Thanks Rune, I will work on something and share of course.
I have some background experience in Wordpress. There, there is a widget created by SiteOrigin (https://siteorigin.com/widgets-bundle/button-widget-documentation/). I find it really useful to use in Websites.
The idea came to my mind why not have something similar and even better in Umbraco as I am sure this is needed when non-technical editors are involved.
I will keep you posted.
Regards Bilal
That is a great example! Definitely food for thought. I really like the ability to add icons to the button :) Thanks for sharing that!
Exactly what I was talking about: http://www.chriscraft.com/articles/macro-button/
/Bilal
Oh nice :)
I will try to recreate something similar based on your editor. This editor I believe is not open source, so no access to its code.
I will keep you posted.
/Bilal
is working on a reply...