Compassdesigns.net

Teaching - Web - Sailing

  • Home
  • Services

6: Enhancing a Template for Joomla SEO

December 10, 2005 By barrie@compassdesigns.net Leave a Comment

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.

Overview of a Joomla Design

<body
<div id=”wrapper”

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

<div id=”header”
<?php mospathway() ?
<?php
mosLoadModules(‘top’);?
</div

<div id=”leftcontent”
<?php
mosLoadModules(‘left’);?
</div

<div id=”rightcontent”
<?php
mosLoadModules(‘right’);?
</div

</div

<?php mosLoadModules(‘bottom’);?
<p
uri=http://livesite.compassdesigns.net”
target=”_blank” title=”W3C Joomla Design”

</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
<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?

Filed Under: Uncategorized

What makes a good designer

December 8, 2005 By barrie@compassdesigns.net Leave a Comment

Recently the Disney Store in the UK (disneystore-shopping.disney.co.uk
) redesigned their site with a “reputable” big design firm. The result
was a huge backlash from the design professional community. The new
site was using design practices that were 5 years old and made a highly
inefficient site. Before they changed it, Disney was showing up in
Google selling “spacer gifs” which are extra layout images, an
out-dated way of designing out a site.

DisneySpacerGif The result was an open letter to Disney which had huge support.

Needless to say, Disney changed the site.
Fortunately, there is a rough test that takes 5 seconds to do. There
exists a set of “standards” for web design. Think of them as building
codes for web sites. The director of the organization that creates them
is Tim Berners-Lee, the inventor of the world wide web. You can visit
their site (http://validator.w3.org)
and type in a site to see how well it meets these standards. A quick
test is to type in a design firmÂ’s web site to see if it meets
standards. If you have time you can even test a few from their
portfolio. Now, you donÂ’t have to follow building codes when you build
a house, but wouldn’t you rather hire a contractor that did?”

Filed Under: Uncategorized

An Incomplete Guide to SEO

November 30, 2005 By barrie@compassdesigns.net Leave a Comment

Taken from: http://www.google-search-engine-optimization.com/

Used without permission as an example of how web marketing consultants get a bad name!

There
are millions (literally) of these sites on the web. The real truth
about search engine optimization is that there is no “silver bullet”
any more. It used to be true that you could stuff a few keywords into
some metatags and you get lots of traffic. Now, search engines are much
smarter. Google recently released its patent #20050071741 on its
“Information Retrieval Based on Historical Data” (that’s that little
search page to you and me). In the document were over 118 factors that
effected a web site’s position in the search engine’s rankings!

This is the real truth about SEO:

There is no such thing as Search Engine Optimization any more.

The
only reality now is having a long term web marketing strategy and a
commitment to building a site full of quality information.

Having said that, assuming that your site is one of the ones with the quality content, SEO still has its place.

On an average day, about 68 million Americans will go online.”
“More than half of them, over 38 million people, will use a search engine.”

Source: Pew Internet & American Life Project, January 2005.

There
are a lot of people out there, and why shouldnÂ’t they come to your
site? Especially if all the “other guys” are still just stuffing
metatags. Over the next five articles in this series, I will explain
some of the things you can do to increase your traffic and visibility,
and make specific references to how this is implemented in Joomla. I
will be looking at the steps in a roughly chronological order that you
might take as you launch a new site. Follow this guide and some time in
the next 6 months, you might be getting that traffic you wanted.

The SEO and Joomla Series:

Part 1: How to earn $1,000Â’s a day with Search Engine Optimization and Joomla

Part 2: Planning your site

Part 3: Designing your Site

Part 4: Launching your site


Planning your site

Why do you want traffic?

Before you go anywhere you need to answer this question. You can break it down into:

  • What is your web site about?
  • Who will visit it?
  • What will they gain?
  • What will you gain?

Write the answers on a piece of paperÂ… no really!

Now you have thought some what about who is going to visit your site, we can talk about the how.

Keywords..
Keywords..
Keywords..

Imagine
you are a potential visitor to your site. What keywords will you type
in to find it? Take a blank piece of paper. Now, on your piece of
paper, write down as many words or phrases as you can that you as a
potential visitor would search for to find a site like yours in a
search engine. Try to write 20 to 30 keywords or phrases on your piece
of paper. If youÂ’re having trouble coming up with keywords, ask your
partner, friends or family members which keywords they would use to
find your site. At this point you should have a list of no less than 20
keywords or phrases at your disposal.

You need this tool below:

http://www.pixelfast.com/overture/

I
use it almost on a daily basis. It allows you to find out which
keywords people are using in their searches, which as IÂ’m sure you will
agree is very valuable information!

Another useful way of doing this is a beta Google tool:

http://www.google.com/webhp?complete=1&hl=en

Start
at the top of your keyword list that you wrote earlier and enter each
one into the text box. As you can see, the term suggestion tool returns
a list of keywords and how many times they were searched for. As you
type each of your keywords into the text box and see the number of
searches, write that number down next to your keyword on the page.

You
should now have a list of keywords with the number of searches for that
keyword from last month on your page. To get the 5 most popular
keywords, simply take the 5 keywords with the highest number of
searches. Flip your paper over and write them down in order of most to
least popular. You should now have your list of 5 popular keywords,
maybe something like this:

  • Marketing: 1,406
  • Advertising: 704
  • Web Site Promotion: 442
  • Marketing Online: 56
  • Branding: 5

These
keywords are going to form the basis for all of your site optimization
strategies. Keep your keyword list with you as you read through the
rest of these articles.

The first way to use these keywords

Engines
use your domain name as a factor in the Search Engine Results Page
(SERP). Now there is a lot of debate here, some think that branding for
the viewers is more important than having a keyword in the URL
(remember the URL of my lead example?). But, if you can combine both,
then great! Notice my domain is www.compassdesigns.net. This will get me a little boost if someone searches for “web design”.

Anyway,
you canÂ’t easily change your domain after you have made your site, so
this is why we are thinking about SEO before we have even started on
the site design. If we can use a keyword in the domain, go for it.

Part 2 Summary:

  • Ask yourself who will visit your site, why and what will you get out of it.
  • Research your keywords.
  • Domain name; branding or keyword?

Designing your Site

Ready for the techie stuff? OK, grab your coffee/beer/herbal chai.

First and most important:

You
need lots of content, LOTS of it. Before you have even considered site
design and such, you should have 100 odd pages of actual content. Yes,
there are supposed to be two zeroÂ’s on the end of that 1Â… 100, I mean
it. A page of content means about 200-500 words.

Of
course, no-one does this, I didnÂ’t! But, if you are serious of getting
gobs of traffic, and you do have lots of rich content to publish, just
think how far ahead you will be of poor schmuks like me.

As
I mentioned before, designing your site for traffic, both human and
search engine spider is very different than a few years ago. Its now
about what is on the page that people can see. No more having a 200
keyword list that is set to the same color as the background at the
bottom of the page.

If your impatient, according to the
“SEO guys”, here are the most important factors in deciding your SERP,
along with a vague number I came up with to show relative value. These
ten factors add up to a whopping 21% of the SERP.

Title Tag – 2.3%

This
is what appears in the blue bar at the top of your browser, it comes
from a metatag called <title

Joomla! Note!
SEF enabled,
you title will reflect the content of the page. Even better is to
install a 3rd party SEF, then you can set the page title to be the
title alias of that page. I prefer using the title alias for my page
title, then I can have the title on the page and control the one
delivered in <title

Critical note:
You MUST have some sort of SEF enabled. Search engines hate dynamically
generated pages, and thatÂ’s the whole point of Joomla! Even if you have
just basic enabled, the benefit of the search engine “seeing” static
pages is huge, far outweighing the little bonus gained from having
keywords in the title too.

Anchor Text of Links – 2.3%

The
phrasing, terms, order and length of a link’s anchor text is one of the
largest factors taken into account by the major search engines for
ranking. Specific anchor text links help a site to rank better for that
particular term/phrase at the search engines. In other words, itÂ’s the
actual text that represents the link on a web page.

Keyword Use in Document Text – 2.2%

Your
keywords must appear in the actual copy of the page. Supposedly search
engines pay more attention to the first and last paragraphs. The way to
go about this is have your keywords firmly in your mind as you write
your copy. I donÂ’t know about you, but I find this really hard. I
prefer a different approach.

There is a simple trick
here, write your quality content, then use a keyword density tool to
find the keyword density. THEN, take the top words and add them to the
meta keywords tag for that page. This is somewhat backwards for some
maybe, it optimizes a page for what you actually wrote, rather than
trying to write a page optimized for certain words. I find I get much
better correlation like this and can then tweak my text afterwards.

Sure,
if you want to you can further optimize by having the keywords in
header tags and bold etc. As a guide, these might contribute less than
1% to the SERP.

Joomla! Note!
Joomla is good and bad
here. The good part is its easy to add keywords to the meta keywords
tag for that page. You just go to the meta info when you are editing
the content and plop them in. Note that they are added as well as any
keywords you have specified in the main global configuration. Its good
to only have your most important 2-3 words there and put the rest in
the pages.
The bad part is linked to the fact that Joomla is
dynamic. The code is not very lean, that is, there is a lot of html
compared to actual copy text. This in turn reduces your keyword density
(indirectly). One way to address this is to design without tables (I
hear vavroom applauding). Using CSS instead of tables means leaner
code. Its also possible with CSS to have your page “source ordered”.
This means that the real content (the middle column to you and me)
comes before the side columns and/or navigation.

Accessibility of Document – 2.2%

We
are not talking human accessibility here (as in 508). Accessibility is
anything on the page that impedes a search egine spiderÂ’s abilty to
crawl a page. There can be a number of culprits:

  • Avoid Splash Pages: Flash and heavily graphic introductions prohibit engines from crawling your site.
  • Avoid Frames: Never use pages with frames. Frames are too complex for the crawlers and too cumbersome to index.
  • Avoid
    Cookies: Never require cookies for Web site access! Search engine
    crawlers are unable to enter any cookie-required materials.
  • Avoid
    JavaScript when Possible: Though JavaScript menus are very popular,
    they disable crawlers from accessing those links. Most, well-indexed
    Web sites incorporate text-based links primarily because they are
    search engine friendly. If necessary, JavaScript should be referenced
    externally.
  • Avoid Redirects: Search engines frown upon companies that use numerous Web sites to redirect to a single Web site.
  • Avoid
    Internal Dynamic URLs on the Home page: Though many sites incorporate
    internal dynamic links, they should not incorporate those links on the
    home page. Engine crawlers are currently ill-equipped to navigate
    dynamic links – which often pass numerous parameters using excessive
    characters.
  • Utilize Your Error Pages: Too often companies
    forget about error pages (such as 404 errors). Error pages should
    always re-direct “lost” users to valuable, text-based pages. Placing
    text links to major site pages is an excellent practice. Visit www.cnet.com/error for an example of a well-utilized error page.

Joomla!Note!
Many things to be careful of here. The most important is go turn on
Search Engine Friendly URLÂ’s (SEF). It changes your links and pages
from dynamic to static.
The other important factor is JavaScript
menus. They are very popular because the look great. As good as they
look to people however, they look equally as bad to spiders. Try using
CSS to style you menus, youÂ’ll be surprised how good they look. You can
even have drop-down sub menus.

Internal Links- 2.1%

Even
more important than the holy grail of external links is internal links.
Who knew! Easily the most underrated criteria. But, its important to
make sure you are making good use of anchor text. A well-linked to
document is considered more important than an obscure page.

Tight Site Content Theme– 2.1%

What
your website is about is determined through analysis of the content.
Its critical that it correlates to keywords, anchor text, etc.

One
strange off shoot of this is perhaps its not worth spending much effort
trying to build the page rank of the home page. This strange concept is
explained in the idea of Search Engine Theme Pyramids.

A
related factor is having a good sitemap. Not only is it good spider
food, you can also load it with lots of quality anchor text for those
internal links as well as relevancy text (that which appears near a
link). Also important is the invisible Google sitemap which is an xml
file for the Google spider only.

Joomla!Note!

Thumbs
up for Joomla! Add-ons such as Docman make it effortless to add globs
of content quickly and easily. Remember, itÂ’s a Content Management
System after all. There are also some add-ons for sitemap, though I
think that you have to upload the Google sitemap independently.

External Links – 2.0%

These
are the links from other sites to you. Note its much better to have
specific pages linked rather than your homepage because of the idea of
Search Engine Theme Pyramids. DonÂ’t bother with link farms or anything
you see advertised for a link. You are much better off finding links
from sites that have similar topics as yourself (see below)

Theme of Linking Sites– 2.0%

The
search engine is trying to figure out what your page is about, so it
can decide if its relevant to a users search. Links from pages with
similar topics add credence to your page. When trying to search out
those links you can use something like WebFerret.
Or if you just want a quick method, use the “related:” tag in Google,
e.g. type “related:www.yahoo.com” in and it will search for sites
related to the topic of Yahoo (whatever that is?). Then spend some time
emailing webmasters and asking for links. There is software out there
that will do this automatically for you.

Popularity of Linking Sites – 1.9%

This
means that links from sites that are “important” (i.e. have a high
SERP) are more valued than those from a lower SERP. A factor worth
considering when searching out links, get the ones from sites with a
high page rank first.

Keyword Spamming – 1.9%

Careful,
this is a negative factor!! This means having a keyword density in text
or tags so high that the engine decides you are stuffing. Your rank
will go from #1 to #10000 in a heartbeat. Want to know the best part?
No-one actually knows what percent density this is, and its probably
different for different engines! Between you and me, I am not going
above 15% on my pages.

For the morbidly curious, the other factors I have on my site (there are too many to post here) at Search Engine Ranking Factors.

Part 3 Summary

  • Fortune favors those with rich content
  • There are many factors that determine search engine page ranking.
  • Rather than tweak minor tags, its better to leverage JoomlaÂ’s true
    power of being a fully fledged Content Management System to gain rank.
  • DonÂ’t use flash (ok, I admit I am biased)
  • Make sure your pages are under 10k. Not mentioned above, but it just occurred to me.

Launching your web site

So
you have designed your web site, and now its time to put it online.
IÂ’ll leave the actual process of installation for another time. I will
mention hosting however.

Joomla!Note
Not every host
will meet the needs of a Joomla site. One issue is safemode. ItÂ’s a
server setting and it needs to be off for Joomla to work properly.
Other issues that often crop up are ones involved “ownership” of files
on the server. I have a few reviews of recommended Joomla hosts here.

Ok, so we have our site up, what next?

Open your doors to the spiders

To
start showing up on rankings, your site needs to be indexed. This means
a program called a spider comes to your web site and crawls it.
Crawling involves looking at the tags, text and following all the links
it can find. Make sure your site is easy to crawl:

All
pages should be linked to more than one page on your site. This is easy
to do with Joomla, it happens with the mainmenu and other menus. Also
try and make all pages within two levels of the root (home page). If
they are buried, try and add more specific sections to hold that
content.

Joomla!Note
Two Common Joomla Mistakes!

  • Flash
    menus. I showed my bias against flash in my last article. Spiders
    struggle to follow flash. If you really must have flash navigation,
    then you need to include some plain old text links somewhere on the
    page. An easy way to do this is in the footer. Go to
    /includes/footer.php and add your links there. They will then turn up
    on every page, easy eh?
  • Don’t put it online before you have a
    quality site to put online. It’s worse to put a “nothing” site online,
    than no site at all. You want it flushed out from the start. Its very
    easy to fall into this trap with Joomla as its so easy to put a site
    up, especially with the built in templates. Better to work off line
    with MSAS and import the SQL database (note to self: write guide to
    working offline)

One last thing, to actually be indexed, the spiders need to know you exist. This happens by submitting your site and linking.

Submitting your site

The first part is real easy. Go and submit your site by hand to all the major engines, hereÂ’s a few to get you started.

http://www.google.com/addurl/?continue=/addurl

http://search.yahoo.com/info/submit.html

When
you do submit, take note of who supplies the search. Alltheweb is done
by yahoo for example, you donÂ’t need to submit there.

The
second part is much harder. Forget about you submissions for a few
months. ThatÂ’s right, submit them and forget about it. DonÂ’t even think
about using one of those “submit your site to 89768 engines for $20”
deals.

Also go submit to a few directories. If you have
the right contacts, sacrifice a goat or something and submit to
dmoz.org. ItÂ’s the grand daddy, with a page rank of 9, but almost
impossible to get on.

Linking your site

Getting
links to your site is perhaps the most important part of SEO and
perhaps worth a topic all in itself. Needless to say, the more links
from quality sites you can get the better. Also ones with the same
topic

An easy submission is in the community news section of Joomla.org.
Hey, its free, will give you a link and also might trigger a spider to
crawl you. If you have a useful site, announce it o the community!

Logging and Tracking

Get
a decent tracker that can track inbound referrals (where someone came
from). Most hosts have several built in, I use awstats. Whatever you
do, don’t use a lame graphic counter, it doesnÂ’t give you want you want
and looks unprofessional. If your host doesn’t support referrers, then
back up and get a new host. You can’t run a modern site without full
referrals available 24x7x365 in real time.

For the more
compulsive amongst us, you can start watching for spiders from search
engineÂ’s. Make sure those that are crawling the full site, can do so
easily. If not, double check your linking system (use standard hrefs)
to make sure the spider found it’s way throughout the site.

Buying Traffic

One
underused way of SEO is simply buying traffic. You might not think of
advertising when you think of optimizing your site, but the ultimate
goal of all this is traffic, so why not just skip the middle man.

I
recommend using Google AdWords. ItÂ’s a Pay-per-click program that has
somewhat revolutionized online advertising. Basically you only pay
(usually a few cents) when someone actually clicks on your link. Your
actual ad is designed based on certain keywords you want (remember part
2?), this means it targeted traffic, the best kind.

IÂ’ll
probably do a guide at some point, but to get started, you need a
Google account. Also, to help you figure out how much to bid, and on
what words, I use this tool the most:

http://www.pixelfast.com/overture/

It does the bid and terms at the same time.

Where is all my traffic?

In March 2004, Google implemented a new filter, now referred to as “The Sandbox”.

Google’s
thinking was, A new web site shouldn’t be able to get good ranking,
until they prove themselves. Spammers generate millions of new pages
daily, along with millions of new links to go with them.

Google
withholds high ranking ability on new sites, by de-valuing the new
links for 2-4 months. If the domain and backlinks have existed for a
certain length of time (4 months?), then you are OK, and escape from
the sandbox.

This penalty is new-site based.
Long-standing sites have no trouble ranking new pages. Over time, the
newly generated links are given weight, and eventually the sandbox
effect goes away.

DonÂ’t get too worked up about instant
traffic, its probably not going to happen anyway because of the
sandbox. For the next few months you are better off spending your time
writing content, a page every few days.

Part 4 Summary

  • Use a Joomla friendly host
  • Make sure your site can be spidered
  • Submit and forget
  • Buying traffic is surprisingly cheap
  • You wonÂ’t get good SERP to start

 

Filed Under: Joomla Tutorials

Joomla CSS Drop Down Menu Tutorial

November 30, 2005 By barrie@compassdesigns.net Leave a Comment

Well, there are a number of techniques you can use with CSS to get
more visually attractive menus, all of them use unordered lists
(bulleted lists to you and me) to create the menu. LetÂ’s look at a few,
weÂ’ll start with a drop down menu.

A few people (OK, one) wondered how I got Joomla to have a drop down menu on a recent site;

www.thrutheturnstiles.co.uk

The menu is what has been coined “suckerfish” (don’t ask me why),
its pure CSS, very lean, hack free and just as 12 lines of JavaScript
to bail out Microdoze IE.

You can see a demo here:
www.htmldog.com/articles/suckerfish/dropdowns/example/

You can find guides to how the thing works at a couple of sites:
www.htmldog.com/articles/suckerfish/dropdowns
www.alistapart.com/articles/dropdowns

Now, you might have noticed that you need your menu outputted as a
good clean list. Well it just so happens that there is a module out
there to do this, and weÂ’ll need it. Its called extended_menu, you can
find it here:
de.siteof.de/detree/extended-menu.html

So, grab the module and install. Now let’s set it up. It’s easiest if you give it a menu and module class suffix. I used “mainnav” (you’ll see in the CSS below). A couple of other settings you will need:
Menu style: Tree List
Expand Menu: Yes

So put the menu where you want it, then to the CSS. This is a little
tricky, it took me some trial and error to get the effects I wanted,
but you can just skip that part and use mine J.

#twocols{ /*the columns that gets dropped down over yours might be different*/
z-index:20;
}
#leftcol{ /*the columns that gets dropped down over yours might be different*/
z-index:10;
}
#mainleveltopnav li{
display:inline;
list-style-type:none;
padding-right:5px;
}
a.mainleveltopnav,a.mainleveltopnav:link,
a.mainleveltopnav:visited{
color:#f90;
}
.moduletablemainnav{ /* I have absolutely positioned the module, you might have a different scheme*/
position:absolute;
top:187px;
left:20px;
z-index:100;
font:0.9em Verdana, Arial, Helvetica, sans-serif;
margin:0;
padding:0;
}
#mainlevelmainnav,#mainlevelmainnav ul{
float:left;
list-style:none;
line-height:1em;
background:transparent;
font-weight:700;
margin:0;
padding:0;
}
#mainlevelmainnav a{
display:block;
color:#f90;
text-decoration:none;
margin-right:15px;
padding:0.3em;
}
#mainlevelmainnav li{
float:left;
padding:0;
}
#mainlevelmainnav li ul{
position:absolute;
left:-999em;
height:auto;
width:11em;
font-weight:400;
background:#36f;
border:#00C 1px solid;
margin:0;
}
#mainlevelmainnav li li{
width:11em;
}
#mainlevelmainnav li ul a{
width:11em;
color:#fff;
font-size:0.9em;
line-height:1em;
font-weight:400;
}
#mainlevelmainnav li:hover ul ul,#mainlevelmainnav li:hover ul ul
ul,#mainlevelmainnav li.sfhover ul ul,#mainlevelmainnav li.sfhover ul
ul ul{
left:-999em;
}
#mainlevelmainnav li:hover ul,#mainlevelmainnav li li:hover
ul,#mainlevelmainnav li li li:hover ul,#mainlevelmainnav li.sfhover
ul,#mainlevelmainnav li li.sfhover ul,#mainlevelmainnav li li
li.sfhover ul{
left:auto;
z-index:6000;
}
#mainlevelmainnav li li:hover,#mainlevelmainnav li li.sfhover{
background:#039 url(../images/soccerball.gif) 98% 50% no-repeat;
}

Now, just make sure you have the z-indexes set up properly, also
remember to have a z-index, the element needs some sort of positioning,
if not absolute then relative.

Last but not least you need to add the JavaScript for IE into the
head of the template index.php (or a js file), it doesnÂ’t like the
:hover.

<script type=”text/javascript”
sfHover = function() {
var sfEls = document.getElementById(“mainlevelmainnav”)
.getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhoverb”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);
//–

Hopefully, follow this and BobÂ’s your Uncle you should have clean valid drop downs for your menu. Enjoy!

 

Filed Under: Uncategorized

5: Making a 3 column Joomla Theme for your joomla website

November 20, 2005 By barrie@compassdesigns.net Leave a Comment

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:

  • [Position is Everything’s] One True Layout
  • [Dennis
    Kracht’s]
    3col background-color Layout
  • [Rob
    Chandanais’]
    Blue Robot "3 col Flanking"
  • [Eric Costello’s] glish.com "3 columns, the holy grail"
  • [Holly ‘n John] "Three Column Stretch"
  • [Mark
    Newhouse’s]
    nn4_3col_header
  • [Craig
    Salia’s]
    saila_layout
  • [Al
    Sparber’s]
    3boxnoscript
  • [Owen
    Brigg’s]
    see multiple examples
  • [Douglas
    Livingstone’s]
    fixed: px
  • [Douglas
    Livingstone’s]
    flexible: %
  • [Douglas
    Livingstone’s]
    flexible: % or px, full bg colors on side columns
  • [Dug
    Falby’s]
    A List Apart article
  • [Ben
    Meadowcroft]
  • [Holly
    ‘n John]
    Source Ordered Columns
  • [Alex
    Robinson’s]
    one of several
  • [Mike
    Foster’s]
    Absolute Magnitude Site
  • [Holly
    Bergevin’s]
    unique demo for Jonas
  • [Holly
    ‘n John]
    3 Col – Equal Height "Flag demo"
  • [pixy’s] 3 Col – Equal Height with Footer (no hacks)
  • [Jason
    Estes’]
    any column expands height
  • [Enzo’s] 3 Col Pixel Perfect w/header & footer
  • [Ben
    de Groot’s]
    3 Col Flexible w/header&footer
  • [Holly
    ‘n John]
    Ordered Borders Layout
  • [Holly
    ‘n John]
    The Rigid Piefecta
  • [Paul
    O’Brien’s]
    Three Equalizing Columns Layout
  • [Paul
    O’Brien’s]
    Three Equalizing Columns Layout PLUS Source ordering
  • [Tonico’s] "Flexible Layout" with elastic behaviour
  • [Liam
    Delahunty’s]
    Centered layer – version 1
  • [Ruthsarian
    Labs]
    Skidoo – 3 Columns
  • [Gavin
    Kistner’s]
    3 Column Border Layout
  • [Alex
    Robinson’s]
    Liquid center and right
  • [Alscreations’s] With sub-header for menu/breadcrumbs
  • [WebRef’s] Replicate front page tutorial
  • [M.
    Meadhra]
    /Builder.com with re-ordering column code
  • [Peter
    Lambert’s]
    Inneroptics layout
  • [Tiffany
    B. Brown]
    multiple examples
  • [Thierry
    Koblentz’]
    Liquid center (no hacks)
  • [John
    Oxton]
  • [luci’s] 3 Cols Source Ordered Floating Layout
  • [Thierry
    Koblentz’]
    All Liquid (no hacks at all)

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!

Overview of a Joomla Design

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

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.

Important Note!

This tutorial series was written in 2005. Since then I have developed some official documentation for Joomla template design.
It uses a superior CSS layout strategy that does not reply on absolute
positioning, which allows easier clearing of the footer. You can find
out more at:


Joomla Template Tutorial


Joomla 1.5 Template Tutorial

Filed Under: Joomla Tutorials

  • « Previous Page
  • 1
  • …
  • 119
  • 120
  • 121
  • 122
  • 123
  • Next Page »

The Skinny

I am an entrepreneur, web consultant, author and educator.

I have been involved in starting a K-12 School District, a Private High School, and three web tech companies. I also wrote one of the original and best selling books on Joomla.

And I like sailing with kids.

Recent Posts

  • Teenager Invents New Type of Hunting Camo Suit
  • A Parent’s Guide to Proficiency Based Learning
  • Proficiency/Competency Based Learning in NGSS Classrooms
  • Hunting Camouflage Website Launched
  • Get More Email Newsletter Signups With These Easy Tips
  • Proficiency Based Learning Resources
  • Social Media Redux
  • How to turn off WordPress Comments if you use Disqus
  • The API was Yesterday. The Tomorrow is iPaaS
  • Left Hook Digital Named Zapier’s First Integration Developer Partner

Top Posts

  • Gear Review: Mantus Chain Hook

Blogroll

See3D Camo

Blaze Orange Camo

Vermont CPR

Copyright © 2023 Compass Designs · Musings on Education, Life, Joomla and the Web by Barrie North