Lefty customization (rainbow/gradiation)

[meinterrupted]

When they did the newest code push, I kind of fell in love with the Lefty theme. It's clean and gorgeous, and I just adore it. But I also have a thing for gradiations and rainbows in layouts, so now I'm thinking. I know the code I need to do to make the changes, I just don't know where I need to put it and if I need to make a whole new style to do it.

Basically, what I need to do is create 5 or 6 new class ids for the LI that make up the top navigation (which are currently "module-list-item"--I was planning on going for the creatively named "module-list-item-2" etc.) and then change the background color on those classes. That would allow me to have a lovely rainbow or multiple shades of the same colors or whatnot.

So... do I need to make a whole new style/layer? I'm a premium paid account, so that itself isn't the issue. I used to be pretty fluent in S2, but it's been, uh, several years, and in between the code changes and my brain writing over that information with mostly useless trivia, I'm stuck.

ETA: This is what I've come up with. First you need to delete the hexcode colors from "Background color for the header navigation on current page" and "Background color for the header navigation on hover" under Header on the Colors panel of customization. Then add the following to your CSS code:

.module-navlinks li,
.module-navlinks li a {
background: #COLOR ONE HEXCODE;
}
.module-navlinks li + li,
.module-navlinks li + li a {
background: #COLOR TWO HEXCODE;
}
.module-navlinks li + li + li,
.module-navlinks li + li + li a {
background: #COLOR THREE HEXCODE;
}
.module-navlinks li + li + li + li,
.module-navlinks li + li + li + li a {
background: #COLOR FOUR HEXCODE;
}
.module-navlinks li + li + li + li + li,
.module-navlinks li + li + li + li + li a {
background: #COLOR FIVE HEXCODE;
}
.module-navlinks li + li + li + li + li + li,
.module-navlinks li + li + li + li + li + li a {
background: #COLOR SIX HEXCODE;
}
.module-navlinks li + li + li + li + li + li + li,
.module-navlinks li + li + li + li + li + li + li a {
background: #COLOR SEVEN HEXCODE;
}

This does make it hard to see if you're hovering over a link; I added the following bit of CSS to make the links underline when hovered: .module-navlinks li a:hover { text-decoration: underline;}

ETA2: Thanks to syntheid and ninetydegrees, I have sort-of figured out the customs CSS for this layout. My next question is closely related. Is there a way to link the color of the page header background to the color of the current page's link? E.g. on "recent" it would be green, "archive" yellow, "reading" red, etc.?

Comments

[foxfirefey]

There's a lot of newer CSS stuff that's usable now for things like this compared to a few years back!