- 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