Skip to main content

Yootheme-Script-Sammlung

1. toolbar-l oder toolbar-r sichtbar auf mobilen Geräten:

.tm-toolbar { display: block !important;  }

oder fixiert oben:

.tm-toolbar { 
display: block !important; 
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
}

2. Hidden-Map-Marker seit Yootheme 1.18

Seit Yootheme Version 1.18 wurde die Option "hidden" hinzugefügt. Seit dieser Version lässt sich der Center-Marker nicht mehr verstecken. Hierfür muss folgender Code in die Custom-CSS hinzugefügt werden:

/* Map-Marker Center unsichtbar machen */

div.mymap > div > div > img:nth-child(1) {display:none;}

.uk-breadcrumb>* {
    color: #444;
    padding-top: -70px;
    padding-bottom: -70px;
}

Die Karte muss allerdings im Pagebuilder in diesem Fall die folgende Klasse bekommen: "mymap"

3. Hide Breadcrumbs on mobile

Die Joomla-Breadcrumbs Optionen werden von "Yootheme" ignoriert. Somit erscheint auch ein langer Beitragstitel in Breadcrumbs auf mobilen Geräten und wird nicht schön umgebrochen. Um Breadcrumbs auf Smartphones auszublenden benötigt man diesen CSS-Custom-Code:

/* Hide Breadcrumbs on mobile */
@media (max-width: 616px) { 
   .uk-breadcrumb {
    display:none;
    }
}

4. Missing divider in the subnav

Die Yoothem-Navi lässt sich komfortabel über die Templateeinstellungen konfigurieren. Der "divider" lässt sich hier jedoch nicht für die Subnav konfigurieren und fehlt einfach. Über die Ergänzung in den Custom-CSS lässt sich ein Divider-Element auch in die Subnavi ergänzen:

.my-subnav-divider > .uk-subnav > * {
      &:extend(.uk-subnav-divider > *);
  }
  .my-subnav-divider > .uk-subnav > :nth-child(n+2):not(.uk-first-column)::before {
      &:extend(.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before);
  }
  .tm-toolbar .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-card-primary.uk-card-body .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-card-primary>:not([class*=uk-card-media]) .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-card-secondary.uk-card-body .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-card-secondary>:not([class*=uk-card-media]) .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-light .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-overlay-primary .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-section-primary:not(.uk-preserve-color) .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-section-secondary:not(.uk-preserve-color) .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-tile-primary:not(.uk-preserve-color) .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before,.uk-tile-secondary:not(.uk-preserve-color) .my-subnav-divider > .uk-subnav>:nth-child(n+2):not(.uk-first-column)::before {
      &:extend(.uk-light .uk-subnav-divider>:nth-child(n+2):not(.uk-first-column)::before);
  }

5. Popover mit nummerierten Icons:

Für eines unserer Projekte haben wir das "Yootheme-Popover" element benötigt. Allerdings sollten einzelne Markierungen durchnummeriert werden. Hierfür wurde in den Custom-CSS folgendes ergänzt:

.el-marker {
 height: 20px;
 width: 20px;
}
.el-marker::before {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.el-marker svg {
 display: none;
}
.el-marker:nth-child(1)::before {
 content: "1";
}
.el-marker:nth-child(3)::before {
 content: "2";
}
.el-marker:nth-child(5)::before {
 content: "3";
}
.el-marker:nth-child(7)::before {
 content: "4";
}
.el-marker:nth-child(9)::before {
 content: "5";
}

Im Projekt Viktualien & Wein haben wir noch mit unterschiedlichen Icon-Farben experimentiert:

.el-marker {
 height: 20px;
 width: 20px;
}
.el-marker::before {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.el-marker svg {
 display: none;
}
.el-marker:nth-child(1)::before {
 content: "1W";
}
.el-marker:nth-child(3)::before {
 content: "2W";
}
.el-marker:nth-child(5)::before {
 content: "3W";
}
.el-marker:nth-child(7)::before {
 content: "4B";
}
.el-marker:nth-child(9)::before {
 content: "5B";
}
.el-marker:nth-child(11)::before {
 content: "6B";
}
.el-marker:nth-child(13)::before {
 content: "7P";
}
.el-marker:nth-child(15)::before {
 content: "8P";
}
.el-marker:nth-child(17)::before {
 content: "9P";
}
.el-marker:nth-child(19)::before {
 content: "10F";
  background-color: #000;
   background: #000;
  color: #fffcf7;
  transition: 0.1s ease-in-out;
 transition-property: color, background-color;
}
.el-marker:nth-child(21)::before {
 content: "11F";
}
.el-marker:nth-child(23)::before {
 content: "12F";
}
.el-marker:nth-child(25)::before {
 content: "13F";
}
.el-marker:nth-child(27)::before {
 content: "14E";
}
.el-marker:nth-child(29)::before {
 content: "15E";
}
.el-marker:nth-child(31)::before {
 content: "16E";
}
.el-marker:nth-child(33)::before {
 content: "17E";
}
.el-marker:nth-child(35)::before {
 content: "18E";
}
.el-marker:nth-child(37)::before {
 content: "19E";
}
.el-marker:nth-child(39)::before {
 content: "20E";
}
.el-marker:nth-child(41)::before {
 content: "21E";
}
.el-marker:nth-child(43)::before {
 content: "22E";
}
.el-marker:nth-child(45)::before {
 content: "23E";
}
.el-marker:nth-child(47)::before {
 content: "24E";
}
.el-marker:nth-child(49)::before {
 content: "25E";
}
.el-marker:nth-child(51)::before {
 content: "26E";
}
.el-marker:nth-child(53)::before {
 content: "27E";
}
.el-marker:nth-child(55)::before {
 content: "28E";
}
.el-marker:nth-child(57)::before {
 content: "29E";
}

---------------------------------

6. Smooth-Scroll zu Anchor-Links:

Yootheme/Einstellungen/Benutzerdefinierter Code:

Script:

if (window.matchMedia('(min-width: 1024px)').matches) {
var e = document.getElementsByClassName("phone");
for (i = 0; i < e.length; i++)
e[i].setAttribute("x-ms-format-detection", "none");
}

7. Topmenu sichtbar on mobile-screens (CSS/LESS):

/* topmenu sichtbar in mobile ...*/
@media (max-width: 959px) {

.uk-visible\@m {
display: block!important;
}

.tm-header .uk-navbar-container {
display: none;
}

.tm-header .uk-logo {
display: none;
}

.tm-header .custom {
display: none;

8. Phonenumber-Link deaktivieren (CSS/LESS):

/* phonenumber-Link deaktivieren */
a[href^="tel"] {
color: inherit; /* Inherit text color of parent element. */
text-decoration: none; /* Remove underline. */
/* Additional css `propery: value;` pairs here */
}

9. Logo rechts platzieren (CSS/LESS):

Zuerst Layout mit mittig platziertem Logo wählen (Menu links vom Logo), dann folgender Script:

.uk-navbar-center:not(:only-child) {
left: 90%;
}

Modal on Pageload

In eine Section ein Textelement, bzw. ein HTML-Element einfügen mit folgendem Inhalt.

TITEL

T

Fliesstext

10. Title-Atribute für alle Bilder hinzufügen

Die Bilder im Yootheme Pagebuilder verfügen über Alttexte, es fehlt jedoch der Title-Tag. Das Script muss unter Custom Script hinzugefügt werden:

  // Add a 'title' attribute with the value of the 'alt' attribute to img elements
  jQuery(function($) {
  $(".tm-page img").each(function() {
          $(this).attr('title',$(this).attr('alt'));
      });
  });
Zähler in der Contenttabelle (MySQL) zurück setzen:
UPDATE `xyz_content` SET `hits` = '0'
GWÖ