Just came across an interesting little issue while making a "background" image inside a customised Slidedeck slider. I was basically using the z-index property to push the main image behind the text inside the container. I did this by setting the z-index for the image to -1. This worked perfectly in Firefox. However, in Safari and Chrome, my text was not showing up at all!
Turns out that "default" z-index properties seem to be handled slightly differently in Safari and Chrome. Setting the z-index of the text container explicitly to 1 (positive) solved the problem immediately. Curiously, setting it explicity to zero made no change.
Wednesday, December 14, 2011
Tuesday, December 13, 2011
Turning a design into CSS divs
Back in the bad old days, people used tables to do layouts for web pages. Actually, many still do, and if you design HTML emailers it is pretty much a requirement.
Anyway, you've probably heard that tables are out and CSS-styled div's are in. It sounds all very wonderful in practice (position stuff anywhere on the page), but in practice one needs to develop decent methodologies to actually use these capabilities to create a useful layout.
Here's a great article I found: From PSD to HTML
I am tending towards using Fireworks rather than Photoshop for a lot of my website graphic design these days, but the principles are the same. This article breaks down the practical steps very nicely, and the principles can certainly be applied to a WordPress theme as well.
Anyway, you've probably heard that tables are out and CSS-styled div's are in. It sounds all very wonderful in practice (position stuff anywhere on the page), but in practice one needs to develop decent methodologies to actually use these capabilities to create a useful layout.
Here's a great article I found: From PSD to HTML
I am tending towards using Fireworks rather than Photoshop for a lot of my website graphic design these days, but the principles are the same. This article breaks down the practical steps very nicely, and the principles can certainly be applied to a WordPress theme as well.
Bypassing inline CSS generated by Gantry
As you know, I've started to use Gantry to develop a custom theme for WordPress. I quickly got stuck on the very first customisation I tried: changing the background colour (or replacing it with an image).
I couldn't find where the <body> colour was being set anywhere, in any of the CSS files that the Gantry theme uses. Firebug to the rescue! It showed that the body colour was being set "inline" (shows up as "#" in Firebug's CSS panel, instead of a particular CSS file). So, it turns out that Gantry indeed generates inline styles for certain elements, including the body background colour, in its style "override" panel. It seems a little ironic to have to override an override, if you know what I mean, but here's how to do it...
Either:
I couldn't find where the <body> colour was being set anywhere, in any of the CSS files that the Gantry theme uses. Firebug to the rescue! It showed that the body colour was being set "inline" (shows up as "#" in Firebug's CSS panel, instead of a particular CSS file). So, it turns out that Gantry indeed generates inline styles for certain elements, including the body background colour, in its style "override" panel. It seems a little ironic to have to override an override, if you know what I mean, but here's how to do it...
Either:
- Find the styledeclaration.php "gizmo" in the Gantry plugin folder, and comment out the relevant lines which do "inline css for dynamic stuff" (it is well-commented). Now you can set your own body tag CSS rules without any fear of them being overridden by inline rules.
- Alternatively, simply add "!important" to your CSS rules.
Getting started with Gantry
I have been looking for a solid template or framework from which to build a custom WordPress theme for our new company website. I have messed around with some randomly-chosen WordPress themes over the last few weeks, just to get a feel for how WordPress works... and refresh my rusty CSS skills.
The GIGO principle seems to apply when trying to whip a WordPress theme into shape: if the theme has been built using a sloppy process, it may "work" initially but things quickly fall apart when you start really trying to customise it.
In any case, a lot of WordPress themes are more suitable for blog-type sites - which of course is understandable given WordPress's origins.I favour a multi-column "magazine" layout, not only for the company website I'm building, but also for all the conference and association sites I need to tackle as well. Now, WordPress is perfectly capable, in principle, of generating just about any layout you'd like, but it's not easy to find a theme that supports this sort of thing "out of the box".
To my delight, I discovered 960.gs, a brilliant little CSS "grid system" that helps to get nicely-proportioned layouts done easily in CSS. I recall encountering the princple of a grid layout in my Journalism studies: it has been a tried-and-tested approach to print layout for a long time. While grid systems are sometimes maligned for being overly rigid, they are extremely useful for rapidly structuring a balanced layout, even more so for layouts that are to a certain extent composed of dynamically-generated elements (e.g. content on a WordPress-powered page).
960.gs can be used in anything from a static HTML page to a Drupal-powered monster, but I discovered that it is also the basis for some WordPress themes as well. Even better for people like me, who are keen to develop something highly customisable, are "frameworks" for WordPress such as Gantry, which incorporate the 960.gs system to do layout... and provide a lot of additional functionality as well. This is a framework for themes developed by people who make themes (in this case, a company named RocketTheme).
Gantry seems to be aimed at site designers like me, who want lots of columns and a very flexible layout. I'm still in the early days of playing around with the framework, but so far I'm incredibly impressed.
Tasks that lie ahead:
The GIGO principle seems to apply when trying to whip a WordPress theme into shape: if the theme has been built using a sloppy process, it may "work" initially but things quickly fall apart when you start really trying to customise it.
In any case, a lot of WordPress themes are more suitable for blog-type sites - which of course is understandable given WordPress's origins.I favour a multi-column "magazine" layout, not only for the company website I'm building, but also for all the conference and association sites I need to tackle as well. Now, WordPress is perfectly capable, in principle, of generating just about any layout you'd like, but it's not easy to find a theme that supports this sort of thing "out of the box".
To my delight, I discovered 960.gs, a brilliant little CSS "grid system" that helps to get nicely-proportioned layouts done easily in CSS. I recall encountering the princple of a grid layout in my Journalism studies: it has been a tried-and-tested approach to print layout for a long time. While grid systems are sometimes maligned for being overly rigid, they are extremely useful for rapidly structuring a balanced layout, even more so for layouts that are to a certain extent composed of dynamically-generated elements (e.g. content on a WordPress-powered page).
960.gs can be used in anything from a static HTML page to a Drupal-powered monster, but I discovered that it is also the basis for some WordPress themes as well. Even better for people like me, who are keen to develop something highly customisable, are "frameworks" for WordPress such as Gantry, which incorporate the 960.gs system to do layout... and provide a lot of additional functionality as well. This is a framework for themes developed by people who make themes (in this case, a company named RocketTheme).
Gantry seems to be aimed at site designers like me, who want lots of columns and a very flexible layout. I'm still in the early days of playing around with the framework, but so far I'm incredibly impressed.
Tasks that lie ahead:
- Get graphics plugged into the framework (for backgrounds, borders, etc.)
- Integrate a decent slideshow plugin/widget into my front page, on top of Gantry
Subscribe to:
Posts (Atom)