subheader verlinken und bei rollover unterstreichen

[Rtype]

hi, gerne möchte ich die subheader in den tt_news verlinken und bei mauszeiger-kontakt unterstrichen haben, so wie beispielsweise bei ZEIT online

das verlinken hab ich durchs verschieben der marker recht schnell hinbekommen, leider werden die subheader bei mauskontakt aber noch nicht entsprechend unterstrichen. außerdem möchte ich alle links innerhalb der tt_news gerne in schwarz haben, nicht in blau, was die derzeitige per css definierte linkfarbe für die gesamte seite ist.

und noch eine sache: in bestimmten news-plugins steht über der news elber die zugehörige kategorie. möchte die gerne verlinken, und zwar zu einer anderen seite als wenn man auf die überschrift klickt.

wäre klasse wenn mir da jemand weiterhelfen könnte :)

grüße, anton

[just2b]

@ rollover > css mit hover

georg

[Rtype]

kannst du mir ein gutes tutorial nennen, bzgl. typo3 und css, bzw. einbindung von css in typo3?

LG, anton

[christiana83]

Nee, das geht ganz einfach.

Für die Gestaltung deiner Seite bindest du ein oder mehrere CSS im Setup ein über:

page.stylesheet >
page.includeCSS.file1 = fileadmin/styles/main.css


Du kannst natürlich auch extra noch einen für die tt_news anlegen, z.B.


page.stylesheet >
page.includeCSS.file1 = fileadmin/styles/main.css
page.includeCSS.file2 = fileadmin/styles/tt_news.css


Deine CSS Dateien speicherst du dann natürlich auch in diesem Verzeichnis.

Dann schaust du dir die HTML- Vorlage der tt_news Extension an. Diese findest du im Verzeichnis "typo3conf/ext/tt_news/pi1". Die HTML Vorlage nimmst du und kopierst sie ins fileadmin.

Im TypoScript bindest du diese dann ein über

plugin.tt_news.templateFile = fileadmin/newsvorlage.html


Anschließend öffnest du deine Vorlage und gehst in den entsprechenden Marker BEreich, den du auch auf deiner Seite ausgibst (LIST oder LATEST). Dort siehst du , dass um den Titel- Marker folgendes gelegt ist:

<!--###LINK_ITEM###-->###NEWS_TITLE###<!--###LINK_ITEM###-->

Du kopierst dir einfach <!--###LINK_ITEM###--> und legst das um deinen Subheader

<!--###LINK_ITEM###-->###NEWS_SUBHEADER###<!--###LINK_ITEM###-->

Damit wäre dein Subheader schonmal verlinkt.

Jetzt brauchst du in dem HTML- Template einfach nur noch eine Klasse um den Subheader:

<div class ="meineklasse"> <!--###LINK_ITEM###-->###NEWS_SUBHEADER###<!--###LINK_ITEM###-->
</div>

Und schon kannst du den Link formatieren (hover ist für den Effekt, wenn der Mauszeiger drüber fährt)

#meineklasse a{}
#meineklasse a:hover {text-decoration:underline;}

[Rtype]

hallo
zunächst mal many thanks für diese wirklich ausführliche und in vielen punkten schon jetzt sehr hilfreiche antwort, die wie ich finde sehr schön den ansatz bzgl. einbindung von css erklärt. was mich noch interessieren würde, wenn man die html-datei verschoben und die css-files eingebunden hat, funktionieren diese css-styles dann global für alle tt_news-plugins innerhalb der seite? habe ja inzwischen ansammlung von verschiedenen tt_news-tmeplates, die jeweils für ein oder mehrere plugins stehen und würde gerne ein bestimmtes davon mit css ansprechen und entsprechend modifizieren. allerdings sind das ja tmpl.-dateien, die ich immer nur innerhalb des plugins hochgeladen hab und bisher auch im ftp-uploader noch nciht gefunden habe. und du sagtest ja auch html-datei. hmmmmmmmmm...... na ich werd nochmal schauen, vieleicht hab ich den griff einfach noch nciht richtig geblickt. werds mir morgen wohl nochmal genauer ansehen, frisch und ausgeschlafen usw ;)

grüße aus hannover, anton

[christiana83]

hallo
was mich noch interessieren würde, wenn man die html-datei verschoben und die css-files eingebunden hat, funktionieren diese css-styles dann global für alle tt_news-plugins innerhalb der seite?

Da du das CSS meist im Roottemplate einbindest, gilt es für alle Unterseiten, es sei denn du überschreibst dieses auf einer Unterseite mit einem anderen CSS.

hallo
habe ja inzwischen ansammlung von verschiedenen tt_news-tmeplates, die jeweils für ein oder mehrere plugins stehen und würde gerne ein bestimmtes davon mit css ansprechen und entsprechend modifizieren. allerdings sind das ja tmpl.-dateien, die ich immer nur innerhalb des plugins hochgeladen hab und bisher auch im ftp-uploader noch nciht gefunden habe.

Ob die "html" oder "tmpl" heißen ist egal. Das CSS funktioniert trotzdem.
Wenn du Template Dateien innerhalb des Plugin hoch lädst, werden die im Verzeichnis "uploads" gespeichert. Das liegt außerhalb vom fileadmin. Du kannst die Dateien auch per TypoScript angeben, dann kannst du sie speichern, wo du es möchtest und findest die Dateien dann auch wieder.

Ein bestimmtes Template kannst du trotz Verwendung von nur einem CSS ansprechen, indem du in diesem Template einfach bestimmte Klassen zuweist, die nur für dieses Template gültig sind, sodass andere News davon unberührt bleiben.

[Rtype]

hi christiana83

"Ein bestimmtes Template kannst du trotz Verwendung von nur einem CSS ansprechen, indem du in diesem Template einfach bestimmte Klassen zuweist, die nur für dieses Template gültig sind, sodass andere News davon unberührt bleiben."

hast du dafür vieleicht ein beispiel auf lager?

greets, anton