[Typo3-dev] Credo for CSS in tt_news template formatting (applies to other extensions)

[Christopher]

Hiya,

--- Jörg Schaller <jorgo at jorgo.org> wrote:
> Hi all,
> 
> the reason I write this is that I have been playing around with
> customizing the news template and have found some limits.
> 
> Situtation now: 
> 
> In a limited way, the template can be customized via html
> news_template.tmpl. I reached the limit when I wanted to format the
> news title header with CSS. Instead of using the CSS style, the
> header
> box is defined by typoscript as far as I can see, and my CSS styles
> are ignored/overriden for this portion of html.

This is incorrect. All parts of the news plugin's output can be
customized. Identify the offending html in the source of your page and
then search through plugin.tt_news in the TS object browswer for it.
When you find it, just unset it (
plugin.tt_news.displaySingle.someHeadlineStuff > ).

> Outlook:
> 
> Typo3 advocates a division of programming, design and content. Kasper
> himself talks about this trinity in the introductory typo3 document.
> Programming (Typoscript) and design are not always clearly
> distinguishable, though, and that's why we probably have this
> dichotomy of typoscript and html in the news template.

This is inescapable as long as the cms is outputting content
dynamically, and a given template must adapt to differing output
situations. A good example is
plugin.tt_news.displayLatest.image.imageWrapIfAny - picture this
situation:

-I want to wrap all of the images in tt_news in a div (for some kind of
styling, or maybe to contain a caption along with the image)
-I *could* just wrap the ###NEWS_IMAGE### marker in the tt_news
template with the appropriate html code, but what if there is no image?
If, for example, my div's styling had included a background colour, it
would still be visible when no image was present. The solution? Use TS
to test if there IS an image and output the html appropriately (or
not!)

Another good example is an html form. If you need to use an html form
in a plugin (and provided it does not behave differently than the
regular Typo3 form), why not set it up in the plugin's typoscript? This
way, the form can *easily* be made to match the styling of other forms
on the website. Something like this:

myForm = FORM
myForm {
  labelWrap.wrap < tt_content.mailform.20.labelWrap.wrap
  layout < tt_content.mailform.20.layout
}

So if the tt_content.mailform.20 is customized, myForm will inherit
those changes.

> However, with CSS3 around the corner, we will have formatting
> possibilities like never before. One of the most appealing aspects
> will be rounded boxes with just one CSS styling command (if you have
> a
> newer version of Mozilla you can see a working example on the
> frontpage of www.jorgo.org where I am using this for the blog
> headers.)
> 
> 
> Desirable Situation:
> 
> It would be fantastic from a webdesigner's point of view to do all
> formatting for frontend extensions in an htm template with a CSS
> style
> sheet attached to it instead of using typoscript.

I don't even think this is possible; see first example above.
Furthermore, I don't think it's necessarily desirable - see the second
example.

>An even more
> accomplished example can be seen in the ee_blog extension, where all
> the CSS styles are incorporated in ext_typoscript_setup.txt which in
> theory makes it possible to change/select CSS formatting in the
> Constant editor by point and click (it would have to be in
> ext_typoscript_constants.txt then, I assume).

This is a *great* thing (when the plugin's output is entirely
style-able), although I still prefer to re-write the templates in most
cases.

-Christopher





	
		
__________________________________
Do you Yahoo!?
Friends.  Fun.  Try the all-new Yahoo! Messenger.
http://messenger.yahoo.com/