I am creating a custom theme based on Collective and I only have a few things I want to change, but I'm finding it difficult to locate the source of some of the CSS and HTML.
Specifically, line 63 in layout.html includes: {% include "nav" %}
And then in line 527 of theme.scss there is an @include of something called mobile-nav.
Where are those? The final minified theme.scss makes it very hard to figure out the source of these bits of code.
Hi Jason,
The Theme.scss and Layout.html files do indeed call upon other theme files using "@include" and "{% include %}" methods (respectively) to separate the theme into sections in an effort to make it easier to work with, but I can see how that might actually make it more confusing.
LAYOUT.HTML
In terms of the HTML (i.e. Layout.html), anytime you see {% include 'file' %} you can find that HTML file -- which we refer to as a 'partial' by going to Theme > Files and finding "_file.html". So the "nav" section can be found by locating the file called "_nav.html". Below is a very simplified visual that I've made of how the layout.html file is laid out:
So Layout.html pulls in _nav.html, _signup_form.html and either _columns_1.html or _columns_2.html (depending on whether or not the sidebar is enabled on a page). Then _columns_1.html and _columns_2.html both use {% yield %}, which just pulls in the HTML from the "Template" section of each page individually.
THEME.SCSS
As for the Theme.scss file, it similarly pulls in correspondingly named SCSS files from the "Files" section of your theme. The "Templates" section of your theme attempts to list the commonly edited files and gives names that describe what they control, but not every file from the "Files" section is listed in the "Templates" section. What is important to note about the SCSS is this:
The Theme.scss file is the main SCSS file for your site. Tablet-and-desktop.scss defines a few styles that should overwrite styles in theme.scss when you are viewing the site on a tablet or desktop computer. Some additional stylesheets are pulled in to define specific styles that are applied to tables, forms, buttons, etc.., but those are labeled in the "Templates" tab of your theme.
I hope this helps!
Thanks,
Brian Palmer
NationBuilder Theme Support Specialist
Showing 4 reactions
Sign in with
Totally, those are the most confusing parts. As for the first one, that’s on us. The template section was set up to show the most commonly edited theme files only, so as not to confuse someone who just wanted to edit something basic like their overall theme color or the template for all donation pages. In regards to the abbreviation for those included files, that is a liquid thing. Anytime that an HTML file uses the {% include %} tag, it is looking for a file that starts with an underscore, but the leading underscore should not be in the include tag itself.
Feel free to ask more questions as you have them! We know that this is confusing stuff so we’re here to help.
I think these two things are what makes it more confusing:
1. the fact that not every file from the “Files” section is listed in the “Templates” section. Why does “Templates” not list all of the components that are part of the theme?
2. the seemingly arbitrary abbreviation of file names that are being included, from _nav.html to nav — is this something inherent to Liquid?
Anyway, thanks again!