Category: CSS

How to Find That New Color Scheme for Your Next Website Design

I’ve been cruising through some new sites – to me at least – to get some ideas on a color scheme for a new website. I’ll have a few posts on color this week, so if you’re looking to find a new color scheme for your next site, stay tuned!

The first site I looked at for color schemes was ColourLovers and I came away duly impressed.

Colors, palettes and patterns can be viewed endlessly. Over 230,000 patterns and over half-a-million color palettes await your scores and comments.

The color community is thriving here with an active forum and lots of colors, patterns and palettes for free downloading.

Once you register with the site – it’s free – check out the palette maker. Under the Palette tab, click on Create New and start dragging colors from the color picker to the five spots just underneath Create a Palette. When you’re ready you can fill in some details for your final palette and add it to the community.

Colors are identified with their RGB and #hex equivalents, so it’s easy enough to plug those values into your css stylesheet or into The GIMP color picker when you need them.

There’s even more fun under the Patterns tab! Over a hundred patterns are ready for you to customize.

Colourlovers.com – what a wonderful site!

Best Tools for Troubleshooting Problems with CSS and XHTML

Different browsers have their own ways of helping developers troubleshoot problems with positioning divs and combating errors that pop up here and there.

I have found a few tools that are extremely valuable for developing web pages. I’m sure these are very popular due to their ability of helping isolate and fix problems.

I prefer Firefox browser so these are my favorite browser add-ons and their features that I really like:

  • Firebug – view divs onscreen, explore code and its output onscreen
  • Web Developer Toolbar – one-click validation, resize screen to 800×600, disable cache, lots more – an army of tools
  • Total Validator – validates complete with screenshots in various browsers
  • ColorZilla – color picker, great view of css divs, zooms page

Care to add to my list? What do you use to help in your WordPress and web page design?

Unformatted Page Due to Corrupted Stylesheet

Yesterday, I ran into a problem that was really confusing, to say the least. I still don’t know exactly how it happened, but the problem was that one of my WordPress blogs lost all its style. That is to say that the pages appeared in black and white and in one long column down the page. No color. No sidebar. No header. Freak me out!

The content of the blog was untouched and it was apparently functioning as intended.

The stylesheet was resident in the theme folder and verified to contain css when I checked it using html-kit or another FTP program. I could download the stylesheet and see that everything appeared to be in there, including the commented-header required for a WordPress theme. If fact, WordPress did not report the theme as being broken – I guess it saw the file named style.css and figured the theme was kosher.

However, when viewed with any browser the unstyled output was seen. Also, validators sent to the blog could not find a stylesheet. What the ??

The really weird part of this story is that I downloaded the stylesheet and could use it on my local machine using the same version of WordPress and the stylesheet produced the desired design. Beyond that, I downloaded the entire theme, zipped it up and sent it to another WordPress fan to check out. He could see the design in all its glory on his development machine.

So, we figured it must be some server configuration that was interfering somehow. Totally vague, I know. At least the problem seemed to be isolated to the online server. I had already tried to upload a number of older versions of the stylesheet, but the style did not come back.

What I did notice, which lead me to a solution, was that in one of those validation reports another error was produced in that the favicon.ico file was reported missing. I verified that file was also resident in the theme and ok. That made two files that the validator could not find even though I could see they were indeed there.

Since the theme apparently worked fine on other systems I took the version that I had downloaded and renamed it. Then I uploaded said “new” theme to the themes directory and deleted the old theme. Exclaims of joy were now coming out of my office – it worked!

I don’t know how the stylesheet came to be corrupted, or if it even was, seeing the same problem with the favicon. The solution was to use a backup. It’s crazy that the backup in this case was the same theme that contained the corrupted file but the moral of the story is that performing backups are definitely worth the time it takes. If the files were corrupted I had backups ready to upload.

Backing up is so easy these days, especially with automated services like Mozy, it’s kinda dumb not to assure yourself that you can recover from gremlins that visit every now and then. Mozy gives you a free 2GB so get started on protecting your files today!

KISS Me, WordPress! Easy Category List for Stylesheet and ID for Pages

Keep IT Simple, Stupid.

In my way of making things harder than necessary I stumbled upon something simple. At times nothing seems simple with CSS! Check it out.

Trying to style a particular post, based on whether it was a password-protected post or not, I found that using the category assigned could help – on the condition that one category name was reserved for the password-protected posts. Look at this piece of WordPress code:

<?php foreach((get_the_category()) as $cat)
{
echo $cat->category_nicename;
}
?>

Basically, what we are asking for here is to create an array that holds the names of the categories, and then return the nice names of each category in lowercase and with multiple words separated by hypens.

So, being able to assign category names on the fly gives us the ability to assign classes based on the category. Use the above PHP code snippet in the index.php, category.php and single.php files of your WP theme.

Remembering that we can assign more than one class to an xhtml feature, on line 5 or 6 in each of the 3 files replace

<div class="post"

with

<div id="post" class="post cat-<?php foreach((get_the_category()) as $cat)
{
echo $cat->category_nicename;
}
?>"

Now, in your stylesheet you can target classes like cat-owls, cat-hawks and cat-bald-eagles on your site about big birds.

The KISS part comes in where I was going through steps to create a page template to replace a Page that was already written so that I could style it differently than the rest of the blog. What? Instead of going through all that, all I needed to do was pick up the ID number of the “post” of that page. Duh!

How simple of me to forget that the pages, as well as the posts, that we write in WordPress are assigned ID numbers. Just use the #page-ID in your stylesheet! Oh yeah, pick up the ID numbers of posts and pages in the admin area under Manage/ Posts or Pages.