eZ Community » Forums » Extensions » ezoe custom tags styling via multiple...
expandshrink

ezoe custom tags styling via multiple classes

ezoe custom tags styling via multiple classes

Monday 11 February 2013 11:37:45 pm

I have added attributes to the Factbox custom tag that are used to add classes to the view template. For example: type (example, explanation, risk, highlight, pull-quote), align (left, center, right), width (narrow, wide, very-wide), etc.).  Using these classes I can style the different combinations appropriately.  This works find in the view view, but in ezoe, since the classes aren't there, it is impossible to make the factbox look the same as it will when it's published.  This makes it not very WYSIWYG and very difficult for the content creator.

To fix this, I created a slightly modified input handler (ezoexmlinput.php) that adds the custom attributes as classes to the custom tag div. So for example the markup becomes:

<div type="custom" 
    class="ezoeItemCustomTag factbox factbox-example factbox-right factbox-narrow" 
    customattributes="title|attribute_separationtype|factbox-exampleattribute_separationalign|factbox-rightattribute_separationwidth_option|factbox-narrow">
    <p>Lorem ipsum...</p>
</div>

This way I am able to add the same styles as in the view view and the editor sees the box as it will be when published.  

Unfortunately, there are two problems:

1) When initially creating the custom tag, ezoe (or tinymce) creates the markup and I haven't been able to figure out where in the javascript I can add a patch to insert the attribute values as classes.  I could solve this with a separate js script to parse the custom tag attributes out of the customattributes attribute on the div and add them to the class attribute, but I still have problem 2.

 

2) When I publish the object any ezoe attributes with extra classes get removed altogether.  

 

I'd be grateful if anyone has some ideas to point me in the right direction.

 

UPDATE

I solved the styling problem in a less obtrusive way by just using css3 substring selectors on the customattributes attribute. For example:

.factbox[customattributes*="factbox-example"] {  background-color: #1f768a;}

.factbox[customattributes*="factbox-instructions"] {  background-color: #dfdad4;  color: #333333;}

.factbox[customattributes*="factbox-highlight"] {  background-color: #f6d307;  color: #333333;}

This approach works pretty well, but it does have a few drawbacks:

  1. You can't directly re-use the css from the view view
  2. Older browsers don't support the attribute substring selector
  3. Substring selectors are slower than class selectors

I'd still be curious to know why the extra classes were causing the custom elements to be stripped out on publishing. More specifically, where in the code this is happening and how it could be changed.

Modified on Tuesday 12 February 2013 8:53:30 am by Fraser Hore

No reply yet!

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from