Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jekyll / Liquid

Using Liquid Tempting In Css On Jekyll To Adjust Background Color Of Divs On A Per Page Basis

Post a Comment
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

Solution 1:

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: {%ifpage.accent%}{{ page.accent }}{%else%}{{ black }}{%endif%};}

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

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

Solution 2:

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 --><linkrel=stylesheethref="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><divid="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:redlayout:page---content

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

Post a Comment for "Using Liquid Tempting In Css On Jekyll To Adjust Background Color Of Divs On A Per Page Basis"