Loader Generator

Crazy about Ajax and those load buttons?

Here are some cute loaders which you can customize and download for your fancy web pages...

LoadInfo.net

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

Google Sky

So, here comes a new feature from Google... Don't have to wait long for new stuff from Google, don't we?

Not only can you travel the earth with Google Earth, but now you can also travel the sky.

In new version of Google Earth you can switch your view form Earth to Sky and watch at the stars...

Download the new version of Google Earth

DesignFloat.com

Here is another digg-a-like in its unique version. This one is targeting designers and since I'm a "web designer wannabe" I think of this place as my new place to surf every day...



DesignFloat.com

You can find here all the latest news about fonts and desings to whole bunch of usefull tips and tricks... Well, see you there...

Google Invasion

First, lets get something straight - I love Google. "Google is my friend."

I use Google every day in every way...

And all of my friends use google...

If someone is not using it and ask me a stuid question, I send him a link to google or justfuckinggoogleit.com ...

But, I started to think about it... Shouldn't we be concerned about the way Google is crawling into our lives?

Something that started as nothing but a search box, suddenly is browsing not only web, but 90% of our lives.

You don't believe it? Lets take a look...

1. We have a google search. Most of people that I know of don't use any other search. And not only that, but the word google is a synonym for search... We don't say "go and search for that", we say - "go and google it", even on my native language - croatian, we say - "proguglaj" referring to the google search.

2. Do you use gmail? I do, my friends do, everyone I know - do... Even if they mostly use some old e-mail address from yahoo etc., they have gmail also... You can be sure of that... I have more than one official e-mail address, but I handle them through gmail.

3. Do you have a blog or web-page? You are using google adsense, aren't you?

4. Now, there is still a lot of google applications for which you maybe haven't heard... YET... But they are still here... Just waiting to become a part of our lives...

Lets see some of them:
Google Desktop - google brings news to your desktop, google brings weather and all those small gadgets which we love... You can even have your own virtual plant on google desktop...

Google Earth - why going out? You can see far away countries right here on your screen... In your comfortable chair without worryng what visa do you need for that country, do you need vaccine, how to get there etc. etc. etc.

Google Finance - business info, news, interactive charts

iGoogle, Maps, News, Notebook, Google Video, Code, Labs, Blogger, Calendar,
Docs&Spreadsheets, Picasa, Talk, Translate, Mobile, SMS, free software, web
accelerator...

Whatever you want, whatever you need - they have it... GOOGLE HAS IT ALL...

They even have a worldwide store... I can already imagine shopping everyday groceries in Google store and having them delivered in my home... And all of them with google logo... :D

Doesn't that seem scary to you?

Where are those paranoids with conspiracy theories now?

Doesn't it seems like Google is taking over the world?

Bit by bit he is crawling inside of our homes... Bit by bit with their spiders...

On the other hand, lets try to imagine the world with Google taking it over
(according to how they treat their employees - at least as much as I heard):

Everyone woulf work when they like and in the field that they work the best... We would all have pools... :D

Food would be delivered right to our homes so that we dont waste our time on buying grocieries in the shop. We could go out in restaurants only if we want to mingle and socialize face to face. Everything that we would need would be "free" because there would be no money any more. Our money would only be a figure on our Google account. When we work, the figure would grow, when we spend, the figure would go down. Cause, google would own everything... No need to pay with cash...

We would have more time to spend with our children because we could all be online together. They could even attend schools over the virutal classrooms... Hell, we would even socialize online and go to virtual restaurants...

No thieves, no crime, because google would make a better place for everyone and
we would all work our best to stay that way...

Hm, maybe it wouldn't be such a bad thing, wouldn't it? :D

Ok, ok, I know, I'm exaggerating, but I think you got the point...

Now, what do you think about all this?

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

StripeGenerator.com

You want your site to look more web 2.0? Why not try adding some stripes... They are new must-have for web 2.0 sites.

And you can make them very easily with this StripeGenerator :-)

Joomla free templates and not so free templates

If you want to download a free template for Joomla, here is the list of my favourite sources.
I want to emphasize that free templates for Joomla are not always as good as they can be but they could be a nice template for further development of your own design.

JoomlaArt free templates - 13 free templates so far
Free SiteGround Joomla templates - 55 free templates
JoomlaHut free templates - over 300 free templates
Free Joomla templates from 9templates - cca 180 free templates
Free Joomls-Skins templates - cca 80 free templates which are very nice (you have to register to download)
The biggest Joomla free templates gallery - cca 1750 free templates
Joomla24 free templates - more than 1400 free templates
djoomla free templates - there are some that you can find on other sites too, but maybe you'll find something new... - 213 free templates

If you would like to see what profesionals can do with Joomla design, try checking out the templates which are not free, but for sale - maybe you'll find an inspiration. I must say that the price is not always high, so you could consider buying one if you don't know how to make it yourself but really wants a nice and profesional looking template.

Here are the sources that I prefer:

JoomlaArt Demo
RocketTheme Demo - there is also 3 free templates
TemplatePlazza Demo - also 2 free templates
JoomlaDesigns Demo - a few free templates is also available
MamboDesign Gallery - they are compatible with Joomla 1.0x
PixelsParadise.com - very nice templates
CMSlounge.com - also 13 free templates
JoomlaAwards - submit your Joomla site to this gallery and maybe you'll be voted for site of the month
YOOTheme Demo - very web 2.0
Dezinedepot joomla templates - and a few free templates


This post will be refreshed as I find new cool resources so bookmark it ;-))

Joomla - sections vs. category vs. content

One thing that is very confusing when starting with Joomla are sections, categories and content or in short - their relation with each other.

And it's really quite simple if you visual it in a right way, so I'll try to help you with that and I promise you won't have problem with sections and categories again.

So, when you install Joomla, first thing you need to do is to figure out what you want to have on your site. What kind of content?

Will that content be categorized?

Lets suppose that you are making a web page about pets. You want to separate dogs from cats, fishes from birds etc. But you also want to separate the content for each pet by food, play, health etc.

In that case, your tree diagram would look something like this:



In this case you will have 4 sections (Cats, Dogs, Birds and Fish) and each section will have 5 categories (Food, Breed Guide, Health, Training, Other).

Now, to make this even more simpler, try to imagine that you are taking 4 big, thick folders and writting on each, the name of each section.

In thick folder named "Cats" you are putting 5 thin folders (categories) with names "Food", "Breed Guide", "Health", "Training" and "Other". You make the same folders (categories) for each section.

Now, when you are writting a content about some new breed of fish you put that content in section "Fish" under categorie "Breed Guide".

As simple as that...

Any questions?

Sk-rt.com

My boyfriend reads Digg.com all the time. Every day he has to see whats new. He's my typical geek. The geek that I love.

I also like Digg and I read it from time to time, but although I'm also in the computers, web design etc, I'm a woman. I needed more...

And then I ran into sk*rt.com last Friday and I fell in love... Now I have my own digg. Digg for girls - sk*rt... And I Love it!

Gimme some link lovin'

One of our colleague blogger Kassper is holding a contest in which he is giving out a lot of linky love for anyone who writes a short post or a review of his site.

All you have to do in the post is link ONCE to his blog which is all about Blogging Tips on how to Make Money Online and link ONCE to any of his posts. This is my favorite: Get In The Google Top 10 - Post Title Optimization.

In return you will get more than 50 backlinks to your blog.

So, what are you waiting for... Lets spread some love... :D

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

Image Mosaic Generator

This generator is a great way for making an original photos as a gift to your family and loved ones. Just pick a photo, upload it and this generator will make a great mosaic with photos from their base according to the photo you upload it.

Try it here - Image Mosaic Generator

But it only works in firefox!

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

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

Tutorom.com

One more web page that is worth of taking some time to explore is Tutorom.com - online elearning... What is it all about?

It's about people with certain knowledges who are making tutorials with video or written material and upload it on this page to share it with others...

Although it could seem like a usual DIY page or tutorial page, Tutorom.com is unique because the variety it offers... It has everything from PHP to Cake Decorating, from bicycle maintenace to cat health... Whatever you need, its probably there, so don't waste any more time to google for How to make this or that, just go to Tutorom.com...

Off course, you can also sign up for free and share your own tutorials with others...

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