Search code examples
csshugo

Can I apply a custom CSS style to a specific post?

The css properties of a post are related to post and post-content classes if I am not wrong so if I override some of their properties this will apply to all posts in my site.

I would like to apply apply some css properties only to a particular post, how can I do this?

Solution

  • Here are two ways to do it:

    Solution 1: extra css file

    The nicest way to do this is with page resources. You can walk over the files in the page bundle and look for a CSS file. You should then add the CSS file to your head/content using:

    {{ with .Resources.GetMatch "*.css" }}
  <style>{{ .Content | safeCSS }}</style>
{{ end }}

    Solution 2: body class

    A simpler (but messier) way is to add a class to your body. This looks like this:

    <body class="{{ with .File }}{{ .BaseFileName }}{{ end }}">

    This will add a class to the body with the slug of your page. This way you can apply page specific styling, by adding rules to your main stylesheet.