Sunday, February 28, 2010

Fresh Corporate Joomla 1.5 Template

Musical Theme Joomla 1.5 Template

Wednesday, February 24, 2010

The Blank Template CSS for Joomla


Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website
In an earlier section, we discussed a slightly different design process. Instead of creating the design and then doing the CSS layout, we will be doing it the other way round, the Joomla CSS first. We are doing this because we want to make an blank CSS template file that can be reused by anyone.
Let's startout with a basic blank template, no layout, just all the font typography styling. This is a blank template to help speed production of a site. Its not a production template CSS file , all styles shouldn't be filled in, ones that don't get used should be deleted before using. This blank CSS file has several features:
CSS Shorthand
There are 'shorthand' styles at the beginning of each style definition. Once you have figured out the styles, fill the shorthand versions in and delete the long versions. The syntax is:
font: font-size |font-style | font-variant | font-weight |
line-height | font-family
Here is an example, rather than this...
font-size:100%;
font-family:Arial,Helvetica,sans-serif;
font-style:italic;
font-weight:bold;
line-height:130%em;
Have this:
font: 100%/130% Arial,Helvetica,sans-serif italic bold;

Read more at An Introduction to CSS shorthand properties about this syntax.
Global CSS Reset
At the beginning of this joomla CSS file is a few styles that set all styles to certain characteristics. You then have to over-ride these later on. The first key global style is:

* {
margin: 0;
padding: 0;
}
body {........
font-size: 76.1%;........

Everything is given a zero margin and padding and then font size is set to 76.1%. The reason font is set here to 76.1% is to try and get more consistant font sizes across browsers. All font sizes are then set in em's further down. A link that discusses this idea:
An experiment in typography at The Noodle Incident (Owen Briggs)
Header Tags and Joomla CSS Titles
Sometimes I will have Joomla titles turned off and use h1/h2 tags in content. Usually I am doing this to get a SEO bonus*. To get some consistancy across titles depending whether I have the off or not, I'll define the Joomla CSS alongside the hX tags. For example:
h1,.componentheading {...

This is personal preference, you could certainly separate them out.

*I have realised I could get a further SEO bonus by keeping the Joomla titles to show in parameters and then hiding them through a CSS style, and making the titles linkable. Any of these would work:
display: none;
height:0;
text-indent: -3000px;

Note that there is some discussion regarding hiding text with CSS. Please read this if you are considering it!
Joomla Rounded Corners
Towards the end of this blank template CSS file is the code to have rounded corners. Its the same technique used at joomla.org and requires the module suffix contained in index.php file to be "-3".
OK, ready? So here is the blank CSS template. Note it doesn't include any layout, we'll be looking at this next time.
The blank template CSS file for joomla is free for you to take and use. If you do, maybe drop me an email to show your project.
Now, how to use this blank CSS file? Well, after you have done all your joomla CSS styling, your file will have all that extra empty CSS. Just use this tool to get rid of it. Be careful and do a test to make sure you know what it does first!!
CSS Formatter and Optimiser
A preview from our next joomla tutorial
Tutorial 5: Making a 3 column Joomla Theme for your joomla website
In this joomla tutorial, we will look at a 3 column theme for your joomla website. Most joomla websites use 3 columns and having the theme start with that is a good foundation. Then later we can hide side columns if there is no content in them for that page.
source:http://www.joomlashack.com/tutorials/151-blank-template-css-joomla

Changing Joomla's Date Format to American Format

Want to learn more about how to build professional websites with Joomla? Then check out Joomlashack University, the #1 Joomla online training program in the world.
For one reason or another, American's preferred date format (e.g., February 25, 2010) is not an option within Joomla.
I know there's many people who use Joomla who are not in the U.S., but for those of you who are, if you'd like to change the date format in Joomla to the American format, this one's for you.
You can see the date format appear in a number of different places, but one common place you'll see it is in an article's date created information:
The date format you see in the above image is Joomla's default date format, which is the international date format.
I'll show you two ways you can change this date format: 1) By editing one of Joomla's core files, and 2) installing a US language pack.
Here's how to change the international date format to Month Day, Year (while also removing the time stamp) by editing one of Joomla's core files.
1) Using your ftp software, such as Filezilla, navigate to the en-GB.ini file, which is in this location: your root directory/languages/en-GB/en-GB.ini
2) Open the en-GB.ini file with your plain text editor and look for this line of code towards the top of the file:
DATE_FORMAT_LC2=%A, %d %B %Y %H:%M
3) That's Linux date format code, and you'll need to change it to this:
DATE_FORMAT_LC2=%B %d, %Y
4) Once you make that change, save the en-GB.ini file and upload it back to the en-GB directory.
5) Go back to the front of your site and refresh the page. You should see this date format now:
Now, here's an important note to keep in mind: when you make this change, you're editing a core Joomla file. When you upgrade Joomla, there's a chance that there will be a new language directory, a new en-GB directory, or a new en-GB.ini file.
If that's the case, when you upgrade, your date change will be lost, since the en-GB.ini file that you edited will be overwritten by the new one in the Joomla upgrade package.
If you're fine with potentially needing to make this simple change each time you upgrade, then you're fine.
If you want to avoid that, there's another way to make this change: install the American Language pack by Dave Morgan.
Here's how:
1) Go to this page and download the language pack by clicking on the download link:
English Language pack
2) Install it in Joomla by going to Extensions>Install Uninstall.
Click on Browse, find the language pack file you downloaded, and double click on it when you find it.
Then click on Upload and Install on the Extension Manager page.
3) After it's been successfully installed, go to Extensions>Language Manager.
4) Check the radio button next to English(United States) and then click on the Defualt icon in the upper right of the page to make this language pack your default language pack.
5) Then, go to the front of your site and refresh the page, or navigate to a page that has a date showing and you should see a date format like this:
If you want to edit how that date format is appearing, such as taking the time stamp off, go to language/en-US and open the en-US.ini file. Change the date format for LC2 in a similar way that I described above for editing the en-GB.ini file.
For example, if you wanted to remove the time stamp, you would delete the %H:%M on the line of code for the DATE_FORMAT_LC2 within the en-US.ini file. Currently, that line of code is on line 11 of that file.
When you update Joomla, your date format changes will remain in tact as long as the core Joomla team doesn't create a new language directory named en-US as a new option.
source:http://www.joomlashack.com/tutorials/505-changing-joomlas-date-format-to-american-format

real estate template Joomla 1.5

Tuesday, February 23, 2010

Going to School Joomla 15 Template

Green Nature Joomla1.5 Template