3.x/Ronde hoeken

Uit phpBB.nl Wiki
Ga naar: navigatie, zoeken

Bron: http://www.phpbb.com/community/viewtopic.php?f=74&t=546765 http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm

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

afbeelding hier


Ok the style modding steps are quite simple and wont take much time to complete them.... So here goes :


Open 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
'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; }</code>

Also since the width of the header is also reduced due to this method - IE 6 fails to display the search box in the header correctly due to its poor CSS support.... Hence to fix this we need to make the following change....

<code php>OPEN: styles/prosilver/themes/tweaks.css

FIND:

  • html #search-box {

margin-right: 35px; }

REPLACE WITH:

  • html #search-box {

margin-right: 60px; }</code>

Dit was het CSS gedeelte, nu de HTML.

<code php>OPEN: styles/prosilver/templates/overall_header.html

FIND: <body

AFTER ADD:

OPEN: styles/prosilver/templates/overall_footer.html

FIND: </body>

BEFORE ADD:

</code>

Nog één laatste stap en je bent klaar.

Gaan naar ACP --> 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.