phpBB Academy at StarTrekGuide

by **Semi_Deus** » 16 Oct 2008, 17:03

Creating a simple border around your forum

The first thing you need for this tutorial to end it with success is the tiniest bit of Photoshop knowledge.
Because what we of course want to do is create the neatest looking border around your forum there is.
So, we will start by creating our border in Photoshop.

The border we will be creating will be around 900px wide, maybe some more maybe less. Not more then 1000px.
Open Photoshop, and start a new document of 1000 x 400 pixels.
(In my case I will be using Photoshop CS3 Extended)

Give it a dark-grey(#373737) background, as in this picture:
http://img01.picoodle.com/img/img01/3/1 ... fbd95a.jpg

Now click the Rounded Rectangle Tool.

And make sure your foreground color is white(#FFFFFF):

And make sure these setting at the top of your screen are correct:

Step X
Now click somewhere on the top left of your background, and draw it to the bottom right of your screen.
Release, and you should have a shape with perfectly rounded borders, with a radius of 5 pixels.
Now right-click the layer of that shape (called Shape 1) and click: Rasterize Layer
http://img33.picoodle.com/img/img33/3/1 ... a79675.jpg

Now, you have the start of your very own border.
Now grab the Paint Bucket Tool, and choose a nice color for your border.

I chose for a dark-green color; (#4ea00b) Fill the white shape with that color.

**Now to centerize the shape, select full screen, then Cut and Paste (Ctrl+X > Ctrl+c).
This makes sure the shape is centerized.

Now repeat step X, but make it slightly smaller then the green one, and paste it exactly centerized.**
If you have all done this correctly, it should look like this:
http://img34.picoodle.com/img/img34/3/1 ... c72225.jpg

Well, it looks like a pretty neat border already.
But we can add some extras. As Photoshop has great stuff, we will now start adding some Blending options.
Click left on the green layer, and then with the right mouse button. Now click: Blending Options.
If you have done that correctly a screen should appear with blending options.
Now copy these settings:

If done correctly, your entire border should look like this:

Now enter the final stage of our image.
You need to split it up in 3 different parts, to eventually get a perfect looking border.
You get: A header(header.jpg), a wrapper(wrap.jpg) and a footer(footer.jpg).

First, press: Ctrl + Shift + E (Shift+Command+E (Mac))
Now, pick the Rectangular Marquee Tool.

And select the upper part of your entire image. Press Ctrl + C to copy.
Go to, File, New and create a new document with the GIVEN dimensions.
(Photoshop automatically detects the width and height of copied items).
Ctrl + V to paste. And now go to, File, Save as and save your document as: header.jpg
Make sure the graphic setting are set at maximum.
Quality: 12, Maximum, Progressive, Scans; 3..
And your image should look like this:

h.jpg: (9.29 KiB) Downloaded 74 times

Now select a center part of your image, make a pretty high, that ensures that your website doesn't have to load
1000 images of 1 pixel in height. Now repeat the copy and paste sequence as done with the header.
Save it as wrap.jpg (same quality settings of course.) and your image should look like this:

q.jpg: (2.35 KiB) Downloaded 58 times

Now repeat all the things a last time for the footer, and your footer should look like this:

f.jpg: (7.59 KiB) Downloaded 63 times

Remember, we started with a 1000 pixels wide image, so all images you just created (header, wrap and footer)
should also (all) be 1000 pixels in width.

So here's your begin for a border. Check the next post for the coding part of our border.
Good Luck!

Advertise on StarTrekGuide/phpBB Academy

by **Semi_Deus** » 16 Oct 2008, 17:04

Then, the coding part..

Basically what you have to do is add some very small things.

There is a css class for every image we just created, and you have to update a few others.
Also we need to add a few lines of HTML to our header and footer.

Files to edit:
- styles/prosilver/theme/common.css:
- styles/prosilver/theme/colours.css:
- styles/prosilver/template/overall_header.html:
- styles/prosilver/template/overall_footer.html:

First we'll start with the simple part.
Copying my pre-made css.

Paste this anywhere you like in your css (I pasted it at the very bottom of styles/prosilver/theme/colours.css:)

The Header

Code: Select all: #header { // Opening the header class. background-image: url('{T_THEME_PATH}/images/header.jpg'); // The header image, located in the theme/images folder. background-position: center top; // The header position. Centerized, at the top. background-repeat: no-repeat; // The image will not be repeated height: 76px; // The height of the tag=The height of our image width: 1000px; // The width of the entire border (image). margin: 0 auto; // Centerize tag on your screen. } // Closing the header class

The Wrap (container)

Code: Select all: #container { // Opening the container class. background-image: url('{T_THEME_PATH}/images/wrap.jpg'); // The wrap image, located in the theme/images folder. background-position: center top; // The header position. Centerized, at the top. background-repeat: repeat-y; // The image will be repeated vertically (y). width: 1000px; // The width of the entire border (image). margin: 0 auto; // Centerize tag on your screen. } // Closing the comtainer class

The Footer

Code: Select all: #footer { // Opening the footer class. background-image: url('{T_THEME_PATH}/images/footer.jpg'); // The footer image, located in the theme/images folder. background-position: center top; // The footer position. Centerized, at the top (of the tag) background-repeat: no-repeat; // The image will not be repeated height: 76px; // The height of the tag=The height of our image width: 1000px; // The width of the entire border (image). margin: 0 auto; // Centerize tag on your screen. } // Closing the footer class

Now we get too some editting of existing classes.
This needs to be done to make te style fixed width, and to make sure the background is the right color.

Open styles/prosilver/theme/common.css:
FIND:

Code: Select all: #wrap { padding: 0 20px; min-width: 650px; }

REPLACE WITH:

Code: Select all: #wrap { padding: 0 20px; padding-left: 10px; // aligning the forums to the border min-width: 650px; margin: 0 auto; // Centerize tag on your screen width: 900px; // Setting the width of the forums }

Open styles/prosilver/theme/colours.css:
FIND:

Code: Select all: html, body { color: #536482; background-color: #FFFFFF; }

REPLACE WITH:

Code: Select all: html, body { color: #536482; background-color: #373737; // Fixing background color, to match images. }

So that was it for the css. Now we get to the part where we implement the style in our templates.
Which in fact means adding the css classes to the div tags.

Open styles/prosilver/template/overall_header.html
FIND:

Code: Select all: <body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

ADD AFTER:

Code: Select all: <div id="header"></div> // The header class <div id="container"> //Opening the container class

Open styles/prosilver/template/overall_footer.html
FIND:

Code: Select all: </body> </html>

ADD BEFORE:

Code: Select all: </div> //Closing the container class <div id="footer"></div> // The footer class

Thats it!
If you have done everything correctly, your border should now look like this!:

*Admin* · by **dactylmedia** » 10 Nov 2008, 01:25

Hey Semi, wow this is perfect for what I was looking for. I do however need to know how to get the footer to end. Right now it doesn't have a "cap" to it. It just stretches to the end of my browser. I would like there to be a base to it.

*Admin* · by **dactylmedia** » 10 Nov 2008, 15:56

Hope you can show me the code used to get that border to work on my template. I am anxious to use it :beg:

by **Semi_Deus** » 10 Nov 2008, 18:18

Coding part added in second post.
Good luck everyone!

And do not be afraid to ask questions

(Please add a link to your website so we can see what you made, or I can help you fix any problems.)

*Admin* · by **dactylmedia** » 10 Nov 2008, 19:30

Great job Semi this looks awesome. Now I have a question. What about if my background is an image? Obviously the grey background you used in your pictures won't blend. How can I put this border and have it overlay onto my graphic background? Or can I adapt the border so it can overlap the background smoothly. Here is the background of my board right now.

by **Semi_Deus** » 10 Nov 2008, 20:08

You could make partially transparent borders. So no dark bg.
Don't do my paint bucket step. But create the borders on a transparent layer.
Then save the images as .png (better save optimized as > .png 24)

Though, You should not have your wallpaper as background on for example the wrap class.
Only on the html, body class.

I hope you can manage to pull it off

*Admin* · by **dactylmedia** » 10 Nov 2008, 23:02

Alright Semi thanks for responding. I will try it out and see if I can handle it. One more question though on your tutorial. You say "make a new document about 1000pixel wide" "drag from the top left corner to the bottom right. You act like we should just eyeball it? Doesn't it have to be exact to the pixel matching our phpbb forum? Are your screenshots showing the actual PSD or what it looks like after you put it ontop of a background.

In your picture here your table is just freehanded onto a random spot on the document... How would that correctly line up.... I think I am totally missing something here?

http://img34.picoodle.com/img/img34/3/10/17/semi_deus/f_7m_ac72225.jpg

How did you make sure this is exactly in the center...
http://startrekguide.com/community/download/file.php?id=5009

by **Semi_Deus** » 11 Nov 2008, 16:59

dactylmedia wrote:Alright Semi thanks for responding. I will try it out and see if I can handle it. One more question though on your tutorial. You say "make a new document about 1000pixel wide" "drag from the top left corner to the bottom right. You act like we should just eyeball it? Doesn't it have to be exact to the pixel matching our phpbb forum? Are your screenshots showing the actual PSD or what it looks like after you put it ontop of a background.

In your picture here your table is just freehanded onto a random spot on the document... How would that correctly line up.... I think I am totally missing something here?

http://img34.picoodle.com/img/img34/3/10/17/semi_deus/f_7m_ac72225.jpg

How did you make sure this is exactly in the center...
http://startrekguide.com/community/download/file.php?id=5009

Oh man, you are absolutely right, I forgot to add something.
My special trick :grin:

When you have drawn the first rounded shape.
Select the full screen. Press Ctrl+X and then Ctrl+C (cut and paste again) that makes sure the part you just cut is position exactly in the center

I can actually eyeball it, but I will spare you that trouble

Now do the same with the white rounded shape when you have drawn that one.
Thanks for catching me on that. Ill add it to the tutorial.

by **rapt0r** » 29 Dec 2008, 13:06

Hi. Thank you for the tutorial.

I did everything like in the tut and checked everything twice but it doesnt work for me (see images). I have prosilver_SE. I really dont know what could I have done wrong.. :blink: