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

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

Indigo66 · 20. April 2018

Gib Deinem figure.snip0067 in Zeile 9202 noch ein display: block mit, denn es hat vom templateigenen CSS ein

figure {display: table;} erhalten.

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

anka · 20. April 2018

Füge das hier ans Ende vom template12.css ein:

Code

.tooltip {
opacity: 1;
}

Kurtus · 20. April 2018

Hallo Anka,

das habe ich eingefügt, aber leider hat sich nichts geändert.

Die Icons werden noch immer nicht angezeigt: Test

Gruß

Kurtus

Edit: Habe es jetzt in die custom.css geschrieben. Damit ging es. Vielen Dank!!!!

Kurtus · 21. April 2018

Könnte mir jemand sagen wie ich die Schriftgröße in den Tooltips ändern kann.

Auch die Link-Farbe der eMail-Adresse ist in den Tooltips ungünstig.

Allerdings kann ich sie nicht generell ändern, da sie in anderen Bereichen der Homepage sonst nicht passt.

Ich denke das sind für viele Profis dumme Fragen, aber als Anfänger kämpfe ich mit solchen kleinen Problemen.

Viele Grüße

Kurtus

christine2 · 21. April 2018

Hallo Kurtus,

gibt keine dumme Fragen - weder für Profis noch für Anfänger. Ist auch für uns Fortgeschrittenen oft eine Herausforderung

Zitat

Könnte mir jemand sagen wie ich die Schriftgröße in den Tooltips ändern kann.

Auch die Link-Farbe der eMail-Adresse ist in den Tooltips ungünstig.

wäre "günstig", wenn wir das sehen können, was nicht (oder wo?) zu sehen ist

Hab zwar Deine Seite am Schirm, aber um welche Tooltips geht es denn?

Liebe Grüße
Christine

Kurtus · 21. April 2018

Hallo Christine,

danke für Deine antwort und für Dein Verständnis.

Sorry, hatte ich vergessen noch einmal den Link zu erwähnen.

Es geht um die "gelben" Tooltips aus dem vorangegangenes Problem, die beim Mosueover erscheinen, wenn man über die Buttons der Fotos fährt:

Hier der Direktlink dazu:

http://test.mcv-moemlingen.net/index.php/wir-ueber-uns/test

LG

Kurtus

PS: CSS- und HTML- Code ist, bis auf das Einfügen den Codeschnipsels von Anka, genauso geblieben, wie zu Beginn dieses Posts.
Lediglich die Tooltip-Backgroundfarbe habe ich noch in gelb geändert.

christine2 · 21. April 2018

Hallo Kurtus,

zunächst mal, fehlt das noch von Tom vorgeschlagene:

Code

figure {display: block;}

Schriftgröße, versuche hier:

Code

.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
font-size:1.2em;
}

obiges hast Du ja schon > die font-size dazugeben.

E-Mail Adresse Farbe:

Code

span.tooltiptext a {
color:#000;    
}

Liebe Grüße

Christine

Kurtus · 21. April 2018

Hallo Christine,

ich bin immer wieder platt, wie Du und die anderen Profis so etwas sofort hin bekommen.

Da habe ich mit meinem Halbwissen keine Chance.

Es funktioniert mit Deiner Hilfe prima.

Zu dem von Tom vorgeschlagenen Code:

Habe ich ihn hier richtig platziert?

und was bewirkt es genau?

LG

Kurtus

christine2 · 21. April 2018

Hallo Kurtus,

Zitat von Kurtus

Zu dem von Tom vorgeschlagenen Code: Habe ich ihn hier richtig platziert?

ja, jetzt passt es (wieder). Der Grund meines Einzeilers war, dass ich den Code von Tom bei Dir nicht gesehen hatte. Später dann doch: War eh bei: figure.snip0067 .... allerdings: disply:block; (ohne a).

Wir selbst sehen ja die Zeilennummer in der: template.css12 - können Dir also nur diese nennen. Weil sich ja nach einer Änderung von Dir in der custom.css (nach Stil Neu-Speicherung) neue Zeilen ergeben.

Zum display:block usw. schau Dir dazu das an: https://www.w3schools.com/cssref/pr_class_display.asp oder auch hier: https://blog.kulturbanause.de/…-inline-elemente-in-html/

Muss aber dazu sagen, dass ich es in diesem Fall nicht gewusst bzw. daran gedacht hätte.

Liebe Grüße
Christine

Kurtus · 22. April 2018

Hallo Experten,

keine Ahnung was passiert ist, aber ich wollte heute ein Foto in dieser Sache hinzufügen und nun sind wieder die Buttons unsichtbar.

Vielleicht könnte nochmal jemand in die template.css12 schauen und mir sagen woran es diesmal liegt...

Der aktuelle Link dazu: http://test.mcv-moemlingen.net…-ueber-uns/vorstandschaft

Danke

L.G.

Kurtus

Kurtus · 22. April 2018

Hab den Fehler gefunden.

Beim Hinzufügen des Fotos hatte ich den TinyEditor laufen und dadurch sind die i class tags raus geflogen....

Elwood · 22. April 2018

BTW:

Zitat

Joomla 3.8.6

Wenn mal Zeit ist, Update auf 3.8.7 nicht vergessen.

Kurtus · 26. April 2018

Hallo Christine,

leider verursacht der Code einen Konflikt mit dem Joomla Event Manger. Hierzu dieser Thread: 5496-kleines-problem-mit-jem-kalender-modul

Ich habe diesen Code mal in der CSS-Datei auskommentiert. Danach funktionierte der Java Event Manager wieder einwandfrei:

Code

.tooltip {
  position: relative;
  display: inline-block;
  opacity: 1;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
    width: 150px;
    background-color: #ffff00;
    color: #000;
    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 #ffff00 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  font-size:1.4em;
}
span.tooltiptext a {
  color:#000;    
  }

Alles anzeigen

Scheinbar wird auch diesem Problem durch den Code verursacht:

Ich habe die Erweiterung Maximenu CK in Benutzung. Mit dem Code erscheinen die Subenus des vertikalen Menus hinter einem Beitrag mit integriertem Modul:

Ohne den Code sind die Submenus davor zu sehen, so wie es sein soll.

Gibt es evtl. eine Möglichkeit, dass Alles miteinander harmonisiert?

Vielen lieben Dank.

Kurt