This QuickTip is very similar to the Custom CSS QuickTip but with one very important distinct difference, this is template specific custom CSS loading. And just like the Custom CSS QuickTip this is update safe so you will not lose this custom CSS when you update either Connections or the template.
The first thing you need is the template slug. You can find the template slug on the Connections : Templates admin page. The template slug will be shown in the Template Override section of the template description. See the screen capture below. The template slug for cMap would be “cmap”, without the quotes.
Now that you’ve identified the template’s slug, the first thing you need to do is create a new text file and name it {slug}-custom.css, replacing {slug} with the template’s. Using cMap as an example, the filename would be cmap-custom.css. Use your favorite text editor to add your custom CSS for the template and save the file.
Next you need to login to your site using FTP and upload your newly created CSS file.
You have several options on where to upload the file. These options are, in order of priority:
- ../wp-content/themes/{child-theme}/connections-templates/{slug}
- ../wp-content/themes/{parent-theme}/connections-templates/{slug}
- ../wp-content/connections-templates/{slug}
The connections-templates folder will not actually be in any of these folders. It is not created automatically. This means you need to create the folder before you can upload the file. The {slug} in the folder paths listed above would be replaced with the template’s slug. After creating the connections-templates you would create a new folder within it named as the template’ slug. Here is an example showing the theme path and filename for loading a custom CSS path for the cMap template:
..wp-content/themes/{parent-theme}/connections-templates/cmap/cmap-custom.css
Connections will load the file based on priority, basically this means first it’ll look for the file in the connections-templates/{slug} folder of the active child theme. If it is not found there, then it’ll look for the file in the connections-templates/{slug} folder in the activate parent theme. Finally it look for the file in the connections-templates/{slug} folder in the wp-content folder.
Which folder should you upload it to? Well that depends. If the custom CSS is a theme specific tweak, then I recommend adding it to either the child or parent theme. If it is just a basic tweak, then I recommend simply uploading it to the connections-templates/{slug} folder in the wp-content folder.
Bonus Tip:
Connections also supports loading custom CSS files based on 16 different contexts. Now, going over exactly what I mean by by this is well out scope for this QuickTip but I’ll give you a quick example…
When you are viewing a single entry, Connections will search the above paths for the {slug}-custom-single.css file. If found, when viewing any single entry, this file will be loaded instead of the {slug}-custom.css file. Just think of the possibilities, especially when combined with the Custom CSS QuickTip.