3.x/Ronde hoeken: verschil tussen versies

Uit phpBB.nl Wiki
Ga naar: navigatie, zoeken
(Pagina aangemaakt: Bron: http://www.phpbb.com/community/viewtopic.php?f=74&t=546765 http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Before you start you first need to create...)
 
Regel 3: Regel 3:
 
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
 
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
  
Before you start you first need to create the image for the corner edges to be displated...  
+
Voor je begint maak of zoek je eerst een afbeelding met de hoekjes die je wilt gebruiken.
  
Here is the link to the image file of the sample which was being used on the tutorial site and will add some of my own too in the coming days.... :
+
afbeelding hier
  
[code]http://home.tiscali.nl/developerscorner/liquidcorners/images/corners1280x18.gif[/code]
 
  
You can also make one such image which I ll be explaining later... I have used the image name as per the attached file corners1280x18.gif and so if you are intending to use some other image name then replace all instants of corners1280x18.gif in the code with that filename....
+
Ok the style modding steps are quite simple and wont take much time to complete them.... So here goes :
  
[color=#FF0000][b][size=150]Plz do backup the files you are modifying here so that just in case you mess up your style you can restore it back using the backup :D[/size][/b][/color]
 
  
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:
 
 
[b]First open styles/prosilver/themes/colours.css and paste this code at the end of the file :[/b]
 
  
 
<code php>.top-left, .top-right, .bottom-left, .bottom-right {
 
<code php>.top-left, .top-right, .bottom-left, .bottom-right {
Regel 68: Regel 64:
 
}</code>
 
}</code>
  
[b]So we have now completed the CSS part of the tutorial and now let us go to the html part...[/b]
+
Dit was het CSS gedeelte, nu de HTML.
  
 
<code php>OPEN:
 
<code php>OPEN:
Regel 95: Regel 91:
 
</div></code>
 
</div></code>
  
[b]So have I completed all the steps ?? - not yet buddy - still one more left
+
Nog één laatste stap en je bent klaar.
 
 
Go to ACP --> Styles
 
 
 
First select Themes, click Refresh and confirm it then select Templates, click Refresh and confirm it....[/b]
 
  
Now refresh your webiste in the browser and see the beautiful rounded corners surrounding your forum body
+
Gaan naar ACP --> Stijlen
  
I ll update this post later giving you more info on how to create the border image(s) in a single file since I am currently short of time or you can refer to the original author's page from the link at the topfor that info;)
+
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.

Versie van 8 jun 2007 om 20:44

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.