[TYPO3-english] Content-position specific styling in htmlArea

[Erich Schreiber]

Hi Loek,

Thank you for taking the time to answer my question.

But either I didn't make clear what we intended or I do not understand
your answer. 

What we need is the following: no change to the frontend-mark-up or
frontend CSS. This is already perfect. We want to see the correct
layout inside htmlArea corresponding to the current layout of the
element in the frontend. The text in the editor should look as similar
to the frontend styling as possible. 

We code with respect to the 'structural semantic mark-up paradigm'.
That means 'structural semantics' belong to HTML and layout to CSS. We
try to use no classes where they are not really necessary.

Let's say a <h1> is green in one part of the page and red in another
one. There's no extra class attribute to make this happen, but this is
the mechanics of the CSS cascade. But how can we achieve this in the
htmlArea which only opens an element and does know nothing about it's
location in the CSS cascade?

Erich


On Mon, 08 Jun 2009 12:38:30 +0200, Loek Hilgersom
<hilgersom at xs4all.nl> wrote:

>Hi Erich,
>
>Maybe you could use a field from the content records, e.g. section_frame, to 
>select which id to wrap around that content element (or better, use a class 
>instead of id so you can use the same styling more than once on a page if wanted).
>
>Put this in Page TS on your root page:
>
>TCEFORM.tt_content {
>	section_frame {
>		removeItems = 1,5,6,7,10,11,12,13,20,21
>		addItems.30 = Layout 0
>		addItems.31 = Layout 1
>		addItems.32 = Layout 2
>	}
>}
>
>then in your TS setup:
>
>contentdiv.cObject = CASE
>contentdiv.cObject {
>	key.field = section_frame
>	default < tt_content.stdWrap.wrap
>
>	default = TEXT
>	default.value = |
>
>	30 < tt_content.stdWrap.wrap
>	30 = TEXT
>	30.value = <div class="layout0">|</div>
>
>	31 < tt_content.stdWrap.wrap
>	31 = TEXT
>	31.value = <div class="layout1">|</div>
>
>	32 < tt_content.stdWrap.wrap
>	32 = TEXT
>	32.value = <div class="layout2">|</div>
>}
>tt_content.stdWrap.outerWrap < contentdiv
>
>hth,
>Loek
>
>
>
>Erich Schreiber wrote:
>> Hi,
>> 
>> We normally use <div id="something"> ... </div> to setup different
>> areas in our sites (like 'main_content', 'menu', 'footer', etc.).
>> Inside of those DIVs standard HTML-tags do not use further classes and
>> are configured with CSS rules like '#something strong { ... };'
>> 
>> E.g. We have a text-element 'Hello' and put it into header, main
>> content and footer. In the frontend it will look different because of
>> the different CSS rules for those locations. Just now our htmlArea
>> configuration looks the same for all those cases.
>> 
>> How do we get htmlArea to display those different styles in dependence
>> of frontend-location?
>> 
>> This should work in standard subpart-composition and in Templa Voilá
>> with sub-templates.
>> 
>> Erich
>>