Page Builder - More CSS Challenges

[lesliekirk]

I thought I had come up with a pretty nifty CSS tweak that the store owner had requested for image mouseovers as posted here. I was wrong, it's great for the images but the same class "mmx-hero__image-container" for some reason is also being picked up by the Text Area Component (which does not have the ability to set a background color).

In the themes/00000001/shadows/mmx/mmx-hero/styles.css file I added:

.mmx-hero__image-container {background-color: #1abc9c;}

So my kludgy fix to resolve the conflict has been to add this to the head tag area Page Template that this set of Text Area Components is in use is:

#mmx-text-area__text-area, #mmx-text-area__text-area-2, #mmx-text-area__mmx_textarea, #mmx-text-area__mmx_textarea_3, #mmx-text-area__mmx_textarea_1 {background-color:#F8D351;}

I foresee all sorts of problems with my method.


I also see some kludginess on the naming conventions for the ID's of each Text Area Component:

Why do they go?

mmx-text-area__text-area
mmx-text-area__text-area-2
mmx-text-area__mmx_textarea
mmx-text-area__mmx_textarea_3
mmx-text-area__mmx_textarea_1

Why not something like?

mmx-text-area__text-area-1
mmx-text-area__text-area-2
mmx-text-area__text-area-3
mmx-text-area__text-area-4

Anywho, just documenting a bit of frustration (I still haven't been able to create a .pkg file and I tried to with an unedited pkg that I unpacked locally).