Thread

On the homepage of my website, article summaries are posted. Each article summary has its own background color, but these colors are only visible on devices smaller than 768px. For proper appearance I have five colors that I want to display, with color #1 always being attached to the most recent post, color #2 to the next most recent post, color #3…, color #4…, color #5…, and then I want to repeat the cycle as many times as is necessary when more than 5 previews are displayed.

How do I set up the background colors to display Color #1 through Color #5 and then repeat Color #1 through Color #5 completely independent of the article previews?

Thanks,
MikeCJ

Sounds like a good use for the “switch” variable…

I’ll even throw in some sample code 😊

Using SWITCH this will alternate between the 5 colour styles…

{exp:channel:entries channel="mychannel"}
<article class="{switch='color1|color2|color3|color4|color5'}">
{summary}
</article>
{/exp:channel:entries}

see below

see below

I apologize for the 2 ‘see below’ posts. I couldn’t get the code to render on the post. Please substitute ‘style’ in the place of the asterisk in each code sample below. The forum won’t seem to accept the word ‘style’ in the code tags:

Here’s the code (opening div) from the static page that defines the background color for each article preview:

<div class="row hentry light" *="background-color: #e6e65c;">

This code is repeated with a different color for each article preview.

Here’s how I applied the “switch” variable:

<div class="row hentry light" *="background-color: {switch= “#e6e65c|#CCFF66|#ffc100|#c2c2a3”};">

But the background colors are not rendering.

I don’t know how to check the source code on a mobile device.

Thanks,
MikeCJ

I have solved this problem. Thank you for your help.

Thanks,
MikeCJ