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

[syntheid]

If you don't want to mess with S2, you could just use sibling selectors in css to make the backgrounds different? .module-list li is the first, .module-list li + li the second, etc.

[meinterrupted]

I ... am not sure what you mean there. (Wow, I feel really dumb.) I've been looking at the code some more, and I almost think I'll have to go into the base HTML, because pretty much everything is coded via lists--the entire sidebar is multiple lists, as are the bits and pieces of the entries.

[ninetydegrees]

They meant you can add custom CSS to change the background color of each link like so:

.module-list li,
.module-list li a {
background-color: #000;
}

.module-list li + li,
.module-list li + li a {
background-color: #666;
}


.module-list li + li + li,
.module-list li + li + li a {
background-color: #999;
}

etc.

Alternatively, each link has its own class already (.recent, .archive, etc.) so you could use that (but that probably implies restyling some other things).

[syntheid]

Ahh, sorry... basically the "+" is called a sibling selector-- if you have a piece of code that's like element + next-element it tells the CSS to look for element (aka in this case .module-list li which is any li in the list with class module-list) and then find whatever is right next to it that matches next-element (aka li, so whatever li follows the initial one) and then if you keep chaining li + li + li will only affect the 3rd and following. Does that make more sense? If you're using a unique class/id it won't affect any other lists on the page. So you'll have a bunch of statements like:

.module-navlinks li {
  background: #000;
}
.module-navlinks li + li {
  background: #222;
}
.module-navlinks li + li + li {
  background: #444;
}
.module-navlinks li + li + li + li {
  background: #666;
}
.module-navlinks li + li + li + li + li {
  background: #888;
}
.module-navlinks li + li + li + li + li + li {
  background: #aaa;
}
.module-navlinks li + li + li + li + li + li + li {
  background: #ccc;
}

Except styled the way you want, of course.

[meinterrupted]

Okay, yes, that does make more sense! I will try that out on the custom CSS bit and see if it changes anything further down on the page.

[foxfirefey]

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

[momijizukamori]

Not actually an answer to your question, but this is a really fun idea, and I'm tempted to play around with some official styles that use it!

[meinterrupted]

\o/

I'm such a sucker for gradients and rainbows. I'm almost 30 years old, and if I get my hands on crayons or colored pencils, invariably, the first thing I draw is a rainbow.

[momijizukamori]

I'm fond of them too :D And tone-on-tone gradients especially (see, uh, half the themes for Corinthian and Strata >_>)

[syntheid]

There are classes on body that denote which page you're on-- .page-recent, .page-archive, .page-read and so on. So you could use those to style the headers on a per-page basis. I'm not entirely sure which part of the header you want to have match the background, but something like .page-recent #header { background: #COLOR; } should work if you're talking about the bit that's currently blue.

[meinterrupted]

Oh, that's fabulous! That totally works! Thank you!!!