1

I want to apply custom CSS to 1 page and am wondering if there is an easy way to do either of the following:

-add some code to the Craft Template file that has the opening tag that can add an ID based on page slug

-or add a custom body id to any specific page within the "Entries" panel on the backend.

thanks in advance for any insight! Andy

2 Answers 2

1

Depending on how your template architecture is set up, it could be as simple as using the css tag...

{% css %}
/* Any CSS that applies only to this page */
.example {
    color: red;
}
{% endcss %}
1
  • You might want to add to your example with a field in the backend and {% css %}{{ entry.cssFieldMarkup }}{% endcss %} or {% if entry.id == ID %}{% css %}...{% endcss %}{% endif %}. @Andy: in general I always prefer to have the info in the entry as a field (your second approach). Commented Jun 22, 2023 at 11:59
0

Another option could be to add the entry id as a style hook and then scope your styles to that:

<body class="{% if entry %} entryId-{{ entry.id }}{% endif %}">

Then in your css simply target the ID, e.g: .entryId-19 { color: #bada55 }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.