Publii theme tricks and tips – part 1

Make a Child Override theme for changes!

Yes, so Publii/Handlebars.js is a bit different to how WordPress works, still editing the base publii themes to suit your needs is a must. When Publii updates it installs the starter theme freshly each time.
Create a folder in your site input folder called ‘theme name-override’ and put your modified files there. I just copy the folder into documents/publii/sites/sitename/inputs/themes and add ‘-override’ on the end of the folder name.

Extra Menus, footers? specific pages? sure!

You will need to specify menu name and variable name in config.json, inside your Publii Theme;

"menus": {
        "mainMenu": "Main menu",
        "footerMenu": "Footer Menu"

And where ever you want your menu or menu-like content, for this example we’ll use partials/footer.hbs to render it in the footer of every page;

{{#if menus.footerMenu}}
    <ul class="footer-menu-1">
         {{> menu menus.footerMenu}}
         </ul>
      {{/if}}

adding an UL with class will help style it later.

Tag based and conditional CSS classes

You can set classes with a bit of Cascade Style Sheet trickery, but you can also have tags determine what that style can be. These are conditional, so it should not break the entire thing if there’s no tag set, it needs an IF statement. Something like this can go into your post.hbs file for each section you need custom styling on.

{{#if tags}}                                        
               {{#each tags}}
                  {{#if @first}}
                <div class="{{name}} element">
                  
         content of element.
      </div> {{/if}}
               {{/each}} {{/if}}

This will grab the first tag from a list of tags assigned to the post and write the element as ‘<div class=”tagname element”> stuff </div>’. If no tag is set, this div won’t render at all.

Masonry style gallery layouts

This can work on any type of gallery/content you can assign the class to, just add this to your CSS file and call your main image holding section, in your HTML file/template, with masonry class, and masonry-brick for elements below it.

.masonry {
    display: flex;
    flex-flow: row wrap;
    margin-left: -8px;
    width: 100%;}
.masonry-brick {
    flex: 1 0 25%!important;
    height: 250px;
    min-width: 150px;
    margin: 0 8px 8px 0;
}

Why Publii?

Publii is a quick and easy app allowing you to build fast static sites quickly and effortlessly, its currently BETA at the moment. Based off handlebars.js, but doesn’t throw it in your face until you feel brave enough to adjust things such as templates.

The promise of having a basic website up in under a minute is good, Though if you read any of my stuff you’ll realize that technical things isn’t the issue. Design and Creativity isn’t great with me.
It made sense to start learning it as after deployment, its pretty fast.

You can get the app at GetPublii.com , and I’m going to try and document adjustments what work when I’ve designed them and tested them as future tips and projects.

Advertisements