Guten Abend.
Derzeit entwerfe ich "wie viele andere auch" ein Template für LotGD. (Nein nicht für den Wetbewerb, hatte damit schon etwas früher angefangen.)
Nun Bilder usw. waren fertig, da musste ich mich etwas mit CSS befassen. Dort bin ich hier und da auf verschiedene Seiten mit Tutorials gestoßen. Auf einer dieser Seiten fand ich ein CSS Tooltip das ich persönlich sehr schön finde.
Sobald Ihr oder ein anderer über einen Link fährt, bekommt er per "OnMouseOver" Effekt dieses Tooltipp zu sehen. Natürlich mit dem darin versehen Text. Damit könnt ihr z.B. die Commentary Navs verzieren etc. etc.!
Quelle: Buenos Dias Elias [ Irgendwie lolig
]Demo: [Demo nicht mehr zugänglich!
Damit wir den Code nicht auf jede einzelne Seite eintragen müssen, hier mal der Einbau:
$this->bbcode_second_pass_code('', '/* Tooltip */
a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
position: relative;
text-decoration: none;
font-style: bold;
border-bottom:0px dotted #4dbcf3;
}
a.tooltip:hover {
background: transparent;
z-index: 100;
}
a.tooltip span {
display: none;
text-decoration: none;
}
a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 100;
color: #000000;
border: 1px solid;
border-color: #FFFFFF #D5D7DB #D5D7DB #FFFFFF;
border-left: 4px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #EEEEEE;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-style: Smal;
text-align: left;
}')
Fügt Ihr in die CSS Datei eures Templates ein. Ich nehme als Beispiel mal... Das Template Yarbrough.
Ihr sucht:
$this->bbcode_second_pass_code('', '.navhi {
color: #00FF00;
text-decoration: underline;
}')
Und fügt denn oben genannten Code ein.
Abspeichern und hochladen. Nun kennt das Template die CLASS "tooltip".
Aber wie schafen wir es nun das bei dem Link ein Tooltip kommt?
Nun... Es hat mich erlich gesagt verwirrt.
Hatte letztens noch ein wenig rum Experimentiert... Bis ich endlich geschnallt habe, das nach dem "Link-Name" ein "<span>" kommen muss.
Das sieht dann so aus:
- Rawoutput
$this->bbcode_second_pass_code('', 'rawoutput('<a href="link" class="tooltip">Link-Name <span><b>Link-Name:</b><br />The text</span></a>');')
- Output
$this->bbcode_second_pass_code('', 'output('<a href="link" class="tooltip">Link-Name <span><b>Link-Name:</b><br />The text</span></a>',true);')
- Addnav
$this->bbcode_second_pass_code('', 'addnav('','link');')
Das Addnav muss bei beiden Varianten dabei sein.
Wie ändere ich die Farbe des Linken Streifens?
Du suchst:
$this->bbcode_second_pass_code('', 'border-left: 4px solid #4dbcf3;')
und änderst die Solid Farbe. Des weiteren kannst du in der Zeile auch die Solid breite einstellen.
Sollten Fragen dazu sein, wie man es mit der commentary macht. Stellt diese.
MySQL.
