• the theme,
• the logo/image across the top.
• colors of fonts,
• functions that add tools to the site.

• Joomla Org Free Templates
• Joomla Forum list of free themes. Big list !
  
• Joomlamarket.com

• Pixelpradise.com
• RocketTheme.com
  

You should try to find a theme that is close to what you want in color, number of columns, and type of image logo or plain logo. Let's look at the issues in choosing a theme in more detail.

Colors can be changed relatively easily but it always is better to start off with something you like. Sometimes the different colors on a page work well, but if you change one color the entire page no longer looks coordinated. Try to find a color scheme that you can live with then change the layout, images and fonts to change the overall appearance.

Consider if you want the width to be expandable to full screen width or to be controlled by a button or is fixed to handle only a narrow screen. Most people are using computer screens that show either 1024x768 or 1280x1024 with the majority using the larger one. A flexible width blog can show more info on the screen since it can expand to full screen size if the user desires. Yet a fixed width blog will always be displayed properly on a small screen. I choose to use themes that place buttons at the top of the web page to control site width ( narrow, wide, full screen ) and font size.

Let's talk about the logo image at the top of every page. They come in four types.

• Simple color: which is a block of color without an image. the blog name is not part of the image but is a line of text floating in front of the color block. The colors are specified in the CSS file of the template with a number that looks like this; #AABB22 , where the six characters are a hexidecimal number that specifies the red, green, blue components of the color.
• Repeated slice: which does have a small image but it is narrow ( maybe 8 pixels wide ) and is used by repeating that narrow image many times across the page. This one is not suitable for direct replacement with a photo unless you know how to modify the template. The small image can create vertical gradients of color which is impossible with a single color block specified by a color number like #FFAA00 .
• Cutup Photo on expandable width page: a right hand image, a left hand image and a background image. The two smaller images move as the page expands to maintain their position at far right and far left. You can replace any of the three images.
• One big Image: This one has a photo or drawn image that fills the top width of the blog. It is fixed in width. It has the written name/logo incorporated as part of the image.
  

Why would you want an image? Maybe your company has a logo or you want to put art around the name of the site or you just like a fancy font that will not be common on other people's computers. In that case you need to create an image of the logo, the name of the site and any artwork. It helps to have Photoshop, but there are free and more easily learned image programs you can use to create the logo image.

If you believe you want an image logo, choose a theme that makes it easy to change photos/images in that location. Look for a theme with an existing photo.

If you need help changing the photo on your site, read this article.

Changing the photo or logo on your Joomla site

Now, lets change the fonts. There are two files in most Themes that

control what you see on the screen. The html files (index.php and footer.php )

and the CSS file ( /css/template_css.css ) . They are found inside a particular theme of the themes folder that is installed on your site.

See the themes directory? The ja_bellatrix theme is the one I am using as an example.

The index file controls the layout or physical arrangment of the web pages and is named:

index.php

The colors, fonts and some images are defined in the CSS file:

/css/template_css.css

These two files control the layout and appearance of the website.

The images for a logo that are used on the site are found in the directory: images inside the theme folder. The picture at the right is a list of the files in "images" directory.

logo-bellatrix.png is the original logo that goes along the top of the page. I created another image and named it "logo-DoItYourself.png" and that becomes the new logo. But the old image will be used unless we change the name in the index.php file. I opened that file in a text editor, searched for logo- and found the place where the original image was called by the code. All I did was to change that name to the new image. I saved the file index.php and uploaded to the site to replace the old file and uploaded the new image file into the image directory under the theme. It worked fine. The new image was called instead of the the old one.

In differet themes, these files may have different names. You need to open them in an image viewer to find the one that is the actual logo or photo of art across the top of the page.

To change a font you look into the template_css.css file in a text editor and find the block that controls a piece of the page. For example

Near the top of the css file you can see the name "body" and several lines of data that describe the body of the document or web page. Body is the entire page so this controls the fonts and background color for the page. If another block wants to change the font of a small section within the page, it will call out a different font and then within that new block the font will conform to the change.

The background color is controlled by that #D2789F number. Where D2 is the value of red, 78 is the value of green and 9F is the value of blue. The values vary from 00 to FF and corespond to the decimal values 0 to 255. 0 is black and 255 is the brightest value of each color. Therefore, FFFFFF is white, 888888 is mid gray, 000000 is black. FF0000 is red. 00FF00 is green. 0000FF is blue.

The font size and family is controlled by the next two lines. You can make changes and see what they do in the web page. Make your changes, save the file, upload the changed css file, then refresh the web page to see the new font.

You might have to search for another font description in the css file to find the font you want to change.

To add plugins, modules and other function enhancements to Joomla, read the next article: Adding Functions to Joomla.