Mobirise-Tutorials.com

Tommy Herrmann hat geschrieben: ↑Do 4. Mai 2023, 05:59 Moin,

also - das war eigentlich noch viel einfacher als in meinem oben erwähnten Beispiel

Hier meine Testseite mit der geänderten Menüleiste:

https://www.mobirise-tutorials.com/PlatformM5/

Bitte bedenke aber, dass Du dann eine ziemliche Arbeit mit jeder Seite hast. Du musst jeden Link auf jeder Seite in der nun NICHT mehr globalen Menüleiste erneut setzten. Also alles was Du an der Menüleiste machst, musst Du dann immer auf jeder einzelnen Seite tun.


> Entferne das Attribut "global" auf jeder Seite im Quelltext mit dem "Code Editor"


Navigation - global - entfernen.jpg




> Ändere dann auf jeder einzelnen Seite immer die class="text-white" in meinetwegen class="text-primary", so habe ich es gemacht:



Navigation - Text-Aktiv - ändern.jpg




Diese Text-Klassen wie "text-white" sind vorgefertigte Bootstrap-Klassen, da gibt es noch viele mehr im globalen "Dynamic Style" Deiner Seite, die über Variablen bestimmt werden - (am Pinsel) wie:

Code: Alles auswählen

.text-primary {
    color: @primaryColor  !important;
}

.text-secondary {
    color: @secondaryColor  !important;
}

.text-success {
    color: @successColor  !important;
}

.text-info {
    color: @infoColor  !important;
}

.text-warning {
    color: @warningColor  !important;
}

.text-danger {
    color: @dangerColor  !important;
}

.text-white {
    color: #fafafa !important;
}

.text-black {
    color: #232323 !important;
}

a.text-primary:hover,
a.text-primary:focus,
a.text-primary.active {
    color: darken(@primaryColor, 20%) !important;
}

a.text-secondary:hover,
a.text-secondary:focus,
a.text-secondary.active {
    color: darken(@secondaryColor, 20%) !important;
}

a.text-success:hover,
a.text-success:focus,
a.text-success.active {
    color: darken(@successColor, 20%) !important;
}

a.text-info:hover,
a.text-info:focus,
a.text-info.active {
    color: darken(@infoColor, 20%) !important;
}

a.text-warning:hover,
a.text-warning:focus,
a.text-warning.active {
    color: darken(@warningColor, 20%) !important;
}

a.text-danger:hover,
a.text-danger:focus,
a.text-danger.active {
    color: darken(@dangerColor, 20%) !important;
}

a.text-white:hover,
a.text-white:focus,
a.text-white.active {
    color: darken(#fafafa, 20%) !important;
}

a.text-black:hover,
a.text-black:focus,
a.text-black.active {
    color: darken(#232323, 20%) !important;
}

Natürlich könntest Du auch eine eigene CSS-Class gründen, ich ich hier mal "mein-aktiver-text" genannt habe und dann diese Class verwenden.

... also dann die vorhandene class="text-white" ersetzen mit Deiner class="mein-aktiver-text".

Hier als Beispiel in rot und fett:

Code: Alles auswählen

.mein-aktiver-text {
    color: red;
    font-weight: bold;
}

P.S.:

habe da noch einen Punkt an die aktive Seite gesetzt, der folgende CSS hat:

Code: Alles auswählen

.myselect {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 20px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #aafc75;
    box-shadow: 0 0 0 5px rgba(red(#aafc75), green(#aafc75), blue(#aafc75), 0.2);
  }
}

myselect Punkt an aktiver Seite.jpg

Tommy Herrmann hat geschrieben: ↑Do 4. Mai 2023, 05:59
> Entferne das Attribut "global" auf jeder Seite im Quelltext mit dem "Code Editor"