New Styles
Website December 13th, 2004 |I’ve done very little posting or reading over the weekend, and I’m up way too late tonight (tomorrow morning is really going to suck), but it’s all for a good cause — well, okay, depending on how you define that — as there are now two new stylesheets available in the switcher over to the right.
The first is “Simple Green”. There’s really not a whole lot to look at, as I was mainly using it to play with a couple ideas that I had but wasn’t sure if I could quite get them to work correctly or not. Green monotype text on a black background, very little styling aside from that. In all honesty, while it’s kind of fun for a few moments, I wouldn’t want to read my site this way on a regular basis. Who knows, though, maybe someone will decide that it makes me look more ‘l33t’ and Matrix-y.
<
p align=”center”>
The second is “Blue Distressed” and is the reason I’m up so late. I’m really, really happy with the way this one turned out. Cool blues and greys, distressed edges, and a lot more visually interesting than any design that I’ve come up with so far. Many thanks must go out to Keith Bowman, whose Photoshop brushes and color palletes made this design possible.
Now, neither of these stylesheets have been tested in anything other than Safari yet, so they may very well look like ass in other browsers (especially IE, and even more so with Blue Distressed, as it uses transparent .png images that I don’t believe are supported with IE). Caveat emptor and all that jazz.
For me, though, Blue Distressed is the way I’m viewing my site from now on.
And now — bedtime. I’m so going to hate my alarm in the morning.
Update: After a little tweaking, I’ve deemed the appearance under IE 5 “good enough” to make Blue Distressed the default stylesheet for the site. If you haven’t already used the stylesheet switcher to pick a style or if you’re a brand-new visitor, you should be getting the fancy-shmancy new design now.
I still don’t know how this looks under IE6, though. That’ll have to wait until I actually bother to turn on the PC in my apartment, something that tends to happen about as often as America elects a Democrat to the White House.
Or so.
It’s close.
“God is a DJ (Edit)” by Faithless from the album Sunday 8 PM (1999, 3:32).
[See also: Manly Pink #1 | Manly Pink #2 | Surf like it’s 1994! | I’ve got the blues… | Flickr Badge in Weblog Posts ]
18 Responses to “New Styles”
Leave a Reply
Michael Hanscom
Ryan Waddell
Michelle
Curt
Jess
December 13th, 2004 at 2:44 am
I like Blue Distressed the most too. I think it’ll be my skin of choice for your blog from now on.
Congrats on a work well done
December 13th, 2004 at 4:46 am
Looking very good. And those Photoshop brushes look great, I’ll try them myself.
December 13th, 2004 at 5:55 am
“Blue Distressed” is really nice, and it looks good in FireFox. Great job!
December 13th, 2004 at 9:35 am
i like the blue too.
as usual, i’ll hand over my critique, but as an obvious testament to doing a damn good job, all i can say is that i think the title of your blog needs to be a little larger and the ‘about, feeds, comments’ etc link underneath could be a little smaller, and that the ‘there’ header of your sidebar doesn’t make much sense when there’s no ‘here’ over your regular posts, so I’d just drop it. tiny tweaks that you could probably ignore if you wanted to.
also, since you’re having fun with new toys, you might consider playing with sIFR , at least just for your blog title, though if you could swing it for post titles that’d be cool. this layout deserves shiny fonts.
December 13th, 2004 at 11:57 am
Thanks all, pros and cons alike!
I’ll play with those a bit more (admittedly, some of the finalizing was “it’s almost 2am, that’s good enough”) and see what I come up with. Right now, since I’m using a larger base font size than I have in other layouts, everything looks a little goofy to me size-wise, so I’m trying to let my eyes adjust to that a bit first.
That’s a side effect of Firefox’s rendering that I didn’t know about at first. That <h2> is actually hidden in Safari (color: transparent; background-color: transparent; — check the screenshot above), but apparently Firefox’s rendering engine doesn’t like having text declared ‘transparent’.
The ‘here’ <h2> above the main column doesn’t display because I’ve given it a display: none; declaration. However, above the sidebar, I’m using that <h2> to display the picture of me as a background image for that <h2> tag. Since I couldn’t use display: none; in that instance, I tried just making the text ‘invisible’ with the color: transparent; argument. Works in Safari, doesn’t in Firefox.
The simplest fix, of course, and probably the one I’m going to go with, is just to replace the text with a space. I don’t entirely like that solution, though — while those <h2> elements almost seem useless, as I don’t display them in most of my layouts, I like having them there to distinguish between the primary content and the sidebar in the “Old School” stylesheet that’s also (in theory, at least, as I’ve never had the opportunity to test this) used for handheld/PDA displays.
Still, since it appears to be a choice between removing the text and having the word ‘there’ floating somewhat oddly above my head in Firefox (and IE), it’s probably best just to get rid of the text.
Incidentally, I’m somewhat pleasantly surprised by IE 5’s rendering of this design. While it’s not perfect, it’s a lot less broken than I expected it to be. There’s grey ‘blocking’ in the transparent areas of the .png images, the photograph of me is offset a bit far to the left, and the font size in the sidebar is too big…but other than that, things actually seem to work, which is a pleasant surprise. If I can figure out the CSS IE hack (which has always given me headaches) and tweak the sidebar a touch, I may make Distressed Blue the default style for the site.
I’d love to be able to do a bit more with fonts (though I’d have to do some font-searching, as I seem to have lost most or all of my old ‘cool’ distressed fonts that I used to use for my Gig’s flyers). Taking a look at the pages, though, I’m a bit fuzzy one one possibly key detail — do I need to be able to edit and create Flash files to use sIFR? It looks like I do, if for nothing else than to embed whichever font I want to use. If that’s the case, than outside of a convenient…”Christmas present”…than I may be out of luck, as I’ve never had much need nor desire to play with Flash.
December 13th, 2004 at 1:09 pm
On the blue theme: is the large chunk of white on the right by design—did you consider putting in a blueish body background color?
That h2 problem seems pretty easy once I put it as a question: how can I display an element without displaying the text inside it? Easy: put the text in a <h2><span id=”blah”>text</span></h2> and on #blah, say visibility: hidden (not display: none, because adjusting visibility—besides from being what you’re technically attempting here—makes sure that the text takes up some space and hence the ‘box’ that contains the background is drawn. Display: none just acts like the element was not there, I think).
Of course, like most solutions that seem obvious to me, this probably won’t work.. not at home so I can’t test.
December 13th, 2004 at 1:14 pm
I’m also somewhat embarrassed to admit that I have a fondness for ‘Simple Green’…
December 13th, 2004 at 1:33 pm
Maybe I am the first to do it, but using Firefox 1.0 with Windows XP Home, I found Distressed Blue to not work as it was intended. It looked more like the Old School layout to me. Of course, if there was a wireless network around here somewhere, I could see if it did look like that on my iBook as well (though I somehow doubt it would).
December 13th, 2004 at 2:30 pm
Firas — that sounds like it just might work. I’ll give it a try, thanks!
Robert — that’s odd…I’m on Firefox 1.0 on my work machine (Win 2k) and it looks fine here. Mayhaps a caching problem where it’s not loading the stylesheet correctly? I’m just guessing here. I’m not really sure whether Win 2k vs. Win XP would break anything.
December 13th, 2004 at 5:10 pm
Works great now that I cleared the cache.
December 13th, 2004 at 6:17 pm
The Blue Distressed looks okay in Opera.
December 13th, 2004 at 6:29 pm
Gorgeous! The distressed blue, that is. IE simply sucks. IE 5.xx for Mac OSX won’t render CSS properly and the whole thing just sucks - I say, who really cares about Explorer crap anymore anyway. If it doesn’t look good in IE, tell them to use Opera or Firefox. It looks nearly identical save for a few text differences (in shading, mostly) in Camino and Safari - Camino uses the exact same Gecko rendering engine as Firefox and is simply a leaner, cleaner, meaner browser even though it’s not even up to 1.0 yet. Obviously, it looks the best in Safari but it is “sooooo” close in Camino (and therefore in Firefox on XP and OSX) that the differences are simply not worth “distressing’ over.
Once again, congratulations on a superior site design. But, gee, pink didn’t have that long a run.
December 13th, 2004 at 11:45 pm
Oh, believe me, I wish I could just ignore the IE crowd across the board. Unfortunately, right now approximately 50% of my visitors on any given day use IE (though I do like that it’s only about 50%!), so I do try to at least not break things entirely for them.
Actually, I do — there’s a ‘hidden’ section in the sidebar that only shows up for IE (PC) users that points them to the better browser project.
(laughs) If you’re attached to it, both of the pink designs are still available in the stylesheet switcher — in fact, Prairie specifically asked me to make sure that I didn’t remove them entirely! I’ve gotta admit, though, much as I liked the reason for the pink themes, and as good as they are…well, I stuck with the ‘Greys’ style until now…;)
December 14th, 2004 at 9:43 am
well… you could just take all the images from this site and alter the hue a bit, and make a ‘distressed pink’ ….
and hey, if it keeps you in good stead with the chicks who read this site and love you for your manly pink ways, that’s more than reason enough to give it the half hour, isn’t it? wouldn’t be that hard at all, really.
December 14th, 2004 at 12:12 pm
That’s actually pretty tempting…
December 14th, 2004 at 12:45 pm
Well, that was easy enough. Look to your right, and you’ll now see “Pink Distressed” added to the stylesheet switcher.
Just like Blue Distressed.
Only not blue.
December 15th, 2004 at 8:23 am
Looking good. The Simple Green most definitely conjures ideas of Matrix-wannabeness, but still looks nice (if only a tad MSN Spaces-ish). The Distressed ones are really nice. I have real difficulty associating you with anything but Manly Pink #1, so perhaps I’ll have to use the Distressed Pink to ween myself off.
December 15th, 2004 at 12:43 pm
rock on!! distressed pink!
i really actually like that phrase by itself, it sounds like a color from the punky-goth crayon box… ‘distressed pink’
yay!
thanks!