JDOC:Sandbox

From Joomla! Documentation
(Difference between revisions)
Jump to: navigation, search
m (Emptied.)
(One intermediate revision by one user not shown)
Line 1: Line 1:
== HTML Reference ==
 
  
<source lang="text">
 
<!-- 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">&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>
 
</source>
 
 
=== Replace the "Font-size:" text ===
 
 
<source lang="php">
 
JText::_('FONTSIZE');
 
</source>
 
 
Search the language file en-GB.tpl_beez.ini for "'''FONTSIZE=Font-size:'''" and edit it:
 
 
<source lang="php">
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
 
<html>
 
 
<head>
 
<title>Bikes Buggies and Quads</title>
 
<link rel="stylesheet" type="text/css" href="web.css" />
 
</head>
 
 
 
<body>
 
 
<div class= "container">
 
<div class= "header"><a href="default.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(./images/header.gif)">
 
<img src="./images/header.gif" name="home" width="900" height="10em" border="0" id="home" /></a>
 
                                </div>
 
 
<div class= "navcol">
 
<div class="home"><a href="default.html"><h6>HOME</h6></a></div>
 
<div class="bikes"><a href="./htm/bikes.html"><h6>BIKES</h6></a></div>
 
<div class="buggies"><a href="./htm/buggies.html"><h6>BUGGIES</h6></a></div>
 
<div class="quads"><a href="./htm/quads.html"><h6>QUADS</h6></a></div>
 
<div class="accessories"><a href="./htm/accessories.html"><h6>ACCESSORIES</h6></a></div>
 
<div class="contact"><a href="./htm/contact.html"><h6>CONTACT</h6></a></div>
 
<div class="spec_sheet"><a href="./htm/spec_sheet.html"><h6>SPECIFICATION SHEETS</h6></a></div>
 
<div class="contact_details"><a href="./htm/contact.html"><h6>Sam and Cheryl Vella</br>phone: 0409 548 606</br>phone: 0419 669 121</br>email: sckvella1@bigpond.com</h6></a></div>
 
</div>
 
 
<div class= "content ">
 
 
<div class="imageone">
 
<a href="./htm/bikes.html"><h1>BIKES from $400</h1></a><a href="./htm/bikes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(./images/bikes/mx_bikes/motox_50cc.jpg)">
 
<img src="./images/bikes/mx_bikes/motox_50cc.jpg" name="home" width="185px" height="140px" border="0" id="home" /></a>
 
<p>A full range of bikes to cater for all needs. <br/>&#9830; Comp Bikes<br/>&#9830;Enduro<br/>&#9830;Motard<br/>&#9830;MX Bikes<br/>&#9830;and Pit Bikes<br/>
 
Full Warranty and friendly local servicing. With a great colour range and awesome sticker kits available you can style your bike to suit you!</p>
 
</div>
 
 
<div class="imagetwo"><h1>BUGGIES from $700</h1></a><a href="./htm/bikes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(./images/xuv/xuv400fa4wd.jpg)">
 
<img src="./images/xuv/xuv400fa4wd.jpg" name="home" width="185px" height="140px" border="0" id="home" /></a>
 
<p>Buggies are a great 4wd, suitable for all terrains and weather conditions. Ideal for Farms, sports clubs and excellent for trail blazing to your local fishing spot with storage space
 
for the esky and the other important equipment.        <br/><br/><br/>      &#9830;    POWER! </p>
 
</div>
 
 
<div class="imagethree"><h1>QUADS from $500</h1></a><a href="./htm/bikes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(./images/quad/kids/trooper110cc.jpg)">
 
<img src="./images/quad/kids/trooper110cc.jpg" name="home" width="185px" height="140px" border="0" id="home" /></a>
 
<p>Great value Quads with a large range of styles to suit your needs</br> &#9830; Farm work</br> &#9830; Recreational activities</br>&#9830; Kids Quads</br> All in a range
 
of fantastic colours!<br/>Full warranties and local Mackay servicing</p>
 
</div>
 
 
<div class="imagefour"><h1>ACCESSORIES</h1></a><a href="./htm/bikes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(./images/phpThumb_generated_thumbnailjpg.jpeg)">
 
<img src="./images/phpThumb_generated_thumbnailjpg.jpeg"name="home" width="185px" height="140px" border="0" id="home" /></a>
 
<p>A large range of Accessories to customise your Bike, Buggies and Quads.</br>&#9830;Helmets</br>&#9830;Gloves</br>&#9830;Stickers</br>&#9830;Parts</br>&#9830; and Servicing</p>
 
</div>
 
 
 
</div>
 
 
 
<div class= "footer">
 
<a href="../default.html"><strong>Home / </a>
 
<a href="./htm/bikes.html">Bikes / </a>
 
<a href="./htm/buggies.html">Buggies / </a>
 
<a href="./htm/quads.html">Quads / </a>
 
<a href="./htm/accessories.html">Accessories / </a>
 
<a href="./htm/spec_sheet.html">Specification Sheets / </a>
 
<a href="./htm/contact.html">Contact</strong</a>
 
</div>
 
 
 
 
</div>
 
 
</body>
 
</html>
 
/* #### en.GB.tpl_beez.ini line 12 #### */
 
 
FONTSIZE=Your text here!
 
</source>
 
 
=== Replace the "bigger" text ===
 
 
<source lang="php">
 
JText::_('Increase size');
 
JText::_('bigger');
 
</source>
 
 
Search the language file en-GB.tpl_beez.ini for "'''INCREASE SIZE=Increase size'''" and "'''BIGGER=bigger'''" and edit it:
 
 
<source lang="php">
 
/* #### en.GB.tpl_beez.ini line 9 #### */
 
 
BIGGER=Your text here!
 
 
/* #### en.GB.tpl_beez.ini line 11 #### */
 
 
INCREASE SIZE=Your text here!
 
</source>
 
 
=== Replace the "smaller" text ===
 
 
<source lang="php">
 
JText::_('Decrease size');
 
JText::_('smaller');
 
</source>
 
 
Search the language file en-GB.tpl_beez.ini for "'''DECREASE SIZE=Decrease size'''" and "'''SMALLER=smaller'''" and edit it:
 
 
<source lang="php">
 
/* #### en.GB.tpl_beez.ini line 10 #### */
 
 
DECREASE SIZE=Your text here!
 
 
/* #### en.GB.tpl_beez.ini line 24 #### */
 
 
SMALLER=Your text here!
 
</source>
 
 
=== Replace the "reset" text ===
 
 
<source lang="php">
 
JText::_('Revert styles to default');
 
JText::_('reset');
 
</source>
 
 
Search the language file en-GB.tpl_beez.ini for "'''REVERT STYLES TO DEFAULT=Revert styles to default'''" and "'''RESET=reset'''" and edit it:
 
 
<source lang="php">
 
/* #### 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!
 
</source>
 
 
== 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.
 
 
source web.css
 
 
html{
 
margin:0;
 
overflow-y: scroll;
 
 
}
 
 
body {
 
 
    margin:0;
 
padding: 0;
 
font-family: Verdana, Arial, Helvetica, sans-serif;
 
font-size: 12px;
 
background-color: #000000;
 
max-width: 85em;
 
min-width: 40em;
 
}
 
 
a.link  {
 
font-weight : bold;
 
color : #000000;
 
 
}
 
 
a.visited {
 
font-weight : bold;
 
text-decoration : none;
 
color : #000000;
 
}
 
 
a.hover{
 
text-decoration : none;
 
color : #000000;
 
}
 
 
a.active {
 
text-decoration : none;
 
color : #000000;
 
 
 
h1 {
 
margin-left: 3px;
 
font-size: medium;
 
line-height: 1em;
 
color: #000000;
 
line-height: normal;
 
}
 
h3 {
 
font-size: medium;
 
color: #000000;
 
margin-top:15px;
 
margin-left: 3px;
 
margin-right: 3px;
 
}
 
 
  h4 {
 
  float: center;
 
  color: #000000;
 
  font-size: 100%;
 
  font-weight: bold;
 
  margin-left:0em;
 
  margin-top: 0em;
 
}
 
h5 {
 
font-size: medium;
 
color: #000000;
 
margin-top:5px;
 
margin-left: 3px;
 
margin-right: 3px;
 
}
 
 
h6 {
 
  float: center;
 
  color: #FFFFFF;
 
  font-size: 100%;
 
  font-weight: bold;
 
  margin-left:0.1em;
 
  margin-top: 0.3em;
 
}
 
 
 
 
p {
 
margin-top:15px;
 
margin-left: 2px;
 
margin-right: 2px;
 
background-color: #FFFFFF;
 
}
 
 
div.container {
 
width:100%;
 
height: 100%;
 
margin: 10px 200px 0px 200px;
 
padding-right: 100px;
 
padding-bottom: 0px;
 
background-color: #222222;
 
}
 
 
div.header {
 
width: 1100px;
 
height: 150px;
 
  text-align: left;
 
  margin-top: 0;
 
  margin-right: 0;
 
  margin-bottom: 1em;
 
  margin-left: 0em;
 
  color: #ffffff;
 
}
 
 
div.navcol {
 
  float: left;
 
  /* make the nav colum boxes more visible */
 
  margin-left: 0.4em;
 
  margin-right: 0.5em; /* keep same as maincolwithfooter margin-right */
 
  /* specify the width to force wrapping */
 
  width: 11em;
 
}
 
 
div.content{
 
width: 83%;
 
height: 500px;
 
margin-right: 200px;
 
margin-bottom: 120px;
 
margin-left: 200px;
 
border: #solid red;
 
background-color: #555555;
 
}
 
div.contentone{
 
width: 83%;
 
height: 500px;
 
margin-right: 200px;
 
margin-bottom: 120px;
 
margin-left: 200px;
 
border: #solid red;
 
background-color: #FFFFFF;
 
}
 
div.imageone{
 
  float: left;
 
  /* make the nav colum boxes more visible */
 
margin-top: 2em;
 
  margin-right: 5px; /* keep same as maincolwithfooter margin-right */
 
  /* specify the width to force wrapping */
 
  margin-left: 3%;
 
  width: 185px;
 
  height: 400px;
 
  border: 3px solid red;
 
  background-color: #FFFFFF;
 
}
 
div.imagetwo{
 
  float: left;
 
  /* make the nav colum boxes more visible */
 
  margin-top: 2em;
 
  margin-left: 5px;
 
  margin-right: 5px; /* keep same as maincolwithfooter margin-right */
 
  /* specify the width to force wrapping */
 
  border: 3px solid red;
 
  width: 185px;
 
  height: 400px;
 
  background-color: #FFFFFF;
 
  }
 
  div.imagethree{
 
  float: left;
 
  /* make the nav colum boxes more visible */
 
  margin-top: 2em;
 
  margin-left: 5px;
 
  margin-right: 5px; /* keep same as maincolwithfooter margin-right */
 
  /* specify the width to force wrapping */
 
  border: 3px solid red;
 
  width: 185px;
 
  height: 400px;
 
  background-color: #FFFFFF;
 
  }
 
  div.imagefour{
 
  float: left;
 
  /* make the nav colum boxes more visible */
 
  margin-top: 2em;
 
  margin-left: 5px;
 
  margin-right: 5px; /* keep same as maincolwithfooter margin-right */
 
  /* specify the width to force wrapping */
 
  border: 3px solid red;
 
  width: 185px;
 
  height: 400px;
 
  background-color: #FFFFFF;
 
 
  }
 
  div.imagefive{
 
  float: left;
 
  /* make the nav colum boxes more visible */
 
margin-top: 2em;
 
  margin-right: 4px; /* keep same as maincolwithfooter margin-right */
 
  /* specify the width to force wrapping */
 
  margin-left: 2px;
 
  width: 185px;
 
  height: 400px;
 
  padding: 8px 0px 8px 8px;
 
  border: 3px solid red;
 
  background-color: #FFFFFF;
 
}
 
div.imagesix{
 
  float: left;
 
  /* make the nav colum boxes more visible */
 
  margin-top: 2em;
 
  margin-left: 2px;
 
  margin-right: 4px; /* keep same as maincolwithfooter margin-right */
 
  /* specify the width to force wrapping */
 
  padding: 8px 8px 8px 8px;
 
  border: 3px solid red;
 
  width: 185px;
 
  height: 400px;
 
  background-color: #FFFFFF;
 
  }
 
  div.imageseven{
 
  float: left;
 
  /* make the nav colum boxes more visible */
 
  margin-top: 2em;
 
  margin-left: 2px;
 
  margin-right: 4px; /* keep same as maincolwithfooter margin-right */
 
  /* specify the width to force wrapping */
 
  padding: 8px 8px 8px 8px;
 
  border: 3px solid red;
 
  width: 185px;
 
  height: 400px;
 
  background-color: #FFFFFF;
 
  }
 
  div.imageeight{
 
  float: right;
 
  /* make the nav colum boxes more visible */
 
  margin-top: 2em;
 
  margin-left: 2px;
 
  margin-right: 2px; /* keep same as maincolwithfooter margin-right */
 
  /* specify the width to force wrapping */
 
  padding: 8px 8px 8px 8px;
 
  border: 3px solid red;
 
  width: 185px;
 
  height: 400px;
 
  background-color: #FFFFFF;
 
 
  }
 
 
 
div.menu {
 
height: 500px;
 
background-color: #222222;
 
 
}
 
div.home {
 
 
width:160px;
 
height:35px;
 
background-color: #336666;
 
 
}
 
div.bikes {
 
width:160px;
 
height:35px;
 
background-color: #333666;
 
 
}
 
 
div.buggies {
 
 
width:160px;
 
height:35px;
 
background-color: #333666;
 
 
 
}
 
div.quads {
 
 
width:160px;
 
height:35px;
 
background-color: #333666;
 
 
}
 
div.accessories {
 
 
width:160px;
 
height:35px;
 
background-color: #333666;
 
 
}
 
div.contact {
 
 
width:160px;
 
height:35px;
 
background-color: #333666;
 
 
}
 
div.spec_sheet {
 
width:160px;
 
height:37px;
 
background-color: #333666;
 
 
}
 
 
div.contact_details {
 
width:160px;
 
height:75px;
 
background-color: #222222;
 
 
}
 
 
 
table {
 
width: 67%;
 
height: 500px;
 
margin-left: 215px;
 
border-collapse: collapse;
 
border: 2px solid red;
 
empty-cells: hide;
 
 
}
 
 
div.footer {
 
float: bottom left;
 
    width: 90%;
 
height:30px;
 
background-color: #222222;
 
padding: 50px 0px 0px 200px;
 
margin-bottom: 0px;
 
 
 
 
 
}
 
 
==== Secondary Classes ====
 
 
{{:Customising the Beez template/CSS/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 ====
 
 
<source lang="css">
 
/* #### layout.css line 275-280 #### */
 
 
#fontsize h3,#fontsize p
 
{
 
    border:0;
 
    display:inline;
 
    font-size:1em;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
==== Secondary Classes ====
 
 
{{:Customising the Beez template/CSS/layout.css/h3}}
 
 
{{:Customising the Beez template/CSS/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 ====
 
 
<source lang="css">
 
/* #### layout.css line 282-285 #### */
 
 
#fontsize p
 
{
 
    margin:0 0 0 5px;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
==== Secondary Classes ====
 
 
<source lang="css">
 
/* #### layout.css line 275-280 #### */
 
 
#fontsize h3,#fontsize p
 
{
 
    border:0;
 
    display:inline;
 
    font-size:1em;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
{{:Customising the Beez template/CSS/layout.css/p}}
 
 
{{:Customising the Beez template/CSS/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 ====
 
 
<source lang="css">
 
/* #### layout.css line 296-298 #### */
 
 
#fontsize p a.larger {
 
    background:#fff url(../images/lupe_larger.gif) no-repeat;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
<source lang="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;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
==== Secondary Classes ====
 
 
<source lang="css">
 
/* #### layout.css line 287-293 #### */
 
 
#fontsize p a
 
{
 
    font-weight:bold;
 
    margin:0 5px;
 
    display:inline;
 
    padding:2px 0 2px 24px;
 
}
 
</source>
 
 
[[Customising the Beez template/layout.css|layout.css]]
 
 
{{:Customising the Beez template/CSS/layout.css/a:link,a:visited}}
 
 
{{:Customising the Beez template/CSS/layout.css/a:hover,a:active,a:focus}}
 
 
{{:Customising the Beez template/CSS/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 ====
 
 
<source lang="css">
 
/* #### layout.css line 300-302 #### */
 
 
#fontsize p a.smaller {
 
    background:#fff url(../images/lupe_smaller.gif) no-repeat;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
<source lang="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;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
==== Secondary Classes ====
 
 
<source lang="css">
 
/* #### layout.css line 287-293 #### */
 
 
#fontsize p a
 
{
 
    font-weight:bold;
 
    margin:0 5px;
 
    display:inline;
 
    padding:2px 0 2px 24px;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
{{:Customising the Beez template/CSS/layout.css/a:link,a:visited}}
 
 
{{:Customising the Beez template/CSS/layout.css/a:hover,a:active,a:focus}}
 
 
{{:Customising the Beez template/CSS/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 ====
 
 
<source lang="css">
 
/* #### layout.css line 304-306 #### */
 
 
#fontsize p a.reset {
 
    background:#fff url(../images/lupe_reset.gif) no-repeat;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
<source lang="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;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
==== Secondary Classes ====
 
 
<source lang="css">
 
/* #### layout.css line 287-293 #### */
 
 
#fontsize p a
 
{
 
    font-weight:bold;
 
    margin:0 5px;
 
    display:inline;
 
    padding:2px 0 2px 24px;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/layout.css|layout.css]]
 
 
{{:Customising the Beez template/CSS/layout.css/a:link,a:visited}}
 
 
{{:Customising the Beez template/CSS/layout.css/a:hover,a:active,a:focus}}
 
 
{{:Customising the Beez template/CSS/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 ====
 
 
<source lang="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;
 
}
 
</source>
 
 
:Storeage location: [[Customising the Beez template/position.css|position.css]]
 
 
==== Secondary Classes ====
 
 
{{:Customising the Beez template/CSS/position.css/*}}
 
 
[[Category:Beez]]
 
[[Category:Customizing Beez]]
 

Revision as of 03:46, 28 May 2012

Personal tools

Variants
Actions
Navigation
Joomla! Sites
Toolbox