Details
Published: Tuesday, 27 October 2015 14:34
Written by Super User

28. Jan. 2015: Adjusting an existing Joomla Template

Joomla-Backend: Customising the Template
- Menu, Menu Manager, Options
- Global Configuration: Site Settings
- Module Positions
- Menue, Categories
- Mootools

Replace Images and Graphics: Images, pictures and graphics are in the folder
./templates/NameOfTheTemplate/images
and the sub-folders.
A good program to create and/or manipulate all kind of images is GIMP.

Template Overrides
How to override the output from the Joomla! core
How to use the Template Manager
Creating Overrides
Further information: Template Management

Exploring the Template:
Browser: Chrome, Firefox, Opera + Web Developer Toolbar

 

CSS 3

W3C-Schools: CSS
All CSS-files are in thhe folder ./templates/NameOfTheTemplate/css
1. CSS-Selectors
Element Selector: Apply CSS to HTML-tags like <p>, <h1>, ...
template.css/CSS-Code:    p, h1, h2 { color: #666600; font-size: 1em;}
Class selectors: A "class" is always specified by "." and can be used serveral times, i.e. as often as you need it. A class can be applied to all kinds of HTML-elements.
index.php/HTML-Code: <div class="example">
template.css/CSS-Code:    .example { color: #ff0000; }
ID-Selectors: These ID-Selectors are indicated by "#" and appear only once in a file. They are used for positioning aereas and elements.
index.php/HTML-Code: <div id="header"> <p> The Top of the website </p> </div>
template.css/CSS-Code: #header { font-size: 1.5em; color: #333333; }
Pseudoclass Selectors: Pseudoclasses overwrite browser-internal formatting. Here are some examples:
template.css/CSS-Code:
a:link (a normal link)
a:visited (a visited link)
a:focus (a link thhat becoems active when tabbing through the page)
a:hover (a link when the mouse pointer hovers over it)
a:active (the currently active link)
(Sequence of formatting arrangement important!)
...
Context Selectors:
index.php/HTML-Code:
<div id="header">
    <ul>
        <li> one </li>
        <li> two </li>
    </ul>
</div>
template.css/CSS-Code:
#header ul li {color; #0000ff; }
Child Selector:
template.css/CSS-Code:    body >p
... formats all p that are direct childs of body
Universal Selector:
template.css/CSS-Code:    * { margin: 10; padding: 5; }

How to add a new module position

1. Edit ./templates/beez_20/index.php
<!-- Begin of new module position-->
<div id="new_position">
    <jdoc:include type="modules" name="new_position" />                                                    
 </div>
<!-- End of new module position-->        

2. Edit ./templates/beez_20/TemplateDetails.xml
Add <position>new_position</position>

3. Edit ./templates/beez_20/css/personal.css
#new_position {
                      width:70% ;
                      max-width:90% ;
                      top:0px;
                     left:0px;
                     padding:5px 10px !important;
                    text-align:right;
}
#new_position p{padding: 0px;margin: 0px;}
#new_position a:hover{text-decoration:none;background:transparent; }

4. Edit ./templates/beez_20/css/position.css
#new_position
{       padding:5px 0px 2px 2px;
        position:absolute;
        right :20px;
        top:4em;
        max-width:38em;
        padding: 0px;
}


Joomla Beez_20 template: Fontsize – Limit Size Increases