Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobirise - Hoverfarbe
#1
Mobirise 4 Standard Vers. 4.10.8 - ohne Code Editior

Hallo,
meine Website Eifelimpressionen habe ich vor etwa 2 Jahren mit Mobirise erstellt. Mich stört seit langem schon bei den Textlinks die Hoverfarbe. Ich habe schon mehrmals versucht diese zu ändern, aber es gelingt mir nicht. Gibt es da überhaupt eine Möglichkeit?
Grüße aus der Nordeifel
Werner

Mobirise 4... | NOF 12 | Windows 10 | IE 11 | PhotoImpact X3
Mobirise-Projekt 'Eifelimpressionen - Wandern und Natur erleben' | Mobirise-Projekt 'Eifelimpressionen - Fotogalerien' | NOF-Projekt 'Basteln'  

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin Werner,

Du müsstest lediglich den Hover-Effekt bei Mausüber in der CSS ändern, also z.B. für Rot:

Code:
a:hover {
  color: red;
}

https://www.w3schools.com/cssref/tryit.a...link_more1

Das würdest Du normalerweise in den "Code Editor" des jeweiligen Blocks schreiben.

... oder z.B. als direkte Style-Anweisung in die Seiteneinstellungen einer jeden Seite in den Bereich:

"Inside <head> code"

dann so:

Code:
<style>
    a:hover {
      color: red;
    }
</style>

... da ich schon immer den "Code Editor" habe (bevor ich überhaupt meine erste Seite erstellt hatte), weiß ich jetzt gar nicht mehr, ob Du diesen Bereich ohne "Code Editor" in den Seiteneinstellungen dennoch hast.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Ich meine, bin mir aber nicht sicher, dass es geht.
Spiel mal mit der Reihenfolge, das heisst, erst Link setzen, dann Farbe, oder irgendwie andersrum. Ich erinnere mich dunkel, dass ich mich da auch schon verkünstelt habe. Aber mit dem Code-Editor habe ich da nichts gemacht.
Wenn Dein Pferd tot ist, steig ab.

Hab auf dem Rechner: NOF11, NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox  Java 7 32bit, IE11, Chrome, GIMP 2.10.10; Mobirise 4.10.6, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Moin,

Mobirise setzt ja bei seinen Links ("a") immer die Farbe, die man hier auswählt (Link anklicken) ...


.jpg  Linkfarbe.jpg (Größe: 128,14 KB / Downloads: 15)


... bzw., die man als Grundfarbe bei dem Werkzeug "Pinsel" für die globalen Einstellungen gewählt hat:


.jpg  Grundfarbe.JPG (Größe: 403,47 KB / Downloads: 13)


Bei Mausüber ("hover") wird dann lediglich eine höhere Deckkraft (opacity) der gewählten Farbe verwendet (wenn man diese CSS nicht selbst ändert, wie ich oben beschrieben hatte), wie z.B.:

Code:
a:hover {
  opacity: 1;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Nachtrag,

ich hatte gerade mal versucht innerhalb eines Blocks verschiedene "hover" Klassen anzubringen, das geht so einfach nicht, denn ein "a" Selektor (Link) hat Vorrang vor irgendwelchen IDs oder CSS-Klassen und lässt sich daher nur global und nicht für einzelne Links setzen.

Daher habe ich hier mal einen Vorschlag mittels inline JavaScript-Anweisung gemacht:

http://www.mobirise-tutorials.com/Testse...ontent1-7p

Default:
Code:
<a href="javascript: void();" class="text-primary">Default</a>

Hover rot:
Code:
<a href="javascript: void();" onmouseover="this.style.color='#FF0000'" onmouseout="this.style.color='#149dcc'" style="color: rgb(20, 157, 204);">Hover rot</a>

Hover grün und unterstrichen:
Code:
<a href="javascript: void();" onmouseover="this.style.color='#00FF00';this.style.textDecoration='underline'" onmouseout="this.style.color='#149dcc';this.style.textDecoration='none';" style="color: rgb(20, 157, 204); text-decoration: none;">Hover grün und unterstrichen</a>
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Hallo Werner,
ich habe auf der Seite außer im Footer gar keine Textlinks gefunden.

Deshalb kann ich gar nicht verstehen, warum Dir das so wichtig ist.
Ich finde es aus gestalterischen Gesichtspunkten schon wünschenswert, wenn die Linkfarbe beispielsweise zu einer Überschriftsfarbe o.ä. passt.
Ansonsten ist es doch weitgehend zweitrangig, Hauptsache "es tut sich was" bei Hover.

So lange die Farbänderung mit Bordmitteln oder wenigstens einfachen Eingriffen in die CSS zu lösen ist, würde mir das für eine Hobbyseite reichen. Alles andere wäre mir zu aufwändig.
Wenn Dein Pferd tot ist, steig ab.

Hab auf dem Rechner: NOF11, NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox  Java 7 32bit, IE11, Chrome, GIMP 2.10.10; Mobirise 4.10.6, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Hallo Ellen und Tommy,
vielen Dank für Euere Bemühungen. Da der Link-Text bei Mausüber nicht gut lesbar ist, wäre es wünschenswert, die Hoverfarbe zu ändern. Ich weiß wohl um die Abläufe mit den Standardeinstellungen grundsätzlich Bescheid, hätte aber sein können, dass ich was übersehen habe. So muss ich mit der Tatsache leben es zu belassen, die Linkfarbe zu ändern (was zu dem gesamten  Erscheinungsbild vielleicht nicht mehr passen würde) oder mir den Code-Editor anzuschaffen.  Huh
Grüße aus der Nordeifel
Werner

Mobirise 4... | NOF 12 | Windows 10 | IE 11 | PhotoImpact X3
Mobirise-Projekt 'Eifelimpressionen - Wandern und Natur erleben' | Mobirise-Projekt 'Eifelimpressionen - Fotogalerien' | NOF-Projekt 'Basteln'  

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Wenn man die Farbe mit CSS-Anweisung ändert (Tommys Beitrag #2), dann geht das doch auch ohne Code-Editor. Der CSS-Editor ist frei!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Klicke doch mal auf einen Deiner Links, beispielsweise im Footer "Impressum". Dann erscheint eine vorgebene Farbauswahl von Mobirise für Links. Wähle mal eine andere Farbe oder mache den Hintergrund vom Footer dunkler, sodass die Hover-Farbe am Link besser zu erkennen ist.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Schreibe:
a.text-white:hover, a.text-white:focus {
    color: #8a1919 !important;
}
in den CSS-Editor!

Für "Datenschutz" fehlt noch:
a.text-primary:hover, a.text-primary:focus {
color: #8a1919 !important;
}
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
@Tommy
@Martin
ich habe hier mal einen Screenshot meiner Seiteneinstellungen. Einen CSS-Editor kann ich hier aber nicht finden.  Huh


Angehängte Dateien
.png  Seiteneinstellungen.png (Größe: 474,41 KB / Downloads: 10)

Grüße aus der Nordeifel
Werner

Mobirise 4... | NOF 12 | Windows 10 | IE 11 | PhotoImpact X3
Mobirise-Projekt 'Eifelimpressionen - Wandern und Natur erleben' | Mobirise-Projekt 'Eifelimpressionen - Fotogalerien' | NOF-Projekt 'Basteln'  

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
@Martin,

es gibt nur einen "Code Editor" als kostenpflichtige Erweiterung, dieser beinhaltet auch den Bereich "CSS Editor". So etwas wie einen extra "CSS Editor" gibt es nicht :eek:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Zitat:So etwas wie einen extra "CSS Editor" gibt es nicht

...meinte eigentlich ich auch immer
Grüße aus der Nordeifel
Werner

Mobirise 4... | NOF 12 | Windows 10 | IE 11 | PhotoImpact X3
Mobirise-Projekt 'Eifelimpressionen - Wandern und Natur erleben' | Mobirise-Projekt 'Eifelimpressionen - Fotogalerien' | NOF-Projekt 'Basteln'  

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Dann war das bei Mobirise 3! Da konnte ich CSS-Eingaben machen, ohne den Block mit dem Editor zu "entsperren".
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Ja, bei "Mobirise3" muss man noch den "Code Editor" für den jeweiligen Block zunächst aktivieren, den Bereich "CSS Editor" dagegen nicht.

Man hat jedoch weder den "Code Editor" (den man dort erst aktivieren musste) noch den Bereich "CSS Editor", wenn man diese Erweiterung nicht käuflich erworben hat.

... es wird jedem ganz schnell klar, dass man ohne den "Code Editor" mit Mobirise nicht arbeiten kann.

Der ist allerdings ziemlich teuer und wahrscheinlich kann man nur dazu raten bei einem Sonderangebot, wie z.B. dem "Black Friday Sale", das gesamte Paket zu kaufen, dass dann nur wenige Euros mehr als der "Code Editor" alleine kostet.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise- AMP und PWA Thomas Saake 4 77 Gestern, 14:21
Letzter Beitrag: Thomas Saake
  Mobirise-Navbar Bootsnipp bearbeiten Thomas Saake 2 64 12.09.2019, 11:35
Letzter Beitrag: Thomas Saake
  Mobirise- Seite darf nicht im Internet gefunden werden Thomas Saake 9 172 09.09.2019, 14:52
Letzter Beitrag: Thomas Saake
  Alte Mobirise Website verlinken blubbs84 1 63 08.09.2019, 11:58
Letzter Beitrag: Rancher
  Mobirise 4 Parallax: Bilder auf mobilen Geräten pixelig CeDe 6 86 07.09.2019, 18:37
Letzter Beitrag: stobi_de
  Lexikon - Script von Mobirise? Utz29 6 101 07.09.2019, 18:16
Letzter Beitrag: Utz29
  Mobirise-Hamburger zentriert unter Logo Thomas Saake 2 85 05.09.2019, 15:35
Letzter Beitrag: Thomas Saake
  Mobirise-Hamburger Menü zentrieren und Beschriften Thomas Saake 6 127 03.09.2019, 21:19
Letzter Beitrag: Thomas Saake
  Mobirise-Hamburger Menü Thomas Saake 2 99 02.09.2019, 10:10
Letzter Beitrag: Thomas Saake
  Mobirise-Toogle Formatierung 2 Thomas Saake 13 304 24.08.2019, 21:06
Letzter Beitrag: stobi_de



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!