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.

Adding footer to the forum

View previous topic View next topic Go down

Solved Adding footer to the forum

Post by Anzo on September 20th 2015, 11:20 pm

Hi, Very Happy

I made a footer today and I'd like to know how do I add it to the forum.

The one I made gave me this result: http://prntscr.com/8inscv

I was hoping someone would guide me on how to edit the footers in the template instead of having to do this with a widget. I'm looking for the same result I had with the widget, only it's a widget, not a footer.

This is my footer:
Code:
<style>
#index_foot_wid {
    width: 100%;
    text-align: center;
    background-color: #1C242F;
    left: 0px;
    height: 275px;
    position: absolute;
    bottom: -1696px;
    color: #BABABA;
    font-size: 14px;
    overflow: hidden;
    border-top: 5px solid #2C3F59;
    border-bottom: 26px solid #161C26;
}


.floating_foot_list {
float: left;
width: 25%;
}


ul.foot_wid_ul {
    text-decoration: none;
    margin: 9px;
    text-align: center;
    padding: 11px 25px 13px;
}

li.foot_wid_li {
    color: #6A7E87;
    line-height: 28px;
    text-align: left;
    padding-left: 104px;
}

.foot_list_title {
    display: block;
    color: #E1E1E1;
    padding-left: 137px;
    text-align: left;
    padding-top: 30px;
    font-size: 16px;
}

#footer_wid_img {
    text-align: center;
    margin: auto;
}

#wid_img_da {
    width: 150px;
    margin: 0px;
}

.footer_p_da_last {
    font-size: 12px;
    color: #565656;
}

</style>
<div id="index_foot_wid">
                                                                                  
   <div style="" class="floating_foot_list">
                                                    <strong class="foot_list_title">Generalities</strong>                           
      <ul class="foot_wid_ul">
                                                                            
         <li class="foot_wid_li">
                                            Staff List                               
         </li>
                                                                        
         <li class="foot_wid_li">
                                            General Rules                               
         </li>
                                                                        
         <li class="foot_wid_li">
                                            Guide                               
         </li>
                                                                        
         <li class="foot_wid_li">
                                              Support Desk                         
         </li>
                                                                        
         <li class="foot_wid_li">
                                            Contact us                               
         </li>
                                                                          
      </ul>
                                                                     
   </div>
                                                      
   <div style="" class="floating_foot_list">
                                                    <strong class="foot_list_title">Dueling</strong>                           
      <ul class="foot_wid_ul">
                                                                            
         <li class="foot_wid_li">
                                            World Championship                               
         </li>
                                                                                                  
         <li class="foot_wid_li">
                                            Quizzes & Puzzles                               
         </li>
                                                                        
         <li class="foot_wid_li">
                                            Market Square                               
         </li>
                                                                        
         <li class="foot_wid_li">
                                            Dice Games                               
         </li>
                                                                          
      </ul>
                                                                     
   </div>
                                                      
   <div style="" class="floating_foot_list">
                                                    <strong class="foot_list_title">Dueling Systems</strong>                           
      <ul class="foot_wid_ul">
                                                                            
         <li class="foot_wid_li">
                                            Dueling Network                               
         </li>
                                                                        
         <li class="foot_wid_li">
                                            DevPro                               
         </li>
                                                                        
         <li class="foot_wid_li">
                                            Duel Arena                               
         </li>
                                                                                              
      </ul>
                                                                     
   </div>
                                                          
   <div id="footer_wid_img">
                          <img id="wid_img_da" src="http://i.imgur.com/TgLfhMX.png" /><br />                     
      <p class="footer_p_da_last">
                               Duel Academy<br />All rights reserved; 2009-2015                     
      </p>
                                               
   </div>
              
</div>

The widget doesn't work, that's why I want to change it to a real footer. The "bottom: -1696px;" only works in the index, the same value doesn't display as intended in other pages (because each page length varies from one to the other). I tried using "bottom:0px" but it didn't work either.

Thanks in advance Very Happy

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Adding footer to the forum

Post by Ange Tuteur on September 21st 2015, 12:12 pm

Hi @Anzo,

To edit the footer, you need to modify two parts :
( in Display > Templates > General )

1. overall_footer_begin
2. overall_footer_end


Firstly you should focus on editing the beginning template since that's where you'll want most of your general content. I can tell you're using phpbb3, so to break to footer from the wrapper find :
Code:
<div id="page-footer">

and add a closing </div> before it. This will close the wrapper and add the footer outside of it, to the bottom of the page like on the support forum. After this, you'll need to make modifications to the mark up so that it conforms to what you're looking for -- plus a lot of CSS to get everything looking perfect.

Instead of the CSS being in the template, I'd recommend adding it into your CSS stylesheet, so you can manage it outside of the template.

If you need any help let me know. Smile

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Adding footer to the forum

Post by Anzo on September 21st 2015, 3:02 pm

I did just that now. But the wrapper got squashed, not sure how to put it.

Here is what happened: http://i.imgur.com/UNXUqV8.png

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Adding footer to the forum

Post by Ange Tuteur on September 21st 2015, 3:04 pm

Oh right, I forgot. Make sure to add this before the closing div :
Code:
<div class="clear"></div>

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Adding footer to the forum

Post by Anzo on September 21st 2015, 3:39 pm

It worked.

Thank you Very Happy

Anzo
Forumember

Posts : 303
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: Adding footer to the forum

Post by SLGray on September 21st 2015, 8:49 pm

Topic solved and archived



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.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