Using Liquid Tempting In CSS On Jekyll To Adjust Background Color Of Divs On A Per Page Basis
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: {% 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%;
}
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 -->
<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.
Post a Comment for "Using Liquid Tempting In CSS On Jekyll To Adjust Background Color Of Divs On A Per Page Basis"