April 16, 2008
Tags: accesibility, css, javascript, plugins, wordpress.
Categories: Internet Finds, Site Updates.
Sorry for the lack of blogging and commenting. When I start designing a new theme, I will code and re-code until I’m happy with it. Looks like someone has a tendency for obsessive-compulsive disorder. 
Just kidding… I’m just a being a perfectionist.
Anyway, I’m proud to bring you the final release of Yukata Summer, which works across all browsers (except IE6.. for now) and all resolutions starting from 800×600. There are a few features I added that are worth mentioning since they may help Wordpress theme designers.
-
Wordpress Dynamic Menu Highlighting
This highlights the page you are currently surfing on your navigation bar. For this site, the highlights extend to the sub-pages. For example, you are currently surfing this post, which is filed under archives, in turn ‘Archives’ in the navigation is highlighted. Check out the Wordpress Codex on Dynamic Menu Highlighting for the base code and Conditional Tags to customize this code to suit your needs - like I have done. -
Updated Wordpress Thread Comment
As some of you may already know, Nanyate?! uses WP Thread Comment to allow responses for comments. I think it’s a nifty tool that, although possibly takes away from the design, allows for conversation amongst the commenters and the author. Having a community of bloggers is the best part about blogging for me. So I will pay a great price to have everyone interact with everyone.
Anyway, this updated version now uses AJAX and has added a feature to email a commenter when the author replies so…Would you personally like to be notified when I reply to your comment? Thanks a lot! Your responses will really help me!
-
Resolution Dependent Javascript
This is by far the coolest addition I’ve made to Nanyate’s layout!! By adding this javascript, my stylesheet will change according the resolution you are using. Actually if you even change the size of your window, you will see the changes between an 800px window and 800+px window. The 800px’ers have the background scrolling with a serving of dieted version of the content column. Everyone else has the background fixed.I adopted this Javascript as a compromise for the scroll-happy people who were complaining that having a scroll background hurt their eyes and the 800×600 resolutioners, who because of the height of their screen can’t see much of the background if it’s fixed. I normally don’t like catering for people’s surfing habits or the 800×600 resolution - especially since the Web 2.0 world has RSS feeds if you feel my design doesn’t suit your tastes. But I’ve made this compromise in the name of the illustrator’s pride. That flower took me many hours and 100+ layers to complete. I wasn’t going to throw it away for those with small resolutions and scroll-happy kids who I don’t expect to understand the pain of designing a translucent layout for all browsers and all resolutions.
Anyway, this javascript might be useful for those of you whose layouts are designed with 800×600 resolutions only or 1024×748 and above only. I have to admit, I tweaked the javascript little to suit my needs. So, just let me know if you need help with the tweaking.
And finally, I’d like to end this post with a big thank you goes to:
- JJ Magazine for the yukata inspiration
- My housemate for lending the magazine to me
- 72Quadrat.de for the layout inspiration
- Seishido.biz for the cherry blossom brush. It was $1 well spent.
- My subscribers, visitors and commenters whose presence and comments continue to inspire me to work harder on this site.
Your background looks superb now! I really likehow you faded it and has those flowers. I love those kinds of flowers.
Thanks for sharing your plugin as well!! That resolution one may come in really handy for me ^_^
Respond to this comment
Ooh, that navigation highlighting thing is nice! Maybe I’ll use that one day! Haha, I doubt that, though. =P
Oh wow, so maybe I’ll use that plugin(the threaded comments) then, since you can e-mail the person. And yes, you’ve asked that question before, and my answer is still, yes, I would like the response to be e-mailed to me. LOL…
Oh woah! That is crazy about the resolution-dependent Javascript! Sounds neat, though!
Respond to this comment
this new theme is lovely. I especially like the sakuras in the background.
Respond to this comment
oh it’s a beautiful layout! well done
he he, what about the people with 800×600 res and javascript disabled? hmmmm??? lol. that would be like, what, .001% of the population? eh, screw ‘em.
“Would you personally like to be notified when I reply to your comment?”
that would be convenient. or maybe have a check box to let people decide if they want to be notified if their comment is replied to.
Respond to this comment
Actually 800×600 is already 0.5% of the population. So I figured if they have 800×600 with Javscript disabled, they’d be like.. 0.0000001% = screw them LOL.
I wished the plugin came with the checkbox to let people decide whether they want to be notified…but it doesn’t. And I’m not quite l33t enough to figure it out. So all I can do for now is to see what the majority thinks.
Respond to this comment
this is why I love WP. a lot of people contribute in making plugins. I’m not using “Updated Wordpress Thread Comment” i might use it and see how it works.
thanks.
Respond to this comment
I’ll vote for reply notification!
Good job with all those coding by the way!
Respond to this comment
Oh, this layout is so lovely! The background especially. And the fluidity (changing with resolution size) is really awesome, since I use two different computers with wildly varying resolutions each day. I think I like the use of navy blue best. It’s so purty with the salmon/pink.
Though, one note, which doesn’t affect too many of your visitors, but I always feel the need to complain about: fixed backgrounds freeze my old computer.
The dynamic menu highlighting is very cool. It would be a particularly good feature for those bloggers who don’t understand how to use pretty permalinks (but you do, so it’s just good redundancy for accessibility).
As for the comment reply thing - yes! I have a comment email responder thing myself, and I love to see emails indicating that the author of a blog has actually responded to my comment! Though, you should note, it totally weirds some people out…
Respond to this comment
If you didn’t mention about having two posts in one day, I would have missed out this gem
I still love the background image to bits, be it fixed or tiled. I didn’t find the tiled background particularly irritating and unflattering, but ah, at least you’re one of the few designers who respect the comments of their readers
I’m feeling so ashamed for my 800*600-unfriendly design! Ah. Oh and the screen resolution javascript thing is really interesting. Although I know you can call for the screen resolution using javascript, I’ve never give it much thought of using it to customise CSS as well. Brilliant!
I’ve tried installing the latest version of WP Thread Comment but it screws up my CSS. Well I think I’ll have to check. But the new version wows me with the ajax commenting system. Cool!
And for the dynamic menu highlighting, in the past I use a php script that inserts the class “current_page_item” into the active page link in the navigation, but it no longer works if I generate the links manually instead of depending on the php code that lists out the pages automatically. Now this link comes in handy!
Respond to this comment
Lovely theme, nice job!
I really really like the semi-transparent effect, it stands out… figured I need the same kinda effect for my own
Respond to this comment
Just thought you should know that the new theme doesn’t sit very well with Iceweasel 2.0.0.12. (Iceweasel is Firefox without the unfree software.) I think it has to do with the background. It’s a shame given that I only run iceweasel at home:(
Anyway, Firefox 3 is supposedly the fastest browser ever, and I expect an Iceweasel update shortly after FF3’s release.
Respond to this comment
Eek! I hope it works on Iceweasel when it updates. My boyfriend is running Ubuntu on his old PC, so maybe I can get him to send me a screenshot. I have a feeling it’s because Iceweasel, being completely free, doesn’t support PNG graphics, since background transparency is using PNG-support right now. It’s going to be hard to code for Iceweasel because they mask their user agent as Windows XP, Firefox 2 as well. If only there’s a way to insert a conditional - either css or javascript - to determine iceweasel, then I can switch to GIF support for both Iceweasel and IE6.
Sigh.
I’ll try to find a way. Thanks for letting me know, Sigg! That’s some good info.
Respond to this comment
you blog theme is pretty cute.
Respond to this comment
Iceweasel has full PNG support, and the transparancy seemed to work (I’m @work now so I guess from memory). You could say that Iceweasel is just hard-core firefox from a free software point of view. PNG is not a proprietary format. On the contrary linux has embraced it: “PNG icons have been supported in Linux since at least 1999 [1]. In 2006, Microsoft introduced PNG icons into Windows with the release of Windows Vista.[9]” (Wikipedia)
This quote relates to the OS of course, but Firefox was early in the implementation of it. (Now I can’t wait for wide-spread svg acceptance.)
Let me do some more testing tonight.
Respond to this comment
Ooh do you have a list of plugins you use? Which one specifically do you use for comments? Mine is called “Yet another threaded Comments plugin” but I’m looking for a better one.
Respond to this comment
Hi Katy! My list of plugins are always here http://nanyate.com/domain/plugins-used
Feel free to check it once a while. I tend to switch plugins when a better alternative is released. I also tend to ‘hack’ the plugins. So if you find that the plugin doesn’t look or function like mine I most likely edited the plugin a little to suit my needs. Let me know if you run into any trouble.
I use a lot of plugins for my comments. LOL ‘Comment Plugger’ to auto-plug people who comment, ‘Wordpress Thread Comment’ (which I altered a little) for AJAXed comments and comment threading and finally the newly-added ‘WP Paged Comment’ for the paginated comments. The author for the last two plugins is the same so it’s compatible.
Respond to this comment