[3.2] Anpasssungswünsche für den style revolution

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.
Antworten
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

[3.2] Anpasssungswünsche für den style revolution

Beitrag von chris1278 »

Es handelt sich den Style "Revolution" aus der Style-Datenbank von phpbb.com

Hier zum Style auf Phpbb.com

Ich hätte die optik gerne etwas angepasst duch grafiken wie ich schon vorbereitet habe.

Siehe hier [ externes Bild ] und Hier: [ externes Bild ]

Wenn mir da jemand weiterhelfen könnte wäre ich sehr dankbar.

mfg
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Anpasssungswünsche für den style revolution

Beitrag von chris1278 »

So zwei sachen habe ich schon gefunden.

Um als Hintergrund ein Bild einzufügen:

In der coulours.css

suche folgendes:

Code: Alles auswählen

html, body {
	color: #5f6476;
	background-color: #2b2b2b;
}
ersetze mit:

Code: Alles auswählen

html, body {
	color: #5f6476;
	background-image: url("./images/background.gif");
}
Wobei hier der Pfad nur als Beispiel dient der Dateiname kann auch anders heissen je nachdem welches Bild man laden will.

Und für die Breite zu ändern:


In der common.css

finde:
.wrap {
border-radius: 10px;
border-style: solid;
border-width: 5px;
margin: 0 auto;
max-width: 800px;
padding: 5px 14px 5px 12px;
}

Passe dort den Wert "max-width: 800px;" an. anstelle 800 z.B. 1000 dann verbreitert es das Forum.

So fehlt nur noch der Rest
Lehrling
Ehemaliges Teammitglied
Beiträge: 3833
Registriert: 15.01.2012 20:00
Kontaktdaten:

Re: [3.2] Anpasssungswünsche für den style revolution

Beitrag von Lehrling »

Finde in dem colours.css folgende Stellen und ändere sie entsprechend um:

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;
}
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Anpasssungswünsche für den style revolution

Beitrag von chris1278 »

Hallo Lehrling.

Das hier:

Code: Alles auswählen

li.row:hover {
   background-color: #F6F4D0;
}
Hab ich gefunden funktioniert auch. Effekt ist das dies die Farbangabe ist wenn man da mit der maus drauf fährt. Wo ist die farbe bevor man mit der maus drüber fährt.


Wie mus ich diesen code hier ersetzen:

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 */
}
Mein Ziel ist es eine Gif Grafik über den Forum anzubringen die etwa 60-70% der breite des bildschirms entspricht.

Also währen da angaben von:

Ausrichtung: ?
Höhe ?
Breite?
Ausdehnung auf Bildschirm links und rechts
Pfadangabe zur Datei denke ich müsste dann so aussehen: "background-image: url("./images/logo_header.gif");

Danke auf jeden fall für deine bzw. eure Hilfe.
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Anpasssungswünsche für den style revolution

Beitrag von chris1278 »

OK. Da sind einige Videos ich denke da komme ich schon mal ein ganz Stück mit weiter. Wenn noch was ist melod ich mich wieder.
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Anpasssungswünsche für den style revolution

Beitrag von chris1278 »

Danke Lehrling für die Videos. Dadurch hab ich einiges begriffen.

Aber ich finde immer noch nicht die eine Stelle wo das hier geeändert wird.

[ externes Bild ]

Die Farbeinstellung wo sich dort die Farbe ändert wenn man mit der Maus drüber fährt (hover effekt) hab ich gefunden.
vfrblue
Ehemaliges Teammitglied
Beiträge: 1993
Registriert: 22.11.2016 18:46

Re: [3.2] Anpasssungswünsche für den style revolution

Beitrag von vfrblue »

Hallo,
öffne die colours.css und suche

Code: Alles auswählen

ul.forums {
    background-color: #EEF5F9;
    background-image: -webkit-linear-gradient(top, #D2E0EB 0%, #EEF5F9 100%);
    background-image: linear-gradient(to bottom, #D2E0EB 0%,#EEF5F9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D2E0EB', endColorstr='#EEF5F9',GradientType=0 );
}
Müsste ungefähr Zeile 316 sein. Hier kannst du dann die Farbe anpassen.
Wenn du den Farb-Effekt beibehalten möchtest, musst du beim background-image den Farbverlauf ändern. Möchtest du eine "statische" Farbe, dann background-color anpassen und 1x background-image ändern in

Code: Alles auswählen

background-image: none;
Den 2. "background"-Wert und den "filter" kannst du löschen.
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: [3.2] Anpasssungswünsche für den style revolution

Beitrag von chris1278 »

ok. danke das hat weiter geholfen. Hab einfach bei den Farbverläufen alle vier werte Gleich gesetzt.


PS: Ich finde diese Videos echt hilfreich. Da lernt so einer wie ich ja doch noch etwas.
Antworten

Zurück zu „Styles, Templates und Grafiken“