Graphics

This is a short tutorial for beginners on how to hang some graphics on the Texty Template. As this is just an exercise, it will be easiest if we just use header graphics and the b stylesheet. But you can apply the same principle to all parts of the page.

Header Background

If you look in the headwrap form, you will see that the header is wrapped in a div with the id of wraphead. So if we change the background for this div it will apply to the whole header.

In the b stylesheet, find #wraphead. Change it into this:
#wraphead {background: #fff url(http://yoursite.com/images/5.png); }
You should now see a fetching pattern running across the top of your page.

The logo, especially the faded curving portion now looks out of place, so go into the headwrap form and you will see <div id="logo"><p>OurCo followed by lots of spans. Delete the spans up to but not including the final </p>

Graphical Logo

Let's now change 'OurCo' to a logo of our choice. We will use the same method as above and add a new background to <div id="logo">. Find #logo in the stylesheet and change it to this:
#logo {color: #001aff; background: transparent url(http://yoursite.com/images/6.png) no-repeat center center; }
You should now see the new highly imaginitive logo image. However, the original logo is still there. We won't delete it because it is helpful for non-visual browsers. Instead we will hide it from visual browsers. As it is wrapped in a p we can hide it by adding this rule:
#logo p {display: none; }

Check out how it looks now. Change between Bright I and Bright II to see what happens too. The logo should remain centered within its div because of the center center rule we applied. If you want the logo to expand and contract when resized, you can read how in this stretchy images article.

Ems and Pixels

When you create an image you have to know its size in pixels. With Texty the header is set at 5em high. Simply multiply this by 16 and you get the size in pixels, ie 5em = 80px. The width of the header is 60em = 960px. The width of the sidebar is 14em = 224px. If you go into main stylesheet you can alter the header height and logo height and width if you like but don't alter the header width or sidebar width unless you're very experienced.

Another point to bear in mind is that the small style is 75% the size of the big one. So you may need to reduce some images you use to make them fit the small style, eg reduce 80px to 60px. A little trial and error and you will soon get the hang of it. Have fun!