Hallo, Gast! (Registrieren)

Letzte Ankündigung: MyBB 1.8.8 veröffentlicht (17.10.16)


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
Forenbeschreibung als MouseOver/Hovereffekt
#1
Um ein wenig Platz zu sparen kann man die Forenbeschreibungen als sogenannten Tooltip oder Mouseovereffekt anzeigen lassen. So sieht das Forum etwas aufgeräumter aus und die Besucher bekommen als kleines Schmankerl noch einen netten Effekt zu sehen wenn sie mit der Maus über den Link eines Forums fahren.

Schaut euch doch zunächst bitte kurz eine LIve-Demo unter: http://www.sinnestausch.net an.

Doch wie stellt man sowas an? Das ist eigentlich ganz einfach. Es sind lediglich 2 Schritte dazu notwendig.

Schritt 1
Geht in euer ACP unter templates > Forumbit Templates > forumbit_depth2_forum.

sucht dort bitte nach folgender Zeile:
PHP-Code:
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div

Diese ändert ihr nun in:
PHP-Code:
<strong><a href="{$forum_url}class="tooltip">{$forum['name']}<span class="classic">{$forum['description']}</span></a></strong>{$forum_viewers_text}{$modlist}{$subforums}</div

Schritt 2
Legt nun im ACP bei eurem Theme ein neues Stylesheet an. Nennt dieses tooltip.css und gebt dem Stylesheet folgenden Inhalt:

PHP-Code:
.tooltip {
            
border-bottom1px dotted #000000; color: #FFFFFF; outline: none;
            
cursorhandtext-decorationnone;
            
positionrelative;
        }
        .
tooltip span {
            
margin-left: -999em;
            
positionabsolute;
        }
        .
tooltip:hover span {
            
border-radius5px 5px; -moz-border-radius5px; -webkit-border-radius5px
            
box-shadow5px 5px 5px rgba(0000.1); -webkit-box-shadow5px 5px rgba(0000.1); -moz-box-shadow5px 5px rgba(0000.1);
            
font-familyCalibriTahomaGenevasans-serif;
font-size11px;
            
positionabsoluteleft1emtop2emz-index99;
            
margin-left0width250px;
        }
        .
tooltip:hover img {
            
border0margin: -10px 0 0 -55px;
            
floatleftpositionabsolute;
        }
        .
tooltip:hover em {
            
font-familyCandaraTahomaGenevasans-seriffont-size1px;
            
displayblockpadding0.2em 0 0.6em 0;
        }
        .
classic padding0.8em 1em; }
        .
custom padding0.5em 0.8em 0.8em 2em; }
        * 
html a:hover backgroundtransparent; }
        .
classic {background#FFFFCC; border: 1px solid #FFAD33; } 

Schon seid ihr fertig!
Wenn ihr nun eure Seite im Browser aktualisiert sollten die Beschreibungen der einzelnen Foren als Tooltip angezeigt werden. Die Farben könnt ihr natürlich jederzeit im neu angelegten Stylesheet verändern und euren Wünschen entsprechend anpassen.

Ich habe dazu ein kleines Tutorial auf MyBB.com gelesen und fand dieses sehr nützlich. Daher habe ich es mal ein wenig verständlicher geschrieben und übersetzt. Nachfolgend noch die Links zum Autor und zum Originalthread auf MyBB.com.

Originalthread: Forum's Description on Mouse Hover
Autor: Yaldaram
Zitieren
#2
Herzlichen Dank Kenny für dein kleines Tutorial !!

Werde das mal Testen und schauen obs gut funktioniert.

Habe ich das richtig verstanden, daß man auch die Position des Fensters über das CSS definiert ?

Zitieren
#3
(27.05.2011, 17:37)Plexxart schrieb: Habe ich das richtig verstanden, daß man auch die Position des Fensters über das CSS definiert ?

Ja, sollte es eigentlich.

@Kenny:

Danke fürs Tutorial Wink Ich werds evt. selbst benutzen, doch bei dir sind ~3 Foren "ohne" Beschreibung

Gibt es nen Weg Leere Boxen nicht anzuzeigen?
Zitieren


Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Hovereffekt sonic1978 4 619 06.03.2011, 09:44
Letzter Beitrag: StefanT
  Buttonwechsel bei Mouseover? DarkBaal 8 1.059 19.10.2010, 00:04
Letzter Beitrag: DarkBaal
  Startseite mouseover Murphy 14 1.895 26.03.2008, 13:07
Letzter Beitrag: Murphy
Question Mouseover Effect über die Tabellenzeilen Laello 9 1.374 08.01.2008, 06:27
Letzter Beitrag: Laello