Footer Template
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
Footer Template
I was wondering if I can get the template code for the footer part of this support forum? (Not exact same but I need to have something similar to that for my forum)
Forum version : phpbb3
Thanks in advanced!
Forum version : phpbb3

Thanks in advanced!
Last edited by Rhino.Freak on October 22nd 2015, 4:39 pm; edited 1 time in total
Re: Footer Template
Hi @Rhino.Freak,
You can find some HTML templates which are similar here. You'd just need to add in the necessary variables for the forum templates. If you need help with that let me know.
You can find some HTML templates which are similar here. You'd just need to add in the necessary variables for the forum templates. If you need help with that let me know.

Re: Footer Template
Ah thanks! That's very close however not exactly what I need.
I want to put some important topics, some contact us and some affiliates.
That'd be like 3 different columns with sublinks in them. Is there a template like that?
I want to put some important topics, some contact us and some affiliates.
That'd be like 3 different columns with sublinks in them. Is there a template like that?
Re: Footer Template
You could create three elements like so :
Then use CSS to distribute the width evenly :
100% ( width ) / 3 ( columns ) = 33% width for each column. ( depending on padding, margins, etc.. you may need to reduce it by a few ) You can use float or display:inline-block; to display block-level elements side-by-side.
As for the template, you can use one of the templates as a base, and apply the column example above to one of them.
- Code:
<div class="footer-col">
Col1
</div>
<div class="footer-col">
Col2
</div>
<div class="footer-col">
Col3
</div>
Then use CSS to distribute the width evenly :
- Code:
.footer-col {
display:inline-block;
width:33%;
}
100% ( width ) / 3 ( columns ) = 33% width for each column. ( depending on padding, margins, etc.. you may need to reduce it by a few ) You can use float or display:inline-block; to display block-level elements side-by-side.
As for the template, you can use one of the templates as a base, and apply the column example above to one of them.

Re: Footer Template
To the point and informative! Thanks! For now I'd request to let this topic stay open so I can report back with any other doubt if I have in the same thread.
Re: Footer Template
Okay so after derping around and stuff I managed to do something like this :
http://prntscr.com/8toxqw
These are the code I added in overall footer end template just above the admin panel link part :
This is the CSS I added:
My questions are:
1. Why isn't the background black?
2. How do I make them "accurately" spaced? Middle column in exact middle and left right on exact same spot?
3. Why is the administration panel gone to the far right? How do I fix that?
I know this is basically just html/css doubts but help me out please!
thanks!
http://prntscr.com/8toxqw
These are the code I added in overall footer end template just above the admin panel link part :
- Code:
<div class="footerbg">
<div class="footer-colone">
<strong class="footertitle">Col1</strong>
<ul class="footerlink">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div class="footer-col">
<strong class="footertitle">Col2</strong>
<ul class="footerlinks">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div class="footer-col">
<strong class="footertitle">Col3</strong>
<ul class="footerlink">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
</div>
This is the CSS I added:
- Code:
.footerbg {
background-color: #000 !important;
}
.footer-colone {
float: left;
padding-left: 25px;
display: inline-block;
width: 30%;
}
.footer-col {
float: left;
padding-left: 3px;
display: inline-block;
width: 30%;
}
.footertitle {
font-size: 15px;
}
My questions are:
1. Why isn't the background black?
2. How do I make them "accurately" spaced? Middle column in exact middle and left right on exact same spot?
3. Why is the administration panel gone to the far right? How do I fix that?
I know this is basically just html/css doubts but help me out please!

Re: Footer Template
1. Ah, I see you're using floats ! One thing to be aware of is the "great collapse" phenomenon. ( Check this article out )
So, what you need to do is clear your floats by adding an element with clear:both; Since your columns are all floated, you'll want to add the following at the end of <div class="footerbg"> :
So you get :
You can also use the .clear class on the div, because Forumotion already has a clearfix class setup.
2. Do you want them centered along with margin ? To do that, you need to add text-align:center; to the parent container, and then reset the text alignment on your columns if necessary. After this, you just need to add a bit of margins to space everything apart. Something like this :
- Center the content :
- Reset text align and add margins to the left and right :
3. I think this might be related to the great collapse.
If not, let me know. 
So, what you need to do is clear your floats by adding an element with clear:both; Since your columns are all floated, you'll want to add the following at the end of <div class="footerbg"> :
- Code:
<div style="clear:both;"></div>
So you get :
- Code:
<div class="footerbg">
<div class="footer-colone">
<strong class="footertitle">Col1</strong>
<ul class="footerlink">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div class="footer-col">
<strong class="footertitle">Col2</strong>
<ul class="footerlinks">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div class="footer-col">
<strong class="footertitle">Col3</strong>
<ul class="footerlink">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
<div style="clear:both;"></div>
</div>
You can also use the .clear class on the div, because Forumotion already has a clearfix class setup.
2. Do you want them centered along with margin ? To do that, you need to add text-align:center; to the parent container, and then reset the text alignment on your columns if necessary. After this, you just need to add a bit of margins to space everything apart. Something like this :
- Center the content :
- Code:
.footerbg {
background-color: #000 !important;
text-align:center;
}
- Reset text align and add margins to the left and right :
- Code:
.footer-col {
float: left;
padding-left: 3px;
display: inline-block;
width: 30%;
text-align:left;
margin:0 2%;
}
3. I think this might be related to the great collapse.


Re: Footer Template
Hmm.. it's either the width of the parent container, or the margin that's causing that..
Could I have the URL of the forum to take a closer look ?

Re: Footer Template
Ah, since you now have 2% margin on each side, try reducing the width by 2% or 3% on the columns.
As for the background add the following :
at the end of your footer container. ( or after the last column )
As for the background add the following :
- Code:
<div class="clear"></div>
at the end of your footer container. ( or after the last column )
Re: Footer Template
Sure, no problem ! 
If you need to increase it in size a bit, you can add some padding to the top and bottom. Like this :
That way the content is less closer to the edges. I think you'll be able to figure everything else out, but if you need any help you can always ask.

If you need to increase it in size a bit, you can add some padding to the top and bottom. Like this :
- Code:
.footerbg {
padding:30px 3px;
}
That way the content is less closer to the edges. I think you'll be able to figure everything else out, but if you need any help you can always ask.

Re: Footer Template
Topic solved and archived ~ brandon_g

Remember to mark your topic
when a solution is found.

The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum