Thema: Tabs & Slides In Content Items auch für Komponenten nutzen?

Hallo ich nutze den Mambot "Tabs & Slides In Content Items" und trotz ausgiebiger Suche finde ich keine Lösung für mein Problem.

Es ist eigentlich schnell erklärt. ich möchte die Tabs auch in Inhalten von Komponenten nutzen (in meinem Fall die VirtueMart Produktbeschreibung). Ist das irgendwie möglich und wenn ja wie wäre da der Ansatz bzw. was müsste ich machen?

mfg

Danke erstmal. Da mir das ganze nun keine Ruhe gelassen hat habe ich mal an einer Lösung gebastelt die überall eingesetzt werden kann. Und will diese natürlich auch mit anderen teilen. Ich bin über die Idee darauf gekommen, eine Lightbox Funktion in Joomla zu nutzen (thx @ Jongenz) und bin folgendermaßen vorgegangen.

1. Hier die *zip Datei downloaden. Oder direkt: "Tabber"
2. Entpacken
3. Die css Dateien in einen ordner "css" packen und die Javascript dateien in einen Ordner "js" packen. Das ganze dann in den Root der Joomla Installation laden
4. Folgendes in in den head Bereich der index.php des verwendeten Templates einfügen:

Code:

<script type="text/javascript" src="js/tabber.js"></script>
<script type="text/javascript">document.write('<style type="text/css">.tabber{display:none;}<\/style>');</script>

5. Folgendes in in den body Bereich der index.php des verwendeten Templates einfügen:

Code:

<link rel="stylesheet" href="css/example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="css/example-print.css" TYPE="text/css" MEDIA="print">

Das war es eigentlich schon. Jetzt kann man per Joomla Editor an jeder gewünschten Stelle folgendes Angeben um die Tabs zu erhalten:

Code:

<div class="tabber">
     <div class="tabbertab">
	  <h2>Tab 1</h2>
	  <p>Tab 1 content.</p>
     </div>
	 
     <div class="tabbertab">
	  <h2>Tab 2</h2>
	  <p>Tab 2 content.</p>
     </div>

     <div class="tabbertab">
	  <h2>Tab 3</h2>
	  <p>Tab 3 content.</p>
     </div>
</div>

Ihr solltet das ganze allerdings NICHT mit dem WYSIWYG einfügen, da Joomla dann gerne mal die Klassen die es nicht kennt löscht.

Hoffe ich habe jemandem geholfen oder werde das in Zukunft damit tun.

mfg

hallo,

wie schaut diese lösung dann im frontend aus??? suche immer noch ne gute lösung für taps ...

habe selber folgendes problem Tabs & slides


MFG

Hier kannst du es dir anschauen. Genau so sieht es dann auch in Joomla aus.

mfg

Zitat von reflo

Hier kannst du es dir anschauen. Genau so sieht es dann auch in Joomla aus.

mfg

leider nein ich versteh es nicht ... ich bekomm die optik nicht so wie im beispiel ...


so schauts bei mir aus egal ob ich wie oben beschrieben vorgehe oder TABS&SLICES nehm


so sollte es ausschauen


mich stören die listed und die linie ... wie kann ich das ändern, dass es exakt wie im beispiel ausschaut????


MFG

leider kann ich dir nicht 100%ig weiterhelfen. Ich könnte mir vorstellen das evtl. in deinem Theme ne css-Klasse vorhanden ist die sich mit der Tab Klasse überschneidet und darum diese Elemente anzeigt. Tauchen den die orangenen Punkte sonst noch irgendwo in deinem Webauftritt auf? Wenn ja nenne evtl. mal die Klasse um die dafür verantwortlich ist. Ansonsten würde mir jetzt nix einfallen.

mfg

Zitat von reflo

leider kann ich dir nicht 100%ig weiterhelfen. Ich könnte mir vorstellen das evtl. in deinem Theme ne css-Klasse vorhanden ist die sich mit der Tab Klasse überschneidet und darum diese Elemente anzeigt. Tauchen den die orangenen Punkte sonst noch irgendwo in deinem Webauftritt auf? Wenn ja nenne evtl. mal die Klasse um die dafür verantwortlich ist. Ansonsten würde mir jetzt nix einfallen.

mfg

na klar des sind die beginn-zeichen meiner listen ... auf der webseiten is das ja auch korrekt so aber nicht bei den tabs ...

MFG

Hallo, leider stehe ich jetzt auch vor diesem problem mit den abständen. und zwar nutze ich die Slides und es ist ca. ein halber cm platz zwischen beiden, sie sollen aber dicht aneinander liegen. Nur leider wird hier eine Anleitung gezeigt von einer CSS die bei mir aber anders ausschaut, nämlich so:

/* --- Generic --- */
a:active,a:focus {outline:0;}
.jwts_clr {clear:both;height:0;line-height:0;}

/* --- Tabs --- */
.jwts_tabberlive {margin:4px 0px;padding:0px;}
.jwts_tabberlive .jwts_tabbertab {margin:0px;padding:6px;border:1px solid #bbb;border-top:0px;/*height:300px;overflow:auto;*/}
.jwts_tabberlive .jwts_tabbertab h2,
.jwts_tabberlive .jwts_tabbertab h3,
.jwts_tabberlive .jwts_tabbertabhide {display:none;}
ul.jwts_tabbernav {margin:0px;padding:3px 4px;list-style:none;list-style-image:none;background:none;border-bottom:1px solid #bbb;line-height:normal;height:auto;}
ul.jwts_tabbernav li {margin:0px;padding:0px;list-style:none;list-style-image:none;background:none;display:inline;}
ul.jwts_tabbernav li a,
ul.jwts_tabbernav li a:link {font-size:12px;font-weight:bold;margin:0px 1px;padding:3px 4px;color:#333;border:1px solid #bbb;border-bottom:none;background:#eee url(slide_bg.png) repeat-x top;}
ul.jwts_tabbernav li a:visited {color:#333;}
ul.jwts_tabbernav li a:hover {font-size:12px;font-weight:bold;margin:0px 1px;padding:3px 4px;color:#c64934;border:1px solid #aaa;border-bottom:none;background:#f2f2f2;text-decoration:none;}
ul.jwts_tabbernav li a:active,ul.jwts_tabbernav li a:focus {outline:0;}
ul.jwts_tabbernav li.jwts_tabberactive a {background:#fff;border-bottom:1px solid #fff;}
ul.jwts_tabbernav li.jwts_tabberactive a:hover {background:#fff;border-bottom:1px solid #fff;text-decoration:none;}
ul.jwts_tabbernav li.jwts_tabberactive,
ul.jwts_tabbernav li.jwts_tabberinactive {background:none;padding:0px;margin:0px;}
.jwts_tabberlive .jwts_tabbertab,ul.jwts_tabbernav {text-align:left;} /* force content orientation */

/* --- Slides --- */
.jwts_slider {margin:4px 0px;padding:0px;}
.jwts_slidewrapper {border:none;width:100%;visibility:hidden;height:0 px;overflow:hidden;position:relative;margin:0;padd ing:0;}

/* DEFAULT STYLING */
.jwts_title {margin:0 0 1px 0;padding:0px;overflow:hidden;background:url(slide _bg_r.png) no-repeat right;cursor:pointer;}
.jwts_title_left {background:url(slide_bg_l.png) no-repeat left;margin:0 10px 0 0;}
a.jwts_title_text,
a.jwts_title_text:link {display:block;background:url(star.png) no-repeat;background-position:0px 2px;padding:0 2px 0 20px;margin:0 0 0 8px;line-height:22px;font-size:12px;font-weight:bold;text-decoration:none;color:#444;}
a.jwts_title_text:visited {color:#444;}
a.jwts_title_text:hover {display:block;background:transparent url(star.png) no-repeat;background-position:0px 2px;padding:0 2px 0 20px;margin:0 0 0 8px;line-height:22px;font-size:12px;font-weight:bold;text-decoration:none;color:#c64934;}
.jwts_slidecontent {padding:4px 12px 8px 12px;margin:0px;position:relative;background:none; border:none;}
.jwts_title_left,.jwts_slidecontent {text-align:left;} /* force content orientation */

Und was muß ich hier ändern?