[Kenny]

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: 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-bottom: 1px dotted #000000; color: #FFFFFF; outline: none;
            cursor: hand; text-decoration: none;
            position: relative;
        }
        .tooltip span {
            margin-left: -999em;
            position: absolute;
        }
        .tooltip:hover span {
            border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
            font-family: Calibri, Tahoma, Geneva, sans-serif;
font-size: 11px;
            position: absolute; left: 1em; top: 2em; z-index: 99;
            margin-left: 0; width: 250px;
        }
        .tooltip:hover img {
            border: 0; margin: -10px 0 0 -55px;
            float: left; position: absolute;
        }
        .tooltip:hover em {
            font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1px;
            display: block; padding: 0.2em 0 0.6em 0;
        }
        .classic { padding: 0.8em 1em; }
        .custom { padding: 0.5em 0.8em 0.8em 2em; }
        * html a:hover { background: transparent; }
        .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

[Plexxart]

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 ?

[Devidra]

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 Ich werds evt. selbst benutzen, doch bei dir sind ~3 Foren "ohne" Beschreibung

Gibt es nen Weg Leere Boxen nicht anzuzeigen?