Our clients who are active NationBuilder bloggers often need a tool to categorise their blog posts by tags and we solve this by using awesome plugins such as Isotope and MixItUp. Both are easy to use and look great so we thought we would share a quick tutorial for you to freshen up your NationBuilder blog pages with the MixItUp plugin.
View demo
Relevant Files
HTML: pages_show_blog.html, pages_show_blog_wide.html
SCSS: _mixitup_styles.scss
JS: jquery.mixitup.min.js
The problem?
The standard bootstrap blog page looks like this:
The solution?
1.FOR BOOTSTRAP BASE THEME: Download these 4 files and upload them all to your theme.
FOR CANDIDATE THEME: Download these 4 files and upload them all to your theme.
2. In the theme.scss file, import the _mixitup_styles.scss partial.
A screenshot of the theme.scss file (the new line to add is the final one visible in this image) or you can copy these styles in your own scss file.
3. In the layout.html file, include the JavaScript files just before the closing </body> tag
Add this JavaScript file directly before the closing </body> tag in the layout.html file
4. In the backend, make sure you upload a image file in the blog post pages files section, and that’s it.
Here is the live example site, visible at http://learn.codenation.com/blog
The plugin is free for personal work and for non-profit organisations otherwise make sure you purchase the relevant licence for MixItUp here.