[TYPO3-english] Preview Heading Style in HTMLarea Dropdown

[Jigal van Hemert]

Hi,

On 29-4-2014 6:02, Scotty C wrote:
> My current client wants to put different sizes and colours of text
> EVERYwhere in their site. I've advised them to use CSS, which they're
> willing to do, but HTMLarea doesn't show a preview of each heading
> style and the client can't remember what each style looks like. So,
> they've decided to use font-size/color instead. .... and I can't
> blame them!
>
> Could somebody please tell me how I can stylize the items in the
> "block format" dropdown of HTMLarea so users can get a preview of
> each headings style?

First of all, great that you want to help them use proper markup to 
achieve a certain styling. Configuring the RTE is no fun in the 
beginning, but as you learn how to use the page TSconfig you'll the 
possibilities.

Lets assume that you want to supply the classes style1, style2 and 
style3 for a DIV tag.

The content of the editing area can be styling with

RTE.default {
   contentCSS = path/to/file.css
}

The content CSS should contain selectors for the tag and class like:

p.style1 {
   font-size: 1.2em;
   font-weight: bold;
}

The items in the drop-down for block style if a DIV ("container") is 
selected can be defined by page TSconfig:

RTE.classes {
    style1 {
      name = Big and bold
      value = font-size: 1.2em; font-weight: bold;
    }
}

The value is the styling applied in the drop-down list. Items are listed 
in alphabetical order. [1]

Now we need to restrict the classes that can be used to the DIV tag:

RTE.default {
   buttons.blockstyle.tags.div.allowedClasses = style1, style2, style3
}

And also allow these classes to be stored in the database:

RTE.proc {
   allowedClasses = ......, style1, style2, style3
}

There are loads of options to change the behaviour:
- mutually exclusive classes, to make sure that only one of these 
classes can be applied at the same time (they can be grouped to allow 
only one of a group at the same time)

There is lots more configuration [2] and many examples with comments can 
be found on various sites. Although some options are obsolete or 
deprecated, the majority can still be used.

[1] 
http://docs.typo3.org/typo3cms/extensions/rtehtmlarea/6.2/Configuration/PageTsconfig/classes/Index.html
[2] 
http://docs.typo3.org/typo3cms/CoreApiReference/Rte/Transformations/Tsconfig/Index.html

-- 
Jigal van Hemert
TYPO3 CMS Active Contributor

TYPO3 .... inspiring people to share!
Get involved: typo3.org