An easy way to change the background color of Text-only Post Tiles.

[sgruss]

Our site features 4 primary colors and we like the layout of the text only post tile. What is the best way to add a specific or random color from a set of colors to text-only post tile? Thank you for the help.

[eddiesigner]

You can use tags to create color variables and then use those variables to change the background based on the tag of each post.

For example, let's say you have a post with the tag travel and another post with the tag food. In the Ghost Admin you can inject the following code:

<style>
    :root {
        --tag-travel: #e9c46a;
        --tag-food: #06d6a0;
    }

    .m-article-card.no-image.tag-travel .m-article-card__picture,
    .m-article-card.no-image.tag-travel .m-article-card__info,
    .m-article-card.no-image.tag-travel:before {
        background-color: var(--tag-travel);
    }

    .m-article-card.no-image.tag-food .m-article-card__picture,
    .m-article-card.no-image.tag-food .m-article-card__info,
    .m-article-card.no-image.tag-food:before {
        background-color: var(--tag-food);
    }
</style>

You will see that posts with the tag travel will have a background color of #e9c46a and posts with the tag food will have a background color of #06d6a0. You can add as many colors/tags as you want, you just need to copy and paste the same lines and replace the name of the tag. Just be aware that the tag names are case sensitive.

[eddiesigner]

I will close this issue for now, please feel free to reopen it if needed.

[sgruss]

This was really helpful. Thank you. Is there a way to also change the title font color at the same time. It' like the title font to always be the same as the theme. So Black #000 if dark theme or White #fff if light theme. The more subdued title colors don't look great with the colors I have chosen.

On Thu, Jun 10, 2021 at 2:08 AM Eduardo Gómez @.***> wrote:

You can use tags to create color variables and then use those variables to change the background based on the tag of each post.

For example, let's say you have a post with the tag travel and another post with the tag food. In the Ghost Admin you can inject the following code:

You will see that posts with the tag travel will have a background color of #e9c46a and posts with the tag food will have a background color of

06d6a0. You can add as many colors/tags as you want, you just need to

copy and paste the same lines and replace the name of the tag. Just be aware that the tag names are case sensitive.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/eddiesigner/liebling/issues/381#issuecomment-858452065, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUMGGTHEYFCAXWRXIEUA7WTTSB6JJANCNFSM46HFJJXA .