Web Design Workshop 15 Disney Look

Yesterday’s Web Design Workshop was just fun! The goal was to change the look and feel of a site by modifying a few elements of the style-sheet. We were looking for the implementation of a Disney look, or rather: what makes a child theme.

The Web Design Elements

In order to quickly change the look we need to define some main elements of the new look; the most spectacular changes occur when you change colors, fonts and backgrounds or relates graphics.

Color

The colors of our Disney look are

red: #ff000
blue: #0000ff
green: #008000
yellow: #ffff00

As you can see, we use just 4 basic standard colors.

Fonts

Preferably we would use some comic handwriting, however only few visitors’ computers would be able to render fantasy or special script fonts. Windows driven computers know a comic font:

comic sans ms

Backgrounds

we use background colors from our 4 basic colors: light backgrounds in yellow and dark one in blue for example. Furthermore we use images representing Disney figures.

The Implementation

1. Replace in your style-sheet all white color codes (#FFFFFF and #FFF) with yellow (#FFFF00) and all black color codes (#000000 and #000) with blue (#0000FF). To change use the Find – Replace function of your code editor (PSPad for example).

2. Replace all fonts with the line:

font-family: "comic sans ms", sans-serif;

Remember: when a fontname is composed of more than one word we use quotes.

Load background images to your folder wp-content/themes/xo/images and add the backgrounds accordingly.

Example:

background: #FFFF00 url(images/dd.jpg) repeat;

You may replace the body background as well as the widget backgrounds or any other background you like.

Finally you may want to increase font-size here and there and your first draft is finished.

More about this Topic

• Web Design Workshop
• What is CSS
• Web Design Workshop 12 Blockquotes and Pullquotes
• Web Design Workshop 11 Background
• Web Design Workshop 8 Footer