Avatar billede iznogood Nybegynder
08. februar 2009 - 15:42 Der er 10 kommentarer og
2 løsninger

Ønsker særlig farve til bestemte links

Hej,

Jeg har en side med et directory, som har en masse kategorier. Kategoriernes navne er klikbare links.

Jeg ønsker at give disse links en anden farve, end de øvrige links på sitet.

Den relevante del af sidens kode ser i dag således ud (Browser > View > pagesource):

<p class="sobi2CatName"><a href="http://localhost:85/test/index.php?option=com_sobi2&catid=101&Itemid=2">Asnæs</a></p>

Der er to css-sider, som styrer udseendet på de klikbare kategorinavne - typography.css og com_sobi2.css.

Her er de relevante linier fra typography.css:

body.orange a:link, body.orange a:visited { color: #dc5000; }
body.orange a:hover { color: #f59641; }

her er de relevante linier fra com_sobi2.css:

p.sobi2CatName {
    font-size: 12px;
    font-weight:bold;
    padding-left: 50px;
    margin: 2px 0 2px 0;
}

Med disse angivelser får jeg fede orange links.

Hvis jeg ændrer linkfarve på typography.css slår det igennem på alle hjemmesidens links. Hvordan får jeg en anderledes farve på kategorinavnenes links - uden at ændre farven på de øvrige links på hjemmesiden?

Jeg har prøvet at sætte en ekstra linie med color ind i den class, som styrer p.sobi2CatName - det virkede ikke.

Jeg har også forsøgt at lave en a.sobi2CatName med color. Det virkede heller ikke.
Avatar billede keysersoze Guru
08. februar 2009 - 15:46 #1
du kan ikke bare give dine links forskellige klasser? fx

<a href="side.html" class="nytnavn">link</a>

a.nytnavn
{
    color: red;
}

a.nytnavn:hover
{
    color: green;
}
Avatar billede iznogood Nybegynder
08. februar 2009 - 17:32 #2
Jeg tror, at det vil være den rigtige løsning.

Jeg ved bare ikke lige hvordan jeg gennentrumfer den nye klasse - og i hvilken css-fil jeg skal placere den nye klasse (hvis det overhovedet har nogen betydning).
Avatar billede iznogood Nybegynder
08. februar 2009 - 17:43 #3
Hmmm. Jeg gør et eller andet forkert. Men jeg ved ikke hvad.

Jeg oprettede en ny klasse (CatNameColor) i com_sobi2.css:

/* Style of Category Name */
p.sobi2CatName {
    font-size: 12px;
    font-weight:bold;
    padding-left: 50px;
    margin: 2px 0 2px 0;
}


a.CatNameColor {
    color: #ccc;
}

Så søgte jeg efter alle de filer, som indeholdt den oprindelige klasse sobi2CatName på <p>.

Jeg tilføjede den nye klasse til den tilhørende <a> tag således:

$this->catList = $this->catList."\n\t\t\t\t\t<p class=\"sobi2CatName\"><a class=\"CatNameColor\" href=\"{$href}\">{$result->name}</a>{$countItems}</p>";

Men mine links er stadig orange.
Avatar billede keysersoze Guru
08. februar 2009 - 18:35 #4
Din kode virker umiddelbart fint hos mig - men der kan selvfølgelig være mange ting vi ikke kan se og som giver problemerne.

Kom gerne med et link.
Avatar billede iznogood Nybegynder
08. februar 2009 - 18:54 #5
Jeg ville hellere end gerne komme med et link, men da der er tale om et Joomla CMS på en lokal server (JSAS), er det ikke muligt.

Jeg prøver istedet lige at installere et online testsite med samme template og komponent, så kan problemet ses LIVE. :o)
Avatar billede mclemens Nybegynder
08. februar 2009 - 19:48 #6
Ret:

a.CatNameColor {
    color: #ccc;
}

til enten:

body.orange a.CatNameColor {
    color: #ccc;
}

eller:

a.CatNameColor {
    color: #ccc!important;
}

... Alternativt kan body.orange i disse linjer fjernes:
body.orange a:link, body.orange a:visited { color: #dc5000; }
body.orange a:hover { color: #f59641; }
- men det vil jo ødelægge dynamikken i sitet. Så det er nok bedst med important eller en ekstra selector der øger reglens vigtighed.
Avatar billede mclemens Nybegynder
08. februar 2009 - 19:57 #7
Glemte lige dette forslag:
p.sobi2CatName a:link{color: #ccc;}
(så behøver du måske* ikke klassen på a elementet)
* afhænger af om ikke alle links under sobi2CatName skal være grå ...

Husk også at fifle med hover regler ved behov som
foreslået af Keysersoze. Deler gerne med Keysersoze.
Avatar billede iznogood Nybegynder
08. februar 2009 - 20:07 #8
> mcclemens

Det sidste forslag var det nemmeste, så det tog jeg først. Og det virkede perfekt. :oD

p.sobi2CatName a:link{color: #777;}

- giver fine grå links.

Så skal jeg bare have hover- og visited-regler på plads.
Avatar billede iznogood Nybegynder
08. februar 2009 - 20:09 #9
Smider I svar, så jeg kan dele points som mclemens foreslår?
Avatar billede iznogood Nybegynder
08. februar 2009 - 20:13 #10
Sådan. Så er hover og visited også på plads. Det var ret nemt, da jeg først havde forstået princippet.

I har været en fantastisk hjælp.
Avatar billede keysersoze Guru
10. februar 2009 - 18:22 #11
svar :)
Avatar billede mclemens Nybegynder
11. februar 2009 - 00:09 #12
Takker for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester