• Registered: 2004-10-15
  • Posts: 28

Topic: Top Bar

Hello--
I was just wondering how I would go about adding a table to the top of every page with a  topmargin set to 0 and a leftmargin set to 0 as well. I'm trying to customize the forum a bit and need to know how to do this. Any help is appreciated.

Mods: PM System / PunPoll / Active Topics /
Post Preview / Calender

2 Reply by Connorhd (edited by Connorhd 2004-11-02 22:00)

  • Connorhd
  • Connorhd
  • Former PunBB Developer
  • Offline
  • From: Leeds, UK
  • Registered: 2004-06-13
  • Posts: 4,195

Re: Top Bar

read the faqs tongue (look in include/template/main.tpl)

faq wrote:

3.3.  How do I add my own footer and header so that I can integrate my forums into design of the rest of my website?

For this purpose, PunBB has a simple template system. The template files are located in include/template/. There are three templates - main.tpl, maintenance.tpl and redirect.tpl. The file main.tpl contains the template for almost all pages that are displayed in the forum, the file maintenance.tpl is the template for the message page that is displayed when the forum is put in maintenance mode, and finally the file redirect.tpl is used to display the redirect pages e.g. when logging in or when posting a message.

The templates contain variables that are replaced with actual content when a page is displayed. All variables in PunBB are enclosed in less-than and more-than signs (< and >). For example, the variable for the title of the forums is called <pun_title>. When PunBB displays the index page, it reads the file main.tpl and replaces <pun_title> with the title of the forums. There are 11 replacement variables in main.tpl.

If you want to customize the look of PunBB so that it fits the design of other pages on your website, it is primarily the template files you should edit. For example, if you wanted to add your own logo at the top of all forum pages, you would edit main.tpl and add HTML for displaying your logo at the appropriate position in the file. It is possible to include PHP scripts from the templates. See the next FAQ entry for more info on that.

FluxBB.
Connorhd.co.uk.

Connorhd's Website

  • Registered: 2004-10-15
  • Posts: 28

Re: Top Bar

Yes, but I can't find out where I can add topmargin/leftmargin so the bar goes from one end of the page to the other without any space between it.

Mods: PM System / PunPoll / Active Topics /
Post Preview / Calender
  • Registered: 2004-10-16
  • Posts: 12

Re: Top Bar

open the style page you are using and change this:

BODY { background-color: #FFFFFF }

So it looks like:

BODY { background-color: #FFFFFF
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

Also edit your template file there are some cellspacing properties you could edit

  • Registered: 2004-10-15
  • Posts: 28

Re: Top Bar

Thanks, I got it to work now.

Mods: PM System / PunPoll / Active Topics /
Post Preview / Calender
  • Registered: 2004-10-15
  • Posts: 28

Re: Top Bar

Okay I got it working somewhat. I still can't create a table at the very top (sorta like how snowball did to IGN back in the day).

Mods: PM System / PunPoll / Active Topics /
Post Preview / Calender
  • Registered: 2004-10-16
  • Posts: 12

Re: Top Bar

just insert the table code above all the other tables

  • Registered: 2005-01-30
  • Posts: 5

Re: Top Bar

Hi Connor

If you get a chance to take a look at www.vroz.net could you tell me if the way we hacked the header.php file and added the style/include files looks ok ? What I like about it is that it still validates as XHTML strict and the logo repeating helps in all size screen resolutions. It might help someone else trying to make a quick change to personalise punBB for a site look and feel without affecting the accessibility ?

STEP 1 - LOGO / HEADER
First we created a logo 756 pixels wide to reflect the look we were after, and uploaded into the img directory.

STEO 2 MODIFY HEADER.php
Then we added code in header.php in the site root between the

<title><?php echo $page_title ?></title> and <link rel="stylesheet" type="text/css" href="style/<?php echo $pun_user['style'].'.css' ?>" /> :

ie :

<title><?php echo $page_title ?></title>

<script type="text/javascript">
<!--
//ADDED: Feb. 10, 2005
//Small if statement to determine if banner background repeats (on displays 1024x768 or larger)
var X = parseInt(screen.availWidth);
if (X < 1024)
    document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"style/imports/header_small.css\" />\n");
else
    document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"style/imports/header_large.css\" />\n");
//-->
</script>

<link rel="stylesheet" type="text/css" href="style/<?php echo $pun_user['style'].'.css' ?>" />

STEP 3 - create MULTI-RESOLUTION .CSS

Then we created two files and uploaded to the /style/imports/ directory

header_small.css contains :

/** class that displays repeating banner in header.php- added: Feb. 10, 2005 **/
#hdr_new
    {
    width: 100%;
    height: 137px;
    background-image: url(../../img/logo.jpg);
    background-repeat: no-repeat;
    }

and header_large.css contains :

/** class that displays repeating banner in header.php- added: Feb. 10, 2005 **/
#hdr_new
    {
    width: 100%;
    height: 137px;
    background-image: url(../../img/logo.jpg);
    background-repeat: repeat-x;
    }

Hope that looks ok to you (ie. that its a valid way of achieving what we were after) and that it may be some help to someone trying to personalise PunBB for their site.

Many thanks for a great bulletin board ! 

Cheers
Carl

  • Connorhd
  • Connorhd
  • Former PunBB Developer
  • Offline
  • From: Leeds, UK
  • Registered: 2004-06-13
  • Posts: 4,195

Re: Top Bar

looks good to me but i'm not really the person to ask about styles wink

FluxBB.
Connorhd.co.uk.

Connorhd's Website

  • Registered: 2005-01-30
  • Posts: 5

Re: Top Bar

oh ok sorry smile