Button Color

[lesliekirk]

Perhaps I need to start a new post called "Isolating Button Colors". I need to be able to have different color buttons for the various Components. For example, the Hero Component needs a white button but the Two Across Component needs to be yellow. Now what if a store owner needs one of the buttons to be red and the other green?

Here is what I have found from the starting point Brennan pointed out. There are serious limitations to this because there are only 2 button styles - mmx-button__primary and mmx-button__secondary.
mmx-hero#mmx-hero__hero uses mmx-button__primary but so does mmx-hero#mmx-text-banner__text-banner-2. mmx-image-across#mmx-image-across__two-across uses mmx-button__secondary. For the Hero Component, you do have optional Button "Styles" that a store owner can select.

As previously mentioned, I'm trying to figure out if there is a way to use the div ID mmx-hero#mmx-text-banner__text-banner-2 to control the button color. Is there a way to string the div ID and classes together to create a style specific to the mmx-button in the Text Banner 2 Component?

[lesliekirk]

I'm not really sure that is the 'goal' of page builder. my understanding is that it primarily for non-developer people to create pages of content and easily mange content in the site. that being said, there is no reason, even at our level, to have to go directly into existing CSS files to change color/shape and other thematic things. overriding the CSS methods that are employed along with Page Builder are more difficult than standard CSS.

So I'm totally for having the a UI for base level control of thematic elements. To me, its an annoyance to have to do this manually.

Indeed because I now have a request for different button colors. I'm hoping maybe to use a div ID tag to isolate them but my first few attempts have failed. I'll get it but that's not the point...

[Bruce - PhosphorMedia]

Since the goal of Page Builder is to eliminate the need for a developer or have the need for CSS knowledge color selection needs to be available to the store owner or the marketer using this feature.

I'm not really sure that is the 'goal' of page builder. my understanding is that it primarily for non-developer people to create pages of content and easily mange content in the site. that being said, there is no reason, even at our level, to have to go directly into existing CSS files to change color/shape and other thematic things. overriding the CSS methods that are employed along with Page Builder are more difficult than standard CSS.

So I'm totally for having the a UI for base level control of thematic elements. To me, its an annoyance to have to do this manually.

[lesliekirk]

As with most modern day CSS implementation, buttons are give 'roles' to help keep the UI consistent. For example, button-primary, button-secondary, button-warning (and what always overlooked in most schemes, button-cta)

Having randomly assign a color/appearance set, while maybe desired by customers, is just a bad idea IMO.

However, i'm 100% in agreement with the need to make thematic things point-click. Has I've always said, one should try to never manually change assets.

So, to start the list:

Control Shape - i.e., radius for buttons, input fields (and my dev/designer sense says these should match.
Control Style - Flat (like the forum buttons), outline, background
FONT FAMILY - good lawd almighty that should be #1.
Font Sizing
Colors - Backgrounds, font, buttons of course, the different 'roles' (i.e., primary, secondary, etc)

Leslie can this be made into a single 'post' that can be added to?

Bruce, have you looked at the CSS for the Page Builder Buttons? Take a peek at mmx-button Theme Light. The normal store owner is not going to be jumping into the CSS.

Since the goal of Page Builder is to eliminate the need for a developer or have the need for CSS knowledge color selection needs to be available to the store owner or the marketer using this feature.

[Bruce - PhosphorMedia]

As with most modern day CSS implementation, buttons are give 'roles' to help keep the UI consistent. For example, button-primary, button-secondary, button-warning (and what always overlooked in most schemes, button-cta)

Having randomly assign a color/appearance set, while maybe desired by customers, is just a bad idea IMO.

However, i'm 100% in agreement with the need to make thematic things point-click. Has I've always said, one should try to never manually change assets.

So, to start the list:

Control Shape - i.e., radius for buttons, input fields (and my dev/designer sense says these should match.
Control Style - Flat (like the forum buttons), outline, background
FONT FAMILY - good lawd almighty that should be #1.
Font Sizing
Colors - Backgrounds, font, buttons of course, the different 'roles' (i.e., primary, secondary, etc)

Leslie can this be made into a single 'post' that can be added to?

[lesliekirk]

My apologies for not working harder on the list. I do think each instance of the button usage needs to have the ability to select a color for it. I am trying to tweak the CSS but it's been cludgy at best.

[lesliekirk]

Yep, its on the roadmap to address.

Can you send me a list of common style things you see customers wanting to update themselves. I'll make sure they are on our list to address.

I'll get on it. Hopefully others will chime in too Happy New Year!

[Brennan]

Yep, its on the roadmap to address.

Can you send me a list of common style things you see customers wanting to update themselves. I'll make sure they are on our list to address.

[lesliekirk]

Today that requires editing CSS, but we do have plans to add an admin UI to make that more point and click in the future. Those are typically things you do once then its done.

Here are some details on updating the base button colors: https://docs.miva.com/miva10/referen...izing-base-css

Thanks - but I am trying to think like the customers who would want more options/controls for this and might be frustrated.

[Brennan]

Today that requires editing CSS, but we do have plans to add an admin UI to make that more point and click in the future. Those are typically things you do once then its done.

Here are some details on updating the base button colors: https://docs.miva.com/miva10/referen...izing-base-css

[lesliekirk]

Can the Button Text, Background and Border colors be changed (without the need to edit code or add CSS)? What about the radius of the button?