Beiträge von Kurtus

Kurtus · 20. April 2018

Hallo Tom,

vielen Dank für Deine schnelle Antwort.

Könntest Du mir noch einmal sagen, wo genau ich das disply:block einfügen muss.

Evtl. anhand der Zeilennummern des CSS-Codes in meinem ersten Post, da ich keine Zeile 9202 habe.

Danke

Kurtus

Kurtus · 20. April 2018

Hallo Experten,

ich habe ein kleines Problem.

ich habe von der Seite littlesnippets.net/ einen Codeschnipsel bei mir in der Joomla-Homepage eingefügt.

Das hat auch wunderbar geklappt.

Hier der HTML Code:

HTML

<figure class="snip0067 red">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample2.jpg" alt="sample8" />
  <figcaption>
    <h2>Gabriel <span>Lavarez</span></h2>
    <p>I'm a genius, but I'm a misunderstood genius.</p>
    <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-email-unread"></i></a><a href="#"><i class="ion-ios-star"></i></a></div>
  </figcaption>
  <div class="position">Illustrator</div>
</figure>
<figure class="snip0067 blue hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample3.jpg" alt="sample3" />
  <figcaption>
    <h2>Roland <span>Lee</span></h2>
    <p>I'm a simple man with complex tastes.</p>
    <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-ios-email"></i></a><a href="#"><i class="ion-ios-telephone"></i></a></div>
  </figcaption>
  <div class="position">Software Engineer</div>
</figure>
<figure class="snip0067 yellow"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample5.jpg" alt="sample5" />
  <figcaption>
    <h2>Annie <span>Watkins</span></h2>
    <p>I'm just very selective about the reality I choose to accept. </p>
    <div class="icons"><a href="#"><i class="ion-ios-home"></i></a><a href="#"><i class="ion-ios-email"></i></a><a href="#"><i class="ion-ios-telephone"></i></a></div>
  </figcaption>
  <div class="position">Accoutant</div>
</figure>

Alles anzeigen

und der dazugehörige CSS Code:

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip0067 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 220px;
  max-width: 310px;
  width: 100%;
  background: #ffffff;
  color: #000000;
}

figure.snip0067 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

figure.snip0067 img {
  max-width: 100%;
  position: relative;
  display: block;
}

figure.snip0067:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 90%;
  z-index: 1;
  left: -20%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #fff;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: skewX(-30deg) translateX(-80%);
  transform: skewX(-30deg) translateX(-80%);
  -webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.5);
}

figure.snip0067 figcaption {
  padding-left: 30px;
  position: absolute;
  left: 0;
  top: 25%;
  width: 60%;
  z-index: 1;
  opacity: 0;
}

figure.snip0067 figcaption h2,
figure.snip0067 figcaption p {
  margin: 0;
  text-align: left;
  padding: 5px 0 0;
  width: 100%;
}

figure.snip0067 figcaption h2 {
  font-size: 1.4em;
  font-weight: 300;
  text-transform: uppercase;
}

figure.snip0067 figcaption h2 span {
  font-weight: 800;
}

figure.snip0067 figcaption p {
  font-weight: 500;
  font-size: 0.9em;
  opacity: 0.8;
}

figure.snip0067 figcaption .icons {
  width: 100%;
  padding: 8px 0;
}

figure.snip0067 figcaption .icons i {
  display: inline-block;
  font-size: 20px;
  background: #000000;
  color: #ffffff;
  margin-right: 5px;
  opacity: 0;
  height: 35px;
  width: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
}

figure.snip0067 figcaption a {
  opacity: 0.7;
}

figure.snip0067 figcaption a:hover {
  opacity: 1;
}

figure.snip0067 .position {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
  padding: 15px 30px;
  font-size: 0.9em;
  opacity: 1;
  font-weight: 500;
  color: #ffffff;
  background: #000000;
}

figure.snip0067.blue .icons i {
  background: #164666;
}

figure.snip0067.blue .position {
  background: #20638f;
}

figure.snip0067.red .icons i {
  background: #6d2018;
}

figure.snip0067.red .position {
  background: #962d22;
}

figure.snip0067.yellow .icons i {
  background: #924d10;
}

figure.snip0067.yellow .position {
  background: #bf6516;
}

figure.snip0067.green .icons i {
  background: #145b32;
}

figure.snip0067.green .position {
  background: #1e8449;
}

figure.snip0067:hover figcaption,
figure.snip0067.hover figcaption,
figure.snip0067:hover .icons i,
figure.snip0067.hover .icons i {
  opacity: 1;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

figure.snip0067:hover:before,
figure.snip0067.hover:before {
  -webkit-transform: skewX(-30deg) translateX(0px);
  transform: skewX(-30deg) translateX(0px);
}

Alles anzeigen

Nun wollte ich die, in diesem Codeschnipsel vorhandenen Buttons mit einem Tooltip hinterlegen.

CSS Code:

CSS

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
    width: 150px;
    background-color: #6d2018;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 100%;
    margin-left: -60px;
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -41px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #6d2018 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Alles anzeigen

HTML-Code:

Code

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

Dies funktioniert, wenn ich es auf einer "normalen" HTML-Seite ausführe einwandfrei:

Link zu dem Test ohne Joomla

Wenn ich es in einem Beitrag in Joomla eingebe, sind die Buttons plötzlich nicht mehr sichtbar.

Ohne den Tooltip (siehe drittes Foto) sieht man die Buttons:

Link zum Test mit Jooma

Auf beiden Testseiten sind die Buttons

- des ersten Fotos (Vorsitzender - John Doe) mit dem HTML-Code für den Tooltip und die

- des dritten Fotos (Schatzmeister - Annie Watkins) ohne den HTML-Code versehen.

Was mache ich falsch bzw. woran kann es liegen?

Vielen Dank für Eure Hilfe

Kurtus

Kurtus · 5. April 2018

Das Thema hat sich erledigt!

Der Autor hat auf nochmalige Nachfrage das Prozedere in seinem Forum ausführlicher erläutert, so dass ich es jetzt verstanden habe!

PS: Wollte meinen Post hier wieder löschen bzw bearbeiten, ging aber leider nicht mehr.

Vermutlich weil ich zwischenzeitlich ausgeloggt war.

Kurtus · 5. April 2018

Hallo Experten,

ich nutze das Template Less Allrounder und habe mir Maxi Menu CK mit das kostenpflichtige Maxi Menu Params installiert und wollte, wie in dem folgenden Beispiel, dass bei Anwahl (mouseover) eines Menupunktes das Login-Formular darunter erscheint (herausklappt). Siehe Screenshot mit einem Beispiel aus einem kostenpflichtigen Template:

Bei mir soll dieses Login Formular

an der Stelle "Login" erscheinen, wie auf dem Screenshot in rot eingefügt:

Anhand der Anleitung in Englisch, die es zum Maxi Menu CK gibt, bin ich leider nicht weiter gekommen.

Meine Fragen im dazugehörigen Forum werden vom Autor leider nur in sehr kurzer Form beantwortet.

Er geht wahrscheinlich davon aus, dass nur Profis seine Erweiterungen nutzen.

Jedenfalls komme ich mit seinen Beschreibungen nicht klar und hoffe, dass jemand hier im Forum mit Maxi Menu CK Erfahrung hat und mir evtl. eine Schritt für Schritt Anleitung (die auch Dumme wie ich kapieren) dazu geben kann.

Gerne richtige ich auf meiner Testumgebung einen Zugang zum Backend ein.

Danke schon mal im Voraus

Kurt

Kurtus · 29. März 2018

Hallo Zero24,

das mit dem <div>-Tag hat prima geklappt.

Vielen Dank!

Gruß

Kurt

Kurtus · 29. März 2018

Hallo zusammen,

vielen Dank an Euch alle für Eure Antworten und Hilfestellungen.

Ich weiß nicht an was es lag (evtl. daran, dass ich zwischendurch das Editor-Tiny-Plugin komplett ab- und wieder anmeldete),

jedenfalls klappt es heute mit dem Abschalten des Tiny-Editors und ich konnte das Script eingeben und abspeichern.

Ich habe das Modul "360-grad" genannt und mittels {loadmodule mod_custom,360-grad}, wie von Indigo66 vorgeschlagen, in einen Beitrag eingebunden.

Alles Bestens!

DANKE!

Kurt

PS:

Vielleicht kann mir noch jemand sagen, wie ich dieses eingebundene Modul im Beitrag zentriere.

Der Tiny-Editor zeigt zwar {loadmodule mod_custom,360-grad} im Backend zentriert an,

aber das Foto wird dann im Frontend linksbündig gesetzt und <p align="center"> funktioniert ja in HTML5 leider nicht mehr .

(siehe hier: http://test.mcv-moemlingen.net…hp/360-grad-ansicht-halle

Kurtus · 28. März 2018

Hallo Firstlady Christiane,

vielen Dank, Dein Tipp hat geklappt. Ich konnte jetzt das Script im Editor eingeben und habe dieses Modul abgespeichert.

Wenn ich es jetzt allerdings zum Testen an einer Modulposition anschauen will, sehe ich nur den Text des Scriptes:

????

LG

Kurt

Kurtus · 28. März 2018

Hallo Christine,

das habe ich jetzt gemacht, bewirkt bei mir aber nichts?

LG

Kurt

Kurtus · 28. März 2018

Guten Abend Elwood,

ja, habe ich:

Trotzdem erscheint bei mir beim "Eigenes Modul":

Gruß

Kurt

Kurtus · 28. März 2018

Hi Indigo66,

danke Dir für die schnelle Antwort!

Danke auch an anka!

Sorry, wenn ich als Neu-Joomlaner evtl. dumme Fragen stelle, aber ich weiß im Moment nicht, wie ich ein HTML-Modul erstellen soll.

Wenn ich in "Kontrollzentrum" - "Global" bei Editor auf "kein Editor" umschalte, dann unter "Erweiterungen" - "Module" - "Neu" gehe, finde ich lediglich:

Eigenes Modul Dieses Modul ermöglicht es ein eigenes Modul mithilfe eines WYSIWYG-Editors zu erstellen.

Wenn ich dieses öffne ist wieder der TINY-WYSIWYG-Editor dabei und ich kann das Script dort nicht eingeben.

Auch wenn ich auf "Werkzeuge" - "<> Quelltext" gehe und das Script dort einfüge, ist es nach dem Schließen wieder verschwunden.

Wäre das der richtige Weg oder wird ein HTML-Modul an einer anderen Stelle erstellt?

Danke im Voraus

Kurt

Kurtus · 28. März 2018

Hallo,

ich hatte bisher auf meiner HTML-Webseite einen Script-Link um ein 360 Grad Foto darzustellen.

Ich dachte nun, ich könnte dies einfach als HTML in einen Joomla-Beitrag einfügen.

Deshalb hatte ich den Tiny-Editor abgeschaltet und den Code im Editor eingefügt und abgespeichert.

Nach wieder Einschalten des Tiny-Editors ist diese Code-Zeile aber im Editor verschwunden und es natürlich beim Aufruf des Beitrags auch nichts angezeigt.

Hier der Code, den ich einbinden wollte:

Code

<script src="https://static.kuula.io/embed.js" data-kuula="https://kuula.co/share/7lg3g?fs=1&vr=0&thumbs=1&chromeless=0&logo=0" data-width="50%" data-height="640px"></script>

Gibt es eine Möglichkeit das 360 Grad Foto in einem Joomla-Beitrag anzuzeigen?

Auf dieser Seite ist mit dem diesem Code das 360 Grad-Foto (ganz unten auf der Seite) eingebunden: MCV Hallendeko 2016.

Danke für Tipps und Hilfe hierzu.

Kurt

Kurtus · 27. März 2018

Hallo Re:Later

vielen Dank für den Tipp zum absoluten Serverpfad.

Ich habe den entsprechend eingetragen und die Codezeile sieht jetzt so aus:

PHP

<?php symlink('/mnt/web024/c0/70/52030670/htdocs/Fotoalben/1953/fotos/', '/mnt/web024/c0/70/52030670/htdocs/joomla_05/images/fotoalben/1953/fotos'); ?>

Damit konnte ich auch den Symlink durchführen und es funktioniert.

Allerdings sehe ich bei mir in FileZilla das Pseudoverzeichnis nicht, wie auf Deinem Screenshot als Ordnerverknüpfung.

Es wird Im Pfad "Joomla_05/images/fotoalben/1953/" kein Ordner "fotos" angezeigt):

Da ich allerdings sehr viele Foto-Ordner der letzten 66 Jahre in verschachtelten Unterordner auf dem Server liegen habe und ich diese Unterordnerstruktur im joomlaroot wieder abbilden will, müsste ich sehr viele Symlinks mittels php-Dateien durchführen.

Daher wäre der Vorschlag von Elwood, alle Fotos in den Joomla-Ordner umzukopieren soweit ok, aber ich finde kein Programm mit welchem ich direkt auf dem Server das Umkopieren vornehmen könnte.

Die einzige Möglichkeit wäre die Fotos per FTP herunter zu laden und dann ins neue Verzeichnis hoch zu laden. Auch das ist eine sehr umständliche Methode.

Schön wäre es, wenn es ein Photo-Gallery Programm gäbe, in welchem man einfach den Pfad zu Dateien außerhalb des Joomla Verzeichnisses eingeben könnte.

Aber da auch Phoca Gallery das nicht kann habe ich wenig Hoffnung.

Vielen Dank nochmal an Dich und Elwood für die schnelle Hilfe!

Kurt

PS:

Ich werde bestimmt noch viele Fragen haben, bis die Homepage umgestaltet ist, aber dadurch lerne ich auch viel dazu.

Hoffentlich nerve ich Euch Experten damit nicht zu sehr.

Kurtus · 26. März 2018

Hi Re:Later,

ich muss mit meinen 59 Jahren noch viel dazu lernen und erst mal die Sachen kapieren, die ihr Experten da so schreibt

auf der Seite https://perishablepress.com/us…nks-without-shell-access/ habe ich mir noch einmal die Vorgehensweise durchgelesen.

Die gewünschten Fotos liegen im Rootverzeichnisses meines Webspaces unter "Fotoalben/1953/fotos/"

Das Joomlaroot ist ist dort unter "joomla_05/" erstellt.

Ich habe eine PHP-Datei mit folgendem Inhalt angelegt und in diese in das root-Verzeichnis meines Webspaces kopiert:

PHP

<?php symlink('/Fotoalben/1953/fotos/', '/joomla_05/images/fotoalben/1953/fotos'); ?>

Dann habe ich über den Browser diese Datei angeklickt. Es erschien eine leere, weiße Seite.

(Zitat: Next, trigger the function by calling the PHP file via your browser. If you see a blank page, you are good to go.)

Als Pfad in sigplus habe ich "fotoalben/1953/fotos" eingegeben, bekomme aber diese Fehlermeldung im Frontend:

[SIGPLUS_EXCEPTION_SOURCE] Die Bild-Quelle muss eine vollständige URL oder ein Pfad relativ zum Basis-Ordner sein wie im Backend angegeben. Aber /fotoalben/1953/fotos ist weder eine URL noch ein Pfad relativ zu einer existierenden Datei bzw. Ordner.

In Filezilla wird im joomlaroot unter "images/fotoalben/1953" das Verzeichnis "fotos" jedenfalls nicht angezeigt

Allerdings weiß ich nicht, ob symlink tatsächlich eine sichtbare Datei erstellt wird und diese im FTP-Programm sichtbar ist...

Jetzt weiß ich nicht, ob

a.) mein Provider STRATO kein Symlink zulässt

b.) ich einen Fehler in der PHP-Datei gemacht habe oder

c.) ich den falschen Pfad in Sigplus eingegeben habe.

d.) ich komplett falsch liege

Ich muss mich also morgen nochmals damit beschäftigen.

Falls Du den Fehler hieraus auslesen kannst, wäre es schön, wenn Du ihn mir nennen könntest.

Schönen Abend noch und vielen Dank!

Kurt

Kurtus · 26. März 2018

Hallo Elwood,

die Fotos liegen außerhalb des Joomlaroot, noch auf der alten Seite:

Joomla Installation: <root>/joomla_05/

Fotos: <root>/Fotoalben/1953/fotos/

Wie erwähnt, wollte ich die Fotos nicht alle in das Joomlaroot umkopieren, da die "alte Seite" ja noch so lange weiter laufen soll, bis ich die Joomla Seite fertig gestellt habe

Es sind ja auch sehr viele Daten (Fotos), die umkopiert werden müssten und diese würden dann erst einmal doppelt auf dem Server vorhanden sein und natürlich auch sehr viel Speicherplatz in Anspruch nehmen.

Deshalb dachte ich, dass ich mit den Angaben des Speicherorts auch auf die Fotos zugreifen kann. Sigplus liest sie ja für die Thumbnails auch aus... ??

Kurtus · 26. März 2018

Hallo liebe Leute,

ich möchte das Modul Sigplus (https://extensions.joomla.org/extension/sigplus/) zum Anzeigen von Fotos in Joomla nutzen.

Meine vorhandene (noch aktive, aber in bezug auf Webdesign total veraltete) Vereinswebseite www.mcv-moemlingen.de hat tausenden von Fotos, die in Verzeichnissen und Unterverzeichnissen des Root liegen.

Nun möchte ich die Webseite auf Joomla umstellen, habe hierfür eine Test-URL eingerichtet (test.mcv-moemlingen.net). Allerdings möchte ich nicht alle Fotos in den Image Order des Joomla Verzeichnisse kopieren.

Deshalb habe ich bei sigplus unter "Bilderordner" den relativen Pfad zu den vorhandenen Fotos eingestellt (in diesem Fall: ../../Fotoalben/1953/fotos/):

Sigplus zeigt mir nun die Fotos auch als Thumbnails an.

Sobald ich aber auf einer der Fotos klicke um die Slideshow zu starten bzw. das Foto in groß zu sehen, erhalte ich nur ein Warnzeichen:

Das ganze kann live auf meiner Testseite http://test.mcv-moemlingen.net/index.php/1953 angeschaut werden.

Hat evtl. jemand eine Lösung für mich oder muss ich tatsächlich die ganzen Fotos in das Joomla-Verzeichnis umkopieren?

Vielen Dank im Voraus für Eure Hilfe und Tipps

Kurt

Kurtus · 24. März 2018

Hallo Pascal,

Vielen tausend Dank für Deine Hilfe.

Es klappt jetzt mit der Sortierung.

Gruß

Kurt

Kurtus · 23. März 2018

Ist ja toll, kannst Du zaubern?

Hab Dir gerade an Deine E-Mailadresse die Zugangsdaten geschickt...

Da ich diese Problem zukünftig bei den zurück liegenden Faschingskampagnen auch haben werde, wäre es nett, wenn Du mir noch einmal eine "Schritt für Schritt-Anleitung" geben könntest.

Aber jetzt erst Mal Respekt und herzlichen Dank!

Gruß

Kurt

Kurtus · 23. März 2018

@kitepascal

Ich finde da leider keine Einstellungsmöglichkeit für diesen Menupunkt.

Wie kann ich Dir denn eine PM hier senden?

Ich würde Dich gern mal ins Backend rein schauen lassen.

Gruß

Kurt

Kurtus · 23. März 2018

Stimmt,

die Beiträge behalten ihre ID, egal an welchen Platz ich den Beitrag in der Beitragsübersicht schiebe.

Aber dies hat keinen Einfluss auf die Sortierung in der Kategorieliste und die "Zurück" und "Weiter" Buttons richten sich offensichtlich nach der Kategorieliste.

Ich habe keine Möglichkeit gefunden diese Kategorieliste irgendwie manuell zu sortieren.

Gruß

Kurt

Kurtus · 23. März 2018

@Re:Later

Hallo, danke auch für Deinen Hinweis.

Es stimmt, allerdings wurde die Reihenfolge in dieser Kategorieliste nicht durch mich sondern durch Joomla festgelegt.

Und diese Reihenfolge richtet sich offensichtlich nach der vergebenen IDs .

Wenn ich die Beiträge nach IDs sortiere, kann ich sie dort leider nicht verschieben, da der "Anfasser" ganz rechts vor den Beiträgen "grau" ist und nicht benutzt werden kann.

kitepascal

Danke für den Tipp, das hatte ich aber auch schon ausprobiert.

Wie eben erwähnt, habe ich diese Reihenfolge nicht im Backend festgelegt, sondern sie wurde durch Joomal anhand der IDs generiert.

ich habe lediglich im Side-Menu die Reihenfolge so festlegen können, wie ich es wollte.

Gruß

Kurt

Beiträge von Kurtus

Buttons, die in "mormalem HTML" zu sehen sind verschwinden in Joomla

Buttons, die in "mormalem HTML" zu sehen sind verschwinden in Joomla

Anzeigen eines Login Moduls im horizontalen Maxi Menu CK

Anzeigen eines Login Moduls im horizontalen Maxi Menu CK

Einbinden eines <script>-Tags in einen Beitrag

Einbinden eines <script>-Tags in einen Beitrag

Einbinden eines <script>-Tags in einen Beitrag

Einbinden eines <script>-Tags in einen Beitrag

Einbinden eines <script>-Tags in einen Beitrag

Einbinden eines <script>-Tags in einen Beitrag

Einbinden eines <script>-Tags in einen Beitrag

Problem beim Anzeigen der Bilder mit Sigplus

Problem beim Anzeigen der Bilder mit Sigplus

Problem beim Anzeigen der Bilder mit Sigplus

Problem beim Anzeigen der Bilder mit Sigplus

Probleme mit "Zurück" und "Weiter"-Button im Template "Less Allrounder"

Probleme mit "Zurück" und "Weiter"-Button im Template "Less Allrounder"

Probleme mit "Zurück" und "Weiter"-Button im Template "Less Allrounder"

Probleme mit "Zurück" und "Weiter"-Button im Template "Less Allrounder"

Probleme mit "Zurück" und "Weiter"-Button im Template "Less Allrounder"