css
Don’t you just hate it when you launch a site, hand it off, get paid and a few weeks later the client says, you know… I think I want to change the templates now. This is not working for me.
My first reaction when I hear this is, “crap, I didn’t do my job properly, how can I fix it“. And the reality is, that without user interaction, it’s often difficult to anticipate what they and the client will want and so this type of feedback should be expected and in fact welcomed.
My last project with Tod Maffin allowed me to learn a great deal from such a request for change.
Continue reading »
When WordPress 2.8 was released, a new function called body_class() was made available to developers allowing us to style our pages differently. This new function places a location-specific class on the opening <body> tag. I must admit, I missed this function when it came out and only discovered it recently. But it’s proved very useful. I can now specify different background images for my pages and posts.
Here’s how to do it.
Open up your header.php file and change <body> to <body <?php body_class(); ?>>
The function will automatically generate extra html code. Have a look at the source code to see what classes are available to you and simply create new styles.
For example if you have an about page which has a page id equal to 2, you will notice the following code:
<body class="page page-id-2">
In your css, you could add a new style such as
body.page {background:yellow;}
This would change the background of all your pages to yellow.
Or
body.page-id-2 {background:yellow;}
And now the yellow background will only be applied to the page with id #2.
Nathan Rice wrote up a great article about the body_class() function and you can, of course, get more information by visiting the Codex.
For the past few years, I’ve been working more and more with WordPress as a Content Management System, in fact some of you might have noticed that I’ve changed my website content to reflect this transition. If you’ve looked into WordPress yourself, you will know that there is a huge, very generous community that provides online help, tips and tutorials and themes. These themes can be downloaded, installed on your server and you now have a different looking website. However, the problem with these, is that usually, there is always something that just isn’t right for us. Whether it’s the column layout, the width of the site, the header graphic, etc… Modifying the WordPress templates and the CSS can be challenging at times. It’s like trying to prepare a five course meal in someone else’s kitchen. They might have lots of pots and pans but they’re just not the right ones for you.
As the years have progressed, I found one template that I modified and used as my starting point, but I found myself doing the same things over and over. As a result I decided to create a series of new templates which are very basic. They only have the absolute necessary, are very clean, simple and easy to modify. You won’t find crazy function files with lines and lines of code, they only have one image and the colours are neutral.
The idea behind these templates, is that they should be used as your starting block. Once you have them installed, you can modify the CSS, add your images, required plugins and style them the way you’ve envisioned. I’m hoping that these new templates will be useful for WordPress developers, especially those who are just starting out and learning CSS and how to navigate through the many WordPress files. I’ve released the first three templates at www.framework-templates.com and will be releasing more as time permits. I’ll also keep a blog there where you can read about WordPress, templates and plugins.
Please check out the new site and let me know what you think.
In my last post I talked about using the “Better Coda Slider” created by Remy to create the testimonial slide show on the Enhance Dental Centre. While working on this, I ran into a problem. Instead of using a single image when moving from image to image, I wanted to use a rollover image. I looked at the thread of comments on Remy’s blog post and noticed that I was not alone in wanting this and that no one had offered a solution.
Possibly because of my stubbornness I tried all sorts of CSS tricks and hacks and couldn’t get the damn rollovers to work. In the end, the solution was pretty obvious, in fact a bit embarrassing.
I asked Ben to look at my code and in my coda-slider.js file, he simply changed
.before('<img class="scrollButtons left" src="/images/left.gif" alt="" />')
.after('<img class="scrollButtons right" src="/images/right.gif" alt="" />');
to this:
.before('<img class="scrollButtons left" onmouseover="this.src=\'images/left_hover.gif\'"
onmouseout="this.src=\'images/left.gif\'" src="images/left.gif" alt="" />')
.after('<img class="scrollButtons right" onmouseover="this.src=\'images/right_hover.gif\'" onmouseout="this.src=\'images/right.gif\'" src="images/right.gif" alt="" />');
Doh! I was trying so hard to do my rollovers with css, that I forgot the “old school” way of doing this.
In case anybody is interested in re-creating this example, here are the files are zipped up for you to play with.
Yesterday, I was invited to have lunch at Twin Fish Creative‘s monthly staff get together. Since, I’ve been doing a lot of work with them, I thought I would take the opportunity to explain what I do to their Photoshop files and more specifically how CSS is used.
What’s this CSS?
HTML tags were originally designed to define the content of a document. They were supposed to say “This is a header”, “This is a paragraph”, “This is a table”, by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
Continue reading »
If you happen to stumble upon our blog on Arpil 5th, you may notice that the site doesn’t look quite right. That’s because we’ve turned off our CSS for the day.
Css refers to the “Cascading Style Sheet“. This CSS file contains all the information about the presentation of our blog. Colours, font size, font types, width of columns, etc… It’s all in there. By turning off the css we’re showing you our “body”. Yes its a bit goofy, but the idea behind this is to promote Web Standards. This includes proper use of (x)html, semantic markup, a good hierarchy structure. In other words, without the css, you should still be able to figure out the site and navigate through it.
Don’t worry, the site will be pretty on the 6th.