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".

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...

Top 15 CSS galleries

I love css galleries because of the following reasons:

1. I can admire other peoples work
2. I can dream about the day that one of my designs will be up there
3. I can find inspiration in other people's work

Therefore I hate css galleries with lowsy search options or bad browsing categories or with a preview of one corner of the page instead of the preview of whole page...

And because of all that I made this list of the best css galleries including nice thumb previews and nice browsing options.


1. CSSMania.com
This is the one that I have already wrote about... It has nice design, nice preview thumbs and interesting category organisations. You can even browse gallery by home country of the designer...




2. CSSDrive.com
Browse by the layout (two-column, three-column, mixed cols and rows) or by the look (clean&clear, dark or black, high contrast, corporate, unconventional etc.)

3. CSSHeaven.com
Not to big, but very cute css gallery. You can browse by categories, by month of upload or by search option.

4. CeeSeS.com
CSS gallery from my homeland Croatia so the web sites uploaded are also from Croatia... Its nice to see how we are developing web 2.0 and modern CSS design...

5. Screenalicio.us
Definitaley one of the best css galleries online. Beside 9000 added web sites, this gallery offers color scheme of every web site in it which is very usefull if you can't decide which color scheme to use for your web site. Only minus is that the web site are not categorized. You can search by keywords or go page by page... Hope that they will change this eventually...

6. CSSElite.com
You can browse it by 9 categories or by month or go page by page... Plus is that it's easily scanable, but big minus is that you can't know how many pages there are to the end. I don't know about you, but thats very annoying to me...

7. CSSImpress.com
Easy to browse, navigate and scan... Hope that they will have more entries soon...

8. CSSGalerie.com
As their web masters wrote - just a galerie, thats exactly what it is... simply and nice css gallery with a few categories and new refreshing designs which you can't find in other galleries since this is (I think) french css gallery...

9. CSSDump.com
It does look like a dump, but a modern one... It's dark with a lot of colorfull "trash" which can easily be scaned. Browsing is available by tag cloud on the bottom of the page, or by pages... Minus is (again) that I don't know on which page I am and how much to the end...

10. CSS11.com
They say: "Nothing, but nothing, but kick-ass sites", I say: "I love -filterbytag- menu"...

11. CSSNature.org
It's all about nature here... So, there is a finally one themed css galleries. All the designs and web sites are based on nature... If you love nature, you'll love this gallery...

12. CSSdesignyorkshire.com
As simple as it can be... You have year 2006 and year 2007 and all the web sites from the year you choose on one page... It can't get simpler than that... Can it?

13. CSSgalerie.net
And here is a one Czech gallery... And it's quite nice... 349 web sites at this moment... Interesting to see what my neighbours are doing :D

14. CSSReboot
I can not miss to mention this CSS reboot event with extraordinary gallery. Don't miss it!

15. CSSBlue
Australian CSS Design & Inspiration - nice categories, nice design and easy to scan... Love it!

Off course, there is more of them, and more of them are being "born" every day, but these are the ones that I like to glance to... But, if you didn't had enough and want more, go to the list of 89 css galleries

CONCLUSION: My definite favs are CSSMania.com and Screenalicio.us, but if you have made a great template and want to promote your web design skills then add your webpage to as much as css galleries as possible...

RoundedCornr

Finally a roundcorner generator that I was looking for... RoundedCornr.com has it all...

Rounded corners in one color, rounded corners with gradient or rounded corners with a border... Whatever you desire, you can have it... Just input informations about what you want and it will generate html/css code and images for it... RoundedCornr.com is definitely going into my favs...

CSS Mania

In the sea of css galleries, this one really stands out...

At the moment I'm writting this, there are 7842 websites in the archive... I needed 3 working days to browse thru it.

It's really incredible and it seems as every page that "means something" is there...

So, what are you waiting for? Check it out...

CSSMania.com