Path

ez projects / ezoe / forum / general / styling custom tags in oe


Styling custom tags in OE

You need to be logged in to post messages in the forums. New users may register here.

Bruce Morrison

Member since:
07 March 2003

Posts: 37

Wednesday 09 December 2009 7:53:09 am

Hi Andre

Any hints on where styles should go so that custom tags are styled in the OE. I know the styles I need to apply just need to know where to put them!

Cheers
Bruce
Up

Russell Michell

Member since:
07 April 2008

Posts: 15

Thursday 07 January 2010 9:23:46 pm

Gidday Bruce - I seem to be struggling with the same or a similar issue.

So far I have managed to get my CSS classes to appear in a drop-down menu inside ezoe's popup dialogue for inserting/editing images added via the 'embed' template.

My own problem is knowing how to pass the selected class to a template via the attribute_view_gui template function. If I don't use this function for my ezoe custom tags, then I can pass vars directly from the popup dialogues to my templates but not seemingly using attribute_view_gui. (Here's a link to my forum post: http://bit.ly/4wRTfg)

Anyway, here is how I have my classes showing up in ezoe's dialogues - I hope it's helpful to you!

In: extension/ezoe/settings/content.ini.append.php




# Pattern for content type:


#[<tag>-type_<content-type>]


#


## This examples demonstrates limiting AvailableClasses list in editor


## when editing embed tags with a relation to a object of content type image.


[embed_image]


AvailableClasses[]


AvailableClasses[]=image-right


AvailableClasses[]=image-left




For custom tags, I have my CSS class definitions in: extension/ezoe/settings/ezoe_attributes.ini but I think they can all go in extension/ezoe/settings/ezoe_customattributes.ini (I haven't experimented though)




[CustomAttribute_my-custom-tag-definition-name-or-title]


Name=CSS Class


Default=some-css-class


Type=select


Selection[]


Selection[some-css-class]=some-css-class


Selection[some-css-class-2]=some-css-class-2




...etc

Good luck
Russ

Russell Michell, Wellington, New Zealand.
We're building! http://www.theruss.com/blog/
I'm on Twitter: http://twitter.com/therussdotcom

Believe nothing, consider everything.

Up

André R

Member since:
20 August 2005

Posts: 171

Friday 08 January 2010 9:54:37 am

Hi guys!

Sorry for late response Bruce, overlooked this thread.
Seems like you want to style tags inside the editor, and here is how (from design.ini):



[StylesheetSettings]


# A list of stylesheets to use for the editor content.


# Enable the code button in ezoe.ini to be able to see the


# generated html content or use a debug tool like firebug!


# You can use a variable <skin> anywhere in the path / filename


# this (optional) variable is taken from ezoe.ini


EditorCSSFileList[]=skins/<skin>/content.css


 

 

## Here is an example for appending your own css to the editor


## content you need to place it in the stylesheets folder in


## one of your active eZ Publish designs.


#[StylesheetSettings]


#EditorCSSFileList[]=my_custom_editor_styles.css


 

 

# EditorDialogCSSFileList is just like EditorCSSFileList exept it


# is used in the popup dialogs in the editor and it is loaded after


# the dialog.css file from the selected skin.


# example for stylesheet/my_custom_editor_dialog_styles in some design:


#[StylesheetSettings]


#EditorDialogCSSFileList[]=my_custom_editor_dialog_styles.css




As for custom tags they can be either div, span or image, that corresponds to block, inline and image tag as specified by the content.ini [CustomTagSettings]IsInline setting (see content.ini for more info and doc on other related topics).
They have two classes on them witch you can use to target them for, the general is 'mceItemCustomTag' and then there is another one from the tag name, forinstance 'pagebreak'.
Some custom tags will use native tags though, these are currently (ezoexmlinput.php):



   public static $nativeCustomTags = array(


                 'underline' => 'u',


                 'sup' => 'sup',


                 'sub' => 'sub'


                 );




Examples of custom tag styling (stylesheets/skins/o2k7/content.css):



span.mceItemCustomTag.strike


{


 text-decoration: line-through;


}


 

div.mceItemCustomTag.pagebreak


{


 height: 12px;


 border: 1px dotted #ccc;


 margin: 15px 0 15px 0;


}


 

div.mceItemCustomTag.pagebreak p { margin: 0; } /* page break has an paragraph as only content */




Embed tags can be styles the same way, they also have div / span / img, where image is used for image relations, div for general embed relations and span for embed-inline relations (the tag, not the view... this is controlled by the 'inline' check box in the embed dialog).
Classes on embed tags are (excluding image): "mceNonEditable <user-class-on-tag> mceItemContentType<Relation-Group-type-as-defined-pr-class-in-content.ini>"

hope this helps :)

--
ar

Up

You need to be logged in to post messages in the forums. New users may register here.