Various modifications for phpBB3 ⇒ Turn footer nav bar in to a fixed bar

[dmzx]

Turn footer nav bar in to a fixed bar

Open styles/prosilver/template/overall_footer.html

Find This may be a partial find and not the whole line

Code: Select all

<div class="navbar">
          <div class="inner"><span class="corners-top"><span></span></span>

          <ul class="linklist">
             <li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
                <!-- IF not S_IS_BOT -->
                   <!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{S_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
                   <!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
                   <!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
                   <!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
                <!-- ENDIF -->
             <li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
          </ul>

          <span class="corners-bottom"><span></span></span></div>
       </div>

Replace with Replace the preceding lines with the following

Code: Select all

<div class="inner"><span class="corners-top"><span></span></span>
       <div id="footer-wrap">
       <div id="footer-container">
          <div id="footer">
          <ul class="linklist">
             <li class="icon-home"><a href="{U_INDEX}" accesskey="h">Home</a></li>
                <!-- IF not S_IS_BOT -->
                   <!-- IF S_WATCH_FORUM_LINK --><li <!-- IF S_WATCHING_FORUM -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{S_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}">{S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
                   <!-- IF U_WATCH_TOPIC --><li <!-- IF S_WATCHING_TOPIC -->class="icon-unsubscribe"<!-- ELSE -->class="icon-subscribe"<!-- ENDIF -->><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}">{L_WATCH_TOPIC}</a></li><!-- ENDIF -->
                   <!-- IF U_BOOKMARK_TOPIC --><li class="icon-bookmark"><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}">{L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->
                   <!-- IF U_BUMP_TOPIC --><li class="icon-bump"><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}">{L_BUMP_TOPIC}</a></li><!-- ENDIF -->
                <!-- ENDIF -->
             <li class="rightside"><!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> &bull; <!-- ENDIF --><!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> &bull; <!-- ENDIF -->{S_TIMEZONE}</li>
          </ul>
          
          </div>
       </div>
    </div>
    <span class="corners-bottom"><span></span></span></div>
       </div>

Find This may be a partial find and not the whole line

Code: Select all

<a id="bottom" name="bottom" accesskey="z"></a>

Add before Add these lines on a new blank line before the preceding line(s) to find

Code: Select all

 <br />

Open styles/prosilver/theme/colours.css

add to the bottom of the file

Code: Select all

 #footer-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10;

    }

    #footer-container {
    height: auto px;
    background: #CADCEB;

    }

    #footer {
    width: auto px;
    margin: 5 auto;
    padding-top: auto px;
    color: #fff;
    position: relative;

    }

Change CADCEB to any colour that you want refresh styles and purge the board via acp also your browser.

If you want an image then use this code note i use hover aswell

Code: Select all

#footer-container {
    height: auto px;
    background: #000 url("{T_THEME_PATH}/images/some-image.png") fixed;

    }

    #footer-container:hover {
       background: #000 url("{T_THEME_PATH}/images/some-image.png") fixed;
    }

Demo: Look down

[TWEagle]

How can I collapse my footer so it isn't as big as it is now

http://offorum.net

this is my code

Code: Select all

	</div>
<div id="page-footer">
	<div class="navbar">
		<div class="inner"><span class="corners-top"><span></span></span>

		<ul class="linklist">
<!-- IF S_DISPLAY_ONLINE_LIST -->
	<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	<p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br />{LOGGED_IN_USER_LIST}
	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- IF NEWEST_USER -->
	<h3>{L_STATISTICS}</h3>
	<p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
	
<!-- ENDIF -->	
<!-- ENDIF -->
<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index')-->
    <!-- IF $SIDEBARS == 'left' or $SIDEBARS == 'right' -->
        </div><!-- /.fixedfluidcontent -->
        </div><!-- /.sidebarwrapper -->
    <!-- ELSEIF $SIDEBARS == 'both' -->
        </div>
        <div class="fixedfluidfixed-right">
            <!-- INCLUDE sidebar_right.html -->
        </div>
        </div>
    <!-- ENDIF -->
<!-- ENDIF -->

	<div class="copyright">
	<!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> <font color="#ff0000">|</font> <!-- ENDIF -->
	<!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> <font color="#ff0000">|</font> <!-- ENDIF -->
	{CREDIT_LINE} <font color="#ff0000">|</font> 
		<!-- IF TRANSLATION_INFO -->{TRANSLATION_INFO} <font color="#ff0000">|</font> <!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT -->{DEBUG_OUTPUT} <font color="#ff0000">|</font> <!-- ENDIF -->
		{S_TIMEZONE}
	</div>
		</ul>
		<span class="corners-bottom"><span></span></span></div>
	</div>
</div>

</div>

<div>
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

</body>
</html>

and I want to do it like this:

Code: Select all

	</div>
<div id="page-footer">

		<div class="inner"><span class="corners-top"><span></span></span>
       <div id="footer-wrap">
       <div id="footer-container">
          <div id="footer">
		<ul class="linklist">
<!-- IF S_DISPLAY_ONLINE_LIST -->
	<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
	<p>{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br />{LOGGED_IN_USER_LIST}
	<!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
<!-- IF NEWEST_USER -->
	<h3>{L_STATISTICS}</h3>
	<p>{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
	
<!-- ENDIF -->	
<!-- ENDIF -->
<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index')-->
    <!-- IF $SIDEBARS == 'left' or $SIDEBARS == 'right' -->
        </div><!-- /.fixedfluidcontent -->
        </div><!-- /.sidebarwrapper -->
    <!-- ELSEIF $SIDEBARS == 'both' -->
        </div>
        <div class="fixedfluidfixed-right">
            <!-- INCLUDE sidebar_right.html -->
        </div>
        </div>
    <!-- ENDIF -->
<!-- ENDIF -->

	<div class="copyright">
	<!-- IF U_TEAM --><a href="{U_TEAM}">{L_THE_TEAM}</a> <font color="#ff0000">|</font> <!-- ENDIF -->
	<!-- IF not S_IS_BOT --><a href="{U_DELETE_COOKIES}">{L_DELETE_COOKIES}</a> <font color="#ff0000">|</font> <!-- ENDIF -->
	{CREDIT_LINE} <font color="#ff0000">|</font> 
		<!-- IF TRANSLATION_INFO -->{TRANSLATION_INFO} <font color="#ff0000">|</font> <!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT -->{DEBUG_OUTPUT} <font color="#ff0000">|</font> <!-- ENDIF -->
		{S_TIMEZONE}
	</div>
		</ul>

          
          </div>
       </div>
    </div>
		
		<span class="corners-bottom"><span></span></span></div>
	</div>
</div>

</div>

<div>
 <br />
	<a id="bottom" name="bottom" accesskey="z"></a>
	<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>

</body>
</html>