Topic: How to add a new customizable section below the footer

I wanted to add a new section below the footer, so I tried modifying footer.php like I used to do in my old 1.2, but it's not working anymore. What I wanted was to be able to display personnal html and scripts like video bars, partners links, internet audience marker and all that kind of stuff.

Do someone knows any way to add a new section below the footer?

Thanks for any help smile

2 (edited by Programming-Designs 2009-02-21 19:47)

Re: How to add a new customizable section below the footer

Go to include/template/main.tpl and modify that. Put your code below the portion you want it to be under, eg:

<div id="brd-about" class="gen-content">
    <!-- forum_about -->
</div>

Re: How to add a new customizable section below the footer

Ok, thanks Programming-Designs it is working smile

Here is the output on my test-forum:

http://ups.imagup.com/02/1235267240_main-tpl-xiti.png

But the output is outside the forum, is there a way to put a kind of frame around it, like if it was a category of the forum with a title bar, or at least a frame around it such as the frame that is at the bottom of the forum where there is "Powered by Punbb"?

4 (edited by Programming-Designs 2009-02-21 20:17)

Re: How to add a new customizable section below the footer

You can do two things. First is to put the code right below the <!-- forum_about --> portion, before the </div> (which would use the about box to contain your code). The second thing you can do is create another div, something like this:

<div id="extraInfo"> <!-- code here --> </div>

With css defined for extraInfo:

#extraInfo{
    width: 100%;
    border: 1px solid #eee;
    background-color: #fafafa;
    padding: 0 10px;
    margin: 10px 0;
}

You can modify the CSS however you want to customize the appearance.

Re: How to add a new customizable section below the footer

I got it, thanks to you again! smile

I did what I wanted to do:

http://ups.imagup.com/02/1235268247_footer-ok.png

And here is the code in main.tpl:

<!-- forum_info -->

<div class="hr"><hr /></div>

<div id="brd-about" class="gen-content">
    <!-- forum_about -->
</div>
<div class="main-head">
        <h2 class="hn"><span>Partenaires</span></h2></div>
    </div>
    <div id="brd-about" class="gen-content">
    Test
    </div>
<my-marker-code>

<!-- forum_debug -->

</div>
</div>

</body>
</html>

That's so great, I'll use it to modify the footer and the announcement section, it will let me use an external script for a rotative banner for example, my test forum begins to look good! big_smile

6 (edited by Etoile 2009-02-21 20:56)

Re: How to add a new customizable section below the footer

Ok, maybe I'll try your method using the css, because what I did in main.tpl doesn' work for the announcement section of the forum, here is the best result I got:

http://ups.imagup.com/02/1235270474_announcement-test-tpl.png

with this code in main.tpl:

<!-- forum_announcement -->

<div class="main-head">
        <h2 class="hn"><span>Partenaires</span></h2></div>
    <div id="brd-about" class="gen-content">
    Test
    </div>
<div class="hr"><hr /></div>

The problem is the space between the blue bar and the white frame, I need to remove it so that it will look clean. Everything I tried to remove this space blowed up the whole forum design! lol I need to work on it again, but I feel like I'm getting close.

7 (edited by Programming-Designs 2009-02-21 23:46)

Re: How to add a new customizable section below the footer

Etoile wrote:

The problem is the space between the blue bar and the white frame, I need to remove it so that it will look clean. Everything I tried to remove this space blowed up the whole forum design! lol I need to work on it again, but I feel like I'm getting close.

In the CSS I gave you, remove margin: 10px 0; or change it to margin: 0 0 10px;

The margin attribute is what gives you room between the box area and the other boxes (the values are defined in order by: top, right, bottom, left). Alternatively you can just specify margin-top, margin-left, margin-right, margin-bottom separately if you need them.

If you are using the div box in more than one place use div class="extraInfo" and use .extraInfo in the css instead of #extraInfo. It is technically incorrect to use ids in more than one place on a page and that is what classes are for.

I'd recommend that you read up on a basic CSS guide to learn more about it (it really isn't that difficult).

This site: http://www.w3schools.com is a great resource for getting started.

Re: How to add a new customizable section below the footer

That's very interesting, thank you smile

I was looking at this: CSS2 Reference to rebuild the css from my website, because i have a big display bug with the background. I have lot of things to learn, I will have some free time soon to read and study, I think the website and forum I'm working on will take a lot of time to be ready.

9 (edited by Etoile 2009-02-27 18:47)

Re: How to add a new customizable section below the footer

Ok, so I'm still working on those boxes I want to include. Here is what I did:

In main.tpl:

<!-- forum_about -->
</div>
    <div id="pub">Test</div>
    <div id="pub2">Test</div>


<!-- forum_debug -->

In Oxygen.css:

#pub{
    width: 100%;
    border: 1px solid #eee;
    background:#1f537b url(http://www.mysite.fr/mypicture.png) repeat scroll 0 0;
    color:#FFFFFF;
    height: 30px;
    padding: 0 0;
    margin: 0 0;
}
#pub2{
    width: 100%;
    border: 1px solid #eee;
    background-color: #fafafa;
    padding: 0 0;
    margin: 0 0;
}

Here is the result at the bottom of the forum:

http://nsa05.casimages.com/img/2009/02/27/090227074414872215.png

It would be perfect if the characters would be at the same place than in the other bars, like categories for example. You can see on the following picture that there is a problem with the alignment and spacing of the carachters:

http://nsa05.casimages.com/img/2009/02/27/090227074918712759.png

I tried to modify the carachters alignment on the css so it will display like in the category bar with no result.

10 (edited by Programming-Designs 2009-02-28 02:54)

Re: How to add a new customizable section below the footer

You need to use the padding attribute in the CSS. Right now you have it at 0 0. I think it should be 5px 20px but I haven't actually checked. Just play around with it.

Re: How to add a new customizable section below the footer

see link in my sig and go to forum and view my footer. it is a work in progress and needs tidying up but you get the idea. Feel free to steal the HTML and css

12

Re: How to add a new customizable section below the footer

I already tried, but when I modify the padding attributes, it extends the bar and it doesn't display fine. Here is a sample output with

padding: 5px 20px;

http://nsa05.casimages.com/img/2009/02/28/090228102625841040.png

As you can see the bar becomes wider than the forum, it expands on the right and it exceeds the forum size of 20px, it also expands on the bottom of 5 px and the bar which should be 30px height is now 35 px height with an ugly background I don't want to see.

I don't know how I can keep the original size of the bar and place the letters without changing the whole bar size.