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 formatting?

View previous topic View next topic Go down

Solved Footer formatting?

Post by Mimůza on December 18th 2015, 1:22 pm

Hello,
I'd like to make the footer's appearance more neat. Anyone could help?
punbb, tophun.net

now


desired result


Last edited by Mimůza on December 30th 2015, 3:43 pm; edited 1 time in total

Mimůza
Forumember

Female Posts : 539
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Footer formatting?

Post by Rhino.Freak on December 18th 2015, 3:31 pm

Hello Very Happy
Please go to
Display > Templates > General > overall_footer_end
and post it's contents here please Smile

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 formatting?

Post by Mimůza on December 19th 2015, 10:15 am

Thank you!†Mr. Green

Footer:

Code:
 † <!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <ul>
                     <li>
<!-- END html_validation -->
                     </li>
                  </ul>
                  <!-- BEGIN switch_footer_links -->
                  <ul>
                     <li>
                        <!-- BEGIN footer_link -->
                           <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                           {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                        <!-- END footer_link -->
                     </li>
                  </ul>
                  <!-- END switch_footer_links -->
               </div>
               <br />
               <p class="center">
                  <strong>{ADMIN_LINK}</strong>
               </p>
            </div>
            {PROTECT_FOOTER}
         </div>
      </div>
   </div>
</div>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
 † †FB.init({
 † † †appId † † †: {switch_facebook_login.FACEBOOK_APP_ID},
 † † †cookie † † : true,
 † † †xfbml † † †: true,
 † † †oauth † † †: true,
 † † †version † †: 'v2.3'
 † †});

 †(function(d, s, id){
 † † var js, fjs = d.getElementsByTagName(s)[0];
 † † if (d.getElementById(id)) {return;}
 † † js = d.createElement(s); js.id = id;
 † † js.src = "//connect.facebook.net/en_US/sdk.js";
 † † fjs.parentNode.insertBefore(js, fjs);
 † }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>


Mimůza
Forumember

Female Posts : 539
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Footer formatting?

Post by Rhino.Freak on December 20th 2015, 10:53 am

Give me a little time, Im still new to this but I'll try my best Very Happy

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 formatting?

Post by Mimůza on December 20th 2015, 12:19 pm

Sure!†

Mimůza
Forumember

Female Posts : 539
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Footer formatting?

Post by Rhino.Freak on December 20th 2015, 2:04 pm

Hmm are you sure this is the
Code:
overall_footer_end
?
If yes, please post the other footer template,
Code:
overall_footer_begin
.

Add this to your CSS btw, to remove the spacing.
Code:
#index_foot_wid {
    margin-top: 0px!important;
}

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 formatting?

Post by Mimůza on December 20th 2015, 2:15 pm

Yap. Smile
overallfooterbegin:

Code:
<style>
#index_foot_wid {
 † †width: 100%;
 † †text-align: center;
 † †background-image: url("http://i68.tinypic.com/25aq9tf.png");
 † †background-color: #7768c0;
 † †left: 0px;
 † †height: 200px;
 † †position: absolute;
 † †margin-top:100px;
 † †color: #BABABA;
 † †font-size: 14px;
 † †overflow: hidden;
 † †border-top: 1px solid #b0e2ed;
 † †border-bottom: 20px solid #b0e2ed;
}
 
 
.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;
 † †margin: -20px;
}
 
</style>
<div id="index_foot_wid">
 † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † †
 † <div style="" class="floating_foot_list">
 † † † † † † † † † † † † † † † † † † † † † † † † † †<strong class="foot_list_title">A jŠtťk hivatalos oldalai:</strong> † † † † † † † † † † † † †
 † † †<ul class="foot_wid_ul">
 † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † †
 † † † † <li class="foot_wid_li">
 † † † † † † † † † † † † † † † † † † † †<a href="http://top2.igg.com/"> <img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/button1.png"/> †</a> † † † † † † † † † † † † † † † †
 † † † †
 † † † † † † † † † † † † † † † † † † † <a href="https://www.facebook.com/Tales.of.Pirates/"> †<img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/Image96.png"/></a> † † † † † † † † † † † † † † † †
 † † † † </li><br>
 † † † †<li class="foot_wid_li"> <a href="http://top2.igg.com/download/client.php"><img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/client.png" /></a><br /> †</li>
 † † † †
 † † † †
 † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † †
 † † †</ul>
 † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † † †
 † </div>
 † † † † † † † † † † † † † † † † † † † † † † † † † † †
 † † † † † † † † † † † † † † † † † † † † † † †
 † <div id="footer_wid_img">
 † † † † † <br /> <br /> <br /> †<img id="wid_img_da" src="http://i1370.photobucket.com/albums/ag257/AppleDrink/ToP2_Logo.png" /><br /> <br /> <br /> † † † † † † † † † †
 † † †<p class="footer_p_da_last">
 † † † †<img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/white.png" />
 † † † † † † † † † † † † † †<br /> All rights reserved; 2006- 2015 † † † † † † † † † †
 † † †</p>
 † † † † † † † † † † † † † † † † † † † † † † † † †
 † </div>
 † † † † † † †
</div>


I'm not sure what that CSS supposed to do, but it made the footer's bg image shorter? Very Happy

Mimůza
Forumember

Female Posts : 539
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Footer formatting?

Post by Rhino.Freak on December 22nd 2015, 9:56 am

I have to say I tried. But I am unable to do so. I can't place the links below there mostly because the links are hidden in the template, it appears copyright links are auto generated.
Maybe @Ange tuteur can help.

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 formatting?

Post by Mimůza on December 22nd 2015, 11:31 am

Thank you, Rhino! I appreciate your will to help!††Maybe it's not even possible to move those links downward.††Happy holidays!†

Mimůza
Forumember

Female Posts : 539
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Footer formatting?

Post by Mimůza on December 30th 2015, 12:37 pm

Shameless self bump.†

Mimůza
Forumember

Female Posts : 539
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Footer formatting?

Post by 10spetter10 on December 30th 2015, 3:27 pm

This is what I came up with:



I used both the templates ('overall_footer_begin' and 'overall_footer_end'). Before editing yours I would suggest to take a back-up of the templates you have now. There is always a chance it will mess with your forum, because I started with the default templates.

When your forum gets messed up, will you post your 'overall_header' to? The templates are a puzzle, so the end from the overall_header is the start of the overall_footer.

'overall_footer_begin':
Code:
<!-- BEGIN html_validation -->
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <div>
<!-- END html_validation -->
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div id="{ID_RIGHT}">
            <!-- BEGIN giefmod_index2 -->
            {giefmod_index2.MODVAR}
            <!-- BEGIN saut -->
            <div style="height:{SPACE_ROW}px"></div>
            <!-- END saut -->
            <!-- END giefmod_index2 -->
         </div>
      </div>
   </div>
</div>
</div>
<style>
#pun-foot {
    background-image: url("http://i68.tinypic.com/25aq9tf.png");
    background-color: #7768c0;
    clear: both;
    color: #BABABA;
    font-size: 14px;
    height: 200px;
    overflow: hidden;
    border-top: 1px solid #b0e2ed;
    border-bottom: 20px solid #b0e2ed;
}
#pun-foot .admin-link {
    margin-top: 10px;
    text-align: center;
}
#pun-foot a {
    font-size: 10px;
    color: #EEAAFF;
    font-weight: normal;
}
#pun-about {
    width: 950px;
    margin: 0 auto;
    background: none;
    border: none;
    padding: 0;
    line-height: 100%;
    text-align: left;
}
#left-footer {
    float: left;
}
#left-footer .foot_list_title {
    color: #E1E1E1;
    font-size: 16px;
}
#left-footer .foot_wid_ul {
    margin: 20px 0;
}
#left-footer a {
    text-decoration: none !important;
}
#right-footer {
    float: right;
    text-align: center;
}
#right-footer .footer_p_da_last {
    font-size: 12px;
    color: #565656;
    margin-bottom: 7px;
}
#right-footer .footer_p_da_last img {
    margin: 7px 0;
}
</style>
<div id="pun-foot">
   <div id="pun-about" class="clearfix">
      <p class="admin-link">
         <strong>{ADMIN_LINK}</strong>
      </p>
      <div id="left-footer">
         <div class="foot_list_title">
            A jŠtťk hivatalos oldalai:
         </div>
         <ul class="foot_wid_ul">
            <li>
               <a href="http://top2.igg.com/"><img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/button1.png"/></a>
            </li>
            <li><a href="https://www.facebook.com/Tales.of.Pirates/"> <img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/Image96.png"/></a>
            </li>
         </ul>
         <div class="foot_wid_down">
            <a href="http://top2.igg.com/download/client.php"><img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/client.png" /></a>
         </div>
      </div>
      <div id="right-footer">
         <div>
            <img id="wid_img_da" src="http://i1370.photobucket.com/albums/ag257/AppleDrink/ToP2_Logo.png" />
         </div>
         <p class="footer_p_da_last">
            <img src="http://i1370.photobucket.com/albums/ag257/AppleDrink/white.png" /><br />
            All rights reserved; 2006- 2015                   
         </p>
         <ul id="default_footer">
            <li>
<!-- BEGIN html_validation -->
            </li>
         </ul>
      </div>
   </div>
</div>
<!-- END html_validation -->

'overall_footer_end':
Code:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div>
   <div>
      <div>
         <div>
            <div>
               <div>
                  <div>
                     <ul>
                        <li>
<!-- END html_validation -->
                        </li>
                     </ul>
                  </div>
                  <!-- BEGIN switch_footer_links -->
                  <ul>
                     <li>
                        <!-- BEGIN footer_link -->
                           <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                           {switch_footer_links.footer_link.FOOTER_LINK_SEPARATOR}<a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                        <!-- END footer_link -->
                     </li>
                  </ul>
                  <!-- END switch_footer_links -->
               </div>
               <br />
            </div>
            {PROTECT_FOOTER}
         </div>
      </div>
   </div>
</div>

<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
} );
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: Footer formatting?

Post by Mimůza on December 30th 2015, 3:34 pm

Hello again, 10spetter10! Very Happy
Thank you! The sample image you posted looks wonderful! ýý
I added your codes, but all the footer dissappeared. Very Happy

Mimůza
Forumember

Female Posts : 539
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Footer formatting?

Post by 10spetter10 on December 30th 2015, 3:38 pm

I see, but this is an easy thing. You used a template that hid the footer with display: none. So add this in your css:

Code:
#pun-foot {
  display: block !important;
}

10spetter10
Forumember

Posts : 195
Reputation : 81
Language : Dutch

Back to top Go down

Solved Re: Footer formatting?

Post by Mimůza on December 30th 2015, 3:42 pm

Wow! Magic!†
Thank you so much!!! Very Happy†Have a great day!!! Very Happy

Mimůza
Forumember

Female Posts : 539
Reputation : 241
Language : :)
Location : @Graphic Balloon

http://www.graphicballoon.com/

Back to top Go down

Solved Re: Footer formatting?

Post by brandon_g on December 30th 2015, 6:51 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 : 5137
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