CSS

[Goldschwalbe]

Moin Zusammen

Ich bin dabei eine neue Site zu erstellen.
Dazu möchte ich die Mouseover-Farbe eines Buttons (<li>...</li>) verändern.

Code: Alles auswählen

<li class><a class="btn btn-lg btn-info" href="index.html#kontakt" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Kontakt</a></li>

Dazu habe ich die Klasse .btn-info der CSS-Datei mbr-additional.css (auf dem Server) verändert:

Code: Alles auswählen

.btn-info:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ffe161;/*white*/
  z-index: -1;
  transform: translateX(-102%);
  transition: all 0.3s;
}

Der Hintergrund des Buttons wird jetzt auch gelb dargestellt (vorher weiß).

An welcher Stelle im Mobirise-Programm muss ich das ändern? Site-Style? ...
Ich möchte es ja nicht jedesmal manuell ändern.
Danke für Eure Antworten.

[Tommy Herrmann]

Moin Heinz-Peter,

also meiner Ansicht nach ist das eine "Bootstrap" Class und dann müsstest Du die CSS-Datei von Bootstrap ändern. Das solltest Du aber auf gar keinen Fall tun.

Du müsstest dann diese Class z.B. in die globalen CSS-Eigenschaften Deines (eines) Projektes einmalig eintragen, sodass diese auf allen Seiten in allen Blöcken wirken.

> Klicke auf Pinsel-Symbol (unten rechts auf jeder Arbeitsseite)
> Klicke auf den Button "Edit in Code Editor"

> dann hier im linken Bereich "Static Styles" Deine Class eintragen:

... aber Achtung - das kann von Projekt und Thema/Block sehr unterschiedlich sein, da Mobirise das über Variablen ändert.

Eventuell muss man das auch direkt als <style> Anweisung in die globale HTML des Projektes schreiben, damit es dann unter allen anderen CSS-Anweisungen, also auch unter der Datei "mbr-additional.css", steht und diese überschreibt, also dann so:

> Sites > Zahnrad auf Projekt-Kachel > Global HTML insert > im Bereich "Before </head> Code"

Code: Alles auswählen

<style>
.btn-info:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ffe161;/*white*/
  z-index: -1;
  transform: translateX(-102%);
  transition: all 0.3s;
}
</style>

[Goldschwalbe]

Danke, Tommy
Mal sehen, was am Besten ist.

Mobirise ist einfach und doch nicht einfach.

[Andyneu]

Auszug aus /assets/mobirise/css/mbr-additional.css

Code: Alles auswählen

.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info.active {
  color: #ffffff !important;
  background-color: #148cca !important;
  border-color: #148cca !important;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

Die Klasse .btn-info gibt es schon als :hover. Wenn du hier Änderungen machst hast du die wahrscheinlich nicht nur dort wo du sie haben möchtest sondern auch da wo die Jungs von Mobirise meinen diese Class verwenden zu wollen.

Erstelle dir lieber eine eigene Class und hinterlege diese global. Dann rufe sie gezielt dort auf wo du sie auch haben möchtest.

myButtons :hover{
background-color:yellow;
color:black;
etc...
}

<li class=""><a class="bt... btn-prim... myButtons" href="index.html#kontakt" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Kontakt</a></li>

[Goldschwalbe]

Danke für den Tipp.