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 October 20th 2015, 8: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 October 22nd 2015, 4:39 pm; edited 1 time in total

Rhino.Freak
Active Poster

Male Posts : 1243
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 October 20th 2015, 9: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 : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on October 21st 2015, 12:59 pm

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
Active Poster

Male Posts : 1243
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 October 21st 2015, 1:25 pm

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 : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on October 21st 2015, 3:25 pm

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
Active Poster

Male Posts : 1243
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 October 21st 2015, 3:37 pm

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on October 21st 2015, 4:07 pm

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
Active Poster

Male Posts : 1243
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 October 21st 2015, 5:23 pm

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 : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on October 21st 2015, 6:56 pm

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

:/

Rhino.Freak
Active Poster

Male Posts : 1243
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 October 21st 2015, 6:58 pm

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 : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on October 22nd 2015, 6:22 am

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

Rhino.Freak
Active Poster

Male Posts : 1243
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 October 22nd 2015, 1:46 pm

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 : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by Rhino.Freak on October 22nd 2015, 4:39 pm

Thanks a lot! Very Happy Fixed~

Rhino.Freak
Active Poster

Male Posts : 1243
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 October 22nd 2015, 4:49 pm

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 : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Footer Template

Post by brandon_g on October 22nd 2015, 7: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 : 5144
Reputation : 478
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