Seitenleiste wie hier im Forum + erweiterung

[martin-schulz1]

Erst mal ja richtig als Grundlage habe ich die "JQUERY BUBBLE POPUP" genommen.
Es gibt verschiedene Möglichkeiten Sprechblasen zu gestalten ich habe zu erst versucht reine CSS sprechblasen zu nehmen diese waren aber nicht nach meinen Vorstellungen so bin ich letztlich bei den JQUERY BUBBLE POPUP hängen geblieben.

Okay dann versuche ich mal mein bestes und erstelle eine kleine Installations- Anleitung. Anhand des Standart Templates.

Als Grundlage habe ich die Navileiste aus dem Beitrag http://www.modified-shop.org/forum/index.php?topic=13847.0 genommen.

Hier der Download Link zum Plugin https://sourceforge.net/projects/jqbubblepopup/files/latest/download

Zu erst im Ordner "templates\xtc5\javascript" die Datei  "general.js.php" öffnen und am Anfang folgende zeilen einsetzen :

Code: XML  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.js" type="text/javascript"></script>

am Ende der Datei  "general.js.php" bitte

Code: XML  [Auswählen]

<script type="text/javascript">
<!--
$(document).ready(function(){
                //create a bubble popup
                $('.link1').CreateBubblePopup({
                                                                        selectable: false,
                                                                        position : 'left',
                                                                        align    : 'middle',
                                                                        width: '250px',
                                                                        innerHtml: 'Hier steht der Text der Sprechblase',
                                                                        innerHtmlStyle: {
                                                                                                color:'#00000',
                                                                                                'text-align':'left'
                                                                                        },                                             
                                                                        themeName:      'grey',
                                                                        themePath:      'images/navbar/'
                                                                });
});

//-->
</script>

einfügen.

Anschliessend müssen alle Dateien (JS / CSS / und bilder (Themes)) in den entsprechenden Ordner übertragen werden.

bei Mir sieht das wie folgt aus:

javascript/jquery.bubblepopup.v2.3.1.css
javascript/jquery.min.js
javascript/jquery.bubblepopup.v2.3.1.min.js
javascript/jquery.nivo.slider.js

Ich habe den Theme Ordner für das Graue Design bei mir unter

images/navbar/grey (Achtung bei änderung des Pfads bitte entsprechend in der general.js.php auch ändern)

Verlinken könnt ihr die blasen mit einem CSS Class Tag
Das sieht in meinem Beisiel so aus (ich habe meine classe link1 genannt. (Der name der classe muss identisch mit dem aus der general.js.php sein.)

bei mir in der templates\xtc5\index.html

Code: XML  [Auswählen]

<a id="sys_hotline" class="link1" target="_self" href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=7', 'NONSSL');{/php}"> </a>

Alle anderen Einstellungen wie Ausrichtung usw der Sprechblase  entnehmt bitte der Dokumentation des Herstellers.

Ich hoffe ich habe nichts vergessen.

[knecht2020]

Also getestet hab ich das Layout im Firefox, IE und Safari.
Ich habe mal ein Screenshot abgehangen.

Hier ein Screenshot wie es bei mir im Firefox aussieht, aber wie gesagt vielleicht liegts ja an meinem Browser.
Achja Firefox 11.0

[martin-schulz1]

Dann leere mal bitte deine Chronik (Cache)

ich habe nochmals nachgesehen auf 3 verschiedenen Rechnern.

Würde mich echt interessieren ob das bei den anderen auch noch so aussieht.

[Thomas]

Huhu,

verfolg das Thema hier ja auch bisschen, hab keinerlei Probleme mit deinen Template, Design, wird alles korrekt angezeigt im Chrome.

Gruß

[noRiddle (revilonetz)]

@Thomas

Schön, daß du keine Probleme hast,..., in Chrome,...., die Rede war aber von Firefox 11.0,
also, mit Verlaub, beim Thema bleiben bitte  .

Gruß,
noRiddle

[Spegeli]

In der Anleitung von Martin fehlt noch das man die jquery.bubblepopup.v2.3.1.css einbinden muss.

Am besten über die general.css.php.

[thomas57]

Hallo Martin-Schulz1,
aus Neugierde habe ich mir die Sprechblasen der Seitenleiste angesehen. Ein kleiner Fehler ist noch bei G**gle+ enthalten.
Bild anbei.
Ansonsten sieht das ganze gut aus.
Gruß Thomas