[3.2] Farbe im Header ändern

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
soon
Mitglied
Beiträge: 98
Registriert: 11.03.2017 15:31

[3.2] Farbe im Header ändern

Beitrag von soon »

ich möchte die Farbe des Headers (blau) in hellbraun ändern.

[ externes Bild ]

Ich dachte ich tausche gerade die

Code: Alles auswählen

bg_header.gif
[ externes Bild ]
[ externes Bild ]

Funktioniert aber nicht. Wo ist der Fehler?
vfrblue
Ehemaliges Teammitglied
Beiträge: 2008
Registriert: 22.11.2016 18:46

Re: [3.2] Farbe im Header ändern

Beitrag von vfrblue »

Dann solltest du die passenden Farben in der colours.css ändern.

Code: Alles auswählen

.headerbar, .forumbg {
    background-color: #12A3EB;
    background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
    background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
    background-repeat: repeat-x;
}
(Beispiel ist noch Standard-prosilver)
soon
Mitglied
Beiträge: 98
Registriert: 11.03.2017 15:31

Re: [3.2] Farbe im Header ändern

Beitrag von soon »

vfrblue hat geschrieben:Dann solltest du die passenden Farben in der colours.css ändern.

Code: Alles auswählen

.headerbar, .forumbg {
    background-color: #12A3EB;
    background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #12A3EB 92px, #12A3EB 100%);
    background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#12A3EB 92px,#12A3EB 100%);
    background-repeat: repeat-x;
}
(Beispiel ist noch Standard-prosilver)

Code: Alles auswählen

.headerbar, .forumbg {
	background-color: #f6dab1;
	background-image: -webkit-linear-gradient(top, #6ACEFF 0%, #0076B1 2px, #f6dab1 92px, #f6dab1 100%);
	background-image: linear-gradient(to bottom, #6ACEFF 0%,#0076B1 2px,#f6dab1 92px,#f6dab1 100%);
	background-repeat: repeat-x;
}
Habe ich gemacht aber nur einen Teilerfolg: https://soon-music.lima-city.de
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.2] Farbe im Header ändern

Beitrag von Lehrling »

Du musst diesen Farbwert noch anpassen: #0076B1
Das ist nämlich dieser Blauton.
soon
Mitglied
Beiträge: 98
Registriert: 11.03.2017 15:31

Re: [3.2] Farbe im Header ändern

Beitrag von soon »

danke, hat geklappt.

Jetzt sind die Texte im footer ebenfalls in der Farbe und schwer lesbar:

Wer war da?

Geburtstage

Statistik

https://soon-music.lima-city.de/index.php
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.2] Farbe im Header ändern

Beitrag von Lehrling »

Für diese Schriftfarbe sollte aber diese Abschnitt im colours.css zuständig sein:

Code: Alles auswählen

h3 {
	border-bottom-color: #CCCCCC;
	color: #f6dab1;
}
soon
Mitglied
Beiträge: 98
Registriert: 11.03.2017 15:31

Re: [3.2] Farbe im Header ändern

Beitrag von soon »

danke, erledigt.

Jetzt bleiben nur noch die Felder in den Containern (hellblau)

Auf auf dem Portal sind die Blöcke noch blau.
soon
Mitglied
Beiträge: 98
Registriert: 11.03.2017 15:31

Re: [3.2] Farbe im Header ändern

Beitrag von soon »

Lehrling hat geschrieben:Welche Container meinst du?
die hellblauen Forumsfelder.
Ich möchte das Forum generell in brauntönen anzeigen.
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.2] Farbe im Header ändern

Beitrag von Lehrling »

Das sollten die beiden Stellen im colours.css sein:

Code: Alles auswählen

ul.forums {
	background-color: #EEF5F9; /* Old browsers */ /* FF3.6+ */
	background-image: -webkit-linear-gradient(top, #D2E0EB 0%, #EEF5F9 100%);
	background-image: linear-gradient(to bottom, #D2E0EB 0%,#EEF5F9 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2E0EB', endColorstr='#EEF5F9',GradientType=0 ); /* IE6-9 */
}

Code: Alles auswählen

li.row:hover {
	background-color: #F6F4D0;
}
Antworten

Zurück zu „Styles, Templates und Grafiken“