Hi everyone,
I hope everyone reading this is safe and well, wherever in the world you are. First off, apologies for the delay in feature development for Champ. As most of you are probably experiencing in your local region, there have been a lot of disruptions in our daily lives due to COVID-19. I will try my best to add additional features to Champ during this time.
Today, I added a new feature, as requested by @brett.
You can now add an additional column in the main
area of the page. This feature is a bit advance, and so feel free to ignore this post if you don't feel comfortable with:
- HTML
- Liquid snippets
- CSS / JavaScript
Note that this is not a feature for everyone. It is there if you need it, but it is not necessary to use Champ. I cannot help you in customizing this sidebar, but it is there should you need the layout flexibility.
Having given the proper warnings and disclaimers, let's get on with how to use this.
Let's take a look at the finished product:
What we're trying to do is add an additional sidebar to the left (or right) of the main content area.
To do this, you will need to create TWO snippets:
- champ-layout-definitions
- champ-secondary-sidebar
In the Champ layout definitions, you can define the columns for the Primary sidebar and Main content (Primary content) areas. Champ uses Bootstrap 4 as its base CSS framework, so you can read up about how to do that here: https://getbootstrap.com/docs/4.4/layout/overview/
You will define the classes that Champ uses to render the Primary Sidebar and Content columns. Note that all responsive classes will work, so you should use these in mind:
eg. col-12 col-md-8 (This will use the full width by default, and an 8
column width for medium width screen sizes) -- again, these instructions are on the Bootstrap website.
Here is an example of all the variables you need to assign in the champ-layout-definitions:
{% assign primary_sidebar = "col-12 col-md-3" %}
{% assign primary_content = "col-12 col-md-9" %}
{% assign show_secondary_sidebar = true %}
{% assign inner_primary_content = "col-12 col-md-8 order-2 order-md-2" %}
{% assign inner_secondary_sidebar = "col-12 col-md-4 order-1 order-md-1" %}
{% assign secondary_sidebar_visibility = "home, topics, posts" %}
{% assign footer_content = "col-12 col-md-8" %}
{% assign footer_content_enabled = "col-12 col-md-8" %}
- primary_sidebar: defines the column for the main sidebar
- primary_content: defines the column for main content area
To enable the secondary sidebar section, set show_secondary_sidebar as true. This will divide up the main content area into an inner
sidebar and content area, which you can further define with inner_secondary_sidebar and inner_primary_content.
Next up, you can define which pages this secondary sidebar will appear on:
- home
- topics pages
- individual post pages
And finally, to match your above layout, you can define what the footer area looks like. Again, there are two variables: footer_content and footer_content_enabled.
The footer_content is when the secondary sidebar is NOT shown, and the footer_content_enabled is when it IS shown.
So with all that out of the way, you can use this secondary sidebar to create an affixed
sidebar, by leveraging some JavaScript or an external library or even plain CSS, such as these:
- https://abouolia.github.io/sticky-sidebar/
- Use CSS! position: sticky
Next, you need to create a snippet called champ-secondary-sidebar to add the content you want. In here, it's just plain HTML. You can add JavaScript or CSS as well, by wrapping them in <script></script> and/or <stylesheet></stylesheet> tags, as usual.
Have fun with this.
