In this QuickTip I’ll explain how to have Connections enqueue a custom CSS file that contains your CSS tweaks in an update safe way. Here’s how…
- The first thing you need to do is create a new text file and name it cn-custom.css. Use you favorite text editor to add your Custom CSS for Connections and save the file.
- Next you need to login to your site using FTP and upload your newly cn-custom.css created file.
You have several options on where to upload the file. These options are, in order of priority:
First, I need to mention… the connections-templates folder will not actually be in any of these folders. It is not created automatically. So, this means you need to create the folder before you can upload the file.
Connections will load the file based on priority, basically this means first it’ll look for the file in the connections-templates folder of the active child theme. If it is not found there, then it’ll look for the file in the connections-templates folder in the activate parent theme. Finally it look for the file in the connections-templates 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 folder in the wp-content folder.
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 cn-custom-single.css file. If found, when viewing any single entry, this file will be loaded instead of the cn-custom.css file. Just think of the possibilities…