CSS

Allgemeine Fragen
Benutzeravatar
Goldschwalbe
Mitglied (Level 8)
Mitglied (Level 8)
Beiträge: 78
Registriert: Do 18. Feb 2021, 16:57
Wohnort: Buxtehude
Kontaktdaten:

CSS

Ungelesener Beitrag von 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.
Liebe Grüße
Heinz-Peter

Komme von NOF, bin bei Mobirise, wohin geht die Reise?
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6009
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: CSS

Ungelesener Beitrag von 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:

Editor globale CSS.jpg


... 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>

Global HTML Insert.jpg
Benutzeravatar
Goldschwalbe
Mitglied (Level 8)
Mitglied (Level 8)
Beiträge: 78
Registriert: Do 18. Feb 2021, 16:57
Wohnort: Buxtehude
Kontaktdaten:

Re: CSS

Ungelesener Beitrag von Goldschwalbe »

Danke, Tommy
Mal sehen, was am Besten ist.

Mobirise ist einfach und doch nicht einfach. :P
Liebe Grüße
Heinz-Peter

Komme von NOF, bin bei Mobirise, wohin geht die Reise?
Benutzeravatar
Andyneu
Moderator
Moderator
Beiträge: 67
Registriert: Mi 9. Dez 2020, 16:40
Wohnort: Hoope
Kontaktdaten:

Re: CSS

Ungelesener Beitrag von 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>
Gruß Andy
Benutzeravatar
Goldschwalbe
Mitglied (Level 8)
Mitglied (Level 8)
Beiträge: 78
Registriert: Do 18. Feb 2021, 16:57
Wohnort: Buxtehude
Kontaktdaten:

Re: CSS

Ungelesener Beitrag von Goldschwalbe »

Danke für den Tipp.
Liebe Grüße
Heinz-Peter

Komme von NOF, bin bei Mobirise, wohin geht die Reise?
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot], Bing [Bot] und 2 Gäste