aanvullende onderwerpen

hallo allemaal

ik zie wel eens dat je in de rubrieken lijst kijkt ( index)
als je met je muis naar het onderwerp gaat kun je op het woord klikken maar net daarvoor hebben sommige fora dat het onderwerp dan volledig in kleur verandert

dus je index is blauw en maakt dan het rubriekje waar je muis is grijs

hoe kan ik dat doen ik denk zelf met een script

hoor het graag

mvg de gierige

Bedoel je zo iets:

Ga over mij

Dit kan je namelijk doen door het element een hover mee te geven in de css. Even de code van mijn voorbeeldje hierboven:

Code:

/* ---- START css ---- */
a.voorbeeld {
   color: red;
   font-weight: bold;
}
a.voorbeeld:hover {
   color: blue;
}
/* ---- EINDE css ---- */

<a href="#" class="voorbeeld">Ga over mij</a>

Vanaf je dit hebt kan je dingen blijven toevoegen: transition, text-shadow, font-size ...
Ook is er naast :hover de mogelijkheid om de css tijdens het klikken (:active) en na het klikken (:visited) aan te passen.

Als je dit enkel op de categorieën wilt toepassen moet je in phpBB2 je css starten met:

Code:

a.forumlink {
}
a.forumlink:hover {
}

hoi

ik bedoel dat woord ja maar in die rubriek dat dat eromheen dat blauw is dat dan bijvoordeeld grijs word als je erover heengaat met de muis

Ik denk dat je dit het makkelijkste kan door je rij een class mee te geven door de template een beetje te bewerken.

Beheerderspaneel Display Templates Algemeen

Hier bewerk je voor de categorieën de template 'index_box' en vervang je regel 45 (onbewerkte versie):

Code:

<tr>

door

Code:

<tr class="cat_row">

Dit slaag je op en bevestig je, daarna kan je met css weer beginnen opmaken:

Code:

.cat_row td{
}
.cat_row:hover td{
}

ik snap het niet sorry   

Hmm oke, ik ga eerst nog eens vragen of je phpBB2 of punBB gebruikt.
En of je iets bedoelt zoals hier op het ondersteuningsforum: de kleur van de categorieën (blauw) worden lichtoranje wanneer je met je muis erover gaat.

Als ik weet welke versie je gebruikt zal ik nog eens proberen een uitleg te maken.

ik gebruik phpBB2 (subsilver)

eneeh ik bedoel het vlak van het topic niet de text ( dus het tabel )

als het kan mag dan de kleur grijs zijn

mvg de gierige

Van wat ik nu begrijp lijkt het op hetgene wat ik heb proberen uitleggen in een van mijn vorige posts. Dus deze uitleg zal er grotendeels op lijken alleen een beetje uitgebreider.

Voorbeeldje:

html code:

---

PhpBB2 heeft naar mijn normen redelijk weinig class' of id's dus gaan we om te beginnen de rijen van onze categorieën een class-naam meegeven zodat we deze later makkelijker kunnen aanroepen in onze css. Hiervoor moeten we wel de template van de categorie-lijst aanpassen.

Beheerderspaneel Display Templates Algemeen

Hier vind je op de negende rij de template: 'index_box' met beschrijving 'Home page : categories list'. Deze bewerk je nu door op de :*:knop te drukken.

Als je deze nog niet bewerkt hebt kan je meteen door scrollen naar regel 43. Hier staat normaal gezien 'BEGIN forumrow'. Dit betekent dus dat alles wat hieronder staat gaat herhaald worden per nieuwe categorie. Als we dus op de volgende lijn (regel 44) de tag van een rij (< tr>) een class gaan meegeven gaat dit bij alle categorieën zo zijn.
We veranderen dus:

Code:

<tr>
in
<tr class="cat_row">

Hierna mag je deze template opslagen en de verandering toepassen door nog eens op het  :+:  te drukken.

Als dit gelukt is kunnen we beginnen met het 'muis-over-effect' in de css.

Beheerderspaneel Display Plaatjes en kleuren Kleuren Cascading Style Sheet

Plak heel deze code boven of onderaan in dit tekstvak:

Code:

tr.cat_row {
  background-color: #CDE4E7;
  transition: 0.6s ease-in-out;
  -moz-transition: 0.6s ease-in-out;
  -webkit-transition: 0.6s ease-in-out;
  -o-transition: 0.6s ease-in-out;
}
tr.cat_row:hover {
  background-color: #CCCCCC;
}

Ik hoop dat het nu duidelijk is. Als je iets niet snapt of ik het foute aan het uitleggen ben zou je dan gedetailleerd kunnen zeggen waar het fout ging of misschien een printscreen sturen van wat je bedoelde.

hallo 10spetter10

hartstikke bedankt voor deze duidelijke uitleg

dat is wat ik bedoelde

ik heb het zoal gedaan maar hij hovert niet weet je hoe dit kan ?

ik zal voortaan rekening houden als ik vraag om een duidelijkere uitleg wat ik precies duidelijker wil hebben

mvg de gierige

ow ja, ik was nog vergeten de standaard achtergrondkleur van de cellen weg te doen.

Voeg dit nog eens toe bij de css:

Code:

tr.cat_row td{
  background-color: transparent !important;
}

hallo 10spetter10

het is helemaal gelukt en ik vind het geweldig mooi !!!

super bedankt !!  

topic opgelost