Joomla Beitragstitel Link formatieren

[Markuss]

Hallo,

ich erstelle gerade ein Template für Joomla und komme bei einem "einfachen" Beitragstitel, welcher verlinkt ist, nicht weiter.

Diesen würde ich gerne in einer anderen Farbe darstellen. Meine bisherigen versuche dies zu machen sind aber leider gescheitert, daher möchte ich Euch um Hilfe bitten.

Mein HTML Code sieht folgendermaßen aus:

  
<div class="page-header">  
    <h2 itemprop="name">  
        <a itemprop="url" href="/index.php/news/3-news-2">  
             News 2  
        </a>  
    </h2>  
</div>  

Nun würde ich gerne "News 2" in Rot anzeigen wollen.

Probiert habe ich es zuletzt mit folgendem CSS Code, welcher allerdings keine Wirkung zeigt.

  
.page-header h2 {font-size: 20px;}  
  
a.page-header a:link {color: red;}  
a.page-header a:active {color: red;}  
a.page-header a:visited {color: red;}  

Könnt Ihr mir vielleich helfen?

lg
Markus

[Felix Riesterer]

Lieber Markuss,

ich habe mit der Semantik Deines Markups ein Problem:

<div class="page-header">

<h2 itemprop="name">
        <a itemprop="url" href="/index.php/news/3-news-2">
             News 2
        </a>
    </h2>
</div>

  
Warum <div> anstatt [<header>](http://wiki.selfhtml.org/wiki/HTML/Seitenstrukturierung/header)? Vielleicht könntest Du mit dem <header>-Element Dein <h2>-Element sogar einsparen...?  
  

> Nun würde ich gerne "News 2" in Rot anzeigen wollen.[...]  
> ~~~css

.page-header h2 {font-size: 20px;}  

>   
> a.page-header a:link {color: red;}

Dein Nachfahrenselektor ist falsch gewählt. Aktuell sagst Du in etwa "das <a>-Element, welches ein Nachfahrenelement eines anderen <a>-Elements mit der Klasse 'page-header' ist", anstatt "das <a>-Element, welches der Nachfahre eines Elements mit der Klasse 'page-header' ist". Wie Du weißt, dürfen <a>-Elemente nicht verschachtelt werden. Daher hat dieser Selektor gemäß der Spezifikation keinen Sinn!

Kommst Du nun selbst drauf?

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Vielleicht könntest Du mit dem <header>-Element Dein <h2>-Element sogar einsparen...?

Wenn das eine Überschrift ist: nein. Sonst wäre die Überschrift nicht als solche ausgezeichnet.

Das div- bzw. header-Element ließe sich einsparen.

Qapla'

[Markuss]

Hallo,

danke für die Tipps!

Ich denke ich hab's.

  
.page-header a:link,:visited,:hover {color: red; text-transform:uppercase; text-decoration: none;}  

Kann man das so lassen oder gibt es eine andere - bessere - Möglichkeit?

lg.
Markuss

[Felix Riesterer]

Lieber Markuss,

.page-header a:link,:visited,:hover {color: red; text-transform:uppercase; text-decoration: none;}

Du selektierst entweder Hyperlinks in Elementen der Klasse "page-header", oder alle anderen besuchten oder alle anderen gehoverten Hyperlinks. Ist das so beabsichtigt, oder sollte vor ":visited" und ":hover" ebenfalls der vollständige Selektor mit der Klasse?

Was war denn eigentlich mit dem Hinweis auf das <header>-Element? Warum äußerst Du Dich dazu nicht?

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

oder sollte vor ":visited" und ":hohver" ebenfalls der vollständige Selektor mit der Klassse?

Nein, sollte nicht.

Qapla'

[Felix Riesterer]

Lieber Gunnar Bittersmann,

oder sollte vor ":visited" und ":hohver" ebenfalls der vollständige Selektor mit der Klassse?

Nein, sollte nicht.

Dein Einwand ergibt für mich nur dann einen Sinn, wenn Du das uniforme Verhalten der drei Pseudoklassen als solches ablehnst. Nach den Absichten des OP ist der Selektor ":hover" aber für _alle_ Hyperlinks zu interpretieren (Spezifität einmal außen vor), während ".page-header a:hover" nur den gewünschten Link selektiert.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Dein Einwand ergibt für mich nur dann einen Sinn, wenn Du das uniforme Verhalten der drei Pseudoklassen als solches ablehnst. Nach den Absichten des OP ist der Selektor ":hover" aber für _alle_ Hyperlinks zu interpretieren (Spezifität einmal außen vor), während ".page-header a:hover" nur den gewünschten Link selektiert.

Mein Einwand war der, dass man – wenn denn die Links in den verschiedenen Zustände gleich aussehen sollen – einfach schreibt:

.page-header a { color: red }  

Qapla'

[Felix Riesterer]

Lieber Gunnar Bittersmann,

Mein Einwand war der, dass man – wenn denn die Links in den verschiedenen Zustände gleich aussehen sollen – einfach schreibt:
.page-header a { color: red }

das kann je nach Spezifität unwirksam sein...

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

.page-header a { color: red }

das kann je nach Spezifität unwirksam sein...

Das gilt für jeden Selektor.

Dann eben .page-header a { color: red !important } *duckundweg*

(Liebe Kinder: Nicht machen!)

Qapla'

[Felix Riesterer]

Lieber Gunnar Bittersmann,

Dann eben .page-header a { color: red !important } *duckundweg*

soso, ohne abschließendes Semikolon? Na, ob das vom Parser akzeptiert würde?

Es hätte sicherlich genügt, das folgende zu notieren:

.page-header a,  
.page-header a:link { color: red; }

(Liebe Kinder: Nicht machen!)

*teppichklopferschwing*

Liebe Grüße,

Felix Riesterer.

[MudGuard]

Hi,

Dann eben .page-header a { color: red !important } *duckundweg*

soso, ohne abschließendes Semikolon? Na, ob das vom Parser akzeptiert würde?

Das semikolon schließt nicht ab, es trennt. Ggf. trennt es ein normales property:value-Pärchen von einem leeren Pärchen.

Der Parser wäre kaputt, wenn er das nicht akzeptieren würde!

cu,
Andreas

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Dann eben .page-header a { color: red !important } *duckundweg*

soso, ohne abschließendes Semikolon?

Ja. Wozu denn zwei Deklarationen, wenn es eine auch tut?

Es hätte sicherlich genügt, das folgende zu notieren:

.page-header a,

.page-header a:link { color: red; }

  
Was soll das für unbesuchte Links ändern?  
  
Du meintest  
~~~css
.page-header a:any-link { color: red }  

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

.page-header a,

.page-header a:link { color: red; }

>   
> Was soll das für unbesuchte Links ändern?  
>   
> Du meintest  
  
Ich meinte: für besuchte.  
  
[So eine Schande …](http://community.de.selfhtml.org/zitatesammlung/zitat907)  
  
Qapla'

-- 
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

So eine Schande …

Warte, warte nur ein Weilchen …

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Huch, schon wach? Wer ist denn das um diese Zeit schon? Vermutlich nur Lehrer und Eltern, die ihre Kinder zu Schule bringen.

Warte, warte nur ein Weilchen …

’sch weiß. Ich kann’s kaum erwarten.

Qapla'

[Camping_RIDER]

Aloha ;)

Huch, schon wach? Wer ist denn das um diese Zeit schon? Vermutlich nur Lehrer und Eltern, die ihre Kinder zu Schule bringen.

Stimmt wohl... Die Kindergärten haben um diese Uhrzeit leider noch nicht auf - zumindest die bei uns hier im ländlichen Ländle :D

Grüße,

RIDER

[Markuss]

Hallo Felix,

.page-header a:link,:visited,:hover {color: red; text-transform:uppercase; text-decoration: none;}

Du selektierst entweder Hyperlinks in Elementen der Klasse "page-header", oder alle anderen besuchten oder alle anderen gehoverten Hyperlinks. Ist das so beabsichtigt, oder sollte vor ":visited" und ":hover" ebenfalls der vollständige Selektor mit der Klasse?

ich habe etwas "herum probiert" da ich mich damit noch nicht so lange beschäftige und mich daher noch nicht so gut auskennen. Und mit "page-header" hat es dann ohne Probleme funktioniert. Wie würdest Du es denn machen? Bin für jeden Rat dankbar!

Was war denn eigentlich mit dem Hinweis auf das <header>-Element? Warum äußerst Du Dich dazu nicht?

Sorry, darauf hatte ich ganz vergessen. Ich habe hierbei keine Möglichkeit ein <header>- Element einzubauen, da es sich unter Joomla um ein Fertiges "Modul" handelt welches ich sonst umschreiben müsste. Der Code stammt daher nicht von mir sondern ist selbst generiert durch Joomla. Ich habe lediglich versucht anhand des bestehenden Codes das Design zu erstellen.

Liebe Grüße,
Markus

[Matthias Apsel]

Om nah hoo pez nyeetz, Markuss!

.page-header a:link,:visited,:hover {color: red; text-transform:uppercase; text-decoration: none;}

eigentlich sollte reichen

.page-header a {  
  color: red;  
  text-transform: uppercase;  
  text-decoration: none;  
}

Ob das tatsächlich zielführend ist, hängt von deinem restlichen CSS ab.

Zudem weise ich darauf hin, dass du für deine Nutzer kenntlich machen solltest, dass sie dabei sind, einen Link auszuwählen. Deshalb verwende für :hover und :focus andere Angaben, vielleicht eine Unterstreichung.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Zudem weise ich darauf hin, dass du für deine Nutzer kenntlich machen solltest, dass sie dabei sind, einen Link auszuwählen. Deshalb verwende für :hover und :focus andere Angaben, vielleicht eine Unterstreichung.

Erst bei :hover/:focus? Reichlich spät. Um dahin zu kommen, muss man ja erst mal wissen, dass es was zu hovern gibt. Soll man erst mit der Maus über den Bildschirm fahren um zu suchen, ob es irgendwo einen Hover-Effekt gibt?

Zumal viele (die meisten) Geräte keine Maus haben und damit auch keinen Hover-Effekt.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Felix Riesterer!

Was war denn eigentlich mit dem Hinweis auf das <header>-Element? Warum äußerst Du Dich dazu nicht?

Gekaufte Template haben sehr oft eine Vielzahl von Elementen, die eigentlich nicht benötigt werden; ein Template umzubauen ist meist sehr zeitaufwändig und überschreitet die Fähigkeiten desjenigen, der hier nach a.page-header a:link fragt.

Außerdem gehören die spitzen Klammern nicht zum Elementnamen ;-)

Matthias

[Camping_RIDER]

Aloha ;)

Was war denn eigentlich mit dem Hinweis auf das <header>-Element? Warum äußerst Du Dich dazu nicht?

Gekaufte Template haben sehr oft eine Vielzahl von Elementen, die eigentlich nicht benötigt werden; ein Template umzubauen ist meist sehr zeitaufwändig und überschreitet die Fähigkeiten desjenigen, der hier nach a.page-header a:link fragt.

Nicht nur das, im Fall von joomla ist es sogar so (wie ich aus eigener Erfahrung weiß), dass das Markup des Seiteninhalts (genauso wie das Markup der Navigation, das Markup der Modulinhalte...) nicht auf der Ebene des Templates bearbeitet werden _kann_.

Grüße,

RIDER

[Gunnar Bittersmann]

@@Markuss:

nuqneH

<div class="page-header">

Warum kein header-Element?

Probiert habe ich es zuletzt mit folgendem CSS Code, welcher allerdings keine Wirkung zeigt.
a.page-header a:link {color: red;}
a.page-header a:active {color: red;}
a.page-header a:visited {color: red;}

Kann auch nicht. Bei dir gibt es keine a-Elemente der Klasse "page-header".

Warum gibst du :link, :active, :visited getrennt an, wenn doch alles gleich gefärbt sein soll?

Qapla'