[TYPO3-english] Preview Heading Style in HTMLarea Dropdown

[Scotty C]

Hi Jigal,

First of all, THANK YOU, AGAIN, for your detailed response. You are truly a TYPO3 master and friendly to boot - I appreciate it.

I think I followed your steps to the letter, but my dropdowns aren't changing. Here's what I've got:

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

    showButtons (
spellcheck, findreplace, bar,
copy, cut, paste, removeformat, bar,
undo, redo, bar,
toggleborders, table,  chMode, bar, linebreak,
tableproperties, bar,
rowproperties, rowinsertabove,rowinsertunder, rowdelete, rowsplit, bar,
columninsertbefore, columninsertafter,columndelete, columnsplit, bar, 
cellproperties,cellinsertbefore, cellinsertafter, bar,
celldelete, cellsplit, cellmerge, bar, linebreak,
strikethrough, subscript, superscript, bar,
orderedlist, unorderedlist, bar,
outdent, indent, bar, 
line, link, inserttag, acronym, insertcharacter, emoticon, image, bar, linebreak,
formatblock, bar, 
bold, italic, underline, bar,
fontsize, textcolor, bar,
left, center, right, justifyfull
    )
    toolbarOrder (
spellcheck, findreplace, bar,
copy, cut, paste, removeformat, bar,
undo, redo, bar,
toggleborders, table,  chMode, bar, linebreak,
tableproperties, bar,
rowproperties, rowinsertabove,rowinsertunder, rowdelete, rowsplit, bar,
columninsertbefore, columninsertafter,columndelete, columnsplit, bar, 
cellproperties,cellinsertbefore, cellinsertafter, bar,
celldelete, cellsplit, cellmerge, bar, linebreak,
strikethrough, subscript, superscript, bar,
orderedlist, unorderedlist, bar,
outdent, indent, bar, 
line, link, inserttag, acronym, insertcharacter, emoticon, image, bar, linebreak,
formatblock, bar, 
bold, italic, underline, bar,
        fontsize, textcolor, bar,
left, center, right, justifyfull
   )

   proc {
        ## used for styling the dropdowns
        allowedClasses = style1, style2, style3
        
## CSS Styled Content is used.
overruleMode = ts_css

## Do not convert br to p
dontConvBRtoParagraph = 1

## Don't Remap div to p
remapParagraphTag =
entryHTMLparser_db.tags.p.remap = para 
        exitHTMLparser_db.tags.para.remap = p 

## Tag which are allowed outside the p and div
allowTagsOutside = hr, address, object, embed

## TAGS ALLOWED
## Added to the default internal list: 
        ## b,i,u,a,img,br,div,center,pre,font,hr,
        ## sub,sup,p,strong,em,li,ul,ol,blockquote,strike,span
## But, for the sake of clarity, we use a complete list in alphabetic order.
## center, font, strike, sdfield and  u will be removed on entry (see below).
## b and i will be remapped on exit (see below).
## Note that the link accessibility feature of htmlArea RTE does insert img tags.
allowTags (
a, abbr, acronym, address, blockquote, b, br, caption, cite, code, div, em,
font, h1, h2, h3, h4, h5, h6, hr, i, img, li, link, ol, p, pre, q, sdfield,
span, strong, sub, sup, table, tbody, td, th, tr, tt, u, ul,
                object,param,embed
)

## TAGS DENIED
## Make sure we can set rules on any tag listed in allowTags.
denyTags >

## ALLOWED P & DIV ATTRIBUTES
## Attributes class and align are always preserved
## Align attribute will be unset on entry (see below)
## This is a list of additional attributes to keep
keepPDIVattribs = xml:lang

## CONTENT TO DATABASE
entryHTMLparser_db = 1
entryHTMLparser_db {
## TAGS ALLOWED
## Always use the same list of allowed tags.
allowTags < RTE.default.proc.allowTags

## TAGS DENIED
## Make sure we can set rules on any tag listed in allowTags.
denyTags >

## AVOID CONTENT BEING HSC'ed TWICE
htmlSpecialChars = 0

tags {
## REMOVE IMG TAGS
# img.allowedAttribs = 0
# img.rmTagIfNoAttrib = 1

## REMOVE SPAN TAGS
span.allowedAttribs = 0
span.rmTagIfNoAttrib = 1

## CLEAN ATTRIBUTES ON THE FOLLOWING TAGS
## Span fixAttrib unnessesary since not allowed.
#span.fixAttrib.style.unset = 1
p.fixAttrib.align.unset = 1
div.fixAttrib.align.unset = 1
hr.allowedAttribs = class
b.allowedAttribs = xml:lang
blockquote.allowedAttribs = xml:lang
cite.allowedAttribs = xml:lang
em.allowedAttribs = xml:lang
i.allowedAttribs = xml:lang
q.allowedAttribs = xml:lang
strong.allowedAttribs = xml:lang
sub.allowedAttribs = xml:lang
sup.allowedAttribs = xml:lang
tt.allowedAttribs = xml:lang
}

## REMOVE OPEN OFFICE META DATA TAGS AND DEPRECATED HTML TAGS
## We use this rule instead of the denyTags rule so that we can
## protect custom tags without protecting these unwanted tags.
removeTags = center, o:p, sdfield, strike

## PROTECT CUSTOM TAGS
keepNonMatchedTags = protect
}

HTMLparser_db {
## STRIP ALL ATTRIBUTES FROM THESE TAGS
## If this list of tags is not set, it will default to: 
                ## b,i,u,br,center,hr,sub,sup,strong,em,li,ul,ol,blockquote,strike.
## However, we want to keep xml:lang attribute on most tags 
## and tags from the default list where cleaned on entry.
noAttrib = br

## XHTML COMPLIANCE
## Note that applying xhtml_cleaning on exit 
## would break non-standard attributes of typolink tags
xhtml_cleaning = 1
}

exitHTMLparser_db = 1
exitHTMLparser_db {
## REMAP B AND I TAGS
## b and i tags are used by Mozilla/Firefox in editing mode.
## This must be done on exit because 
## the default HTMLparser_db parsing executes the reverse mapping.
tags.b.remap = strong
tags.i.remap = em

## KEEP ALL TAGS
## Unwanted tags were removed on entry.
## Without this rule, the parser will remove all tags! Presumably, 
## this rule will be more efficient than repeating the allowTags rule
keepNonMatchedTags = 1

## AVOID CONTENT BEING HSC'ed TWICE
htmlSpecialChars = 0
}
   }
}


## Use same RTE processing rules in FE
RTE.default.FE.proc < RTE.default.proc

## RTE processing rules for bodytext column of tt_content table
## Erase settings from other extensions
RTE.config.tt_content.bodytext >

## Make sure we use ts_css transformation
RTE.config.tt_content.bodytext.proc.overruleMode = ts_css
RTE.config.tt_content.bodytext.types.text.proc.overruleMode = ts_css
RTE.config.tt_content.bodytext.types.textpic.proc.overruleMode = ts_css



... 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.

I'm sure this is a simple misunderstanding (read: I'm still too new at this!) so I'm hoping you can steer me in the right direction.

Thanks again,
-Scott.




>________________________________
> From: Jigal van Hemert <jigal.van.hemert at typo3.org>
>To: typo3-english at lists.typo3.org 
>Sent: Tuesday, April 29, 2014 12:12:08 AM
>Subject: Re: [TYPO3-english] Preview Heading Style in HTMLarea Dropdown
> 
>
>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
>_______________________________________________
>TYPO3-english mailing list
>TYPO3-english at lists.typo3.org
>http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-english
>
>
>