Webseiten Anpassen - CSS Selektor finden und mehr.

Platos

Hallo

Ich bin gerade an einem Darkmodus für eine Webseite dran (https://www.forum-3dcenter.org/vbulletin/index.php)

Und ich möchte gerne 2 Dinge ändern, die ich einfach nicht hinkriege (ich bin da eher Anfänger)

1. ist das Logo (wichtig: im Forum, also nicht auf der Hauptseite, das ist nicht das Selbe komischerweise)

2. Die Leiste oben (sowohl im Forum als auch auf der Seite). Also dort, wo 3D Center, 3D Tools usw. steht. Ich würde gerne die Leiste Anspassen (in den Farben), aber ich kriege es einfach nicht hin bzw. finde ich wiedermal den CSS Selektor (ich glaube, das nennt man so?) nicht. Da scheitert bei mir meistens die Sache.

3. Smileys: Die Smileys sind anscheinend alle nicht transparent. Die schauen auf dem dunklen Hintergrund scheisse aus, weil rund um die Smileys immer noch "Reste" von Weiss sind. Wie mache ich die richtig transparent ?

Für das Logo: Ich weiss nicht, was ich da tun muss. Weil das logo ist im Inspektor links beim HTML-Code und nicht rechts im Inspektor, wo man normalerweise Zeug ändert.

Für die Leiste: Da finde ich nicht mal irgendwas. Ich kriege es einfach nicht hin, diese Leiste in der Farbe zu ändern.

Könnte mir da jemand helfen?

Sören Hentzschel

Hallo,

Zitat von Platos

Für das Logo: Ich weiss nicht, was ich da tun muss. Weil das logo ist im Inspektor links beim HTML-Code und nicht rechts im Inspektor, wo man normalerweise Zeug ändert.

Du kannst via CSS auch nur CSS und kein HTML ändern. Mit anderen Worten: Via userContent.css oder einer Erweiterung wie Stylish oder Stylus kannst du das Logo nicht austauschen (umständliche Tricks außen vorgelassen, die darin bestehen, das Element unsichtbar zu machen und dann eine andere Grafik via Pseudoelement mit Hintergrundgrafik an die Stelle zu setzen).

Zitat von Platos

3. Smileys: Die Smileys sind anscheinend alle nicht transparent. Die schauen auf dem dunklen Hintergrund scheisse aus, weil rund um die Smileys immer noch "Reste" von Weiss sind. Wie mache ich die richtig transparent ?

Du kannst Grafiken nicht via CSS verändern. Wenn die Grafiken keinen transparenten Hintergrund haben, dann haben sie keinen.

Zitat von Platos

Für die Leiste: Da finde ich nicht mal irgendwas. Ich kriege es einfach nicht hin, diese Leiste in der Farbe zu ändern.

Auch das sind alles Grafiken. Einfach Farbe ändern ist also nicht, du musst die Grafiken austauschen (oder entfernen und nur mit Farben arbeiten).

Platos

Gibt es denn Erweiterungen für Firefox (oder in Firefox selbst), mit denen man HTML so ändern kann für jede Webseite, wie es eben mit solchen Erweiterungen wie Stylish geht?

Das Logo konnte ich nämlich ändern, wenn ich da einfach "HTML bearbeiten" auswähle und dann eine Url zu einem anderem Logo angebe.

Zur Leiste: Ok, auch das wäre machbar. Aber ich finde nicht mal den CSS Selektor (oder wie man den "Pfad" nennt) zu diesen Grafiken. Also ich würde sie ja gerne ändern. Wenn ich mittels Inspektor drauf klicke, dann finde ich nirgendswo Urls dazu, die ich abändern könnte.

Und zu den Smileys: Also dann müsste ich "nur" die Grafiken austauschen? Aber bei denen finde ich auch nur HTML. Also müsste ich bei denen auch mittels HTML etwas ändern? Ich habe einfach immer schwierigkeiten, die "Orte" (CSS Selektor?) zu finden, bei denen ich das dann abändern kann (ja, ich kenne den Inspektor, aber da findet man dann oftmals Dinge nicht damit wie z.B die obere Leiste).

2002Andreas

Zitat von Platos

Die Leiste oben

Hallo und Willkommen hier im Forum. 😊

Meinst du das so?

Wenn ja, dann teste bitte mal:

CSS

#header-primary-tabs > DIV > UL > LI:first-child,
#header-primary-tabs > DIV > UL,
#header-primary-tabs > DIV > UL > LI:nth-child(n+2){
    background: red !important;
    border-top-left-radius: 80px !important;
    border-top-right-radius: 80px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}
#header-primary-tabs ul li a:hover {
   color: white !important;
   background: blue !important;
}
#header-primary-tabs ul li a {
   color: white !important;
}

Alles anzeigen

Zitronella

Pfad zu den Grafiken wäre meiner Meinung nach: https://www.forum-3dcenter.org/vbulletin/imag…mary-tab-pp.png

Platos

2002Andreas: Nicht ganz, denn du siehst ja dort diese geschwungenen "Boxen". Bei dir ist dann die Leiste komplett einheitlich.

Aber dennoch: Wie hast du jetzt den Code gefunden, der bei dir grün ist (das sind die CSS Selektoren?)? Ich habe nämlich nicht mal das hingekriegt. Aber ich glaube, ich muss dann wirklich die Grafiken austauschen? Z.B mit Gimp invertieren oder ähnliches (also eben dunkel machen für nen Darkmode).

Zitronella: Danke, ja. Wie (nicht wo) hast du die jetzt gefunden?

Edit: Die Grafiken abändern geht mit Gimp relativ schnell, sehe ich gerade. Einfach unter "Farben->Farbton-Buntheit" die Hellgikeit reduzieren und so kann man das Dunkler machen (invertieren ist zu krass Dunkel).

Wenn ich also die Pfade dazu finde (wobei ich Probleme habe), dann wäre das nicht mal so ne grosse Aufgabe. Bzw. wenn ich wüsste, wie ich diese Pfade finde (oder habe ich sie nur übersehen?)

Zitronella

Zitat von Platos

Wie (nicht wo) hast du die jetzt gefunden?

Platos

Ach soo, das steht unter "berechnet" rechts im Inspektor. Bei mir ist da standartmässig auf "layout".

Danke!

.DeJaVu

Ich hab da letzte Tage was gefunden, damit kann man via CSS Grafiken so ändern lassen, dass sie farblich besser in den Hintergrund passen, dadurch geht aber nahezu die Farbe flöten:

CSS filter generator to convert from black to target hex color

Man muss ein wenig mit den Werten experimentieren, bis es gefällt. Aber Achtung, diese Art Filter benötigen CPU, je mehr Filter, desto mehr CPU wird benötigt und das geht zT auch zu Lasten des Seitenaufbaus.

Sören Hentzschel

Zitat von Platos

Gibt es denn Erweiterungen für Firefox (oder in Firefox selbst), mit denen man HTML so ändern kann für jede Webseite, wie es eben mit solchen Erweiterungen wie Stylish geht?

Nein, das HTML kannst du nicht verändern. Du könntest höchstens eine Erweiterung installieren, welche dich Scripts ausführen lässt, und dann ein Script schreiben, welche das HTML zur Laufzeit verändert, also jedes Mal, wenn du die Seite aufrufst. Dann hast du bei jedem Aufruf natürlich eine sichtbare Veränderung vom Original zum Neuzustand, was eher nicht so schön ist.

Zitat von Platos

Das Logo konnte ich nämlich ändern, wenn ich da einfach "HTML bearbeiten" auswähle und dann eine Url zu einem anderem Logo angebe.

Du kannst mit den Entwicklerwerkzeugen natürlich das erzeugte HTML zu einem bestimmten Zeitpunkt betrachten und bearbeiten, was ein nützliches Werkzeug zum Testen ist. Aber es gibt keinen Mechanismus, um das HTML einer Website dauerhaft zu verändern. Das dynamische Verändern via JavaScript, siehe oben, ist die einzige Möglichkeit.

Zitat von Platos

Und zu den Smileys: Also dann müsste ich "nur" die Grafiken austauschen?

Grundsätzlich ja, aber man kann da halt nicht wirklich von "nur" sprechen. Wenn man alle Grafiken über ein Script austauscht, ist das von der Performance her definitiv spürbar. Ich kann mir nicht vorstellen, dass das in einer angenehmen Nutzererfahrung resultiert. Änderungen via CSS sind eigentlich das Einzige, was man "von außen" ändern kann und sofort wirkt.

Zitat von Platos

Ach soo, das steht unter "berechnet" rechts im Inspektor. Bei mir ist da standartmässig auf "layout".

Das ist egal. Du siehst den Pfad auch in der mittleren Spalte, ganz egal, welcher Reiter in der rechten Spalte ausgewählt ist.

Platos

Ok, Danke nochmals für die Antworten.

Überall wo Grafiken also mittels CSS bearbeitbar sind, kann ich sie "ganz einfach" austauschen.

Beim Logo wird das aber schwieriger, da das nicht über CSS geregelt wird. Komischerweise kann ich das Logo auf der Hauptseite mit CSS austauschen, im Forum ist es aber mittels HTML gelöst Komsiche Sache.

2002Andreas

Zitat von Platos

Beim Logo wird das aber schwieriger

Ich bin mir nicht sicher ob ich dich/das richtig verstanden habe.

Wenn nicht, dann vorweg sorry

Meinst du das so?

Wenn ja:

CSS

#logo-floater > a:nth-child(1) > img:nth-child(1) {
  visibility: hidden !important;
}

#logo-floater {
background: url("data:image/jpeg;base64,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") no-repeat !important;
background-position: 46px 22px !important;
}

Oder auch so:

CSS

#logo-floater > a:nth-child(1) > img:nth-child(1) {
     filter: invert(2%) sepia(75%) saturate(4294%) hue-rotate(354deg) brightness(108%) contrast(120%) !important;
}

Sören Hentzschel

Zitat von Platos

Beim Logo wird das aber schwieriger, da das nicht über CSS geregelt wird. Komischerweise kann ich das Logo auf der Hauptseite mit CSS austauschen, im Forum ist es aber mittels HTML gelöst Komsiche Sache.

Forum und Website verwenden eine unterschiedliche Software. Dementsprechend ist die Umsetzung des Designs in beiden Fällen eine andere und das HTML/CSS entsprechend unterschiedlich.