Rollover!

[Rubinho]

Wie kann ich in meinem Forum das so machen wie auf dieser Seite, dass wenn man auf der Startseite auch ein Thema klickt das sich dann die Farbe ändert.

[miccom]

http://de.selfhtml.org/css/eigenschafte ... ver_active

[Rubinho]

das verstehe ich nicht was genau muss ich einfügen?

[Asmodiel]

auf der seite stehts doch...also...
:link = für Verweise zu noch nicht besuchten Seiten
:visited = für Verweise zu bereits besuchten Seiten
:focus = für Verweise, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)
:hover = für Verweise, während der Anwender mit der Maus darüber fährt (CSS 2.0)
:active = für gerade angeklickte Verweise
und das ist halt in der *.css-datei in deinem Template-ordner...also in dem /templates/deinstyle/
gruß!

[Rubinho]

Danke und ich muss das halt vor den Forumtitel schreiben. Stimmt das?
Also nochmal wo muss ich das einfügen?

Es wäre super wenn mir jemand sagen könnte wie das denn in etwa in diesem Forum aussieht!

[Luckyze]

hi

das würde mich auch mal interessieren wie so etwas funzt, nachdem ich schon einiges versucht habe, ohne erfolg.

vielen dank vorab.

thx. & greetz Luckyze

[miccom]

auf der verlinkten seite sind beispiele wie man den css-code in seine seite einbaut - einfach mal lesen und nicht immer nur fragen würde ich sagen! im falle des phpbb erfolgt der einbau entweder in der overall_header.tpl der css-definitionen oder im file stylename.css (stylname = templatename).

[sph]

auf der verlinkten seite sind beispiele wie man den css-code in seine seite einbaut - einfach mal lesen und nicht immer nur fragen würde ich sagen! im falle des phpbb erfolgt der einbau entweder in der overall_header.tpl der css-definitionen oder im file stylename.css (stylname = templatename).

jow, prinzipiell: w0rd.


aber so ganz einfach und selbsterklärend isses dann - jedenfalls im subsilver-template - doch nicht.


grundsätzlich gibts die klassen:

Code: Alles auswählen

a,
a:link,
a:active,
a:visited,
a:hover  {
 ...
 ...
}

damit definiert man eben - nicht nur beim phpbb-forum - alle arten von links. normal, bereits besucht, mouseover (=hover), das kann man so regeln.

die phpbb-templates benutzen aber gerne und häufig noch zusätzlich andere klasse, so dass es da auch noch ne ganze menge anderer angaben gibt, die man auch berücksichtigen muss/sollte, um wirklich jeden gewüntschten link definieren zu können. kleines beispiel, die einzelnen codebrocken hier stehen im subsilver-template direkt untereinander:

Code: Alles auswählen

.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px;}

zunächst werden die klassen 'gen', 'genmed' und 'gensmall' bestimmt - die ersten drei zeilen bestimmen die schriftgröße.

Code: Alles auswählen

.gen, .genmed, .gensmall { color : #000000; }

dann werden die drei klassen zusammengefasst und die schriftfarbe wird definiert - in diesem fall für alle klassen die selbe.

Code: Alles auswählen

a.gen,a.genmed,a.gensmall { color: #ff0000; text-decoration: none; }

dann, wieder einheitlich zusammengefasst, wird definiert wie ein link aussehen soll. alle links, die mit einer der drei klassen 'gen' 'genmed' oder 'gensmall' definiert wurden, erhalten eine eigene farbangabe, der link-unterstrich fällt im beispiel weg.

Code: Alles auswählen

a.gen:hover,a.genmed:hover,a.gensmall:hover{ color: #00ff00; text-decoration: underline; }

und zuletzt noch die angabe für das "mouseover", das hover-verhalten von links - wir definieren wieder eine eigene textfarbe, diesmal eine andere, damit's auch auffällt - und beim "draufzeigen" soll der link auch wieder unterstrichen werden. gilt ebenfalls für die drei klassen.


---

will man jetzt also das link-design im forum ändern sollte man zunächst rausfinden mit welcher css-klasse der entsprechende link versehen wurde. ich vermute 'gen' steht nur für 'generally' - ähnliche definitionen findet man auch für ".cattitle", ".topictitle", ".mainmenu" und so weiter.

---------

eigene bemerkungen:
ich find die link-angaben sind schlampig. besser: ich kann mit dieser definition nicht so wirklich was anfangen, hatte damit auch probleme, habs dann kurzerhand auf "alt hergebrachte" art und weise geändert. funktioniert auch. sieht dann etwas anders aus.

statt wie im beispiel:

Code: Alles auswählen

a.gen,a.genmed,a.gensmall {...}

würde ich das ganze etwas anders aufschlüsseln. wesentlich mehr tipparbeit, dafür - imho - übersichtlicher, und man kann im nachhinein sehr schnell und ohne weiteren aufwand gezielt die ein oder andere sache neu definieren oder bestehendes ändern:

Code: Alles auswählen

.gen {... normaler text...}

.gen a,
.gen a:link,
.gen a:active,
.gen a:visited {... alle arten von ".gen"-links: normal ...}

.gen a:hover {... ".gen"-links: hover ...}


.genmed {... normaler text, medium ...}

.gen a,
.gen a:link,
.gen a:active,
.gen a:visited { ....  }


und so weiter und so fort...

altmodisch? unwissenheit? beides.




so, und wer das jetzt nicht im geringsten verstanden hat sollte sich nach css-grundlagen umsehen - junge, deine wünsche lassen sich nicht so einfach "auf die schnelle" verwirklichen.

und wer das halbwegs geschnallt hat darf gern weiterfragen - oder diverse andere css-seiten im web durchstöbern

[Luckyze]

und wer das halbwegs geschnallt hat darf gern weiterfragen - oder diverse andere css-seiten im web durchstöbern

joar ich frrag mal weiter.

übrigens sehr schön beschrieben, vielen dank. nur etwas bin ich noch am wursteln.

da bräuchte ich mal bitte eine gedankenstütze. nicht die links beim anklicken sollen farblich dargestellt werden. mir geht es vor allem auch darum, dass wenn man mit denn mauszeiger auf ein feld einer katokorie kommt, dass dieses feld schattenartig hervorgehoben wird.

http://www.xpboard-xp.de/overall_header.txt


greetz Luckyze

[sph]

hey - nette idee! o0

bin noch garnicht auf den gedanken gekommen...


hm - das wird glaub ich aber deutlich schwieriger als mal eben die links anzupassen. ne patentlösung hab ich dafür auch nicht im kopf, also poste ich einfach mal einige überlegungen, eventuell hilfts ja weiter

du müsstest quasi ne hover-klasse für die entsprechende tabellenspalte konfigurieren.
die kategorie-spalte besteht grundsätzlich aus zwei einzelnen tabellen-zellen - um nen hübschen effekt zu erzielen sollte man die wohl zuerst zu einer zusammenfassen. und überhaupt: da is wohl einiges zu bearbeiten, in der index_body.tpl (info: zellen zusammenfassen: "colspan", html aneignen und tabellen formatieren lernen: de.selfhtml.org)

man müsste also irgendwie - gleich im grundgerüst für die index-seite - klarstellen dass die kategorie-zellen links sind. dann kann man sie wohl auch ohne weiteres mit den gewünschten css-tags formatieren.

vielleicht gibt es auch noch eine einfachere möglichkeit um die hover-funktion hier einzubinden.

ein schattierter effekt tritt natürlich dann auf wenn man beim hover ein anderes hintergrundbild anzeigen lässt. zum beispiel.


hmmm, vielleicht hilft das ja schonmal weiter. vielleicht find ich später auch noch mehr dazu


interessante idee, jedenfalls!