J1.5:Customising the Beez template/header/fontsize
From Joomla! Documentation
(Redirected from Customising the Beez template/header/fontsize)
HTML Reference
<!-- index.php line 58-67 -->
<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"> </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"> </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>
Replace the "Font-size:" text
JText::_('FONTSIZE');
Search the language file en-GB.tpl_beez.ini for "FONTSIZE=Font-size:" and edit it:
/* #### en.GB.tpl_beez.ini line 12 #### */
FONTSIZE=Your text here!
Replace the "bigger" text
JText::_('Increase size');
JText::_('bigger');
Search the language file en-GB.tpl_beez.ini for "INCREASE SIZE=Increase size" and "BIGGER=bigger" and edit it:
/* #### en.GB.tpl_beez.ini line 9 #### */
BIGGER=Your text here!
/* #### en.GB.tpl_beez.ini line 11 #### */
INCREASE SIZE=Your text here!
Replace the "smaller" text
JText::_('Decrease size');
JText::_('smaller');
Search the language file en-GB.tpl_beez.ini for "DECREASE SIZE=Decrease size" and "SMALLER=smaller" and edit it:
/* #### en.GB.tpl_beez.ini line 10 #### */
DECREASE SIZE=Your text here!
/* #### en.GB.tpl_beez.ini line 24 #### */
SMALLER=Your text here!
Replace the "reset" text
JText::_('Revert styles to default');
JText::_('reset');
Search the language file en-GB.tpl_beez.ini for "REVERT STYLES TO DEFAULT=Revert styles to default" and "RESET=reset" and edit it:
/* #### en.GB.tpl_beez.ini line 20 #### */
RESET=Your text here!
/* #### en.GB.tpl_beez.ini line 21 #### */
REVERT STYLES TO DEFAULT=Your text here!
CSS Reference
#fontsize
The following classes and ids will influence the whole font-size "box". Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* #### layout.css line 265-273 #### */
#fontsize
{
z-index:100;
position:absolute;
top:0;
right:0;
background:#fff;
color:#000;
}
- Storeage location: layout.css
Secondary Classes
/* ##### position.css line 15-19 #### */
*
{
margin: 0;
padding: 0;
}
- Further information: position.css/*
- Storage location: position.css
#fontsize h3
The following classes and ids will influence the "font-size:" text. Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* #### layout.css line 275-280 #### */
#fontsize h3,#fontsize p
{
border:0;
display:inline;
font-size:1em;
}
- Storeage location: layout.css
Secondary Classes
/* ##### layout.css line 25-29 #### */
h3 {
font-size:1.1em;
font-weight:bold;
margin:10px 0;
}
- Further information: layout.css/h3
- Storage location: layout.css
/* ##### position.css line 15-19 #### */
*
{
margin: 0;
padding: 0;
}
- Further information: position.css/*
- Storage location: position.css
#fontsize p
The following classes and ids will influence the "box" which enclose the 3 buttons (bigger/smaller/reset). Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* #### layout.css line 282-285 #### */
#fontsize p
{
margin:0 0 0 5px;
}
- Storeage location: layout.css
Secondary Classes
/* #### layout.css line 275-280 #### */
#fontsize h3,#fontsize p
{
border:0;
display:inline;
font-size:1em;
}
- Storeage location: layout.css
/* ##### layout.css line 65-68 #### */
p {
line-height:1.4em;
margin:5px 0;
}
- Further information: layout.css/p
- Storage location: layout.css
/* ##### position.css line 15-19 #### */
*
{
margin: 0;
padding: 0;
}
- Further information: position.css/*
- Storage location: position.css
#fontsize p a.larger
The following classes and ids will influence the "bigger" link tag. Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* #### layout.css line 296-298 #### */
#fontsize p a.larger {
background:#fff url(../images/lupe_larger.gif) no-repeat;
}
- Storeage location: layout.css
/* #### layout.css line 308-311 #### */
#fontsize p a.larger:hover,#fontsize p a.larger:active,#fontsize p a.larger:focus {
background:#000 url(../images/lupe_larger_black.gif) no-repeat;
color:#fff;
}
- Storeage location: layout.css
Secondary Classes
/* #### layout.css line 287-293 #### */
#fontsize p a
{
font-weight:bold;
margin:0 5px;
display:inline;
padding:2px 0 2px 24px;
}
/* ##### 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
/* ##### position.css line 15-19 #### */
*
{
margin: 0;
padding: 0;
}
- Further information: position.css/*
- Storage location: position.css
#fontsize p a.smaller
The following classes and ids will influence the "smaller" link tag. Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* #### layout.css line 300-302 #### */
#fontsize p a.smaller {
background:#fff url(../images/lupe_smaller.gif) no-repeat;
}
- Storeage location: layout.css
/* #### layout.css line 313-316 #### */
#fontsize p a.smaller:hover,#fontsize p a.smaller:active,#fontsize p a.smaller:focus {
background:#000 url(../images/lupe_smaller_black.gif) no-repeat;
color:#fff;
}
- Storeage location: layout.css
Secondary Classes
/* #### layout.css line 287-293 #### */
#fontsize p a
{
font-weight:bold;
margin:0 5px;
display:inline;
padding:2px 0 2px 24px;
}
- Storeage location: layout.css
/* ##### 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
/* ##### position.css line 15-19 #### */
*
{
margin: 0;
padding: 0;
}
- Further information: position.css/*
- Storage location: position.css
#fontsize p a.reset
The following classes and ids will influence the "reset" link tag. Please notice the ordering. Every CSS attribute will be overwritten by the class above.
Main Class
/* #### layout.css line 304-306 #### */
#fontsize p a.reset {
background:#fff url(../images/lupe_reset.gif) no-repeat;
}
- Storeage location: layout.css
/* #### layout.css line 318-321 #### */
#fontsize p a.reset:hover,#fontsize p a.reset:active,#fontsize p a.reset:focus {
background:#000 url(../images/lupe_reset_black.gif) no-repeat;
color:#fff;
}
- Storeage location: layout.css
Secondary Classes
/* #### layout.css line 287-293 #### */
#fontsize p a
{
font-weight:bold;
margin:0 5px;
display:inline;
padding:2px 0 2px 24px;
}
- Storeage location: layout.css
/* ##### 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
/* ##### 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 unused(?) div. 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