http://home.tiscali.nl/developerscorner ... orners.htm
Since many were asking guidelines on how to add rounded corners I came up with writing my own guide on achieving it on their style too.... I ll be using the prosilver template as an example here and if you want to do it with some other template change all instance of prosilver to that template name.... Although I have not tested it with subsilver the changes I have mentioned here should work with Subsilver and most of the other themes too....
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: Select all
http://home.tiscali.nl/developerscorner/liquidcorners/images/corners1280x18.gif
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
Ok the style modding steps are quite simple and wont take much time to complete them.... So here goes :
First open styles/prosilver/themes/colours.css and paste this code at the end of the file :
Code: Select all
.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;
}
Code: Select all
OPEN:
styles/prosilver/themes/tweaks.css
FIND:
* html #search-box {
margin-right: 35px;
}
REPLACE WITH:
* html #search-box {
margin-right: 60px;
}
So have I completed all the steps ?? - not yet buddy - still one more leftOPEN:
styles/prosilver/templates/overall_header.html
FIND:
<body
AFTER ADD:
<div class="outside">
<div class="top-left"></div><div class="top-right"></div>
<div class="inside">
<div class="notopgap">
OPEN:
styles/prosilver/templates/overall_footer.html
FIND:
</body>
BEFORE ADD:
</div>
<div class="nobottomgap"></div>
</div>
<div class="bottom-left"></div><div class="bottom-right">
</div>
Go to ACP --> Styles
First select Themes, click Refresh and confirm it then select Templates, click Refresh and confirm it....
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;)
HISTORY:
27-01-07 - Initial version of the tutorial
27-01-07 - Added a fix for IE 6 displaying the search box wrongly