How to customize pages with NGINX

A question I have been asked frequently is how I customize the proxied pages on my domain. Do I use custom builds? Built-in styling? Stylesheet injection? The answer is yes.

I like to use automated Unsplash backgrounds on everything, follow my specific color theme and styling, and adjust other small things to suit my taste and deliver a unified experience across all of my web apps. Where possible, I use the built-in tools and configurations of a project to set styling; or an addon, extension, or module. But not everything is built to accommodate such functionality.

In cases where a little elbow grease is required, the easiest method is to use stylesheet injection. This can be accomplished under Nginx with the sub_filter command. For example:

sub_filter </head>
  '<link rel="stylesheet" href="/static/css/custom.css"></head>';
sub_filter_once on;

This will add a new stylesheet before the </head> closing tag that affects the whole page. Then, depending on how the app is set up, I either add a file to the site under a custom directory that is already being served by the configuration, or add another location block to serve it directly:

location /static/ {
    alias /srv/www/someapp/static;
}

In that aliased directory on the filesystem will be the css/custom.css file structure. Nginx will serve it when visiting the its URI. Pretty straightforward.

“Okay but how do you make it?”

Whoa there little one, calm down. Take a deep breath.

Modifying site stylesheets is generally very easy with modern browser webtools/inspectors. Simply open the tools of your choice, find the elements you want to style, and use the sidebar to see what styles are applied. You can use that knowledge to write your own overrides.

And, yes, if you feel that didn’t go enough in depth and something is missing, you’re correct. You need to have a broad understanding of CSS before trying any of this. Those that do will surely already know how to use browser tools, so I didn’t go into much detail. Sadly, this article isn’t for your audience.