Category Archives: CODE

On the old version of WEBBAGE, I showed a different image depending on what type of page you’re on.  For example when reading a blog article or the blog homepage, you’d see a circle image to the left saying “the BLOG”.  That’s because this page is in the blog. If you go to the LAB or the MAN sections of the site, you’d see the image change.

How do you show different content depending on what page you’re on?

Using some really basic php that you can get from the WordPress site and then amending it slightly for your needs.  This is the code I used on the site

<?php if (is_category('the LAB')) { ?>
<a href="/the-lab"><img src="/wp-content/themes/twentyten/images/the-lab.png" height="210" width="210" alt="the LAB logo"></a>
<?php } elseif (is_page('the MAN')) { ?>
<a href="/the-man"><img src="/wp-content/themes/twentyten/images/the-man.png" height="210" width="210" alt="the MAN logo"></a>
<?php } else { ?>
<a href="/the-blog"><img src="/wp-content/themes/twentyten/images/the-blog.png" height="210" width="210" alt="the BLOG logo"></a>
<?php } ?>

What this is saying is, “if this page is in the LAB category, show the LAB image link. If not, check if this page is the MAN page and if it is, show the MAN image link. If it’s not either of these, show the BLOG image link”.

I do a similar thing now with the top navigation by highlighting the section you’re reading in pink.

Simples!

There are a number of ways of adding shadow or glow to the elements of your website without the need for images making it easy to update and reducing page load times.

Text shadow

Adding text shadow using CSS couldn’t be easier. It doesn’t require webkit or moz versions and it’s compatible with pretty much every browser (even IE!) I use it a lot because it gives depth to your design by making the text on the page look embossed on the background.

Continue reading “Shadows with CSS” »

It’s June 2011 and I’m starting to see more use of “non-standard” web fonts around the internet. What does that mean? Generally you’re restricted to a group of about 6 fonts that are standard across all browsers and platforms.  This group includes arial, verdana, times new roman etc. Now you have the option to use many more different fonts by using services like Typekit and Google Fonts, or css commands like @font-face.

Continue reading “Using non-standard web fonts” »