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

Before you start you first need to create the image for the corner edges to be displated...

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.... :

[code]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....

[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 :

[b]First open styles/prosilver/themes/colours.css and paste this code at the end of the file :[/b]

.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>

[b]So we have now completed the CSS part of the tutorial and now let us go to the html part...[/b]

<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>

[b]So have I completed all the steps ?? - not yet buddy - still one more left

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

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;)