Zebra stripes evolved

movzx

We have our own homebuilt CMS that was designed and implemented by a single person (long since gone from the company). The CMS "works" well enough, but it is very clunky to use. It uses "AJAX" for the sake of using it, it is tedious to find stuff, caching issues, etc.

I was tasked with adding a feature to the CMS to compliment new feature we were rolling out. There's WTF code all over the place, of course, but sometimes things just jump out at you.

li.topic li.topic,
li.topic li.topic li.topic li.topic,
li.topic li.topic li.topic li.topic li.topic li.topic,
li.topic li.topic li.topic li.topic li.topic li.topic li.topic li.topic,
li.topic li.topic li.topic li.topic li.topic li.topic li.topic li.topic li.topic li.topic{
	background: #558;
}

li.topic,
li.topic li.topic li.topic,
li.topic li.topic li.topic li.topic li.topic,
li.topic li.topic li.topic li.topic li.topic li.topic li.topic,
li.topic li.topic li.topic li.topic li.topic li.topic li.topic li.topic li.topic{
	background: #546A94; 
}

derula

@movzx said:

We have our own homebuilt CMS that was designed and implemented by a single person (long since gone from the company). The CMS "works" well enough, but it is very clunky to use. It uses "AJAX" for the sake of using it, it is tedious to find stuff, caching issues, etc.

Reminds me of my own CMS (which I started to write from scratch a while ago with PHP5, but I don't really think I'll finish that). Although in the latest version the caching issues were reduced to a minimum, and the "AJAX" was more then just pointless (it was used to post comments. Then it reloaded the page to make the comment visible. Yeah, shut up.)

savar

Haha... alternating row colors for some kind of nested structure?

I'm impressed that it's done in CSS. I would have expected an ASP script that emits FONT tags.

This doesn't seem too ridiculous, actually. What did you replace it with?

mendel

One would assume that if the CMS is homegrown that whatever creates the list can add class="odd" or class="even" to those tags.

And the subject might be a misnomer, because it wouldn't generate zebra stripes unless the indents were strictly alternating, like this:

light

dark

light

dark

or like this

light

dark

light

dark

Of course the latter pattern is pretty wtf in itself if it's a simple list of topics.

If it was a straight list, and a greenbar-like striping had been intended, and if you did not have control over the HTML generation, you could use CSS2 with an "adjacent sibling" + selector, such as

li.topic, li.topic + li.topic + li.topic { background: #546A94; }

li.topic + li.topic, li.topic + li.topic + li.topic + li.topic { background: #558; }

CSS specificity rules should ensure that the line with the most matching li.topic in it (i.e the one that fits best) is used for display. The advantage over a scripted solution is that it works even when scriptingis turned off in the browser (but would the CMS work at all then?).

amischiefr

Well, I have to say that I like your solution for alternating colors better than the one I saw here at my work:

.WhiteRow
{ FONT-FAMILY: verdana, arial, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT:normal;
COLOR: #000;
height:"20";
background-color: #F9F9ED
}

.WhiteRow A:link
{ COLOR: #00F; }

.WhiteRow A:visited
{ COLOR: #00F; }

.WhiteRow A:hover
{ COLOR: #F00; }

.WhiteRow A:active
{ COLOR: #930; }

.WhiteRowSmallText
{ FONT-FAMILY: verdana, arial, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT:normal;
COLOR: #000;
background-color: #F9F9ED }

.WhiteRowSmallText A:link
{ COLOR: #00F; }

.WhiteRowSmallText A:visited
{ COLOR: #00F; }

.WhiteRowSmallText A:hover
{ COLOR: #F00; }

.WhiteRowSmallText A:active
{ COLOR: #930; }

.WhiteRowRed
{ FONT-FAMILY: verdana, arial, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT:normal;
COLOR: #F00;
background-color: #F9F9ED }

.WhiteRowGreen
{ FONT-FAMILY: verdana, arial, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT:normal;
COLOR: #080;
background-color: #F9F9ED }

.GrayRow
{ FONT-FAMILY: verdana, arial, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT:normal;
height:"20";
COLOR: #000;
background-color: #E0E0E0 }

.GrayRow A:link
{ COLOR: #00F; }

.GrayRow A:visited
{ COLOR: #00F; }

.GrayRow A:hover
{ COLOR: #F00; }

.GrayRow A:active
{ COLOR: #930; }

.GrayRowSmallText
{ FONT-FAMILY: verdana, arial, sans-serif;
FONT-SIZE: 11px;
FONT-WEIGHT:normal;
COLOR: #000;
background-color: #E0E0E0 }

.GrayRowSmallText A:link
{ COLOR: #00F; }

.GrayRowSmallText A:visited
{ COLOR: #00F; }

.GrayRowSmallText A:hover
{ COLOR: #F00; }

.GrayRowSmallText A:active
{ COLOR: #930; }

.GrayRowRed
{ FONT-FAMILY: verdana, arial, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT:normal;
COLOR: #F00;
background-color: #E0E0E0 }

.GrayRowGreen
{ FONT-FAMILY: verdana, arial, sans-serif;
FONT-SIZE: 12px;
FONT-WEIGHT:normal;
COLOR: #080;
background-color: #E0E0E0 }

derula

@amischiefr said:

.WhiteRow, .GrayRow { height:"20" }

.WhiteRow, .WhiteRowSmallText, .WhiteRowRed, .WhiteRowGreen,
.GrayRow, .GrayRowSmallText, .GrayRowRed, .GrayRowGreen {
font-family:Verdana,Arial,sans-serif;
font-size:12px;
font-weight:normal;
color:#000;
background-color:#F9F9ED
}

.WhiteRowSmallText, .GrayRowSmallText { font-size:11px }
.WhiteRowGreen, .GrayRowGreen { color:#080 }

.WhiteRow a:link, .WhiteRowSmallText a:link,
.WhiteRow a:visited, .WhiteRowSmallText a:visited,
.GrayRow a:link, .GrayRowSmallText a:link,
.GrayRow a:visited, .GrayRowSmallText a:visited {
color:#00F
}

.WhiteRowRed, .WhiteRow a:hover, .WhiteRowSmallText a:hover,
.GrayRowRed, .GrayRow a:hover, .GrayRowSmallText a:hover {
color:#F00
}

.WhiteRow a:active, .WhiteRowSmallText a:active,
.GrayRow a:active, .GrayRowSmallText a:active {
color:#930
}

Refactored that for you. Even left the height:"20" in there, you know, so it doesn't magically break anything.

lolwtf

@mendel said:

you could use CSS2 with an "adjacent sibling" + selector

Can we use those yet or is IE still living in the early 90s?

dhromed

@lolwtf said:

@mendel said:
you could use CSS2 with an "adjacent sibling" + selector
Can we use those yet or is IE still living in the early 90s?

IE8 supports it, IE7 I'm not sure of, and IE6 does not.

You need to work out for yourself if IE6 is a problem for you.

amischiefr

@derula said:

Refactored that for you. Even left the height:"20" in there, you know, so it doesn't magically break anything.

Great, thanks. I'll post some other ~~work~~ code wtf's on here later, ~~when can you have them done by?~~ for your assument.

movzx

@savar said:

Haha... alternating row colors for some kind of nested structure?

I'm impressed that it's done in CSS. I would have expected an ASP script that emits FONT tags.

This doesn't seem too ridiculous, actually. What did you replace it with?

Yeah, it's a nested tree of content. I didn't replace it with anything, because if I did I would get chewed out for unnecessary code changes. :( When the day comes it will be replaced with a nice "alt-color" class.

@mendel said:

And the subject might be a misnomer, because it wouldn't generate
zebra stripes unless the indents were strictly alternating, like this:

You are correct. It was just the best title I could think of at the time.

@mendel said:

The advantage over a scripted solution is that it works even when scriptingis turned off in the browser (but would the CMS work at all then?).

Good question. Lots of our forms, searching, etc relies on poorly coded javascript that breaks key functionality when it is turned off. I suspect the CMS is no different (This is my first time digging into the internals)

aihtdikh

@dhromed said:

You need to work out for yourself if IE6 is a problem for you.

I think it's safe to say that IE6 is a problem for everybody.

snover

@movzx said:

When the day comes it will be replaced with a nice "alt-color" class.

Depending upon how long it takes for the day to come, you might be able to use :nth-child(odd) instead by then. :)

@aihtdikh said:

I think it's safe to say that IE6 is a problem for everybody.

QFT.