Joomla! Documentation™

HTML Reference

<!-- index.php line 42-80 -->

<div id="header">
    <h1 id="logo">
        <img src="<?php echo $this->baseurl ?>/templates/beez/images/logo.gif" border="0" alt="<?php echo JText::_('Logo Beez, Three little Bees'); ?>" width="300" height="97" />
        <span class="header1"><?php echo JText::_('Joomla Accessible Template'); ?></span>
    </h1>

    <ul>
        <li><a href="#content" class="u2"><?php echo JText::_('Skip to Content'); ?></a></li>
        <li><a href="#mainmenu" class="u2"><?php echo JText::_('Jump to Main Navigation and Login'); ?></a></li>
        <li><a href="#additional" class="u2"><?php echo JText::_('Jump to additional Information'); ?></a></li>
    </ul>

    <h2 class="unseen">
        <?php echo JText::_('Search, View and Navigation'); ?>
    </h2>

    <div id="fontsize">
        <script type="text/javascript">
        //<![CDATA[
            document.write('<h3><?php echo JText::_('FONTSIZE'); ?></h3><p class="fontsize">');
            document.write('<a href="index.php" title="<?php echo JText::_('Increase size'); ?>" onclick="changeFontSize(2); return false;" class="larger"><?php echo JText::_('bigger'); ?></a><span class="unseen">&nbsp;</span>');
            document.write('<a href="index.php" title="<?php echo JText::_('Decrease size'); ?>" onclick="changeFontSize(-2); return false;" class="smaller"><?php echo JText::_('smaller'); ?></a><span class="unseen">&nbsp;</span>');
            document.write('<a href="index.php" title="<?php echo JText::_('Revert styles to default'); ?>" onclick="revertStyles(); return false;" class="reset"><?php echo JText::_('reset'); ?></a></p>');
        //]]>
        </script>
    </div>

    <jdoc:include type="modules" name="user3" />
    <jdoc:include type="modules" name="user4" />

    <div id="breadcrumbs">
        <p>
            <?php echo JText::_('You are here'); ?>
            <jdoc:include type="modules" name="breadcrumb" />
        </p>
    </div>

    <div class="wrap">&nbsp;</div>
</div><!-- end header -->

// TODO: Howto change accessibility text

CSS Reference

#header

The following classes and ids will influence the whole header "box". Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### position.css line 46-54 #### */

#header
{
    background: #fff;
    color: #000000;
    margin: 0;
    position: relative;
    text-align: right;
    border-bottom: solid 4px #ccc;
}

Storage location: position.css

Secondary Classes

/* ##### position.css line 15-19 #### */

*
{
    margin: 0;
    padding: 0;
}

Further information: position.css/*

Storage location: position.css

#logo

Further information: Customising the Beez template/header/logo

#header ul

The following classes and ids will influence the unordered lists in the header. Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### layout.css line 229-236 #### */

#header ul
{
    background:#fff;
    display:block;
    margin:-7px 0 -2px;
    padding:5px 0;
    text-align:right;
}

Storage location: layout.css

Secondary Classes

/* ##### position.css line 15-19 #### */

*
{
    margin: 0;
    padding: 0;
}

Further information: position.css/*

Storage location: position.css

#header ul li

The following classes and ids will influence the list items in the header. Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### layout.css line 238-236 #### */

#header ul li
{
    background:#000;
    color:#fff;
    display:inline;
    text-align:center;
}

Storage location: layout.css

Secondary Classes

/* ##### position.css line 15-19 #### */

*
{
    margin: 0;
    padding: 0;
}

Further information: position.css/*

Storage location: position.css

#header ul li a.u2

The following classes and ids will influence the links with the class "u2" in the header. Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### layout.css line 246-255 #### */

#header ul li a:link,#header ul li a:visited
{
    background:#fff;
    color:#000;
    font-weight:bold;
    text-decoration:none;
    border-right:solid 1px #666;
    padding:5px 10px;
    line-height:1.5em;
}

Storage location: layout.css

Secondary Classes

/* ##### layout.css line 14-16 #### */

a:link,a:visited
{
    color:#000;
}

Further information: layout.css/a:link,a:visited

Storage location: layout.css

/* ##### layout.css line 19-23 #### */

a:hover,a:active,a:focus
{
    background:#000;
    color:#FFF;
}

Further information: layout.css/a:hover,a:active,a:focus

Storage location: layout.css

/* #### layout.css line 104-113 #### */

.unsichtbar,.u2,.invisible , .unseen
{
    display: inline;
    height: 0px;
    left: -3000px;
    position: absolute;
    top: -2000px;
    width: 0px;
    z-index: 200;
}

Storage location: position.css

/* ##### position.css line 15-19 #### */

*
{
    margin: 0;
    padding: 0;
}

Further information: position.css/*

Storage location: position.css

.unseen

The following classes and ids will influence an div for web accessibility. Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### layout.css line 104-113 #### */

.unsichtbar,.u2,.invisible , .unseen
{
    display: inline;
    height: 0px;
    left: -3000px;
    position: absolute;
    top: -2000px;
    width: 0px;
    z-index: 200;
}

Storeage location: position.css

Secondary Classes

/* ##### position.css line 15-19 #### */

*
{
    margin: 0;
    padding: 0;
}

Further information: position.css/*

Storage location: position.css

/* ##### position.css line 15-19 #### */

*
{
    margin: 0;
    padding: 0;
}

Further information: position.css/*

Storage location: position.css

#fontsize

Further information: Customising the Beez template/header/fontsize

#mainlevel-nav

Further information: Customising the Beez template/header/mainlevel/-nav

#header form

Further information: Customising the Beez template/header/form

#breadcrumbs

Further information: Customising the Beez template/header/breadcrumbs

.wrap

The following classes and ids will influence an unused(?) div in the footer. Please notice the ordering. Every CSS attribute will be overwritten by the class above.

Main Class

/* #### layout.css line 1329-1335 #### */

.wrap
{
    border: 0;
    clear: both;
    float: none;
    font-size: 1px;
    height: 0;
    line-height: 1px;
    margin: 0;
    padding: 0;
    visibility: hidden;
}

Storeage location: position.css

Secondary Classes

/* ##### position.css line 15-19 #### */

*
{
    margin: 0;
    padding: 0;
}

Further information: position.css/*

Storage location: position.css