Danny McWilliams

Danny McWilliams

Just an update: spflforum.com will be closing fully in about 11 days (it's all but shut now, almost everything removed). Just so you don't have a dead link in there when I shut the site down.

Danny McWilliams

Redactor is one of the best plugins. Would love to see it updated.

Danny McWilliams

@Dawid-Glomba said in Who is using NodeBB?:

crox.pl - This website is for sale! - Resources and Information.

Really like the way you've adapted the theme. Simple, but very effective.

Danny McWilliams

Unless anyone is going to start ripping other people off there's unlikely to be any doors being burst open by feds.

As a British Scottish person, that felt odd saying "feds".

Danny McWilliams

I currently use TwitterFeed to do mine. It's been around a few years and has some good options for filtering and when to fetch topics and so on. Also caters for Facebook and LinkedIN, though I can't say i've had much experience trying them. It uses your RSS feeds to get new topics.

Personally I'd prefer a built-in option but it does the job.

Danny McWilliams

I'm thinking that by defining a background in that template it's showing fine (and looks great), however in the others (categories, recent, etc) it's not been told not to display it.

Would defining no background image specifically on those templates - or a template which all use - not eliminate it?

There might be an easier route, but that's how i'd assume it's staying there.

Danny McWilliams

I use Persona but Lavender is great. The Material theme is an excellent theme too.

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.

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.

Danny McWilliams

@julian it's really only noticed when typing a long post or copying quotes from a newspaper article in, most posts are short so it's not a big issue.

Danny McWilliams

@Danny McWilliams

Posts made by Danny McWilliams

Social media button alignment

The Copyright text