Using liquid tempting in CSS on Jekyll to adjust background color of divs on a per page basis

Question

I'm using Jekyll and Liquid for my website.

I've been completely stuck on using liquid in the CSS to compile correctly. I'm trying to use different colors for the borders of each page, and have the default set to black.

I appreciate any insight y'all may have.

   #splash {width: 100%; height: 10%;}
   #splash background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %}

<div id= "splash"> </div>

In my opinion there are less complicated ways for that, put this one line of CSS in `` of each page or use an `id` for each page an use that for styling as usual. — ata, Mar 01 '17 at 07:45

score 0 · Answer 1 · answered Mar 01 '17 at 10:02

0

You need to 2 rows of --- at the top of your file for it to compile correctly.

Source: https://jekyllrb.com/docs/assets/

You also need to add { around your css code for the background-color.

---
---

#splash {
    width: 100%; height: 10%;
}

#splash {
    background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
}

Alternatively you can just merge the 2 CSS statements like so:

---
---

#splash {
    background-color: {% if page.accent %}{{ page.accent }}{% else %}{{ black }}{% endif %};
    height: 10%;
    width: 100%;
}

answered Mar 01 '17 at 10:02

Harry Mumford-Turner

856
10
17

Thanks for catching the "{"! I'm still getting a page build failure after adjusting the code. Invalid CSS after "...f page.accent %": expected "{", was "}{{ page.accent..." – Anna Gardner Mar 01 '17 at 19:35
Also, I've gone through the CSS file and double checked and I don't seem to be having any issues with any syntax, it appears to be an issue with the CSS reading the liquid templating. I saw that in other posts that inserting YAML at the top of the CSS had been useful but I'm not familiar with YAML, so my attempts at generically hacking that into the top of the page were not successful. – Anna Gardner Mar 01 '17 at 19:45
@AnnaGardner To make the Liquid compiler recognise your liquid syntax in the CSS you need to add the 2 sets of 3 - at the top of the file (as mentioned above). I also cannot seem to find the page.accent object anywhere in the Liquid reference, perhaps that's the issue? https://help.shopify.com/themes/liquid/objects/page – Harry Mumford-Turner Mar 01 '17 at 21:34
sorry, forgot to add that I added the '---'x2 in the top of the css and I still got the page failure. I created the page.accent object. {{page.accent}} was able to work in the markdown so maybe putting a style sheet in the markdown would be the best workaround? – Anna Gardner Mar 02 '17 at 00:48
I got it to work in the html! Not the best solution, but it works! – Anna Gardner Mar 02 '17 at 01:59

Mr. Hugo · Answer 2 · 2017-03-02T08:04:59.613

Linked stylesheets are not meant to be page-specific, so this is not the right way to go. I would also NOT merge page-specific and website-specific CSS. Adding an id in the websites stylesheet for every page you create (now and in the future) seems unlogical too.

My advice is to create a layout file in the _layout directory, called page.html. Make it look like this:

<html>
<head>
<!-- website-specific CSS goes here -->
<link rel=stylesheet href="style.css" type="text/css">
<style>
  /* page-specific CSS goes here */
  #splash {
    background-color: {% if page.accent %}{{ page.accent }}{% else %}black{% endif %};
  }
</style>
</head>
<body>
<div id="splash"></div>
</body>
</html>

Add your website-specific/normal CSS to your stylesheet. The page-specific CSS in the head will overwrite this. Then create a index.md file like this:

---
accent: red
layout: page
---
content

Note that you do not have to set the layout in every page when you set defaults, see: front matter defaults.

Using liquid tempting in CSS on Jekyll to adjust background color of divs on a per page basis

2 Answers2

Linked