FOLLOW USJoomlashack FacebookJoomlashack TwitterJoomlashack Google +Joomlashack RSS

Joomlashack logo blog
Friday, 22 June 2007

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.

Getting a world class template from Joomlashack is now easier than ever. We have implemented a new system to give you total control over your purchases, invoices and downloads.

Friday, 22 June 2007

Email marketing: Love it or hate it, it's the way the web works. No matter what kind of website you have, building a list and communicating to a constituency is a key part of any successful website.

In 2006 I THOROUGHLY tested and reviewed many email systems, and my conclusion was that when your email lists start to get above a thousand subscribers, a whole set of problems arise that basic newsletter programs simply can't solve. You need the backing of a 3rd party company ensuring your email deliverability.

So then I investigated 3rd party hosted providers: Detailed Reviews of Email Marketing Solutions

Then I realized there was a problem. None of these solutions integrated into Joomla. A critical factor was missing: when users register on a Joomla site, importing them into an email list can be difficult and time consuming. There needed to be an automated process.

So we created one --- J!Contact

Saturday, 09 June 2007

Here at Joomlashack its our continual goal to improve our customer experience. We have been taking careful note of suggestions you have all been making in our feedback board. We are please to announce the launch of Shack 2.0!

Better support, more tutorials, a better cart and access to template updates. Let me take you a brief tour of what we have waiting for you.

Written by Paola Gómez
Sunday, 20 May 2007

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.

Summary

Usability, accessibility and search engine optimization are all phrases used to describe high quality web pages in today's world wide web. In reality, there is a significant amount of overlap between them and a web page that demonstrates the characteristics of one does so for all three. The easiest way to achieve these three goals is to do so using the framework laid out in the W3C web standards.

 

Written by TJ Baker
Sunday, 20 May 2007

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.

Right now, there is no robust and feature rich blog extension for Joomla that will fufill the core features that is needed in a blog, and does it as a native (not a port) extension. Until something has been developed to fill this need, wannabe bloggers are probably much better off building a blog out of its consituant parts. Its a little more work, but the solution is more robust and easier to manage.

Written by TJ Baker
Sunday, 20 May 2007

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.

This tutorial quickly leads you through installing Joomla 1.5. It details both a local installation for testing (if you do not have a hosting account or have a slow internet connection) and a real web server installation.

Written by TJ Baker
Friday, 18 May 2007

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.

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

As part of the Official Joomla Documentation program, this tutorial has been developed by Barrie North of Compass Design. As well as here at the official Joomla Dev site (dev.joomla.org) it is also available at www.compassdesigns.net in various complete formats, Word, PDF and HTML.

In this tutorial, we'll go through the steps of creating a joomla template. Joomla is an open source Content Management System (CMS) that is freely (literally) available and supported by a large on-line community. Specifically, we will create a template that uses cascading style sheets (CSS) to produce a layout without use of tables. This is a desirable goal as it means that the template code is easier to validate to World Wide Web Consortium (W3C) standards. It will also tend to load faster, be easier to maintain and perform better in search engines. We will discuss these issues in detail later in the tutorial.

Written by TJ Baker
Friday, 18 May 2007

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.

Tutorial 6: Enhancing a Template for Joomla SEO

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your website

So we have a very basic shell of a web site. Doesn't look very interesting does it. Well, we can soon change that, let's make a few changes. We will also optimize the template for SEO. Joomla has some challenges compared to a static website, but techniques such as those we describe here can improve your joomla SEO efforts.

Some basic changes to the Joomla CSS

Let's first make the text a little more readable, two quick changes to the joomla CSS.

body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%; /* don't go smaller than this */
}

Note we dropped the style being applied to "html,body" as we didn't want the percentage font size being applied twice!

This makes the font a more reasonable size. Remember, we talked about how we were sizing our fonts in one of our previous articles, A Blank Template CSS file for Joomla. I have also chosen a sans-serif font: verdana. Web pages have the opposite readbility of paper pages. On paper, serif (like Times New Roman) are more readable, on the web its the opposite.

Next, let's center the page.

body {
text-align:center; /* for IE */
}
#wrapper {
position:relative;
width:85%;
margin:0 auto;
}

OK, so here we have centered the page and made it a little wider. This is a fluid joomla CSS layout, the main part of the page will always be 85% of the browser window. It re-seizes depending on the screen resolution.

Now, we have to do a little changing of the column sizes. This is important, if columns overlap, it can break a layout in a browser.

#leftcontent {
width:175px;
}
#centercontent {
margin-left: 190px; /*tweaked a little to get a slight gap*/
margin-right:165px; /*tweaked a little to get a slight gap*/
}
#rightcontent {
width:150px;
}

I have reduced the width of both side columns and increased the margins. Note I have made a small gap between them and the center column.

Let's make a splash of color, C00 is a shade of red and fff is white:

body { ..
background-color: #C00;
}
#wrapper {
background-color:#fff;
}

Joomla SEO

OK, so here is the really good bit. It's to do with joomla search engine optimization or joomla SEO. The closer something is to the beginning in the xhtml code of your page, the more weight it carries for yoursearch engine ranking . Unfortunately, a joomla website outputs alot of xhtml. This means that your important content (the middle column) gets pushed down. But, CSS to the rescue, remember that we absolutely positioned our side columns. This means that they can appear anywhere in the source, as long as they are in their container, the "wrapper". So let's put them after the main content! Heck, if you wanted and had alot of non-vital content in it, you could even make a header container and put that after the main content too.

<body>
<div id="wrapper">

<div id="centercontent">
<div class="insidecenter">
<?php mosMainBody(); ?>
</div></div>

<div id="header">
<?php mospathway() ?>
<?php mosLoadModules('top');?>
</div>

<div id="leftcontent">
<?php mosLoadModules('left');?>
</div>

<div id="rightcontent">



<p><a href="http://validator.w3.org/check?uri=http%3A%2F%2Flivesite.compassdesigns.net%2F" target="_blank" title="W3C Joomla Design">Valid xhtml?</a></p>

</body>
</html>

We had to add this rule (you can see it in the xhtml above) to push the center column down.

.insidecenter {
padding: 100px 0 0 0;
}

Last but not least we move the footer below the end of the wrapper div, putting it into the colored page background.

Now we add some titles for the site.

<div id="header">
<h1><span><?php echo $mosConfig_sitename; ?></span></h1>
<h2><span><?php echo $mosConfig_live_site; ?></span></h2>
<?php mospathway() ?>
<?php mosLoadModules('top');?>
</div>

Notice how the name of the site and its url are in header tags. This does two things, first it is good practive for semantic layout, so increases the accessibility of the site, second, it helps your joomla SEO as anything in a header tag is given slightly more weight as a keyword.

So, there you have it, a source ordered joomla template, this week with a little kick for your joomla SEO needs.

A Joomla SEO template

Is it still a W3C valid joomla template?? Well, what do you think?

 

How do you set up SEO optimized Websites? Do you want to learn SEO? Would be interested in SEO lessons?  SEO Courses? SEO video tutorials? SEO Training? Conversion optimization lessons? Conversion optimization courses. Conversion optimization video tutorials. Conversion optimization training.

 

A preview from our next joomla tutorial

Tutorial 7: Using CSS to add imagery to your joomla website (unpublished)

 

Joomla template design from Compass Design� 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design
Please This email address is being protected from spambots. You need JavaScript enabled to view it. if you'd like to use this article on your site

 

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.

Written by TJ Baker
Friday, 18 May 2007

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.

Reprinted with permission from Compass Design: Joomla template designs for your website

An Incomplete Guide to SEO

How to earn $1,000�s a day with Search Engine Optimization and Joomla.

GoogleSecretsRevealed.PNG

"How you can profit from the EXACT SAME search engine optimization strategies that I used to charge clients $3,590 a day to implement!"

In this web-based, no-hype guide, I'll reveal my simple step-by-step search engine optimization strategy that I have been using for 2 years on over 350 clients and that anyone can use to get a front page ranking on Google:

Do you want:

More web site traffic? More orders? A better cash-flow? A healthier Internet business? A front-page ranking on Google and all major search engines? More money than you thought humanly possible?

if so, keep reading. Get ready to become a search engine optimization "insider". What I'm about to teach you are the actual secrets that I have used to get unlimited daily traffic for over 350 of my clients from Google. For the sake of your business, you can't afford not to read my search engine optimization guide!

Written by TJ Baker
Friday, 18 May 2007

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.

Tutorial 5: Making a 3 column joomla theme for your website

Reprinted with permission from Compass Design: Valid W3C joomla template designs for your 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.

Let's face it, making a joomla theme with tables is easy. That's why we all did it (may we hang our heads in shame). Achieving the same using CSS is much harder. The learning curve is steep and there are lots of issues with how browsers interpret the CSS. We mentioned this some in our joomla tutorial: Joomla, doctype and the blank joomla template.

I am going to move quickly on to the actual layout possibilities, but I recommend reading at least one "beginners guide to CSS" if new to it. Here are a few suggestions:

Kevin Hale's - An Overview of Current CSS Layout Techniques
htmldog's CSS Beginner's Guide
Mulder's Stylesheets Tutorial
yourhtmlsource.com

Ok, so now we have done some bedtime reading, or knew some of CSS to start, its time to look at our layout choices. Here is a decent list of all the CSS template /CSS themes I have come across:

Although its worth taking a while to look some of these over. This list is more of a resource you can bookmark and come back to later. You could use any of them to make a joomla website.

A Three Column Joomla Theme through CSS

After reading through any of these CSS guides above, or know a little youself, you will know that there are a number of ways to layout a page. Now, for those with a little CSS background already, you might want to wander over to csscreator.com; http://www.csscreator.com/version2/pagelayout.php. Its a great tool where you can make an assortment of layouts and it will generate the CSS for you, don't leave home without it!

However, for the purposes of this joomla tutorial, we are going to be using a different layout technique (csscreator uses floats), that being absolute positioning. I think that using this CSS is perhaps the easiest model to understand for beginners. Quite simply you specifiy exactly where the "box" of content will be on the page. So for example:

#leftcontent {
position:absolute;
top:20px;
left:50px;
width:200px;
}

will make a box that is 200px wide, and starts 20px from the top and 50px from the left. Now, 50 pixels from what I hear you ask. Well, there is a trick here, normally it will be 50 pixels from the top of the viewport (browser window). However, if the parent selector (the box the leftcontent box is in) is also positioned, then the leftcontent style will be relative to THAT. OK, you can go grab another beer/chai/sherbet, that made no sense to me either! Let's add another style and draw a couple of pictures

This will be the parent box:

#wrapper {
position:relative;
width:560px;
margin: 50px auto;
}

If curious, we have changed the type of positioning from absolute to relative (there is also fixed). We are getting into what is called "document" flow and how elements effect other elements. Read any of the layouts above and you will find discussions on this. OK, let's use this html as out first example:

<div id="wrapper">
Text in wrapper, blah, ipsum stuff
</div>

<div id="leftcontent">
Leftcontent text, blah and domini and what is the url to generate that random latin?
</div>

Based on our two CSS rules above, this would look like:

joomla design

OK, not much use. Now let's put the leftcolumn div inside the wrapper (hey, why do you think we called it "wrapper"?)

<div id="wrapper">
wrapper text, blah, blah and ipsum stuff
<div id="leftcontent">
Text in leftcontent, blah, blah and ipsum domini and what is the url to generate that random latin
</div>
</div> <!-- End of the wrapper div-->

Now it should look like this:

joomla design

Much better. Now the text is all ontop of itself, but we don't need to worry about that at the moment. We can now look at the CSS we will use for our page. Note this gets put in a seperate CSS file called layout.css, which is then imported into template_css.css. I tend to seperate layout from typography in design, then put together for production. One reason is to try and reduce browser errors. Many of these errors are when you try and combine positioning with padding and/or size. Try to avoid applying padding/borders and a fixed width to an element. By putting all my positioning in this sheet and all my padding and borders in another, it forces me to do this (I combine the sheets later). Steps like this make validating your joomla website much easier.

So, with that bit of explanation, here is our 3 column joomla theme:

/* Basic 3 column joomla theme*/
body {
margin:10px 10px 0px 10px;
padding:0px;
}
#leftcontent {
position: absolute;
left:10px;
top:100px;
width:200px;
background-color:#fff;
border:1px solid #000;
}
#centercontent {
background-color:#fff;
margin-left: 211px; /*1 more than 210 because we have to count the border*/
margin-right:211px;
margin-top:7px; /* Margin here to line up center content with side columns */
border:1px solid #000;
}
#rightcontent {
position: absolute;
right:10px;
top:100px;
width:200px;
background-color:#fff;
border:1px solid #000;
}

An adpatation of a layout used a few places round the web, you can read more about it at http://glish.com/css/7.asp. Note we have dropped a large amount of the CSS to make it simpler and because we are not going to be supporting IE5.X with this site.

Its not *quite* simple absolute positioning (you didn't think it would be that easy did you?). The leftcontent and rightcontent is positioned as we just saw. But the center content seems to have no positioning at all. What gives? Well, absolutely positioned elements are taken "out of the document flow". This means other content will just get placed as though these absolute elements were not there. We saw this in our example above when our text overlapped. We are doing the same thing here, but have been crafty by using left and right margins for the centercontent the same width as the left and right columns. This means that the center column content will squeeze in between the two side columns even though it doesn't know they are there.

Right, so its live site design time (drum roll). Remember, our index.php file currently looks like this:

<body>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosLoadModules('top');?>
<?php mosLoadModules('left');?>
<?php mosMainBody(); ?>
<?php mosLoadModules('right');?>
<?php mosLoadModules('bottom');?>
<?php include_once('includes/footer.php'); ?>
</body>
</html>

Now we will put in some positioning with our new CSS:

<body>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
<?php mosLoadModules('top');?>

<div id="leftcontent">
<?php mosLoadModules('left');?>
</div>

<div id="centercontent">
<?php mosMainBody(); ?>
</div>

<div id="rightcontent">
<?php mosLoadModules('right');?>
</div>

<?php mosLoadModules('bottom');?>
<?php include_once('includes/footer.php'); ?>
</body>

OK, so now we have a 3 column joomla theme, not bad. Let's take a quick look; livesite.compassdesigns.net . Well, our columns are there, and the right places.Resizing your browser you will see that the size of the middle column adjusts. Commonly called a fluid CSS layout. Taking a quick look in Internet Explorer 6 we see some weirdness going on with the bottom of the left column, but hey, weird and IE often occur together in a sentence!

Does it validate?

Yes, we still have a W3C Standards Compliant CSS Joomla Website . OK, I grant you it doesn't look that amazing right now, but hey, that's what next week's installment is for!

 

A preview from our next joomla tutorial

Tutorial 6: Enhancing a Template for Joomla SEO
So we have a very basic shell of a web site. Doesn't look very interesting does it. Well, we can soon change that, let's make a few changes. We will also optimize the template for SEO. Joomla has some challenges compared to a static website, but techniques such as those we describe here can improve your joomla SEO efforts.

 

Joomla template design from Compass Design� 2005 Compass Design/Barrie North, December 2005.
Barrie creates valid joomla template designs at his consultancy, Compass Design
Please This email address is being protected from spambots. You need JavaScript enabled to view it. if you'd like to use this article on your site

 

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.

Written by TJ Baker

RECENT POSTS