bootstrap html templates

Mobirise Galerie

Hier als Beispiel eine CSS Anpassung der Mobirise Lightbox Galerie.

Mobirise Galerie

Hier habe ich im "Code Editor" im Bereich "CSS Editor" CSS-Änderungen vorgenommen,
wie runde Ecken oben, andere Caption-Farbe und Schrift zentriert, zusätzliche Border.

Sämtliche Anpassungen wurden hier im Bereich "CSS Editor" des Galerie-Blocks vorgenommen.
Siehe meine CSS Änderungen unten.

CSS Anpassungen


In diese beiden Klassen für den Container habe ich runde Ecken oben und wegen dieser auch den Hintergrund schwarz gemacht eingetragen:

.mbr-gallery-item > div::before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background: @overlayColor; 
  opacity: 0; 
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px; 
  -webkit-transition: 0.2s opacity ease-in-out; 
  transition: 0.2s opacity ease-in-out; 
  & when (@gradOverlay) { 
    background: linear-gradient(to left, @overlayColor, @overlayColor2) !important; 
  } 

.mbr-gallery-item > div {
  background: #000; 
}

.mbr-gallery-item > div:hover {
   background-color: #000;
   .mbr-gallery-title::before { 
    background: transparent !important; 
  } 
  &:before { 
    opacity: @overlayOpacity !important; 
    border-top-left-radius: 25px; 
    border-top-right-radius: 25px; 
  } 
}


In dieser Klasse die Caption-Titel in gelb und zentriert geändert:

.mbr-gallery-title {
  color: yellow; 
  text-align: center;
}


... und zusätzlich den Selektor "img" (Bild) mit diesen Anweisungen versehen, also auch runde Ecken oben und eine Border hinzugefügt:

img { 
  border-top-left-radius: 25px; 
  border-top-right-radius: 25px; 
  border: 2px solid #fff; 
}


... weiterhin habe ich zusätzlich die Klasse für das Icon der Lupe in die Farbe Gelb geändert und hinzugefügt:

.icon-focus {
  color: yellow; 
}


Die Farbe der Overlays kann man direkt am Zahnrad in den Blockeinstellungen wählen.


© Copyright Mobirise-Tutorials.com
Datenschutz und Impressum