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!

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.

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?

You could create three elements like so :

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.

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.

Sure ! If you have any questions just let me know.

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 :

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! thanks!

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"> :

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%;
}

Might need to balance out the width and margins.


3. I think this might be related to the great collapse. If not, let me know.

Sadly, after putting those codes in, it looks like this
http://prntscr.com/8tr0dd

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 ?

Sure, it's a my test forum :p
http://freetest.forumotion.net/

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 :

Code:

<div class="clear"></div>

at the end of your footer container. ( or after the last column )

Thanks a lot! Fixed~

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 :

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.