H1 element in Joomla 1.0x

Have you ever noticed that Joomla doesn't use H1 element, but instead, it uses .componentheading and .contentheading?

Do you want to use H1 as heading on your Joomla page?

If the answer is yes, then read on...

If your not sure and think "Why should I use H1 in headings of my content?" then you should read more about SEO... In short, Google loves H1. Content that is surrounded by H1 tags is the content that it is important for that page. An what is more important than headlines of your articles.

So, in order to define H1 in google you have to do the following...

Using your FTP manager, go in backend of your Joomla folders... Joomla/components/com_content

You can see two php files there. In both of them search for "heading"... there should be a few contentheadings and componentheadings. Put H1 tag there, so that it looks something like this:

In your css file define the look of the headings...

Off course, you can define H2 or H3 tags in the same way. It's all up to you...

CSS Global Reset

If you ever tried to design a web page, you know kow hard it is to make it look the same in all browsers. One thing that all experienced designers suggest others to do is to make a global css reset.

Why you should use global reset?
Because every browser has its own way of interperting your css + they have their own css style which they use when you open some page in their browser. The biggest problem is different margins and paddings.

What is global reset?
It's a part of code which you put on top of your css file. Some of designers offers deifferent solutions for global reset, but for me, after trying most of them, I decided that the best is the simpliest:

* {margin:0;padding:0}

Sign * applies for every single element in css so for me, this is the only thing that can be called "global reset".

Create web2.0 badge online

I found another usefull and easy-to-use online generator. This one helps you make your own web 2.0 badge. You can choose shape, dimensions, colors and text caracheristics.

It's fun, It's easy, It's usefull...

Don't you just love online generators?

I know I do... ;-))

FreshBadge.com

How to make Joomla template - part 2.

So, here it comes - part 2.

If you haven't read part. 1 - go to How to make Joomla template - part 1.

All the rest, go on reading further...

So, after we end up making index.php, we are ready for css. In the folder named "css" make a file called "template_css" and save it as .css file.

In this file you can define the look of your layers, fonts, backgrounds etc.

Be carefull with Joomla. After you define all the significent pieces of your index.php, there is a whole bunch of classes which are defined form Joomla for their modules, content and components. Every module that you additionaly install, also has its own css defined look. You need to find them and change them all.

Here are a few of the classes which you also have to define if you don't want that Joomla use its own:
Off course, these are just a few of them. To understand importance of css specifity (which CSS rule will be applied in browser if you have more of them applied) read this great article from Smashing Magazine - CSS Specifity - things you should know.

All the images that you use in your css file, put in folder "images" (which we created in part 1. of this tutorial).

After everything is done and you are happy with your design, make a list of all the files in your templateDetails.xml file which we also created in part 1.

It should look something like this:
<?xml version="1.0" encoding="iso-8859-1"?><mosinstall type="template"> <name>Joomla template</name> <creationdate>2007</creationdate> <author>sparkl-ing.com</author> <copyright>This template is released under the GNU/GPL License</copyright> <authoremail></authoremail> <authorurl>http://www.sparkl-ing.com</authorurl> <version>1</version> <description>A clean template with a touch of green.</description> <files> <filename>index.php</filename> <filename>template_thumbnail.png</filename> </files> <images> <filename>images/back_all.gif</filename> <filename>images/back_all1024.gif</filename> <filename>images/back_mainmenu.jpg</filename> <filename>images/footer.jpg</filename> <filename>images/footer1024.jpg</filename> <filename>images/indent1.png</filename> <filename>images/indent2.png</filename> <filename>images/module_bottom.jpg</filename> <filename>images/module_left_bottom.gif</filename> <filename>images/module_left_top.gif</filename> <filename>images/module_middle.jpg</filename> <filename>images/module_right_bottom.gif</filename> <filename>images/module_right_top.gif</filename> <filename>images/module_top.jpg</filename> <filename>images/right-bottom.gif</filename> <filename>images/right-top.gif</filename> <filename>images/module_middle_wide.jpg</filename> <filename>images/module_top_wide.jpg</filename> <filename>images/module_bottom_wide.jpg</filename> <filename>images/submenu_back.gif</filename> <filename>images/back_search.jpg</filename> <filename>images/back_verlauf.jpg</filename> <filename>images/banner_back.jpg</filename> <filename>images/content-top.gif</filename> <filename>images/content-top1024.gif</filename> <filename>images/headmenu_left.gif</filename> <filename>images/headmenu_right.gif</filename> <filename>images/headmenu_left_hover.gif</filename> <filename>images/headmenu_right_hover.gif</filename> <filename>images/logo.gif</filename> <filename>images/readon2.gif</filename> <filename>images/readon.gif</filename> <filename>images/module_head_back.jpg</filename> </images> <css> <filename>css/template_css.css</filename> </css></mosinstall>

Also, don't forget to make a thumbnail preview of your template and save it under the name template_thumbnail.png in the same folder with your index.php.

This complete folder you can upload online to your online Joomla site by ftp manager or you can zip it and install it thru Joomla backend.

Thats it.

Quite simple... ;-))

If you have any questions, feel free to ask...

How to make Joomla template - part 1.

When I started working with joomla, one of the most hardest thing to find was a tutorial on how to make your own joomla template. There was a bunch of templates which you can download for free, but I didn't want them since they all look the same to me. I wanted to make my own.

Although, I knew html and css pretty good, back then, php code was a matrix code for me.

Eventually, I found some tutorial for working in DreamWeaver, but since I don't usually work with DreamWeaver, I couldn't follow all the instructions, and had to made up my own proces. There are some tutorials on how to make a joomla template but you have to pay to download them...

This tutorial is here for FREE!

ATTENTION: To follow this tutorial, you need to have some
preknowledge of how Joomla works. You can get tutorial about that on Joomla official webpage. This tutorial is
based on Joomla 1.0xx, not for Joomla 1.5 which is a little bit different.
Preknowledge of css and html is also required to follow these steps.

Now, lets get started...

1. Installing - First thing you need to do is to install XAMPP and Joomla on your computer (they are both FREE to download and use)

2. Creating folders - After you installed Joomla succesfully, go to folder templates and create a new folder "mytemplate" or whatever you want to call it...

Inside of "mytemplate" folder create two more folders with names "css" and "images" (these names have to be "css" and "images" and not anything else)

In folder "mytemplate" create file index.php and file templateDetails.xml (use exact names as written here).

3. Making your index.php file - Now, lets start with index.php

Open it with notepad or any other program which you usually use for coding.

First, you need to start with DOCTYPE which determines how a browser should interpret CSS.

<?php /** * template_name - Joomla template * @version 1.012 * @copyright (C) 2007 by yourname * @license licensce info here*/ defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); $iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><?php if ( $my->id ) initEditor(); ?><meta equiv="Content-Type" content="">" /><?php mosShowHead(); ?><?php echo "<meta name="\" content="\">" ?><?php echo "<link rel="\" href="\" type="\">" ; ?><?php echo "<link rel="\" href="\">" ; ?></head><body></body></html>

Save the upper code in your index.php file

4. Start layering - I suppose that you have prepared some design. If not, first go to my post 8 steps for making a great web design

If you have it, start making layers as in usual html design.

Example:


When you're done with creating a skeleton html, you need to add php code for joomla.

This is when you need some preknowledge of how joomla works. The point is that Joomla has determined module positions which you can also create by yourself in backend of Joomla



Now, in your index.php you need to "call" these position with php code so that they will be shown in the layer that you want them to be shown.

Example:



You can have as much modules as you want, but try to keep it simple.

In backend of Joomla, publish your modules in positions that you want and you will now see them on your page in browser.

So, php codes which you might want to use in joomla are:
for modules
<?php mosLoadModules ( 'modulename' ); ?>
for maincontent
<?php mosMainBody(); ?>
for date
<?php echo mosCurrentDate(); ?>
for pathway
<?php mosPathWay(); ?>

Only thing that is left to do now, is to play with css :D

More about that in part 2. - coming up in a few days, so stay tuned or sign up for rss or whatever... ;-))

8 steps for making a great web design

It's not always easy to make a great web design, especially for yourself. I found it much easier making a web design for others, than for my own web projects or blogs. (thats why this blog has this simple design so far, untill I come up with something perfect for it...

Anyway, there are some steps which can help to make the process of designing much easier and more succesfull.

Lets get started.


1. Content - maybe surprising for some of you, but the most important thing for succesfull web design is to figure out what you want to put on your page, what parts of the content you want to emphasize etc. I noticed a lot of designs which looked really, really nice but when I tried to browse thru it and find some information, it was totally useless...

Thats ok if you are an artist or graphic designer and wants to emphasize your creativity, but if you want to offer some content to your readers, then make a list of the content you want to show... For example: menu, text, links, banners, ads, photos...


2. Positioning - when you made a list of everything you want to show on your homepage and other pages, you need to position them in order to emphasize things that you want to be spotted first and thing that are not so important.

If text is the most important, put it in a center - let it be the first thing that a person can see when he/she comes to the site.


3. Navigation - it is proven that a person stays on one page from cca 5-30 sec. In that time, an individual scans thru the page in order to find things that interests him. Therefore, you have to make sure that your page is easily scanable and that it has good navigation menus for quick browsing.

This will prolong the time that the person will spend on your page, possibility that he find something interesting and come back again.


4. Colors - when you have previous steps taken care of, try to imagine what kind of feeling do you want people to feel when they come to your web. For something serious and dramatic pick red, black, gray and white combination. Find out what each color means and use it according to the theme of your web project.
The thing that works the best for me is to find web designs which are similar to what I want to achieve as well as a bunch of photos which I would like to use.
Then I make a collage out of all them, and the colors which pop up the most, are the one I use in finall design.


5. Photos - its always nice to include a great photo in design. It can really emphasize the whole web page, just be carefull what you choose... Let it be a visual description of the page.


6. Design - when you have decided about content, positioning and colors you are ready to start designing the "big picture" around it. At this point its much easier and the final result will be much more satisfying. You can design it on a piece of paper and then edit it in any drawing editor that you usually use. To keep in touch with the "latest trends" in web design, surf around css galleries and find the inspiration... Remember, its all about details. If your page is mostly about content, you don't have to make a wow design, but pay more attention on the details which will emphasize the content...


7. Coding - now that you have put it all in, its time for coding. For me, the best way to do it is to make a skelet of the layers, then put it in html form, and then in css. I'm working in firefox first, and when it looks ok there, I go and fix it in other browsers.


8. Validating - sugar comes at the end... :D
When we are all done designing, its time to validate. Although the only people that will check out is your page validated are other designers, its good for You to do this. You will check the mistakes, fix it, and will be able to say that you really did it correctly...