Achtergrond verandering forum

[zoef]

Ik heb nog een vraag.

Is het mogelijk om de achtergrond van een forum (bijv. dat donkergrijze in dit forum) te veranderen naar iets in een persoonlijke smaak?
Ik denk dan aan deze achtergrondafbeelding die zich dan dus steeds herhaalt en de plaats inneemt van de donkergrijze kleur in dit forum

Afbeelding:

Vr. groet,
zoef

[Theriddler]

Voor prosilver open /theme/common.css

Zoek:

Code: Selecteer alles

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

Vervang met:

Code: Selecteer alles

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	/*color: #828282;*/
	/*background-color: #FFFFFF;*/
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
	background-image: url("http://i544.photobucket.com/albums/hh341/Folkert1945/achtergrond2.jpg");
	background-position: 0 100%;
        background-repeat: repeat;
	background-attachment: fixed;
}

[zoef]

Mooi, het is dus mogelijk een totaal andere achtergrond te maken. Ik heb nog geen phpBB forum, maar begin langzamerhand toch wat enthousiaster te worden.
Voor dat ik met een tweede poging begin een dergelijk forum te maken (de eerste mislukte), wil ik me eerst nog even verder inlezen.
Waarschijnlijk kom ik nog wel met een paar vragen, als ik dergelijke vragen ergens anders hier niet kan vinden.

Bedankt voor de reactie

Vr. groet,
zoef

[zoef]

Achtergrond verandering is geslaagd. Moet ik nu bij Prosilver thema ook op de vernieuwknop drukken?
Of hoeft dit niet?

[Pola]

Als je wijzigingen aanbrengt in de template bestanden (html) van een stijl, dan moet je de templates van die stijl vernieuwen.
Als je wijzigingen aanbrengt in de theme bestanden (css) van een stijl, dan moet je de theme van die stijl vernieuwen.
Als je wijzigingen aanbrengt in de image bestanden van een stijl, dan moet je de afbeeldingset van die stijl vernieuwen.

[zoef]

Het is me duidelijk, dank je wel Pola

Ik heb dus wijzigingen aangebracht in Prosilver (achtergrond wijziging) via de manier zoals die hierboven zijn beschreven door Theriddler .

Als ik dezelfde wijziging voor Subsilver2 wil doorvoeren, moet ik daar dan precies hetzelfde doen?, met dezelfde gegevens zoals dat bij de achtergrondwijziging van Prosilver werd beschreven?
Of gaat het daar ietsje anders? Zo ja, waar moet ik dan op letten?


Vr. groet,
Folkert

[Theriddler]

nog even een klein puntje voor je verder gaat je zou het forum op een vaste breedte moeten zetten omdat je anders geen achtergrond kan zien:

Open: common.css
Zoek:

Code: Selecteer alles

#wrap {
	padding: 0 20px;
	min-width: 650px;
}

Verander dit naar:

Code: Selecteer alles

#wrap {
	padding: 0 20px;
	min-width: 650px;
	max-width: 1020px;
	margin: 0 auto;
}

de max width kun je naar wens aanpassen hoe breed je het forum wilt hebben.

Als ik dezelfde wijziging voor Subsilver2 wil doorvoeren, moet ik daar dan precies hetzelfde doen?, met dezelfde gegevens zoals dat bij de achtergrondwijziging van Prosilver werd beschreven?
Of gaat het daar ietsje anders? Zo ja, waar moet ik dan op letten?

Klopt alleen open je dan stylesheet.css die je vindt in de subsilver2/theme

Hier in mijn post kun je lezen hoe je het moet doen: http://forum.phpbbservice.nl/viewtopic. ... 758#p69758

[zoef]

Oke, ik heb je aanwijzingen uitgevoerd.
Ik zal nu je link bestuderen

Vr. groet,
Folkert

Update bericht:

Ik heb de link bekeken, maar wat ik moet zoeken, zoals het in je link staat beschreven, is niet te vinden als ik daar stylesheet.css open in het thema van subsilver2

Wat nu?

[Pola]

In jouw stylesheet.css staan de volgende gedeeltes die je moet vervangen door de code die Thedriddler in zijn link geeft.

Code: Selecteer alles

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	background-color: #FFFFFF;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
}

Code: Selecteer alles

#wrapheader {
	height: auto !important;
	padding: 0;
}

Code: Selecteer alles

#wrapcentre {
	margin: 15px 25px 0 25px;
}

Code: Selecteer alles

#wrapfooter {
	text-align: center;
	clear: both;
}

[zoef]

Ik kom even terug op dit onderwerp, omdat ik daar nu pas aan toe ben.

Er staat dat ik dit:

Code: Selecteer alles

Code: Selecteer allesbody {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   color: #323D4F;
   background-color: #FFFFFF;
   font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
   margin: 0;
}

moet vervangen door de codes die die Thedriddler in zijn link geeft.

Maar op die plek staat in het begin heel wat anders, daar staat:

Zoek

Code: Selecteer alles

Code: Alles selecteren
body {
    background-attachment: fixed;
    background-clip: border-box;
    background-image: url("./images/achtergrond.gif");
    background-origin: padding-box;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto auto;
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    background-color: #FFFFFF;
    font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
    margin-bottom: 0

en daarna
Vervang met:

Code: Selecteer alles

Code: Alles selecteren
body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: #404040;
    background-image: url("http://www.karper-droom.be/templates/vt_sport/images/vt_bg.jpg");
    background-origin: padding-box;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto auto;
    font-family: "Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
    font-size: 62.5%;
    margin: 0;
    padding: 0;

Om te beginnen staat het deel wat ik moet zoeken niet in mijn stylesheet.css van subsilver2.
Ik kan dat deel dus ook niet vervangen.

Verder staat er in de link van hem een ander zoekdeel, wat er bij mij ook niet staat. Dat is dit deel:

Zoek:

Code: Selecteer alles

Code: Alles selecteren
#wrapheader {
   height: auto !important;
   height: 120px;
/*   padding: 0 85px 15px 25px;*/
   padding: 0;
}

Bij mij staat er:

Code: Selecteer alles

#wrapheader {
	height: auto !important;
	padding: 0;
}

De rest staat er wel en kan ik vervangen. (maar heb dat nog niet gedaan)

Wat is nu verstandig om te doen?

[Pola]

Het is (mijns inziens) verstandig om de stukken code die ik aangaf te zoeken en die te vervangen door de overeenkomende gedeelten uit het bericht van Theriddler.
De gedeelten uit mijn bericht komen rechtstreeks uit jouw stylesheet.css.

Dus:
Zoek

Code: Selecteer alles

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	color: #323D4F;
	background-color: #FFFFFF;
	font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
	margin: 0;
}

Vervang door

Code: Selecteer alles

body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: #404040;
    background-image: url("http://i544.photobucket.com/albums/hh341/Folkert1945/achtergrond2.jpg");
    background-origin: padding-box;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto auto;
    font-family: "Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}

Zoek

Code: Selecteer alles

#wrapheader {
	height: auto !important;
	padding: 0;
}

Vervang door

Code: Selecteer alles

#wrapheader {
    height: auto !important;
    margin: 0 auto;
    min-width: 650px;
    padding: 0;
    width: 960px;
}

Zoek

Code: Selecteer alles

#wrapcentre {
	margin: 15px 25px 0 25px;
}

Vervang door

Code: Selecteer alles

#wrapcentre {
    margin: 0 auto;
    min-width: 650px;
    width: 960px;
}

Zoek

Code: Selecteer alles

#wrapfooter {
	text-align: center;
	clear: both;
}

Vervang door

Code: Selecteer alles

#wrapfooter {
    clear: both;
    margin: 0 auto;
    min-width: 650px;
    text-align: center;
    width: 960px;
}

Als je dan nog dingen ziet die je anders wilt hebben, kunnen we dat nog aanpassen.

[zoef]

Dank je Pola.

Ik heb de wijzigingen uitgevoerd en zie inderdaad een verandering
Maar nog niet zoals het moet worden, zie plaatje:



De achtergrondafbeelding met die vlinder is nog te klein. De hele donkere achtergrondkleur, moet worden vervangen door de vlinderafbeelding.
Hoe krijg ik dat voor elkaar?

[Pola]

Zoek

Code: Selecteer alles

body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: #404040;
    background-image: url("http://i544.photobucket.com/albums/hh341/Folkert1945/achtergrond2.jpg");
    background-origin: padding-box;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto auto;
    font-family: "Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}

Vervang door

Code: Selecteer alles

body {
    background-attachment: fixed;
    background-clip: border-box;
    background-color: #404040;
    background-image: url("http://i544.photobucket.com/albums/hh341/Folkert1945/achtergrond2.jpg");
    background-origin: padding-box;
    background-position: left top;
    background-repeat: repeat;
    background-size: auto auto;
    font-family: "Lucida Grande",Verdana,Helvetica,Arial,sans-serif;
    font-size: 62.5%;
    margin: 0;
    padding: 0;
}

[zoef]

Bedankt Pola, het is gelukt! Fijn!!

Groetjes,
Folkert