Joomla! Documentation - User contributions [en]

Banner

2008-01-21T22:33:27Z

JGZimmerle: original draft

Web banners (also called banner ads) are a common form of advertising on the web. They are called this way because like real-world banners they are usually in a high-aspect-ratio shape (narrow and tall, or short and wide). They are usually placed on websites with high-quality content and link back to the advertisers' websites. Sometimes they are simple images combined with some HTML and JavaScript. Increasingly often they also use multimedia objects to play animations and sounds, employing technologies like Flash, Shockwave or Java, to attract attention.

Impressions refer to the number of times the banner has been displayed, while click-throughs refer to the number of times that users have clicked on the displayed banners. The original content provider on whose page the banner was displayed receives a small payment for each impression and a more substantial payment for each click-through, which will often be used to pay for the costs of providing the content to the users.

If banners are too attention-grabbing, users often get annoyed with them and employ an ad-blocker, which prevents the display of banners.

More info on banners is available on Wikipedia [http://en.wikipedia.org/wiki/Web_banner].

Banner

2008-01-21T21:37:58Z

JGZimmerle: New page: {{inuse}}

CSS

2008-01-21T15:57:05Z

JGZimmerle: Original draft.

Cascading Style Sheets (CSS) is the most widely used stylesheet languge on the world wide web. It is standardised by the W3C and can be used to style any kind of XML document, including XHTML, SVG and XUL.

It was conceived to ease the separation of content (written in XML markup) and presentation (written in CSS) of documents. CSS can be used to define and alter almost all presentation aspects of a document, like colours, font sizes and types, text direction, element sizes and positioning, etc.

Joomla provides many class- and id-attributes in its XHTML output, which can be used to alter its presentation through the use of CSS definitions for said classes and ids.

CSS can also be used to improve accessibility of documents. It also provides mechanisms to present the same XML markup in different ways, optimised for different devices like screen-readers, speech-synthesizing browsers, printers, and Braille-based, tactile devices.

CSS

2008-01-21T15:35:37Z

JGZimmerle: New page: {{inuse}}

Backup Basics for a Joomla! Web Site

2008-01-21T15:28:19Z

JGZimmerle: Added pointer to Joomla backup extensions.

A backup is a copy of the data stored on a computer, which can be used to restore the computer to the state it was in at the time the backup was made. Useful in case of data loss or if the computer system's security measures are compromised by malicious attackers.

To backup your Joomla site you will need an FTP client. Log in to the FTP account of your site and download all the files and folders that exist in the main directory. Be sure that the file and directory structure remains the same as in the live site.

You will also need to create a copy of your database. The mechanism varies depending on the host of your site. Most hosting providers provide phpMyAdmin to help you manage your databases (provided of course that you use MySQL as your database).

Instructions on how to backup a database: http://www.phpmyadmin.net/documentation/#faq6_4

Alternatively you may use the backup functionality provided by many webhosters through their site management interfaces, or one of the Joomla backup extensions available on the Joomla extensions directory from within the Joomla administrator backend.

Backup Basics for a Joomla! Web Site

2008-01-21T15:18:47Z

JGZimmerle: Added definition of the term.

A backup is a copy of the data stored on a computer, which can be used to restore the computer to the state it was in at the time the backup was made. Useful in case of data loss or if the computer system's security measures are compromised by malicious attackers.

To backup your Joomla site you will need an FTP client. Log in to the FTP account of your site and download all the files and folders that exist in the main directory. Be sure that the file and directory structure remains the same as in the live site.

Alternatively you may use the backup functionality provided by many webhosters through their site management interfaces.

You will also need to create a copy of your database. The mechanism varies depending on the host of your site. Most hosting providers provide phpMyAdmin to help you manage your databases (provided of course that you use MySQL as your database).

Instructions on how to backup a database: http://www.phpmyadmin.net/documentation/#faq6_4

Backup Basics for a Joomla! Web Site

2008-01-21T15:10:55Z

JGZimmerle:

To backup your Joomla site you will need an FTP client. Log in to the FTP account of your site and download all the files and folders that exist in the main directory. Be sure that the file and directory structure remains the same as in the live site.

Alternatively you may use the backup functionality provided by many webhosters through their site management interfaces.

You will also need to create a copy of your database. The mechanism varies depending on the host of your site. Most hosting providers provide phpMyAdmin to help you manage your databases (provided of course that you use MySQL as your database).

Instructions on how to backup a database: http://www.phpmyadmin.net/documentation/#faq6_4

Backup Basics for a Joomla! Web Site

2008-01-21T15:10:10Z

JGZimmerle: Added pointer to webhosters' backup systems.

To backup your Joomla site you will need an FTP client. Log in to the FTP account of your site and download all the files and folders that exist in the main directory. Be sure that the file and directory structure remains the same as in the live site.
Alternatively you may use the backup functionality provided by many webhosters through their site management interfaces.

You will also need to create a copy of your database. The mechanism varies depending on the host of your site. Most hosting providers provide phpMyAdmin to help you manage your databases (provided of course that you use MySQL as your database).

Instructions on how to backup a database: http://www.phpmyadmin.net/documentation/#faq6_4

JDOC:Joomla! Doc Camp/Contributors List

2008-01-21T15:00:25Z

JGZimmerle:

If you made a contribution to the documentation held on this site, please feel free to add your name below. Please consider adding your real name in addition to your nickname. You may, optionally, include a link to your website.
<onlyinclude>
== Contributors ==
* Chris Davenport ([[Special:Contributions/Chris_Davenport|contributions]])
* Marieke ([[Special:Contributions/Marieke92|contributions]])
* Justin Kerr ([[Special:Contributions/Pomond|contributions]])
* [http://www.jlleblanc.com Joe LeBlanc] ([[Special:Contributions/Jlleblanc|contributions]])
* [http://web.nostalgie.be Christophe Delire] ([[Special:Contributions/Nostalgie|contributions]])
* [http://www.joomlatools.org Johan Janssens] ([[Special:Contributions/Jinx|contributions]])
* [http://www.webmechanic.biz René Serradeil] ([[Special:Contributions/CirTap|contributions]])
* [https://www.zimmerle.de Julian Zimmerle] ([[Special:Contributions/JGZimmerle|contributions]])
</onlyinclude>
[[Category:DocCamp]]

Creating clickable background images using CSS

2008-01-21T14:21:08Z

JGZimmerle:

== What this is about ==

Okay, lets say you have a mostly finished template, with a typical corporate layout: A header, a content body area, and a footer. In the header you have placed a background image with a big company logo and some nice artwork next to it, with some dynamic content on top of the bottom right corner of the background image.
Suddenly you realise that a click on the company logo part of that background image should bring the user back to the homepage. Usually you would cut out the image and place it directly inside the link. However you don't have enough time to cut up the image and re-work your template accordingly, so what you need is a quick-fix.

At this point your HTML structure might look something like this:
<pre>
<div id="site">
<div id="full-width-header">
<div id="header-content">We love using Joomla!</div>
</div>
<div id="body-content">OSM saves the world!</div>
<div id="footer-content">(c) the really cool web-designer</div>
</div>
</pre>

And your CSS like this:
<pre>
#full-width-header {
background: url(header-logo.jpg);
width: 800px;
height: 172px;
}
#header-content {
position: relative;
float: right;
width: 400px;
height: 172px;
vertical-align: bottom;
text-align: right;
}
</pre>

Note: Legitimate uses for the following technique might include things like tab-interfaces where the tabs should be able to stretch and still have a background image, or blog-skins which only differ in CSS.

== How to do it ==

First: You can't just copy the #header-content div, position it over the logo, make the content invisible and enclose it in an anchor-tag. That would be broken HTML, because you can't place block-level elements like div inside anchor tags.

You can however enclose a stretched, one-pixel, transparent GIF image in anchor tags (as per example one) if you have to support old browsers. Otherwise you can simply turn the anchor itself into an inline-block using CSS 2.1 (as per example two).

Example 1 (pre CSS 2.1) HTML:
<pre>
<div id="site">
<div id="full-width-header">
<a href="/"><img src="transparent.gif" id="home-link" alt="Nav: Home" /></a>
<div id="header-content">We love using Joomla!</div>
</div>
<div id="body-content">OSM saves the world!</div>
<div id="footer-content">(c) the really cool web-designer</div>
</div>
</pre>

Example 1 (pre CSS 2.1) CSS:
<pre>
#full-width-header {
position: relative; /* necassary to
absolute-position the child-element
#home-link relative to the header */
background: url(header-logo.jpg);
width: 800px;
height: 172px;
}
#home-link {
position: absolute;
width: 200px; /* width of the logo */
height: 172px; /* height of the logo */
top: 0; left: 0; /* top-left corner of logo */
border: 0;
float: left;
}
#header-content {
position: relative;
float: right;
width: 400px;
height: 172px;
vertical-align: bottom;
text-align: right;
}
</pre>

Example 2 (CSS 2.1) HTML:
<pre>
<div id="site">
<div id="full-width-header">
<a href="/" id="home-link">Home</a>
<div id="header-content">We love using Joomla!</div>
</div>
<div id="body-content">OSM saves the world!</div>
<div id="footer-content">(c) the really cool web-designer</div>
</div>
</pre>

Example 2 (CSS 2.1) CSS:
<pre>
#full-width-header {
position: relative; /* necassary to
absolute-position the child-element
#home-link relative to the header */
background: url(header-logo.jpg);
width: 800px;
height: 172px;
}
#home-link {
position: absolute;
display: inline-block;
width: 200px; /* width of the logo */
height: 172px; /* height of the logo */
top: 0; left: 0; /* top-left corner of logo */
border: 0;
float: left;
visibility: hidden;
}
#header-content {
position: relative;
float: right;
width: 400px;
height: 172px;
vertical-align: bottom;
text-align: right;
}
</pre>

Creating clickable background images using CSS

2008-01-21T12:17:01Z

JGZimmerle: New page: {{inuse}}