J1.5

Customising the Beez template/header

From Joomla! Documentation

< J1.5:Customising the Beez template
Revision as of 09:22, 29 April 2013 by JoomlaWikiBot (talk | contribs) (→‎Secondary Classes: archiving articles with category removal and addition)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

The "J1.5" namespace is an archived namespace. This page contains information for a Joomla! version which is no longer supported. It exists only as a historical reference, it will not be improved and its content may be incomplete and/or contain broken links.

HTML Reference[edit]

<!-- 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[edit]

#header[edit]

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[edit]

/* #### 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[edit]

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

*
{
    margin: 0;
    padding: 0;
}
Further information: position.css/*
Storage location: position.css

[edit]

Further information: Customising the Beez template/header/logo

#header ul[edit]

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[edit]

/* #### 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[edit]

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

*
{
    margin: 0;
    padding: 0;
}
Further information: position.css/*
Storage location: position.css

#header ul li[edit]

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[edit]

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

#header ul li
{
    background:#000;
    color:#fff;
    display:inline;
    text-align:center;
}
Storage location: layout.css

Secondary Classes[edit]

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

*
{
    margin: 0;
    padding: 0;
}
Further information: position.css/*
Storage location: position.css

#header ul li a.u2[edit]

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[edit]

/* #### 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[edit]

/* ##### 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[edit]

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[edit]

/* #### 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[edit]

/* ##### 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[edit]

Further information: Customising the Beez template/header/fontsize

#mainlevel-nav[edit]

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

#header form[edit]

Further information: Customising the Beez template/header/form

#breadcrumbs[edit]

Further information: Customising the Beez template/header/breadcrumbs

.wrap[edit]

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[edit]

/* #### 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[edit]

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

*
{
    margin: 0;
    padding: 0;
}
Further information: position.css/*
Storage location: position.css
Retrieved from "https://docs.joomla.org/index.php?title=J1.5:Customising_the_Beez_template/header&oldid=85924"