[HOW TO] Add Liquid/Dynamic Rounded corners to your style

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Scam Warning
Locked
User avatar
Ash Hi Fi Zone
Registered User
Posts: 409
Joined: Fri Feb 09, 2007 11:55 am

[HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Ash Hi Fi Zone »

NOTE : This is not completely my own tutorial and all credits should go to the author franky who wrote the guidelines in the page in the link below

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

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

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;
}
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: Select all

OPEN:
styles/prosilver/themes/tweaks.css

FIND:
* html #search-box {
	margin-right: 35px;
}

REPLACE WITH:
* html #search-box {
	margin-right: 60px;
}
So we have now completed the CSS part of the tutorial and now let us go to the html part...
OPEN:
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>
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....


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
Last edited by Ash Hi Fi Zone on Sun May 27, 2007 5:26 pm, edited 2 times in total.
User avatar
Ash Hi Fi Zone
Registered User
Posts: 409
Joined: Fri Feb 09, 2007 11:55 am

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Ash Hi Fi Zone »

~ Reserved for future purpose ~
powerful_rogue
Registered User
Posts: 118
Joined: Sun Feb 11, 2007 2:44 pm

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by powerful_rogue »

You are an absolute star!!

Ive been trying for the last fews days to work out how to do that! You really wouldnt believe how much i appreciate that :D

Once slight proble,, the border is a bit wider then my forum - http://www.doverlocals.co.uk/dover
What do I need to alter to bring it all together?

Many Thanks

Dave
User avatar
Ash Hi Fi Zone
Registered User
Posts: 409
Joined: Fri Feb 09, 2007 11:55 am

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Ash Hi Fi Zone »

You seemed to have followed this link and made your forum style a fixed width one.... That is the reason for the problem....

So all you need to do is undo those changes you had made there in common.css and tweak.css :) I hope you can do it or if not plz tell me and I ll tell you what to do :D

PS: Plz post your comments if you like this tutorial ;)
powerful_rogue
Registered User
Posts: 118
Joined: Sun Feb 11, 2007 2:44 pm

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by powerful_rogue »

I reduced the width of my forum because im not a massive fan of wide forums.

Is there anyway around this at all?

Edit - Id dint edit the tweaks, only the common. I found that when i did both it didnt work!
User avatar
Ash Hi Fi Zone
Registered User
Posts: 409
Joined: Fri Feb 09, 2007 11:55 am

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Ash Hi Fi Zone »

You can try changing this :

Code: Select all

.outside {
   margin : 25px;
}
to

Code: Select all

.outside {
   width : 800px;
}
I think that should work ;)
powerful_rogue
Registered User
Posts: 118
Joined: Sun Feb 11, 2007 2:44 pm

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by powerful_rogue »

It kind of worked!

Its shifted the forum over to the left handside and the border on the right is too far in now.

http://www.doverlocals.co.uk/dover
User avatar
Dogs and things
Registered User
Posts: 2114
Joined: Fri Sep 01, 2006 9:04 am
Location: Spain
Contact:

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Dogs and things »

The method Ash Hi Fi Zone explains here seems pretty nice.

Allthough I must admit that I´m merely trying to figure out .css by reading, applying and playing around with the code on my testboard I have set up on my computer I believe I found what can be of help to you Rogue.

Play around a bit with

Code: Select all

.outside {
   margin : 25px;
I have set my width to 750px and seem to need

Code: Select all

.outside {
   margin : 117px;
to get it right.
For phpBB2 support visit phpBB2refugees.
User avatar
Ash Hi Fi Zone
Registered User
Posts: 409
Joined: Fri Feb 09, 2007 11:55 am

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Ash Hi Fi Zone »

Ok replace .outside with this one - I tested it now and works great - no probs at all :

Code: Select all

.outside {
	margin: 0 auto;
	width : 850px;
}
You can play around with the width value to obtain the width of your choice, the wider the value the more will be the gap between the rounded border and the forum body and at the same time if you choose too low a value the headers might tend to run out of the rounded border ;)

EDIT: @ Dogs and Things your method leaves a huge margin all round the rounded border and I would rather not suggest that ;)
powerful_rogue
Registered User
Posts: 118
Joined: Sun Feb 11, 2007 2:44 pm

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by powerful_rogue »

That worked a treat!

Thank you so much Ash Hi Fi Zone! :D

Just a couple of questions if you dont mind! At the top and the bottom it has a grey type of border, but none at the sides - is it possible to get this at the side also?

The other question is how would I change the colour of the back on the outside of the border? The white on the left, right and the little bit at he top and bottom?

Thank you so much for posting this tutorial and thanks for all your help :D
User avatar
Dogs and things
Registered User
Posts: 2114
Joined: Fri Sep 01, 2006 9:04 am
Location: Spain
Contact:

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Dogs and things »

EDIT: @ Dogs and Things your method leaves a huge margin all round the rounded border and I would rather not suggest that ;)
Now that you come to mention it. :o

I was so focussed on the fitting of the body within the corners that I hadn´t noticed that, although I was a bit surprised by the very high value the margin needed to arrange things.

Your suggestion looks better really. :lol:
For phpBB2 support visit phpBB2refugees.
User avatar
Ash Hi Fi Zone
Registered User
Posts: 409
Joined: Fri Feb 09, 2007 11:55 am

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Ash Hi Fi Zone »

The grey colour at the top and bottom near the borders is part of the bakground image.... You can fill it with some other colour (the same as the one you will be using in .inside class) using some image editor.... To change the colour outside the rounded border you have to edit the background-colour propery of .body in colours.css...

I am also intending to share a couple of my own created images that can be used for borders here - but plz give me some time for that.....
powerful_rogue
Registered User
Posts: 118
Joined: Sun Feb 11, 2007 2:44 pm

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by powerful_rogue »

Thank you again. Ive managed to change the background colour and it looks great!

Although its possible to change the grey at the top and the bottom of the border, is it possible to change the white on the left and right to match the top and bottom?
User avatar
Ash Hi Fi Zone
Registered User
Posts: 409
Joined: Fri Feb 09, 2007 11:55 am

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by Ash Hi Fi Zone »

powerful_rogue wrote:Thank you again. Ive managed to change the background colour and it looks great!

Although its possible to change the grey at the top and the bottom of the border, is it possible to change the white on the left and right to match the top and bottom?
I m not quite able to understand what you are asking... Are you asking whether is it possible that instead of the white background for the forum inside the rounded box , you have some other colour matching the one present near the top and bottom edges of the border ?
powerful_rogue
Registered User
Posts: 118
Joined: Sun Feb 11, 2007 2:44 pm

Re: [HOW TO] Add Liquid/Dynamic Rounded corners to your style

Post by powerful_rogue »

Sorry, I dont think i explained it too well!

Image

The red border, you then have the grey colour, however going up the side you have the white colour. Is it possible to change the white to match the grey?
Locked

Return to “[3.0.x] Styles Support & Discussion”