Thread

For my article previews on my home page I want to alternate background colors. I don’t want the background colors tied to any content; I just want to set up a sequence of colors that will repeat when necessary, as many times as necessary.

Could someone please send some sample code using the switch variable with, say, a few colors inserted? I need to see what the entered code looks like. So far I’ve only been able to render white when I try to use the switch variable.

Thanks,
MikeCJ

v2.5.0 - Build Date: 20120507

You could apply the colours as inline CSS or classes/ID’s - whichever works for you, eg

Inline:

{exp:channel:entries channel="news"}
<article s t y l e ="color: {switch='red|green|blue'}">
{title}
</article>
{/exp:channel:entries}

By class:

{exp:channel:entries channel="news"}
<article class="{switch='class1|class2|class3'}">
{title}
</article>
{/exp:channel:entries}

Thank you so much for your response. At first I thought that I probably had a CSS conflict, so I stripped the styling from the div and played around with your sample code until I had a sequence of background colors.

Here’s the div I started off with from the static page where each article summary had a different color:

<div class="row hentry light" s t y l e="background-color: #e6e65c;">

Then I realized that I had used double quotes inside the switch variable and that I had followed up the switch variable with a colon—similar to the code for the static page. Here’s the exact code as I pulled it from being commented out. This code rendered all white:

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

So I pulled out the semi-colon and replaced the double quotes with single quotes and everything worked as intended:

<div class="row hentry light" s t y l e="background-color: {switch='#e6e65c|#CCFF66|#ffc100|#c2c2a3'}">

Then I put the double quotes and the semi-colon back in one at a time so I could determine the culprit. What has me baffled is that the original code that rendered white would now render the colors as intended. Any ideas?

P.S: By the way, I have yet to be able to post any code with “style” in it, until I noticed that you had separated the letters “s t y l e.” Thanks for that tip as well.

Thanks,
MikeCJ

Then I put the double quotes and the semi-colon back in one at a time so I could determine the culprit. What has me baffled is that the original code that rendered white would now render the colors as intended. Any ideas?

P.S: By the way, I have yet to be able to post any code with “style” in it, until I noticed that you had separated the letters “s t y l e.” Thanks for that tip as well.

Glad you got it sorted.

Sometime double quotes inside a double quote won’t work, sometimes it does. As a rule if something is inside double quotes I use single quotes, hence style=”{switch='red|green|blue'}” - you get the idea.

If you get a syntax conflict the SWITCH statement won’t actually parse and your classes/styles won’t be output (check the outputted HTML to see if it’s there), in this case there won’t be any styling applied and it will default to a parent elements colour, in your case white.

When entering a forum post CODE snippet the forum strips out style= from the post, that may be intentional (same as SCRIPT tags) or a bug! 😊