[TYPO3-english] Preview Heading Style in HTMLarea Dropdown

[Jigal van Hemert]

Hi,

On 30-4-2014 8:34, Scotty C wrote:
> domain.css file:
>
> h1.style1 {
>   color: red;
> }
>
>
>
> Page TSConfig:
>
> mod.SHARED.colPos_list=1,0,2
>
> #-----------------------------------
> # RTE Configuration
> #-----------------------------------
>
> # Style the Heading dropdowns in the RTE
> RTE.classes {
>     style1 {
>        name = Big and Bold
>        value = color: red;
>     }
> }
>
> RTE.default {
>
>      ## Custom client CSS for same behavoir in BE and FE
>      contentCSS = fileadmin/domain/domain.css
>
>      disableEnterParagraphs=1
>
>      hideTableOperationsInToolbar=0
>
>      buttons.toggleborders.keepInToolbar=1
>      buttons.blockstyle.tags.div.allowedClasses = style1, style2, style3

In the CSS the style is defined for the H1 tag, maybe you meant this 
line to read
        buttons.blockstyle.tags.h1.allowedClasses = style1, style2, style3

[...]

>
> ... but when I go to the RTE and click the "Type of Block" dropdown, all I see is the following list, without any styling:
> No block format
> Container
> Heading 1
> Heading 2
> Heading 3
> Heading 4
> Heading 5
> Heading 6
> Paragraph
> Quotation
>
> There's nothing called "Big and Bold" anywhere.

This selector determines the block type (DIV, H1, H2, H3, H4, H5, H6, P, 
BLOCKQUOTE for this list).
Once you select one of them the select box labelled "Block style": will 
list the possible styles for this block type.

In your case you defined the styles for the H1 block type. So, if you 
select a "Heading 1" block type the styles style1, style2, style3 should 
appear in the "Block style" list. The text 'style1' should be red text 
(because of the styling in the 'value' property) and once selected, the 
text in the RTE should also appear in red (because of the CSS you supplied).

You may have to clear some caches and properly reload the page in the 
browser in some cases before the changes really show up.

-- 
Jigal van Hemert
TYPO3 CMS Active Contributor

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