Anyone Know Any?

TylerGamesTV

I just wanna know...

If anyone knows any forum footer html formats...

Danny McWilliams

You can use bootstrap if you're just wanting to add simple html footers with content.

Check my site, i've added this to give three even columns in an HTML widget in the footer area.

You could change classes and style it as you wish afterwards. Here's a responsive three column footer.

 <div class="row">
   <div class="col-sm-4">Column One!</div>
   <div class="col-sm-4">Column Two!</div>
   <div class="col-sm-4">Column Three!</div>
</div>

Bootstrap reference: https://getbootstrap.com/examples/grid/

See it on my forum now:

http://spflforum.com/

As for adding widget areas to a theme, that's another thing entirely - but I don't see it being difficult.

TylerGamesTV

@Danny-McWilliams said:

You can use bootstrap if you're just wanting to add simple html footers with content.

Check my site, i've added this to give three even columns in an HTML widget in the footer area.

You could add classes and style it as you wish afterwards. Here's a responsive three column footer.
 <div class="row">
   <div class="col-sm-4">Column One!</div>
   <div class="col-sm-4">Column Two!</div>
   <div class="col-sm-4">Column Three!</div>
</div>
Bootstrap reference: https://getbootstrap.com/examples/grid/

See it on my forum now:

http://spflforum.com/

As for adding widget areas to a theme, that's another thing entirely - but I don't see it being difficult.

I kinda want something fancy as in this one is like, foow us on twitter and stuff...

TylerGamesTV

@Danny-McWilliams said:

You can use bootstrap if you're just wanting to add simple html footers with content.

Check my site, i've added this to give three even columns in an HTML widget in the footer area.

You could change classes and style it as you wish afterwards. Here's a responsive three column footer.
 <div class="row">
   <div class="col-sm-4">Column One!</div>
   <div class="col-sm-4">Column Two!</div>
   <div class="col-sm-4">Column Three!</div>
</div>
Bootstrap reference: https://getbootstrap.com/examples/grid/

See it on my forum now:

http://spflforum.com/

As for adding widget areas to a theme, that's another thing entirely - but I don't see it being difficult.

If you look on my forum it is kinda weird...

My Forum:
https://tyler-enderdevs.c9users.io/

Danny McWilliams

On this forum, there's just a bank of social media buttons and the copyright notice, which is just HTML with links.

I've just recreated the social media buttons on my own site, and I'll post how to add them horizontally, lined up. It might not be what you're after, but it'll at least show you.

Facebook & Twitter's buttons infamously don't sit well together, and you need to get them side-by-side. So this will explain how to do that.

Social media button alignment

You need to grab the code for your Facebook and Twitter buttons from their sites.

Edit theme

First of all, the Facebook code has two sections. There's a script to be called in the Body tag of the forum's theme HTML. You'll need to add that to header.tpl in your theme folder. Paste it in after:

<body class="{bodyClass}">

Save, and exit.

Open a new HTML Widget in ACP > Extend > Widgets and add to Global Footer. Now, I'm adding a couple of div containers to hold each button, with another wrapping them both up.

If you add the official Twitter and Facebook buttons, as they are, they don't align properly. So I added some code.

The structure looks like this:

 <div class="social">
    <div class="twitter">Add your Twitter button code in here</div>
    <div class="facebook">Add your Facebook button code in here</div>
</div>

So, for my forum, the code looks like this:

<div class="social">
    <div class="twitter"><a href="https://twitter.com/OnlyAnExcuse" class="twitter-follow-button" data-show-count="false">Follow @OnlyAnExcuse</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
    <div class="facebook">
        <div class="fb-like" data-href="https://facebook.com/OnlyAnExcuse" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
    </div>
</div>

Once that's done, save your widgets page. Still one bit to do.

Styling it

Go to ACP > Appearance > Custom HTML/CSS, and choose Custom CSS

I used the following code to line up the buttons, space them a little and centre them.

.social {
text-align:center; 
margin-left:auto;
margin-right:auto;
} /* Aligns the buttons in the centre of the page */

.twitter {
display: inline-block;
vertical-align: middle;
margin:4px 4px 0 0;
} /* Aligns buttons next to each other. Margin compensates for misaligned buttons */

.facebook {
display: inline-block;
vertical-align: middle;
}

That's that done. You should have two social media buttons aligned together like those at the bottom of the page. If you add more (pinterest or G+ for example), add another class, and copy the display and vertical-align over to them. Use margin to align if required.

The Copyright text

You can use a Text widget in the Footer area, or HTML. Entirely up to you. I used HTML.

ACP > Extend > Widgets > add the HTML widget to footer.

Code:

<div class="social">Copyright &copy; 2016 <a href="OnlyAnExcuse.com">OnlyAnExcuse.com</a></div>

As you can see, I just reused the "social" class for centering the text.

phit

@Danny-McWilliams said:

The Copyright text

You can use a Text widget in the Footer area, or HTML. Entirely up to you. I used HTML.

ACP > Extend > Widgets > add the HTML widget to footer.

Code:
<div class="social">Copyright &copy; 2016 <a href="OnlyAnExcuse.com">OnlyAnExcuse.com</a></div>
As you can see, I just reused the "social" class for centering the text.

this would do the same thing and doesn't require any custom css ;)

 <footer id="footer" class="container footer">
      <div class="copyright">
           Copyright &copy; 2016 <a href="OnlyAnExcuse.com">OnlyAnExcuse.com</a>
      </div>
 </footer>

a_5mith

@TylerGamesTV said:

If you look on my forum it is kinda weird...

My Forum:
https://tyler-enderdevs.c9users.io/

Nice scrolling text...

@a_5mith got me instant eye cancer.
By the way, here a "classic" footer (this is my entire footer.tpl):

		</div><!-- END container -->
	</main>

	<div class="hide">
	<!-- IMPORT 500-embed.tpl -->
	</div>


	<div class="topic-search hidden">
		<div class="btn-group">
			<button type="button" class="btn btn-default count"></button>
			<button type="button" class="btn btn-default prev"><i class="fa fa-fw fa-angle-up"></i></button>
			<button type="button" class="btn btn-default next"><i class="fa fa-fw fa-angle-down"></i></button>
		</div>
	</div>
	<div align="center">
       <!-- Calling ad code -->
	<!-- IMPORT partials/ads_footer.tpl -->
	</div>
	<div component="toaster/tray" class="alert-window"></div>

<div id="footer" class="">
    <div class="container centered-text">
	<script>
		require(['forum/footer']);
	</script>
<br>
        <p class="text-muted text-center credit">Created with <i style="color:red" class="fa fa-heart"></i> by YOURNAME.</p>
        <p class="text-muted text-center credit">&copy; 2013-2016 NAMEOFYOURSITE - All rights reserved.</p>
	<p class="text-muted text-center credit">Powered by <a href="https://nodebb.org">NodeBB</a>.</p>
</div>
</div>
<script type="text/javascript"  charset="utf-8">
SOMEADBLOCK SCRIPT
</script>
</body>
</html>

Here the custom CSS, which I've added to the AdminCP:

#footer {
  height: 120px;
  background: #1d2120;
  border: 0px;
  margin-top:50px;
  z-index:100;
  color: #FFF;
}

TylerGamesTV

@a_5mith said:

@TylerGamesTV said:

If you look on my forum it is kinda weird...

My Forum:
https://tyler-enderdevs.c9users.io/

Nice scrolling text...

LOL Thanks. Had to get a reset on it though :/

TylerGamesTV

I got it setup
Take a look
https://tyler-enderdevs.c9users.io/recent

a_5mith

@TylerGamesTV You not paid your hosting bill? :p 404