Page 1 of 1

What is BEEZ

Posted: Thu Mar 01, 2007 6:54 am
by a.radtke
Beez is an extended template for Joomla in which we have paid attention in the design to the standard conformables code, accessibility and flexibility.

With Joomla 1.5 we are able to store the HTML edition in our template so that it is no longer vital to use the standard edition. This gives us the flexibility we need to create accessible, standard conformable pages.
Beez is just an example to demonstrate the new path which Joomla 1.5 opens up to us. It serves as a basis and can be modified and extended as much as you wish.
In creating it we were careful to make sure that by suitably adjusting the CSS files and the index.php a large part of the total number of designs could be used.

So, what have we actually done?

1. Separation of content and layout: the code
The first step was to separate content and layout from each other and get rid of the layout tables which up to now have only been irritating.
Separating as much as possible the content from the various types of layout is the basis of every design which can be on the one hand presented as device-independent and on the other hand can be adjusted to suit the different needs of the user.
The technical basis for this is the fact that the overwhelming majority of browsers used today can handle stylesheets with relative reliability.

That was not always the case: But if you are still working with layout tables today, you are using an outdated technology which, in most cases, can no longer be justified and you should start relearning.

The use of stylesheets allows the content of a website to be coded with a mark-up language, without having to consider the style of the presentation.
The style of presentation is determined in the stylesheets. This could be done in one or more separate stylesheets which to an extent can be chosen by the user.
It is also possible to present the basic content with a graphic browser without stylesheets - with stylesheets a layout is possible which complies with all the requirements of this audio-visual age.

On the basis of separating content from layout, we have developed a mark-up whose formal structure largely corresponds to content structure.

This means:
  • that all the elements of a document are sorted into their correct and logical sequence in the source text - irrespective of whether they later appear on a screen next each other or above each other.
  • that all the elements are marked according to their position and significance in the document (= semantics): headings as headings, paragraphs as paragraphs, quotes as quotes, addresses as addresses, table data as table data, form elements logically linked with one another, etc. in this way it is possible to work on the document automatically in various ways, not least that it can be reproduced as conveniently as possible in a screen reader.
One feature of Beez is, for example, that you can determine the heading hierarchy of your articles in the backend without having to get to grips with the code yourself.

2. The jump labels
However, presenting content in a linear way has one big disadvantage: in certain circumstances you have to go a long way to reach the content areas which are "at the back". In contrast, with a three-column layout on the screen more areas can at least start "at the top" and the eye can go straight to where it - supported by visual aids - suspects the information which it is interested in at that moment will be located. Here the concept of jump labels can offer a remedy. This actually creates a non-visual contrast to the graphic layout and allows users of linear reproducers to identify essential content areas right at the start of the page and then to go straight there where they expects the information they are interested in to be.
Essential content areas - these can be the navigation, the main contents, a column with news, a list of links, a search window, a form - this is by no means an exhaustive list. For pages with varied content, which present "complex documents" (as referred to above), it makes sense to enable users to jump to all the main areas in this way.

Beez concerns itself with these jump labels at two places.
Firstly in the index.php where their position is determined and secondly in the components and modules used which contain form elements.

If screen reader users send a form which does not have a jump label on it, they arrive at the start of the page and have to waste time navigating to the content they actually want.
To avoid this, the forms used in Beez have jump labels referring to the actual page content.

Example of the search module:

echo 'get('moduleclass_sfx') . '">';:

One or two of you will certainly notice that the jump labels become visible when navigating with the keyboard, something which makes the page easier to deal with for keyboard users.

3. The design and the CSS

1. Semi-scalable layout:
In web design you differentiate between fixed and fluid layouts.
Fluid layouts adjust themselves to the size of the screen and offer scalable text space. The width specifications of individual columns in a design are given in a percentage or em which allows the viewing area of the screen to be optimised. If the browser window changes its size, the content automatically changes too.
This is really a nice feature but in the framework of our creative task it can lead to enormous problems. If pages only have a small amount of text content, they can appear to be homogenous and well-adjusted at a resolution of 800 x 600 pixels. If you look at the page with a resolution of 1280 x 1024 pixels, it can happen that the content along the top edge of the screen sticks, something which does not look good and makes the text quite a lot more difficult to read.
The eye begins to swim and is no longer able to connect the start of a line with its beginning.

For this reason we have given Beez a maximum width.

2. Variable type sizes

It is often a temptation to use very small type sizes to pack more information onto the screen. If the size of the surface cannot be increased then you can increase the amount of information. Large type sizes also seem less elegant on the screen and for that reason disturb the "designer's eye".
However it is not just visually impaired or older people who find small type sizes difficult or impossible to read.

Fortunately current browsers offer us the chance to zoom the text, but this only works if we make relative specifications for the type size and do not choose a fixed pixel size.

For this reason Beez uses the relative specification em for the type size.

We also watch out for:
  • sufficient contrast
  • a logical content structure
  • missing type graphics
  • no transparent backgrounds for graphics
We cannot go into detail about all the features Beez offers here, but we hope we have wetted your appetite to find out more.

Finally, there is one more thing we have to say. Even if you use Beez, you still face a challenge. The concept behind the content and how the content is structured can significantly improve a page's accessibility. And that is a job we cannot do for you.

We hope you enjoy using Beez and would ask you to let us know if you should find any errors or mistakes.

Bye Angie

Re: What is BEEZ

Posted: Thu Mar 01, 2007 10:21 pm
by pvh123
Hi Angie,

I read your writeup and it sounds so logical to me. What I also noticed is your remark "Relearn making webpages". This is so thrue. I have started off with html and asp and than came Joomla and I did not understand anything of it. So I have been concentrating on the 1.5 version and it is slowly downing: No html anymore.
That makes me the Relearn person, but I have no problem with. I will have a close look what you achieved and learn from it.


Re: What is BEEZ

Posted: Tue Mar 06, 2007 5:44 am
by eyezberg

thanks for developing and taking the time to explain this in as much detail. Can't wait to get a look (haven't reinstalled SVn yet)!

Danke heisst Merci ;)

Re: What is BEEZ

Posted: Thu Feb 28, 2008 3:21 pm
by webracer
Wouldn't it be a good proposal to add some Joomla template parameters to the BEEZ template.
1) to specify the path to the BEEZ logo (like in the drupal default template)
2) to specify the colors like in the joomla default engine but then 2 for dark and highlight.

Re: What is BEEZ

Posted: Fri Aug 22, 2008 11:44 pm
by chole
I would liketo know if it's possible to reduce the width of the (main menu) so I can have more width useing the wrapper without the need of a bottom scroll bar.

Re: What is BEEZ

Posted: Wed Oct 29, 2008 4:23 am
by senecapharm
Thanks to the Joomla community for free templates and extensions that help us learn from each other. Ever since I started working on my website, forums like these and their posters, have been an inspiration. I couldn't be where I am today without Joomla and the surrounding community.

Thank you!

Re: What is BEEZ

Posted: Fri Nov 07, 2008 4:39 pm
by Varsys
Interesting, I will definitely try BEEZ out! Thanks.

Re: What is BEEZ

Posted: Tue Nov 25, 2008 6:17 pm
by Aclikyano
nice work

Re: What is BEEZ

Posted: Tue Dec 16, 2008 4:06 am
by mmajzoub
Hi Angie

I am new to Joomla and this forum, I just came across this information. Are you allowed to copy the Beez template and then modify and change colors, images and some of the content? And are there any license fees?


Re: What is BEEZ

Posted: Thu Jan 08, 2009 12:27 pm
by brian korteling
Hi there,

I am also new to Joomla, this forum and web design. I am a graphic designer and was wandering if anyone knew of anywhere i can get really good Joomla templates for free or cheap!

Re: What is BEEZ

Posted: Mon Jan 12, 2009 10:30 am
by remix
abecedarian template.


Re: What is BEEZ

Posted: Mon Jan 12, 2009 11:13 am
by brian korteling
What is Abecedarian template and where can I find it?

Re: What is BEEZ

Posted: Wed Jun 17, 2009 1:37 am
by sun0632
the beez template is a startand template , it' s ok , i love it . but i wana change the color to bule, what should i do? pls

Re: What is BEEZ

Posted: Fri Jul 31, 2009 1:47 pm
by Jonn_33
Beez is a default template, how to get club template. where can i download club templates.

Re: What is BEEZ

Posted: Wed Aug 19, 2009 7:35 pm
by latusmotors
Can someone please explain to me the purpose of all the css files? I am not a fan of splitting up css into a million files for one page. Too much headache to just change simple things because of all the overriding that happens.

Re: What is BEEZ

Posted: Mon Aug 24, 2009 9:52 pm
by latusmotors

I have deleted EVERY single CSS file out of this template, yet it's still displaying the CSS design. I already have the site design built off of another template, but come to find out no modules would show up, other than what was defaulted to 'on'.

I wanted to implement our design on this template, but can't even get the CSS to change.

If someone could help that'd be great. :)

Re: What is BEEZ

Posted: Thu Sep 24, 2009 1:47 pm
by ooffick
You could try this to get an idea:
(please note that you would need to add ?template=beez to see it on the demo page)


Re: What is BEEZ

Posted: Tue May 25, 2010 10:11 am
by Batouta
I am not fan of this template....

Re: What is BEEZ

Posted: Mon Aug 23, 2010 7:50 am
by dacharles
latusmotors wrote:Anyone?

I have deleted EVERY single CSS file out of this template, yet it's still displaying the CSS design. I already have the site design built off of another template, but come to find out no modules would show up, other than what was defaulted to 'on'.

I wanted to implement our design on this template, but can't even get the CSS to change.

If someone could help that'd be great. :)
To use your own designed template, you need to go to your back end and change the default template to your new installed one.

Re: What is BEEZ

Posted: Fri Sep 10, 2010 5:26 am
by sandrabright10
I have a Joomla site under development customised from the BEEZ standard template, edited css and own images etc.
I have navigation on left with about 20 items in a UL each of which have submenus of 2 or more items which expand when click on parent.
My problem is that when you click on any menu item, the page links to the relevant category or article page and refreshes so that the header of the page is at the very top again.
This is obviously ok only for the first 8 or so items in the list, but if a lower one which the user had to scroll down to select is clicked, its now gone out of the screen visible area, therefore the sub menu items that they wished to see are not visible unless scroll down again.
Is there a way to use anchors or some thing to keep the screen scrolled down when the parent menu is clicked.
I am new to Joomla. Help me!

Re: What is BEEZ

Posted: Sat Mar 12, 2011 5:51 pm
by danensis
I've just upgraded to Joomla 1.6 and find the Beez template is completely different - which is a great shame, as it is a beekeepers' web site and the little bees were very popular.

How do I get back the bees on Beez?

Re: What is BEEZ

Posted: Sun Sep 15, 2013 1:06 pm
by kardinol
I've read this article about Customising the Beez template
It was very interesting for me!
I share the link here: ... z_template