Willow ,'Get It Done'
Do you have problems, concerns, or recommendations about the technical side of the Phoenix? Air them here. Compliments also welcome.
Couple of questions:
1) Is there a way to get rid of the white box background behind the Message Center logo?
2) Is there a way to change the color of the red bar that highlights "Discussion Threads", "Site Admin", etc?
I've been perusing the CSS that was posted ages ago, so we could make our own changes and while I've been able to figure out a few of them (hello a:hover!), there's still some that I'm not able to parse out. I've picked up an instruction book for CSS, but it's slow going. Help?
1) Is there a way to get rid of the white box background behind the Message Center logo?
The background on the image is white, not transparent, so it would have to be replaced with a whole new image -- I remember but am too lazy to Nilly right now that it didn't look right when either Jon or ita tried a transparent version?
Anyway, +1 to the request.
2) Is there a way to change the color of the red bar that highlights "Discussion Threads", "Site Admin", etc?
If I'm reading it right, that's under .section-header. So you'd do
.section-header {background-color:#123456;}
with the color code of your choice. (Do you need a reference for colors? Or is that covered in your book?)
The background on the image is white, not transparent, so it would have to be replaced with a whole new image
That's what I thought I remembered, but I was hoping I could change it. I've got a pale purple background and it just kind of jumps off the page at me in a not so happy way.
Do you need a reference for colors?
Nah, I look at the Paint rbg and convert to the hex. Why, I'm not sure, but that's what I end up doing. (I think it's for the mental excersize, the bane of unemployment.) I just couldn't break out what element was controlling it. There's so many header-this and header-that, it's very confusing!
If we made the image transparent, it would still look like crap with a purple background. A different sort of crap, but crap nonetheless.
You can look at the transparent title graphics on b.net. I think they look worse than the opaque ones on a wider range of backgrounds.
#subtext img { border:2px solid black } will give it a black border which might make it look less weird.
I'll give that a try, ita. I think it's the lack of border that just makes it look wrong.
One useful thing is the Firebug extension on Firefox, which lets you see the style and html for each page you're on. I spent a lot of my time learning html and the css by looking at View Source on many, many pages, and Firebug makes it a lot easier to see how it works.
Don't think you're alone in being frustrated. I've been writing css for some years, and I'm still often frustrated. It's as far away from intuitive as you can get.
I haven't fiddled much with the B.org style because it seems too much like work.
I've got all the time in the world, right now, so I figured I may as well try to do something that could be useful down the road and actually learn some of this stuff. I've got the W3C tutorials bookmarked, but the book I bought actually has some tutorials on their website that work with some pretty sophisticated looking pages. And I really like the way the book is written, it's not just line after line of code, they have crossword puzzles and match games, it makes it fun! I feel like a kid with a puzzle book.
eta: Thank you all so much for your help. I've got the colors pretty much tweaked the way I want. I may get up trying new things like some of the border/buttons that Restless used. I hope.
Both FIreBug and the Safari 4 Beta let you edit the styles and see the changes in real time on the page. This can be very helpful for understanding how to make it look the way you want.
Why can't Opera do something like that? Though I have started poking into their development stuff and it's quite interesting.
eta: I take that back. I just have to get the hang of Dragonfly.