[ModernBB] Hintergrundfarbe Titel und Links per CSS ändern

URL-Adresse des Forums: http://introspektiv.forumieren.de/
Rang/Funktion im Forum: Admin
Forenversion: weiß ich nicht
Browser: Firefox
Persönliches CSS(Ja/Nein): nein, bisher nicht
Templateänderungen(Ja/Nein): nein


Hallo,

aufgrund eines bunten Headerbildes, das ich auch gerne behalten möchte, kann man den Forentitel und die Links drüber schlecht erkennen. Kann CSS zwar "einstellen" wenn ich es sehe, aber selbst keinen solchen Code schreiben.

Bräuchte einen Code, sodass ich eine Hintergrundfarbe für den Text von Titel und den Links einstellen kann.

Danke!

Hallo @Wolfgang135,

mit diesen Codes kannst Du die einzelnen Bereiche einfärben:
Administrations-Bereich -> Anzeige -> Bilder und Farben -> Farben: CSS Stylesheet

Code:

/*--- FARBE FORUMTITEL ---*/
#site-title h1{
color: #FARBCODE;
}

Code:

/*--- FARBE FORUMBESCHREIBUNG ---*/
#site-desc p{
color: #FARBCODE;
}

Code:

/*--- FARBE NAVIGATION ---*/
.navbar a{
color: #FARBCODE;
}

Code:

/*--- FARBE NAVIGATION HOVER ---*/
.navbar a:visited{
color: #FARBCODE;
}

Liebe Grüße,
Nyan

Bei einer kurzen Beobachtung, wie Du alles einfärbst, hätte ich noch einen kleinen Code für Dich, der Abhilfe schaffen sollte.
Mit diesem kannst Du um Texte einen Rand erstellen:

Code:

text-shadow: #FARBCODE 1px 1px 1px;

Die je 1px sind jetzt nur Beispiele, Du kannst sie nach Belieben anpassen.

Liebe Grüße,
Nyan

Hi Nyan,

vielen Dank für den schnellen Service.

So einen Code habe ich gebraucht. Da ich nicht nur die Schriftfarbe, sondern auch den Hintergrund einfärben wollte, habe ich dann noch background-color hinzugefügt.

Das mit dem Rand drumherum ist natürlich noch besser!

Probier ich gleich aus.

Hmmm ... das mit den Rändern scheint nicht zu klappen. Bin jetzt auf 20 Pixel hoch und kann nicht erkennen, dass sich da was tut.

Code:


/*--- FARBE FORUMTITEL ---*/
#site-title h1{
color: #ffffff
background-color: #3B07AB;
text-shadow: #3B07AB 20px 20px 20px;
}

/*--- FARBE FORUMBESCHREIBUNG ---*/
#site-desc p{
color: #ffffff
background-color: #3B07AB;
text-shadow: #3B07AB 20px 20px 20px;
}

/*--- FARBE NAVIGATION ---*/
.navbar a{
color: #ffffff
background-color: #3B07AB;
}

/*--- FARBE NAVIGATION HOVER ---*/
.navbar a:visited{
color: #ffffff
background-color: #3B07AB;
}


Huch, da hat mein Gehirn die Hintergrundfarbe zu den Schriftfarben geändert. Tut mir Leid, zum Glück ging es dennoch!

Der Code ist eigentlich korrekt, doch sehe ich im Verlauf einen Zeichenfehler. Füge bei sämtlichen

Code:

color: #ffffff

ein ; hinter ein. Klappt es nun?

Liebe Grüße,
Nyan

Ja, jetzt geht es. Dumm, wenn außerdem Schattenfarbe und Hintergrund identisch sind, dann sieht man Schatten schlecht

Aber ich habe gemerkt, dass Textschatten nicht das sind, was ich brauche. Ich wollte die "Box" um die Titelzeile herum größer machen, damit der Text nicht so am Rand klebt. Habe das jetzt mit & nbsp-Tags in HTML gelöst. Oder gibt es noch einen CSS-Weg?

Außerdem, neue Frage: Die Icons der Menübar ganz oben sind jetzt weiß und schlecht vor dem hellen Hintergrund zu erkennen. In den Grafik-Einstellungen scheinen sie schwarz zu sein. Wird irgendwo an der Farbe gedreht? Brauche ich einen neuen Satz icons, der dunkler ist? Wenn ja, wo bekomme ich den her?

Wolfgang135 schrieb:Aber ich habe gemerkt, dass Textschatten nicht das sind, was ich brauche. Ich wollte die "Box" um die Titelzeile herum größer machen, damit der Text nicht so am Rand klebt. Habe das jetzt mit & nbsp-Tags in HTML gelöst. Oder gibt es noch einen CSS-Weg?

Ja, du kannst mit

Code: padding: 5px;

arbeiten.

Wolfgang135 schrieb:Außerdem, neue Frage: Die Icons der Menübar ganz oben sind jetzt weiß und schlecht vor dem hellen Hintergrund zu erkennen. In den Grafik-Einstellungen scheinen sie schwarz zu sein. Wird irgendwo an der Farbe gedreht? Brauche ich einen neuen Satz icons, der dunkler ist? Wenn ja, wo bekomme ich den her?

Zu den Icons: Ich empfehle heutzutage keine Bilder mehr, sondern richtige Icons. Berühmt für solche Icons ist Font Awesome:
https://fontawesome.com/icons?d=gallery&m=free

Diese Icons kannst du komplett über das CSS bestimmen (etliche CSS-Befehle, die du dir vorstellen kannst), musst dich also nicht mit Grafikprogrammen rumärgern und außerdem sind die hochauflösend - sie bleiben immer scharf (zoom mal ein bisschen an die voreingestellten "Icons" ran und du siehst, wie pixelig sie werden).

---

Zu deinem Style: Wie wäre es mit einem schwarz-transparenten Hintergrund?


Beste Grüße
Bigtuber

Bigtuber schrieb:

Ja, du kannst mit

Code: padding: 5px;

arbeiten.

Probier ich mal aus.

Wolfgang135 schrieb:

Zu den Icons: Ich empfehle heutzutage keine Bilder mehr, sondern richtige Icons.

Danke für den Tipp. Ich hab dann ja wieder eine dunklere Hintergrundfarbe für die Navigationsleiste genutzt, da ging es wieder.

Zu deinem Style: Wie wäre es mit einem schwarz-transparenten Hintergrund?

 Sieht gut aus. Wie macht man das?

Um einen transparenten Hintergrund zu erstellen, musst Du mit den rgb-Codes arbeiten und nicht mit dem Hex-Codes.
Beispiel: schwarz - Hex-Code: #000000 - rgb-Code: rgb(0, 0, 0).
Um eine Transparenz zu erstellen, musst Du den Code erweitern - rgba und zu dem Werten einen weiteren hinzufügen. Anstatt rgb(0, 0, 0) wäre es nun rgba(0, 0, 0, 0.0). Um nun einzustellen, wie stark die Transparenz sein soll, musst Du den Wert von 0.0 hochstellen. Dies erfolgt Schrittweise, hinter dem Punkt - also, 0.0 -> 0.1 -> 0.2, etc. Desto höher der Wert, desto stärker die Transparenz - ergo, bei 0.0 ist der Hintergrund komplett weg, bei 1 komplett sichtbar.

Demnach kurz als vorgegebenen Code:

Code:

background: rgba(0, 0, 0, 0.5);

Liebe Grüße,
Nyan

Transparenz geht auch

Wenn ich jetzt noch erfahre, wo ich das mit dem "padding" unterbringen muss, bin ich glücklich und der Thread kann zu (muß ich machen, oder?).

Habe gerade einen Bug gefunden, denke ich.

Auf der "Startseite" sieht der Foren-Kopf noch gut aus.

Schaue ich aber in ein Unterforum, ist dieser Kopf aber nicht mehr in Ordnung. Dann fehlt beim Forentitel der halbtransparente Hintergrund und die Schrift des Titels ist rot.

Die Forenbeschreibung direkt drunter ist in Ordnung (halbtransparenter Hintergrund vorhanden und richtige Schriftfarbe).

Wir da das CSS nicht richtig übernommen?

... jemand noch eine Idee, wie der Bug behoben werden könnte?

Bitte entschuldige die Wartezeit. Zwischen Erkältung, Laptopproblemen und einem reizbaren Darm/Magen bin ich nicht dazu gekommen, hier zu antworten oder mir das Problem genauer anzusehen.

Erstmals zur Fehlanzeige:
- tausch das

Code: #site-title h1

im Code mal gegen

Code: #site-title, #site-title h1

aus.
Klappt dies? Ansonsten nur

Code: #site-title

Alternativ könntest Du den Bereich von Titel und Beschreibung auch gleichzeitig einfärben. Jedoch ist es einzelnd wohl einfacher zu "pro Bereich" zu bearbeiten. Falls Du jedoch beides gleichzeitig umfärben möchtest, wäre der richtige Code dafür

Code: #site-desc

Zu dem padding.
Füg den einfach innerhalb eines Codes ein, die Stelle genau ist dort nicht relevant. Zur Veranschaulichung:

Code:

/*--- FARBE FORUMBESCHREIBUNG ---*/
#site-desc p{
color: #ffffff
background-color: #3B07AB;
text-shadow: #3B07AB 20px 20px 20px;
padding: 5px;
}

Liebe Grüße,
Nyan

Hi Nyan,

die Fehlanzeige ist gelöst. Danke dafür.

Aber mit dem padding wurde es noch einmal strange.

Ich hatte die Tags in bei Forentitel und Forenbeschreibung eingebaut. Das hatte zur Folge, dass der halbtransparente schwarze Hintergrund nicht mehr einheitlich angezeigt wurde. Es sah auch wie 2 Boxen, eine mit stärkerer Transparenz als bei der anderen.

Auch, nachdem ich die padding-Tags rausgenommen hatte, blieb es dabei. Ich musste den Tranparentwert bei einem auf 0.5 und beim anderen auf 0.3 setzen ... und jetzt sieht es wieder einheitlich aus (bei Firefox jedenfalls).

Ich würde es jetzt dabei bewenden lassen.

Vielen Dank für Deine Hilfe!

Dass zwei übernanderliegende Transparenzen sich verstärken, ist auch korrekt. Da wäre es am einfachsten, nur

Code: #site-desc

einen Hintergrund zu geben und den anderen beiden Codes nicht.
Doch dass Du es so hinbekommen hast, ist natürlich auch klasse.

Gäbe es an dieser Stelle noch etwas, was Du dazu nicht verstehst oder brauchst - oder wäre hier alles soweit erledigt?

Liebe Grüße,
Nyan