ForumMate.com

Discussions => Promote Your Forums Tips => Topic started by: tanduy2506 on November 24, 2011, 01:44:20 am

Title: Tips: Design your phpBB3 forum templates
Post by: tanduy2506 on November 24, 2011, 01:44:20 am
Hi dear members,:spin:

I think the template is one of  the important things helps you can promote your forum.
You should attend to your forum template, friends.
Today I have a few things to share with you.

You can make your forum look better if you know a little about CSS (CSS Tutorial (http://www.w3schools.com/css/default.asp))
I just customized for my theme "CA Vintage" (similar with CA Vintage Blue, CA Vintage Brown)

I add a new css class into the end of CA Vintage Style Sheet (ACP > STYLES > Themes)
Quote
.block_bg {
    padding: 5px;
    border-radius: 5px 5px 5px 5px;
}
The block will be cooler
(http://freeforum.ca/clientscript/image/CA%20Vintage.png) => (http://freeforum.ca/clientscript/image/CA%20Vintage%20Customized.png)

If you have anything to share, just post here.
Title: Tips: Design your phpBB3 forum templates
Post by: Paul on November 24, 2011, 09:31:49 am
Editing colours

Using the subsilver2 template I have edited the colours to make it a bit brighter.


(http://thumbnails46.imagebam.com/16105/1af29e161042029.jpg) (http://www.imagebam.com/image/1af29e161042029)

How to edit

ACP > Styles > templates >

choose the subsilver2 and click edit

You will now see a page with a drop down box > scroll to Stylesheet css

Find Background colour and delete the colour code (eg: #FFFFFF; )
replace with a new colour code that starts with # and ends with ;
(http://thumbnails21.imagebam.com/16105/736ff3161042046.jpg) (http://www.imagebam.com/image/736ff3161042046)

scrool down until you find the Rows and replace with a new colour (as you have done above)
(http://thumbnails67.imagebam.com/16105/0963a4161042050.jpg) (http://www.imagebam.com/image/0963a4161042050)

scroll down and click submit

you should now be able to see the changes on the index page

A few more I did while playing :playfull:

(http://thumbnails59.imagebam.com/16105/d2e35d161042036.jpg) (http://www.imagebam.com/image/d2e35d161042036)  (http://thumbnails46.imagebam.com/16105/7021f8161042040.jpg) (http://www.imagebam.com/image/7021f8161042040) (http://thumbnails64.imagebam.com/16105/dd0b27161042037.jpg) (http://www.imagebam.com/image/dd0b27161042037)

You will notice that the rows also change not only on the index but also on the thread pages members will read so be careful not to have too bright colours
(http://thumbnails46.imagebam.com/16105/f61247161042020.jpg) (http://www.imagebam.com/image/f61247161042020)  (http://thumbnails63.imagebam.com/16105/2bcec3161042017.jpg) (http://www.imagebam.com/image/2bcec3161042017)

Before editing the template colours make sure you copy the original text and copy it somewhere safe in case you don't like the changes you have made.
Title: Tips: Design your phpBB3 forum templates
Post by: tanduy2506 on November 24, 2011, 11:24:38 am
Cool, really cool :dance:
Quote
You will notice that the rows also change not only on the index but also  on the thread pages members will read so be careful not to have too  bright colours
Good advice.
 
Quote
Before editing the template colours make sure you copy the original text  and copy it somewhere safe in case you don't like the changes you have  made.
Yes, we must backup it before customizing anything :smiley-tongue-out:

By the way, I want to share with us some more tips :D
You can change the background image if you like, Ex:
Quote
background: url("http://www.backgroundlabs.com/backgrounds/45.jpg") repeat scroll 0 0 transparent;
(http://freeforum.ca/clientscript/image/CA%20Vintage%20Customized%20Bg.png)
Just find some good background image like that Backgrounds and Photoshop Patterns (http://www.backgroundlabs.com/) and copy the file link.

Actually we shouldn't use background image so much. It makes your forum loads slower a little than using background color.
Title: Tips: Design your phpBB3 forum templates
Post by: Paul on December 01, 2011, 06:43:43 am
Nothing to do with templates but a bb code for links that looks nicer than just a pasted link address

(http://t.imgbox.com/aaabn5ZV.jpg) (http://imgbox.com/aaabn5ZV)


Get the code here (http://www.phpbb3bbcodes.com/viewtopic.php?f=2&t=221)
Title: Tips: Design your phpBB3 forum templates
Post by: tanduy2506 on December 01, 2011, 08:52:38 am
Quote from: Paul;540648
Nothing to do with templates but a bb code for links that looks nicer than just a pasted link address

(http://t.imgbox.com/aaabn5ZV.jpg) (http://imgbox.com/aaabn5ZV)


Get the code here (http://www.phpbb3bbcodes.com/viewtopic.php?f=2&t=221)
Nice, cool,

Thanks for your tips :)
Title: Tips: Design your phpBB3 forum templates
Post by: Barkerdude on December 05, 2011, 04:32:43 pm
Quote from: Paul;540564
Editing colours

Using the subsilver2 template I have edited the colours to make it a bit brighter.


(http://thumbnails46.imagebam.com/16105/1af29e161042029.jpg) (http://www.imagebam.com/image/1af29e161042029)

How to edit

ACP > Styles > templates >

choose the subsilver2 and click edit

You will now see a page with a drop down box > scroll to Stylesheet css

Find Background colour and delete the colour code (eg: #FFFFFF; )
replace with a new colour code that starts with # and ends with ;
(http://thumbnails21.imagebam.com/16105/736ff3161042046.jpg) (http://www.imagebam.com/image/736ff3161042046)

scrool down until you find the Rows and replace with a new colour (as you have done above)
(http://thumbnails67.imagebam.com/16105/0963a4161042050.jpg) (http://www.imagebam.com/image/0963a4161042050)

scroll down and click submit

you should now be able to see the changes on the index page

A few more I did while playing :playfull:

(http://thumbnails59.imagebam.com/16105/d2e35d161042036.jpg) (http://www.imagebam.com/image/d2e35d161042036)  (http://thumbnails46.imagebam.com/16105/7021f8161042040.jpg) (http://www.imagebam.com/image/7021f8161042040) (http://thumbnails64.imagebam.com/16105/dd0b27161042037.jpg) (http://www.imagebam.com/image/dd0b27161042037)

You will notice that the rows also change not only on the index but also on the thread pages members will read so be careful not to have too bright colours
(http://thumbnails46.imagebam.com/16105/f61247161042020.jpg) (http://www.imagebam.com/image/f61247161042020)  (http://thumbnails63.imagebam.com/16105/2bcec3161042017.jpg) (http://www.imagebam.com/image/2bcec3161042017)

Before editing the template colours make sure you copy the original text and copy it somewhere safe in case you don't like the changes you have made.


can you help me 2 do it
Title: Tips: Design your phpBB3 forum templates
Post by: Paul on December 05, 2011, 04:59:38 pm
Quote from: Barkerdude;540696
can you help me 2 do it


Yes
Send me a pm at your forum with what you want
colours etc
Title: Tips: Design your phpBB3 forum templates
Post by: Sp0k on April 09, 2012, 01:58:42 pm
Q..
Editing colours

will this work for the panel boxes

cuz i would like to change the color same as the theme..

http://deepwater.forummate.com/index.php
Title: Tips: Design your phpBB3 forum templates
Post by: Paul on April 09, 2012, 02:36:35 pm
Quote from: Sp0k;541899
Q..
Editing colours

will this work for the panel boxes

cuz i would like to change the color same as the theme..

http://deepwater.forummate.com/index.php


I think tanduy has fixed your style now so the blocks are correct colour

Editing themes are a little advanced for some members to do, I would not recommend it unless you know what your doing.

If you do attempt to change your theme's colours copy your current theme into a text editor and save in case you make a mess.