The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Footer Template

View previous topic View next topic Go down

Solved Footer Template

Post by Rhino.Freak on Tue Oct 20, 2015 1:09 pm

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 Smile

Thanks in advanced!


Last edited by Rhino.Freak on Thu Oct 22, 2015 9:39 am; edited 1 time in total

Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Footer Template

Post by Ange Tuteur on Tue Oct 20, 2015 2:14 pm

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. Smile

Ange Tuteur
Forumaster

Male Posts : 13034
Reputation : 2714
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on Wed Oct 21, 2015 5:59 am

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?

Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Footer Template

Post by Ange Tuteur on Wed Oct 21, 2015 6:25 am

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. Smile

Ange Tuteur
Forumaster

Male Posts : 13034
Reputation : 2714
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on Wed Oct 21, 2015 8:25 am

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.

Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Footer Template

Post by Ange Tuteur on Wed Oct 21, 2015 8:37 am

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

Ange Tuteur
Forumaster

Male Posts : 13034
Reputation : 2714
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on Wed Oct 21, 2015 9:07 am

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

Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Footer Template

Post by Ange Tuteur on Wed Oct 21, 2015 10:23 am

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. blackeye If not, let me know. Very Happy

Ange Tuteur
Forumaster

Male Posts : 13034
Reputation : 2714
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on Wed Oct 21, 2015 11:56 am

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

:/

Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Footer Template

Post by Ange Tuteur on Wed Oct 21, 2015 11:58 am

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

Ange Tuteur
Forumaster

Male Posts : 13034
Reputation : 2714
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on Wed Oct 21, 2015 11:22 pm

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

Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Footer Template

Post by Ange Tuteur on Thu Oct 22, 2015 6:46 am

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 )

Ange Tuteur
Forumaster

Male Posts : 13034
Reputation : 2714
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on Thu Oct 22, 2015 9:39 am

Thanks a lot! Very Happy Fixed~

Rhino.Freak
Helper
Helper

Male Posts : 1248
Reputation : 105
Language : English
Location : Mumbai, India

http://freetest.forumotion.net/

Back to top Go down

Solved Re: Footer Template

Post by Ange Tuteur on Thu Oct 22, 2015 9:49 am

Sure, no problem ! Smile

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. Mr. Green

Ange Tuteur
Forumaster

Male Posts : 13034
Reputation : 2714
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by brandon_g on Thu Oct 22, 2015 12:56 pm

Topic solved and archived ~ brandon_g


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5419
Reputation : 494
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum