MyBB Community Forums

MyBB Community Forums > Extensions > Themes > Theme Support > Expanding Footer
Full Version: Expanding Footer
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

Kioshi

2014-03-30, 11:27 PM
I was wondering how I can make my footer stretch to both sides of the theme completely.

Here's what I have in my footer template:

<br />
			<div id="foot">
<div class="col">
<h3>Navigation 1</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
    <div class="col">
<h3>Navigation 2</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
    <div class="col">
<h3>Navigation 3</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
<div class="col">
<h3>Navigation 4</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
</div>
					<span class="smalltext"><a href="{$mybb->settings['contactlink']}">{$lang->bottomlinks_contactus}</a> | <a href="{$mybb->settings['homeurl']}">{$mybb->settings['homename']}</a> | <a href="#top">{$lang->bottomlinks_returntop}</a> | <a href="#content">{$lang->bottomlinks_returncontent}</a> | <a href="<archive_url>">{$lang->bottomlinks_litemode}</a> | <a href="{$mybb->settings['bburl']}/misc.php?action=syndication">{$lang->bottomlinks_syndication}</a></span>
				</div>
			</div>
			</div>
		<hr class="hidden" />
			<div id="copyright">
				<div id="debug"><debugstuff></div>
				<!-- MyBB is free software developed and maintained by a volunteer community.
					 It would be much appreciated by the MyBB Group if you left the full copyright and "powered by" notice intact,
					 to show your support for MyBB.  If you choose to remove or modify the copyright below,
					 you may be refused support on the MyBB Community Forums.

					 This is free software, support us and we'll support you. -->
{$lang->powered_by} <a href="http://mybb.com/" target="_blank">MyBB{$mybbversion}</a>, &copy; 2002-{$copy_year} <a href="http://mybb.com/" target="_blank">MyBB Group</a>.<br />
				<!-- End powered by -->
				<br />
<br class="clear" />
<!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}
		</div>
		</div>

Here's an example of the footer:

http://lotusprodigy.x10.mx/

effone

2014-03-31, 06:47 AM
Take your footer out of the container.

Kioshi

2014-03-31, 04:35 PM
(2014-03-31, 06:47 AM)effone Wrote: [ -> ]Take your footer out of the container.

Im not exactly sure what you mean by that? How would I do that?

effone

2014-03-31, 05:45 PM
Find the close divs (</div>) at the bottom of your footer template, put those at the top (at same footer template). Place one by one and try until your footer gets stretched.

Kioshi

2014-03-31, 06:04 PM
(2014-03-31, 05:45 PM)effone Wrote: [ -> ]Find the close divs (</div>) at the bottom of your footer template, put those at the top (at same footer template). Place one by one and try until your footer gets stretched.

I'm not exactly sure what you mean. Sad sorry I'm new to all these theme stuff..

<br />
			<div id="foot">
<div class="col">
<h3>Navigation 1</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
    <div class="col">
<h3>Navigation 2</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
    <div class="col">
<h3>Navigation 3</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
<div class="col">
<h3>Navigation 4</h3>
<ul>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
<li><a href="link 1">link 1</a></li>
<li><a href="link 2">link 2</a></li>
</ul>
</div>
</div>
				</div>
			</div>
			</div>
		<hr class="hidden" />
			<div id="copyright">
				<div id="debug"><debugstuff></div>
				<!-- MyBB is free software developed and maintained by a volunteer community.
					 It would be much appreciated by the MyBB Group if you left the full copyright and "powered by" notice intact,
					 to show your support for MyBB.  If you choose to remove or modify the copyright below,
					 you may be refused support on the MyBB Community Forums.

					 This is free software, support us and we'll support you. -->
{$lang->powered_by} <a href="http://mybb.com/" target="_blank">MyBB{$mybbversion}</a>, &copy; 2002-{$copy_year} <a href="http://mybb.com/" target="_blank">MyBB Group</a>.<br />
				<!-- End powered by -->
				<br />
<br class="clear" />
<!-- The following piece of code allows MyBB to run scheduled tasks. DO NOT REMOVE -->{$task_image}<!-- End task image code -->
{$auto_dst_detection}
		</div>
		</div>

effone

2014-03-31, 06:50 PM
At the beginning:

</div>
</div>

<br />
<div id="foot">
<div class="col">
.
.
.
.


and remove the last two :

</div>
</div>

at the end of the template.
Got it?

Kioshi

2014-03-31, 06:57 PM
(2014-03-31, 06:50 PM)effone Wrote: [ -> ]At the beginning:

</div>
</div>

<br />
<div id="foot">
<div class="col">
.
.
.
.


and remove the last two :

</div>
</div>

at the end of the template.
Got it?

Okay I got that but, it still has some space on the edges and at the bottom.

effone

2014-03-31, 07:00 PM
Snap???

Wild guess: its taking browser default spacings. Add these to your 'body' in global.css:

body {
margin: 0;
padding: 0;
.
.
.
.
}

Kioshi

2014-03-31, 07:03 PM
(2014-03-31, 07:00 PM)effone Wrote: [ -> ]Snap???

Wild guess: its taking browser default spacings. Add these to your 'body' in global.css:

body {
margin: 0;
padding: 0;
.
.
.
.
}

Well that managed to work for the space that was left over on the sides thanks, any idea how I can get it to cover the space left at the bottom of it? Smile

effone

2014-03-31, 07:20 PM
Well that must be line breaks. Remove the bold codes:

<br />
<!-- End powered by -->
<br />
<br class="clear" />

Make sure not to remove {$task_image} and {$auto_dst_detection}. Be double sure.
Pages: 1 2
MyBB Community Forums > Extensions > Themes > Theme Support > Expanding Footer