shopify analytics ecommerce

Boxes, button bars and sidebars

Well, i've been busy doing behind-the-scenes stuff.

It started with the timetable page at Technopagan Yearnings. The boxes for the sabbats and the boxes for the passing days were based on the boxes that I used for the lexicon. In turn, those were based on the original me-quote boxes. The current me-quote boxes look very different.

Anyway, if I was going to tweak the boxes for the timetable, it was certainly time to standardize the class and use it for both the timetable and the lexicon.

And then when I started getting into the lexicon, I noticed that the internal quotes weren't doing what they used to do, probably because I was hand coding them. When I started looking at ways to fix that, I discovered that you can define the behavior of links, although it takes a special class to do it right. Then I learned that links have three states and each can be defined differently.

That meant a slight tweak at my lexicon and as long as I was fixing that I really should fix the timetable.

I'm very modular in my web design, even if it was clunky. For example, I use the h4 tab for the summary at all three blogs, and I use the class blurb to further modify on TPY and Pagan Vigil. I came up with a link class at TPY that underlines the link then grows slightly and gets bolder when the mouse hovers over it. For the broken links, the new broke class makes it a faint gray with a line through it, and then shrinks when the mouse hovers over it as if to say "don't click on me I don't work." After a bit of though and experimentation, it also loses the line, changes color, and gains a background when the mouse hovers. Then it was only natural that links to PV behave a little differently when the mouse hovers over them, they change font and get a little bolder.

Now I was confident enough to try a button row for the lexicon. I wanted each letter in turn. The grey faded out nicely against the green pattern I use everywhere at TPY. Hover over it and the button changes to white letters over technopagan green. Click it and it's a green outline with a green letter and no background.

After playing a bit, I found that the button row works best under each lexicon entry. It also looks unusual enough to pass as decoration at first glance.

Now I wanted to adapt the button bar to a cluster that I could pop in the sidebar. I would use the same design at TPY and PV, just using different backgrounds and colors. Well, tweaking with that, I decided to tackle the whole sidebar. I wanted the internal links to follow the same behavior.

RapidWeaver has one major glitch. The sidebar uses styled text, which means that spaces and returns are treated just as they would be in a word processing document. You can also drop in HTML and CSS tags. It makes it very hard to trouble shoot.

The RW theme I use at TPY capitalizes all the menu items and I wanted to show that in the sidebar items. But I wanted it to go back to normal when the mouse hovers. Simple enough to do, although it meant adding text-transform: none; to the hover state. Since I was inserting the category, year, and RSS feeds in the sidebar, I didn't need the LibraryThing and NeoWayland NetWork bits I had pasted (hacked) into the index page template. I could just add those to the sidebar.

I ended up copy-pasting the whole thing into BBEdit so I could fix a couple of things and make sure the code flowed. I inserted some HTML comments so I could tell what was what. Then I had to take out all the uncoded spaces so the sidebar would look right.

And that brings us mostly up to date. Oh, I learned to do lists too.
blog comments powered by Disqus