3.x/Ronde hoeken

Uit phpBB.nl Wiki
Ga naar: navigatie, zoeken

phpBB3

Bron:

Voor je begint: maak of zoek eerst een afbeelding met de hoekjes, die je wilt gebruiken.

afbeelding hier


Het aanpassen van de stijl is redelijk simpel en het kost niet veel tijd om te doen. Zo gaat het:

  • Open het bestand: styles/prosilver/themes/colours.css en plaats deze code aan het einde van het bestand:
.top-left, .top-right, .bottom-left, .bottom-right {
	background-image: url("{T_THEME_PATH}/images/corners1280x18.gif"); /* CHANGE: path and name of your image */
	height: 9px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
	font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
	}
.top-left, .bottom-left { 
	margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
	}
.top-right, .bottom-right { 
	margin-left: 9px;  /* CHANGE: replace by the width of one of your corners */
	margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
	}
.top-right {
	background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
	}
.bottom-left  { 
	background-position: 0 -9px;    /* CHANGE: replace second number by negative height of one of your corners */
	}
.bottom-right { 
	background-position: 100% -9px; /* CHANGE: replace second number by negative height of one of your corners */
	}
.inside {
	border-left: 1px solid #C00000; /* YCC: color & properties of the left-borderline */
	border-right: 1px solid #C00000;/* YCC: color & properties of the right-borderline */
	background: #FFFFFF;            /* YCC: background-color of the inside */
	color: #000000;                 /* YCC: default text-color of the inside */
	padding-left: 0px;             /* YCC: all texts at some distance of the left border */
	padding-right: 0px;             /* YCC: all texts at some distance of the right border */
	}
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

.outside {
	margin : 25px;
}

Omdat de breedte van de header verkleind is door deze methode, kan IE6 de searchbox niet correct in de header laten zien. css wordt door IE6 slecht ondersteund.... Om dit te fixen, moeten we nog een verandering doorvoeren:

  • Open het bestand: styles/prosilver/themes/tweaks.css
  • Vind:
* html #search-box {
	margin-right: 35px;
}
  • Vervang door:
* html #search-box {
	margin-right: 60px;
}

Dit was het CSS-gedeelte, nu de HTML. Open het bestand: styles/prosilver/templates/overall_header.html

Vind:

<body

Voeg daarachter toe (op een nieuwe regel):

<div class="outside">
	<div class="top-left"></div><div class="top-right"></div>
		<div class="inside">
			<div class="notopgap">
Open het bestand:
 styles/prosilver/templates/overall_footer.html

Vind:

</body>

Voeg daarvoor toe:

			</div>
			<div class="nobottomgap"></div>
		</div>
	<div class="bottom-left"></div><div class="bottom-right">
</div>

Nog één laatste stap en je bent klaar.

Ga naar het Beheerderspaneel --> Stijlen

Selecteer Thema's, klik op ververs en bevestig de actie. Dan doe je hetzelfde met Templates. Ververs nu de website in je browser met Ctrl+F5. Voor FireFox gebruik je Ctrl+Shift+R.