Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Dem Body eine Class verpassen?
#1
Hallo!
Ich würde gerne auf verschiedenen Seiten mal ein helles und mal ein dunkles Logo anzeigen, abhängig vom Hintergrund.
Hier ist das dunkle Logo OK
https://www.afripix-web.de/referenzen-ho...neshop.php

Hier ist es voll daneben
https://www.afripix-web.de/referenz-tierheim.php

Dazu habe ich mit dem Programmierer von NAVIK geschrieben und eine Möglichkeit bekommen, die auf einer Klasse beruht, die ich dem BODY mitgeben muss.
Aktuell fehlt mir da die Idee, wie ich das mit Mobi mache.

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

na - wenn es dann zwingend im <body> Tag stehen muss, dann müsstest Du diese Class in die

> Seiteneinstellung > "Inside <head> code"

schreiben, wie z.B.:

Code:
<style>
   body {
      css: anweisung;
   }
</style>

oder an dieser Stelle ("Inside <head> code") auf eine eigene CSS-Datei verlinken.

Du könntest die gleiche Anweisung, den Selektor "body", natürlich auch in den Block mit dem Logo in den CSS-Editor eintragen, also dann ohne das <style> Tag.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Das Gleiche kam gerade auch von Anton im Mobi-Forum.
Es ist jedoch so, dass die Klasse in einem Javascript erzeugt wird.
So schrieb es mir der Programmierer von Navik

1. Add class "logo-light" to body tag on your page that you would like to show a different logo (light logo).
<body class="logo-light">

2. Then add the code below to your custom js.

$('.logo-light').find('.logo img').attr('src', 'YOUR DIFFERENT LOGO PATH');
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Du kommst ja bei Mobirise nicht an das <body> Tag ran, insofern müsstest Du diese Class selbst eintragen, bzw. als CSS-Datei einlesen, sodass die Class dem vorhandenen <body> Tag zugeordnet wird.

Was genau steht denn in dieser class="logo-light"? Diesen Inhalt schreibst Du dann, wie oben beschrieben, in den Selektor "body".

Das JavaScript schreibst Du dann in den Seiteneinstellungen in den Bereich "End of <body> code".

Code:
<script>
    $('.logo-light').find('.logo img').attr('src', 'YOUR DIFFERENT LOGO PATH');
</script>

... wobei Du natürlich 'YOUR DIFFERENT LOGO PATH' noch mit dem Pfad zu Deinem Logo ersetzen musst.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
So gehts nicht
<style>
body
{
class="logo-light";
}
</style>


So gehts (zu Fuß eingetragen, ist aber nicht Sinn der Sache)
<body class="logo-light">
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Also die Änderungszeit für eigene Beiträge dürfte schon etwas länger sein in diesem Forum.... Undecided

Scheinbar eine Sache mit dem Cache, den ich wohl nicht gelöscht hatte: die Anweisung mit dem Style wird nun doch geschluckt.

jeder sollte nun auf meiner Startseite ein weisses Logo sehen !
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Zitat:Also die Änderungszeit für eigene Beiträge dürfte schon etwas länger sein in diesem Forum...

Wäre insofern nicht förderlich weil man in der Übersicht nicht erkennen würde, dass etwas neues geschrieben wurde.
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Wäre vielleicht nur für mich gut, weil ich Lösung zu einem Problem immer genau dann finde, wenn ich auf ABSENDEN gedrückt habe und dann immer mir selbst antworten muss, wodurch dann die gefürchteten Stober-Monologe entstehen, weil ich die Sache ja auch zu Ende erklären muss.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Du kannst die class per java script beim Laden der jeweiligen Seite anfügen.


Diese Function in den Head oder eventuell ganz nach unten auf der Seite
Code:
<script>
document.getElementByTagName(body).onload = function() {myFunction()};

function myFunction() {
 var element = document.getElementsByTagName(body);
 element.classList.add("logo-light");
}
</script>

Das sollte so funktionieren. Bin gerade nicht zuhause und kann hier nicht in Mobi testen.
Aber das solltest du auch hinbekommen  Wink
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
Ah ja, gut.
ist jetzt in diesem Fall doch schon mit dem Style gelöst, aber das werde ich garantiert noch an anderer Stelle nutzen thumbs up
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
Frank,

wenn ich in Deinen Quelltext gucke, ist da aber etwas noch vollkommen falsch :eek:

Das ist keine gültige Style-Anweisung:

Zitat:<style>
body{
class=logo-light;
}
</style>

... das hat überhaupt keine Wirkung :confused:

Du müsstest hingegen innerhalb der geschweiften Klammern eben die CSS-Anweisungen stehen haben. Wo soll denn die class="logo-light" überhaupt definiert sein?

Weiterhin hast Du noch ein zweites <body> Tag auf der Seite:

<body class="logo-light">

Das ist so alles noch falsch - überprüfe das nochmals.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Oh, da habe ich mir nun selbst ein Ei gelegt mit der ganzen Bastelei.

Aaalso, nochmal von vorne.

Ich habe mich an NOF-Zeiten erinnert, und in das Google-Analytics-Feld geschrieben
</body>
<body class="logo-light">

Also den bestehenden Body zu, un einen eigenen mit der Class auf machen.

Wie man sieht, geht das. Wenn ich die beiden Zeilen lösche, gehts nicht mehr.
Das ist natürlich sehr gekrückt ...

Auch Andys Lösung mit dem JAVA geht nicht. Da hatte ich ihm eben was Falsches geschrieben.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Du hast aber auch die class Bezeichnungen angepasst und das Script von Navik beim testen rausgenommen oder?

Denn sonst kann es nicht funktionieren.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
Die Class-Bezeichnung ist "logo-light"
Die Definition dieser Klasse findet hier statt, was auch am Ende des Body-Textes ist
<!-- NAVIK Navigation Logo ändern-->
<script>
$('.logo-light').find('.logo img').attr('src', 'https://www.afripix-web.de/navik/navi-pix/logo2-weiss.png');
</script>

Darunter dann Dein Script.
Das ganze dann online hier zu finden
https://www.afripix-web.de/index2.php

Ich habe die Krücke mit dem doppelten Body wieder entfernt, weil 2 Bodys pro Seite vielleicht funktionieren, aber rein grundsätzlich falsch sind.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Hallo Frank

also wenn ich mir das in deinem Quellcode mal genauer ansehe würde ich behaupten du mußt die Classe nicht dem Body hinzufügen sondern dem logo

in dem Fall so:
Code:
<script>
document.getElementByTagName("body").onload = function() {myFunction()};

function myFunction() {
var element = document.getElementsByClassName("logo");
element.classList.add("logo-light");
}
</script>


.jpg  Code_Frank.JPG (Größe: 42,28 KB / Downloads: 10)


Und du mußt dann aber unten auch das script von Navik rausnehmen denn sonst überschreibst du das Erste wieder

.jpg  Code_Frank2.JPG (Größe: 31,71 KB / Downloads: 7)


Und deine Class muss dann aber auch auf das richtige Bild versweisen in diesem Fall auf
"logo2-weiß.png" oder wie auch immer dein Logo heißt mit der weißen Schrift
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
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
  Dem Block aus Slider Galeries eine Schatten verpassen funsport 2 39 Gestern, 17:52
Letzter Beitrag: funsport
  Es ist nur eine Ecke stobi_de 3 152 17.01.2020, 14:41
Letzter Beitrag: stobi_de
  features schaltflächen auf eine Höhe? stobi_de 15 430 06.10.2019, 21:13
Letzter Beitrag: Martin73
  Kann ich einfach eine frühere Version über die aktuelle installieren? Johann Rott 2 244 06.10.2019, 15:25
Letzter Beitrag: Johann Rott
  body onLoad ? stobi_de 1 225 11.09.2019, 14:38
Letzter Beitrag: Werner123
  Suche eine Galerie die ich so umformen kann wie meine andere Blöcke funsport 6 369 02.07.2019, 17:58
Letzter Beitrag: Martin73
  Eine stylische Karte? stobi_de 1 377 18.01.2019, 22:08
Letzter Beitrag: Tommy Herrmann
  Eine durchsichtige Linie ?! stobi_de 0 358 30.11.2018, 20:40
Letzter Beitrag: stobi_de
  Mal wieder eine Nachfrage bei Mobi stobi_de 77 5.307 31.08.2018, 14:23
Letzter Beitrag: c-laus
  wo bekomme ich eine funktionierende Mobi Version Kai 5 716 03.08.2018, 18:55
Letzter Beitrag: Kai



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!