Zum Inhalt springen

News komplett CSS basiert ohne Tabellen

Erstellt am 24. August 2005 · 8 Antworten · letzte Antwort am 25. August 2005

Tags: tt_news, HTML & CSS, Frage

droptix ·

Ich suche seit zwei Tagen nach einer vernünftigen Doku oder Anleitung für das tt_news 2.2.24, um das Aussehen anzupassen.

Ich möchte eine komplett tabellenlose Darstellung, also nur mit <div> Tags und CSS. Das News-Template sieht sehr verwirrend aus. Es ist ja auch eine ganze HTML-Seite und nicht nur ein Ausschnitt für ein Template… Dort drin finden sich für die verschiedenen Darstellungsmodi wie LIST oder SINGLE Tabellen wieder. Was darf man denn dort anpassen?

Ich hab auch noch nicht entdecken können, ob oder wie ein Stylesheet verwendet wird, um z.B. die Überschrift, den Text oder Links zu gestalten. Im Ordner 'typo3conf/ext/tt_news/res' befinden sich gleich zwei Stylesheets, aber erklärt ist nichts. Welches muss man nehmen? Wo liegen da die Unterschiede? Muss ich das CSS genau so in TS angeben wie das Template?

Ich habe auch nicht begriffen, woher die aus tt_news generierten Inhalte ihre Eigenschaften wie Farbe usw. beziehen. Eine Änderung von z.B. <a> Tags in meinem CSS brachte rein gar nichts. Aber Klassen oder IDs werden auch nicht verwendet. Sehr seltsam alles…

Sorry, aber das ist alles wirklich sehr unübersichtlich. Ich arbeite nunmehr seit über vier Wochen mit 'tt_news' und hab allerhand gelesen und recherchiert. Hab mir auch alle Videos dazu reingezogen.

Wie's bei mir läuft (ist vielleicht gleich ne Hilfe für andere): Ich habe nur ein Template. Darin steht der Aufbau meiner Typo3-Seite und die Konfiguration des News-Plugins. Ich poste hier mal v.a. die 'tt_news' relevanten Dinge. Für Verbesserungsvorschläge bin ich immer offen. Danke!

Constants

# News plugin tt_news
# Page ID News: Die ID der Seite für die LIST Ansicht
pid_list = 13
# Page ID Singlenews: Die ID der Seite für die SINGLE Ansicht
singlePid = 15
# Page ID Archiv: Die ID der Seite für das AMENU (Archiv
archiveTypoLink = 18

Setup

# News plugin tt_news
plugin.tt_news {
    # Pfad zum eigenen Template
    templateFile = fileadmin/news_template.tmpl
    # Variable pid_list wird leer gemacht
    pid_list >
    # PID wird über eine Konstante festgelegt
    pid_list = {$pid_list}
    # Rekursiv, wenn News in Unterordnern sind
    recursive >
    recursive = 1
    # UID der Seite Singleview
    singlePid = {$singlePid}
    # Archiv Aktivieren
    archive = 1
    # UID der Archivseite
    archiveTypoLink.parameter = {$archiveTypoLink}
    # Deutsche Zeit- und Datumsformatierung
    displayList.date_stdWrap.strftime = %A %e. %B
    displayLatest.date_stdWrap.strftime = %A %e. %B
    displaySingle.date_stdWrap.strftime = %A %e. %B
    displaySingle.time_stdWrap.strftime = %H:%M Uhr
}

Include static
content (default) [für Seiten-Template]

Include static (from extensions)
CSS Styled Content (css_styled_content) [für Seiten-Template]
CSS-based tmpl (tt_news) [für tt_news]

mic_jan ·

Also das Template mit den divs hast du doch schon unter static eingebunden.

Jetzt musst du nur noch das richtige Template dazu finden 😉
tt_news/pi/tt_news_v2_template.html

und die passende CSS-Datei heisst fast genauso.

Und dann kopierst du die beiden Dateien in dein Fileadmin und gibst im TS-Setup die Orte an.

Und schon hast du ein Layout ohne Tabellen.

Aber ich bin mir sicher, dass das meiste dazu auch im Manual steht. Und ich glaube nicht, dass es für die aktuelle News-Version schon ein Video gibt :o

Gruss

Michael

droptix ·

Oh ja, da hab ich lange nicht mehr reingeschaut. Anfangs war das viel zu viel, aber mittlerweile hab ich mehr Durchblick… Hast recht, da steht eigentlich alles drin -> Danke!

[Edit:] Oh nein, ich muss mich korrigieren. Ich habe 'news_template.tmpl' (table based) gegen 'tt_news_v2_template.html' (css based) getauscht, die ursprünglich im Ordner 'typo3conf/ext/tt_news/pi' liegt. Die hab ich mir kopiert:

plugin.tt_news.templateFile = fileadmin/ipp/template/tt_news_v2_template.html

Kein Problem und funzt! Nun möchte ich aber nicht bei 'Include static (from extensions):' das 'default CSS-styles (tt_news)' haben, da tt_news sonst auf die Datei 'typo3conf/ext/tt_news/res/tt_news_v2_styles.css' zurückgreift. Das ist zwar tendenziell richtig, aber nur für den Fall, dass ich später verschiedene Styles brauche, habe ich mir die Datei 'tt_news_v2_styles.css' in dasselbe Verzeichnis kopiert wo auch 'tt_news_v2_template.html' liegt und angepasst, ohne das Original zu verändern.

Wenn ich nun das Template öffne, dann steht da:

<head>
<!--
		IMPORTANT: The stylesheet link below is only for testing the template file directly in a browser while editing it.
		On the website the css styles for tt_news have to be include with the static TS template "default CSS style (tt_news)" or
		with an external file (see tt_news/res/tt_news_v2_styles.css) which you include via TypoSript in the "page" object.

 -->
	<title>new News example template</title>
    <link href="tt_news_v2_styles.css" rel="stylesheet" type="text/css" />
</head>

Aha! Also brauche ich den Pfad zur .css eigentlich nicht anpassen, da er später ignoriert wird. Macht nur Sinn, wenn ich daran arbeite und eine Vorschau brauche. Ich hab's trotzdem angepasst. Ich muss die .css für tt_news also im PAGE Objekt reintippen, aber ich weiß leider nicht wie. Ich hab's so probiert, aber da wird das erste CSS ignoriert und anstatt beide wird nur das zuletzt angegebene verwendet:

# Default PAGE object:
page = PAGE
page {
    typeNum = 0
    # Pfad zum Standard Stylesheet für die Seite
    stylesheet = fileadmin/ipp/template/standard/css/default.css
    10 < temp.mainTemplate
    # Pfad zum tt_news Template
    templateFile = fileadmin/ipp/template/tt_news_v2_template.html
}

So geht's also nicht, weil das ganze Seitenlayout im Arsch ist… Ich hab's dann so probiert, aber komplett ohne Wirkung (ist ja auch kein PAGE Objekt):

plugin.tt_news.templateFile = fileadmin/ipp/template/tt_news_v2_template.html
plugin.tt_news.stylesheet = fileadmin/ipp/template/tt_news_v2_styles.css

Wo und wie also muss es rein? Sorry, aber das steht wirklich nicht in der Doku… oder stelle ich mich zu blöd an?

Danke für jeden Tipp :o

mic_jan ·

Okay, das Vorgehen für die tt_news-css ist eigentlich wie bei allen Extensions, die die Stylesheets in den Head schreiben.

1. Styles rausschmeissen:
in diesem Fall das Stylesheet aus "include" rausschmeissen
2. TYPO3 sagen, dass es eine weitere STylesheetdatei gibt.

Hier ein Beispiel für das TS-Setup:

page.includeCSS { 
file1 = fileadmin/standard.css
file2 = fileadmin/tt_news.css
file3 = fileadmin/print.css
file3.media = print
}

Damit solltest du eigentlich klarkommen 😉 Und jetzt weisst du auch, wie man das "print"-Stylesheet einbindet... Nur für den Fall, dass das mal interessant werden könnte....

Gruss

Michael

mic_jan ·

Achja, du kannst auch einfach die tt_news-styles in dein "Haupt"-Template kopieren... ist aber nicht so komfortabel beim Ändern

Gruss

Michael

droptix ·

Ich will schon ein getrenntes .css haben 😉

Das 'includeCSS {…}' kannte ich noch nicht. Für alle Interessierten hier also mein geändertes Template-Setup, der Rest bleibt wie oben beschrieben:

D A N K E !

# XHTML Strict:
config.doctype = xhtml_strict
config.xhtml_cleaning = all
config.htmlTag_langKey = de
# XML Prolog und Doctype tauschen, damit IE in den XHTML Strict-Modus kommt
[browser = msie]
config.doctypeSwitch = 1
[end]
# Den XML Prolog muss man nicht abschalten, aber es wird z.T. empfohlen
config.xmlprologue = none

# Template content Objekt:
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
    template = FILE
    template.file = fileadmin/ipp/template/standard/template.html
    workOnSubpart = DOCUMENT_BODY
    marks {
        CONTENT < styles.content.get
        RIGHT < styles.content.getRight
        MENU = HMENU
        MENU {
            wrap = <div id="menu">|</div>
            1 = TMENU
            1.NO.linkWrap = |
        }
    }
}

# Default PAGE object:
page = PAGE
page {
    typeNum = 0
    # Pfad zum Standard Stylesheet für die Seite
    stylesheet = fileadmin/ipp/template/standard/css/default.css
    # Weitere Stylesheets
    includeCSS {
        # Pfad zum tt_news Stylesheet
        file1 = fileadmin/ipp/template/tt_news_v2_styles.css
    }
    10 < temp.mainTemplate
}

# News plugin tt_news
plugin.tt_news {
    # Pfad zum tt_news Template
    templateFile = fileadmin/ipp/template/tt_news_v2_template.html
    # Variable pid_list wird leer gemacht
    pid_list >
    # PID wird über eine Konstante festgelegt
    pid_list = {$pid_list}
    # Rekursiv, wenn News in Unterordnern sind
    recursive >
    recursive = 1
    # UID der Seite Singleview
    singlePid = {$singlePid}
    # Archiv Aktivieren
    archive = 1
    # UID der Archivseite
    archiveTypoLink.parameter = {$archiveTypoLink}
    # Deutsche Zeit- und Datumsformatierung
    displayList.date_stdWrap.strftime = %A, %e. %B
    displayLatest.date_stdWrap.strftime = %A, %e. %B
    displaySingle.date_stdWrap.strftime = %A, %e. %B
    displaySingle.time_stdWrap.strftime = %H:%M Uhr
    displaySingle.age_stdWrap.age =  Minuten | Stunden | Tage | Jahre
}