Thema: Anpassen des Joomla Tooltips...

Hi @all,

wer schon immer mal gerne die Tooltips von Joomla ändern wollte, hat zum einen die Möglichkeit die Werte direkt in der overlib_mini.js zu ändern oder sich das ganze etwas universeller zu gestalten. Und dort die CSS Infos zu hinterlegen. So brauch man nach einem Update halt nur die JavaScript Datei wieder zu ersetzen. Und hat die Style Informationen in seiner Template_CSS

EDIT: ! ACHTUNG ! - Das hier betrifft nur Joomla 1.0.x !!! END OF EDIT:

folgende Codezeilen sind zu ändern:

Original:

Code:

if(typeof ol_css=='undefined') var ol_css=CSSOFF;

Ändern in:

Code:

if(typeof ol_css=='undefined') var ol_css=CSSCLASS;

Dadurch wird die CSS Funktion in der Overlib Aktiviert. (Class überschreibt Standartwerte)

Jetzt müssen nur noch die Klassen gesetzt werden.

Code:

if(typeof ol_fgclass=='undefined') var ol_fgclass="CSS_fg_color";

Code:

if(typeof ol_bgclass=='undefined') var ol_bgclass="CSS_bg_color";

Code:

if(typeof ol_textfontclass=='undefined') var ol_textfontclass="CSS_textfont_class";

Code:

if(typeof ol_captionfontclass=='undefined') var ol_captionfontclass="CSS_captionfontclass";

Code:

if(typeof ol_closefontclass=='undefined') var ol_closefontclass="CSS_closefontclass";

Und halt noch in der CSS vom Template / Admin Template die Klassen einfügen und Anpassen:

Code:

.CSS_fg_color {...}
.CSS_bg_color {...}
.CSS_textfont_class {...}
.CSS_captionfontclass {...}
.CSS_closefontclass{...}

Zur Erklärung der einzelnen Werte:

fgclass = Definiert das Innere der OverLib Box
bgclass = Definiert das äussere der OverLib Box (Border / Umriss)
textfontclass = Der Haupttext sprich Farbe / Schriftart etc...
captionfontclass = Schriftart / Farbe etc. der Überschrift
closefontclass = Schriftart / Farbe etc. des Close Text (unten)

Ich hoffe ich konnte helfen und es halbwegs verständlich erklären

P.S: Veröffentlicht es wo ihr wollt Aber bitte mit nem Hinweis zu dem Ursprungsthread.

Ich hab die CSS spaßeshalber mal so geschrieben:

.ol_fgclass {background-color:#000000;}
.ol_bgclass {background-color:#000000;}
.ol_textfontclass {background-color:#000000;}
.ol_captionfontclass {background-color:#000000;}
.ol_closefontclass {background-color:#000000;}

Steh ich auf dem Schlauch oder weswegen hab ich keine Auswirkungen auf das Tooltip?

Hi Mancede,

hast du auch die overlibmini.js bearbeitet ? bzw. dir den Anhang runtergeladen ?
Alleine nur die Einträge in der CSS zeigen keine Wirkung.

Gruß Dennis

Ich hab den Anhang runtergeladen und mit der Original Datei aus /includes/js/ getauscht.
Danach hab ich das CSS-File wie oben stehend bearbeitet.

Der Tooltip hat jetzt keinen Rahmen oder Hintergrund. Es erscheint nur Text.
Beispiel: http://www.pro-log.jobs/index.php?op...rms&Itemid=198

Und es geht noch besser

Hi @all,

vor einigen Monaten brachte ich eine Variante um die Tooltipps anzupassen mal als Howto. Da diese Variante doch leider nicht ganz einfach ist, und auch etwas "sorgfalt" erforderte. Hier evtl eine neue Methode die noch einfacher geht.

Fügt einfach folgende Zeile ans ENDE in die Datei
/includes/js/overlib_mini.js

Code:

overlib_pagedefaults(WIDTH,250,VAUTO,RIGHT,AUTOSTATUSCAP, CSSCLASS,TEXTFONTCLASS,'jl-tips-font',FGCLASS,'jl-tips-fg',BGCLASS,'jl-tips-bg',CAPTIONFONTCLASS,'jl-tips-capfont', CLOSEFONTCLASS, 'jl-tips-closefont');

und folgendes in eure Template CSS:

Code:

.jl-tips-font {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}

.jl-tips-capfont {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #000000;
	padding-top:2px;
	padding-bottom:2px;
}

.jl-tips-closefont {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #730000;
	text-align: right;
}

.jl-tips-closefont a, .jl-tips-closefont a:link, .jl-tips-closefont a:visited {
	color: #730000;
}

.jl-tips-closefont a:hover {
	color: #730000;
}

.jl-tips-fg {
	background-color: #CCCCFF;
	border: 1px solid #d0d0ca;
	padding:15px;
}

.jl-tips-bg {
	background:#333333;
	border-left:1px solid #d0d0ca;
	border-right:1px solid #d0d0ca;
	border-top:1px solid #d0d0ca;
}

.jl-tips-button,.jl-tips-button:link,.jl-tips-button:visited,.jl-tips-hover
	{
	margin: 0px 0.5em 0.5em 0;
	padding: 0;
	white-space: nowrap;
	text-align: center;
	display: block;
	width: 8em;
	background:#333333;
	font: bold 12px Menu, Arial, Verdana, sans-serif;
	border: 1px solid #d0d0ca;
	color: #404040;
	text-decoration: none;
	padding: 2px;
	padding-left:5px;
	padding-right:8px;
	margin-top:10px;
}

.jl-tips-button:hover   , .jl-tips-hover:hover {
	background: #EEEEEE;
	color: #000040;
	text-decoration: none;
}

schon könnt ihr euch richtig austoben ;=)
Wichtig ist, das die Endungen am Ende der "overlib_mini.js" stehen, da es sonst zu Fehlern kommt.

Gruß Dennis

Doku: http://www.bosrup.com/web/overlib/?Customizing_overLIB

Hi Dennis,

danke für den Tip, an sich ist dies aber schon ein relativ altes Thema und wurde auch schon im August letzten Jahres DORT erläutert und "gelöst"

Hallo Devil,

der Beitrag ist mir bekannt (hab da ja auch mitgeschrieben) allerdings ist dort immer noch der Nachteil das man eine Core Datei bearbeiten muss. Sicherlich gehört die overlib_mini.js auch indirekt zum Core, aber ich denke Änderungen an dieser Stelle sollten nicht ganz so dramatisch sein, als nach einem Update wieder die Änderungen zu suchen...

Gruß Dennis

Hi,
also bei mir funktionieren alle der Versionen irgendwie nicht. Ich hab die Farbe direkt in der overlib_mini.js geändert und dann hatte ich nur noch eine Anzeige mit schwarzer Schrift, völlig aus dem normalen Rahmen und ohne BG-Farbe.

Dann hab ich noch die anderen beiden Versionen (wie oben beschrieben) getestet. Auch ohne Erfolg.

Dumm ist, dass ich, obwohl ich die original overlib_mini.js Datei wieder in das Verzeichnis kopiert hab, keine Anzeige wie früher hab.

Irgendwie scheint das was schief gelaufen zu sein ...
Hat einer eine Idee?

Gruß


Edit:
Alles klar. Geht wieder. Mir ist aufgefallen, dass der tooltip im IE angezeigt wird. Nach Neustart von Firefox war alles wieder gut. Auch die Farben funzen nu! :-D

Hi,

irgendwas musst Du übersehen haben beim Anpassen. Das ganze trifft natürlich nur auf J1.0.x zu. Bei J1.5 gibt es andere Wege. Welche J Version hast Du denn ? Schau Dir meinen Beitrag nochmal genau an, evtl. hast Du irgendwas vergessen.

Gruß Dennis