Tagged: css RSS
-
Dean
Does your back get sore from hauling your GIANT BALLS around! :)
-
noel
HAHA! Thanks Dean. Ego: in-check. ;)
-
zeldman
Thanks, Noel. My code sucked until you fixed it. You are teh awesome!
-
pat
Actually, I think the method I’ve been using for years…
http://www.wellstyled.com/css-nopreload-rollovers.html
…is a better choice, overall.
I also strongly disagree that is superior to Company or for a logo. should be reserved for the primary subject of the web page. Take this default WP template – is the page primarily about “Leaves Rustle” or is the page about “The rollover mishap, and how to avoid it.”?
I think the answer is clear where the should be. Semantically speaking, that is. ;)
-
pat
Arg! It stripped my markup!
-
noel
@pat Your method is a lot like CSS sprites (http://www.alistapart.com/articles/sprites)
I’ve used the CSS sprites method before, but it’s just not time-friendly to put together one image for rollovers sometimes. Nor is it really worth the effort, especially if you can preload easily.
It depends if you view the H1 as an element for emphasis or for hierarchy. I view it as the latter. I think the title of the blog “owns” the rest of the content, therefore I like it as an H1.
Thanks for your thoughts… it is something to think about.
WordPress “Art Direction” Plugin
Noël Jackson @
Update: Version 0.2 is now available. This fixes a small bug that may result in duplicate styles.
Short story:
I wrote a plugin (it’s in beta) available over here: WordPress › Art Direction. The tagline is “Per-post styles for new age art direction.”
Long story:
Automation is the king of convenience. It’s also a killer of creativity and quality. Examples: MP3 vs. Vinyl, Transistors/Diodes vs. Tubes, Xerox vs. Letterpress, Digital vs. Film. The newer technologies allow a quicker route to (perceived) gratification, but the older technologies always deliver a superior end result.
Web sites have gone from home-grown concoctions of HTML thrown together with bits of glue and tape, to vast content management systems automating the entire process. It’s lowered the barrier of entry for publishing on the Web, but it’s also sucked away the creativity.
I’ve been in love with blogging and feel that CMS’s are the way of the future. But, I’ve also been feeling an ever increasing homogenization on the web – in part because of the low barrier of entry for publishing, and the finite amount of designs available to most individuals – and the static nature of these designs.
Earlier this year two things happened on the web that opened my eyes. I designed a theme for WordPress.com, Monotone. It took colors from an image and used them to surround the image and create a somewhat dynamic and unique experience for each entry. A nice blend of dynamic and static qualities.
Elsewhere, a little after the launch of Monotone, Jason Santa Maria redesigned his site using EE – the horror! ;) – to give him more control over each entry’s design. It was a brilliant use of technology!
But, I don’t want to pay for my content management system when there is already a superior, Open Source, and extensible system available. (I’m talking about WordPress.)
So, I wrote a plugin to provide me with the ability to add styles/javascript/whatever I wanted to each entry, I call it Art Direction. It’s in beta right now. So, help me make it better, so we can all enjoy a little more flexibility and creativity.
Caveat: it may invalidate your code, depending on how you use the plugin (due to inline styles). This is a temporary problem.
Jesse, 
Danny and 25 others are discussing. A Sensible Standards CSS Framework
Noël Jackson @
It’s good to see I’m not the only one feeling that most CSS frameworks are missing the point. SenCSS really is a nice starting point for getting a site’s CSS going – especially for those starting out with CSS, SenCSS would be a dream.
SenCSS was developed mostly for myself. I noticed that the stuff common to most of my designs and projects wasn’t the layout, and thus all layout CSS frameworks had very little use for me (I’d be writing exceptions all day, no thanks!). However, There was a lot to gain from a smarter CSS Reset, vertical rhythm and a set of often used styles. Basically I wanted something that i could drop it, start working on my layout and fine tune when the layout was finished.
The rollover mishap, and how to avoid it.
Noël Jackson @
Having trouble getting your CSS rollovers un-glitchy? Pre-load them, easily… If HUGE can learn from me, so can you! ;) (I’m saying this jokingly.)
Yes, this a real email I sent HUGE. They fixed the problem by doing exactly as I said. And they didn’t even say THANK YOU!
I’ve sent this same sort of email to lots of people – including some pretty great designers and developers. All not preloading their rollovers. So, for the sake of helping to spread the gospel of the css preload, I’m just going to email everyone the link to this article from now on…
Some of you asked for a video (okay, one person). I love clusterflock, and they don’t have non-semantic HTML (despite putting H2s before H1s), but they’ve got the same problem with CSS rollovers: clusterflock rollover (144KB) (Did you catch the glitch?)
From: noel@eight6.com
Subject: Attention, you have a website bug...
Date: February 20, 2008 12:27:29 AM GMT-05:00
To: nameremoved@hugeinc.com
Hi HUGE!
You've got a problem with your website. Albeit a small one, but one a pro should not make.
Your hover state on your div element with the #logo id isn't preloading the hovered image. Thus, you get a flicker on the hover state when the image has not been cached. On a slow connection this can be from a half second to 2 or more seconds. Bad implementation.
First things first, you are using incredibly non-semantic markup for your header. I specialize in standards compliant markup and have been doing so for 10 years.
Your code SHOULD look something like:
<h1 id="logo"><a href="/">HUGE</a></h1>
NOT LIKE THIS: <div id="logo"><a href="/"></a></div> BAD!!! BAD!!!
I know you don't need better search results, as you get plenty of clients already. But, by being the best, you should really have the best code... you don't.
Again, to fix the bug, that I've also put onto video here:
http://eight6.com/assets/huge_hover_problem.mov
To fix it, preload the hover image by implementing the following CSS, that loads the default image behind the link in a container div.
#logo {
/* This is the line that prevents the flicker when hovering */
background:url(/imgs/logoBlack.gif) no-repeat;
}
#logo a,
#logo a:link,
#logo a:visited {
background:url(/imgs/logo.gif) no-repeat;
display:block;
width:144px;
height:57px;
}
#logo a:hover,
#logo a:active {
background:url(/imgs/logoBlack.gif) no-repeat;
}
BTW, I am in NYC this week for client work if you would like to meet me and I can show you the problem. Or feel free to call me at 734-642-9187
I think you guys do amazing work. Keep it up... and if you need a hand keeping that code tight and more semantic, please let me know.
Best,
Noel Jackson
-
noel jackson
founder eight6 | http://eight6.com
noel@eight6.com
+1.734.642.9187
pat, 
Hugo Baeta 8:21 pm on 16 Dec 2008 Permalink
Hey man!
This is Brilliant! Ever since I saw Jason’s presentation at An Event Apart SF this summer I was thinking about this. I’m eager to try out your approach and, even though I’m not a programmer, I’ll try to pitch in my feedback!
Keep it up and take care!
Kyle Meyer 1:11 pm on 17 Dec 2008 Permalink
Great job, I’ll be employing this in some work that I have currently in progress. Cheers mate!
Derek 1:33 pm on 17 Dec 2008 Permalink
Awesome plugin. Sure beats manually going in via FTP to find the unique id / class for each post, then styling to taste. Will a future update offer the option to write styles to a global stylesheet? art-direction.css in your themes directory?
Jeremy Mandle 1:58 pm on 17 Dec 2008 Permalink
I will be implementing this plugin on my wp site immediately ;)
Thanks Noel.
Dan 2:35 pm on 17 Dec 2008 Permalink
Excellent! I can’t wait to give this a try on upcoming projects.
Curvball 4:30 pm on 17 Dec 2008 Permalink
This is amazing. Originally a print designer (mainly magazines), I can’t wait to use your plugin to give life to various ‘articles’ on an online magazine site I run.
I will be sure to provide feedback once I’ve given it a run.
Thanks.
jeff 6:45 pm on 17 Dec 2008 Permalink
I like the idea and definatley don’t want to bring down your idea for a name, however, when I saw this in my reader, I thought it was a plugin for some type or Artwork Gallery or something. Just wanted to give you the heads up. Look forward to trying it.
I am Matt Thomas » Art Direct Yourself 6:17 am on 18 Dec 2008 Permalink
[...] Automattic colleague Noel has released a new plugin for WordPress called Art Direction, now in beta: Automation is the king of convenience. It’s also a killer of creativity and quality [...]
Chromakode 1:48 am on 19 Dec 2008 Permalink
Hi Noel,
Great plugin! I’ve been looking around for something to do this over the last few days, and was pleasantly surprised to find out you made it so recently.
While troubleshooting some CSS issues, I noticed that my style was being inserted into the page twice. I discovered that this is caused by a bug:
(starting on line 16)
if( is_single() or is_page() )
echo str_replace( ‘#postid’, $post->ID, get_post_meta($post->ID, ‘art_direction_single’, true) );
echo str_replace( ‘#postid’, $post->ID, get_post_meta($post->ID, ‘art_direction_global’, true) );
Since there are no brackets surrounding the if statement, the second line is run regardless of the if condition. This will cause the global styles to appear twice in the front-page listing!
-C
noel 8:45 am on 19 Dec 2008 Permalink
@chromakode Thanks for the note. It was a bug. Version 0.2 is out and addresses that issue.
noel 10:27 am on 19 Dec 2008 Permalink
Thanks for all the great input and encouragement! I really appreciate it and hope the plugin proves useful!
Links of the Week: December 19th | Bainbridge Studios 5:41 am on 20 Dec 2008 Permalink
[...] WordPress “Art Direction” Plugin This new WP plugin, currently in beta, allows you to individualized styles for each post (ala Jason Santa Maria’s redesign of his personal website). [...]
Art Direction Plugin — Matt Mullenweg 7:58 pm on 20 Dec 2008 Permalink
[...] WordPress “Art Direction” Plugin, from Automattician Noel Jackson. Basically allows you to do what Joe Santa Maria does for his blog without all the custom code and template hacking, just a simple plugin. (0) PreviousPost [...]
Eric Brown 11:17 pm on 20 Dec 2008 Permalink
Excellent news…been looking for something like this for a while.
WordPress Plugin Releases for 12/21 | Weblog Tools Collection 8:23 am on 21 Dec 2008 Permalink
[...] Art Direction Plugin [...]
Patrick Algrim 11:32 am on 21 Dec 2008 Permalink
Wow very cool! I just wrote a tutorial on using a colors.css file to hold all of the colors for you design, which allows you to change color schemes really quick. People have been seeking ways to vary colors based on post, this is a really awesome direction for this!! Thanks so much! Wish I could have told people about this before the tutorial.
Greg Huntoon 12:00 pm on 21 Dec 2008 Permalink
I am really, really interested to tear into this one. I have been wondering about this for a long time, and glad that someone jumped up and is making it happen. I will install and play around with this, and get you feedback as I progress with it.
Thanks!
Dangerdom 5:10 pm on 21 Dec 2008 Permalink
This looks great, if you can work out the inline/validation problems it will be superb!
Link Roundup: Week 12/14 - 12/20 7:05 pm on 21 Dec 2008 Permalink
[...] Wordpress Art Direction Plugin [...]
ed 6:38 am on 22 Dec 2008 Permalink
sounds like a great plug in!
Stephen Cronin 8:14 am on 22 Dec 2008 Permalink
Wow – I wrote a plugin to do this about a year ago and I’ve only used it a couple of times and never bothered to release it – now I find out that there are lots of people wanting this. Doh! Well done.
Chrys 11:56 am on 22 Dec 2008 Permalink
Actually, the technology transition was from tubes to *transistors*, not transformers.
noel 2:26 pm on 22 Dec 2008 Permalink
@chrys Thanks for that!
Jin 2:10 pm on 22 Dec 2008 Permalink
Very nice. I’ve been using custom fields to give my posts a unique look.
My question for this plug in is: are you using custom fields? If so, then in table: wp_postmeta, the meta_key is defined as varchar(255). How would this plugin handle key values that exceed 255 chars?
Thanks,
Sueblimely 4:49 pm on 22 Dec 2008 Permalink
Wonderful. This will enable me to write more tutorials and show examples without bloating my style files and forever slowing down my front page.
WP Cult 12:00 am on 24 Dec 2008 Permalink
That seems like a really coo feature!
josh 12:29 am on 24 Dec 2008 Permalink
Nice stuff. Really:)
However, I don’t agree with your opinion about Expression Engine. Comparing Wordpress to Expression Engine tells me you don’t respect/know the strengths of each CMS and the weaknesses. EE can handle far greater complexity and flexibility of content management to the (control panel) user(s) than WP. In this age of free software it is easy to loose sight of the simple fact that you get what you pay for. That said I love WP and EE both for what they are.
WordPress Founder Matt Mullenweg to Speak at WordCamp | WordCamp Columbus 12:39 am on 24 Dec 2008 Permalink
[...] about? color manipulation and art direction in themes with? PHP. Noel recently came out with the Art Direction plugin, which allows for custom per post styling, i.e. allowing you to control the look of each [...]
Al 2:30 pm on 24 Dec 2008 Permalink
Thanks for this. A library of styles would be helpful.
links for 2008-12-25 « Bread Butter ‘n’ Rock&Roll 1:30 pm on 25 Dec 2008 Permalink
[...] Art Direction provide the ability to add styles to each entry (tags: plugins wordpress templates) [...]
Alexey Vysotskiy 9:42 am on 30 Dec 2008 Permalink
Nice! I’ve already said to Matt(ma.tt) thanks for providing a link to that.
Cheers.
Chris 2:33 pm on 18 Jan 2009 Permalink
Cool plug-in, but I had to uninstall it from my site. It was the cause of a blank line error (http://validator.w3.org/feed/docs/error/WPBlankLine.html) that broke my RSS.
RSS is A-OK | Splendid Beats 2:38 pm on 18 Jan 2009 Permalink
[...] which seems to trouble so many Wordpress users on the ‘net. Finally figured out that the Art Direction plugin was the culprit. Luckily, it was not something that I used very [...]
konya web tasar?m 4:57 pm on 30 Jan 2009 Permalink
Thanks for this. A library of styles would be helpful.
fatura ödeme merkezi 7:14 pm on 31 Jan 2009 Permalink
However, I don’t agree with your opinion about Expression Engine. Comparing Wordpress to Expression Engine tells me you don’t respect/know the strengths of each CMS and the weaknesses. EE can handle far greater complexity and flexibility of content management to the (control panel) user(s) than WP. In this age of free software it is easy to loose sight of the simple fact that you get what you pay for. That said I love WP and EE both for what they are.
Danny 2:14 pm on 12 Feb 2009 Permalink
Awesome! Another print designer looking forward to seeing how this works out. Imagine, designing articles!
Great work, thanks a million! I’ll be sure to drop you some feedback once i’ve given it a run.
a work on process » Selected Saturday links 6:24 pm on 14 Feb 2009 Permalink
[...] Wordpress Art Direction plugin [...]
WordPress Founder to speak 10:45 pm on 17 Feb 2009 Permalink
[...] talk about color manipulation and art direction in themes with PHP. Noel recently came out with the Art Direction plugin, which allows for custom per post styling, i.e. allowing you to control the look of each [...]
Jesse 11:53 am on 22 Feb 2009 Permalink
An incredibly n00b question (I apologize, but this is more direct than me stumbling through it with a headache on my own):
what do I write in the single page or global code boxes to create pages? Could you please explain in condescending/simplified language to a beginner how this process works?
thank you…
Jesse 3:38 pm on 22 Feb 2009 Permalink
Apologies in advance for the the n00b question, but:
what precisely do I put in the global and single page code fields? do I merely hit the insert tag buttons and a pagination system will automatically create a numbering sequence, or is there (most likely) more involved?
Any and all responses tinged with frustrated exasperation at my lack of plugin/css are welcome, as long as actual guidance/help is also included.
many thanks…
» Where is the Emotion in Web Design? :: Positive Space Blog 11:16 pm on 5 Mar 2009 Permalink
[...] often-overlooked casualty of the content management system is art direction. While there may be some systems that allow for it, this is still a lot to ask of a client if they do not have in-house designers. Could making style [...]
?????????????????WordPress?????TOP 60 - ElectronicBrain is eating BreakFast 1:54 am on 14 Mar 2009 Permalink
[...] Art Direction WordPress plugin [...]
Refresh Detroit » Recap: Noel Jackson’s transitioning from print to web presentation 6:10 am on 29 Mar 2009 Permalink
[...] out Noel’s Art Direction plugin for WordPress, which provides the ability to add styles or JavaScript to each entry, without a lot [...]