Joomla! Documentation - User contributions [en]

Portal talk:Accessibility/DHTML Style Guide Working Group

2018-11-08T13:22:10Z

Zwiastun: Created page with "Remove this page. DHTM Style Guide is only an archive resource."

Remove this page. DHTM Style Guide is only an archive resource.

Testing Joomla! patches

2018-06-28T16:06:40Z

Zwiastun: link improved

<noinclude><languages /></noinclude>
<translate>
In all software there are mistakes that need to be fixed, this is also the case in Open Source software like Joomla!. The source code of Joomla! is centrally located on the internet, making it accessible to everyone. Anyone who spots a bug or issue with Joomla! can report it. A guide to Filing bugs and issues can be found here: [[S:MyLanguage/Filing_bugs_and_issues|Filing bugs and issues]]
Reported bugs will be solved and eventually need testing. This page explains how you can contribute to the Joomla project by testing proposed solutions. You do not need to have any coding knowledge, you do need a Joomla installation to test on.
A Quick Reference Guide for testing is available at: [[S:MyLanguage/Testing Joomla! patches QuickReferenceGuide|Testing Joomla! patches QuickReferenceGuide]]</translate>

<translate>
=== The Joomla staging code === 
</translate>
<translate>
The Joomla staging code is the most recent code that is being worked on. All bugfixes and new features are applied to this code.


The Joomla staging code is located at https://github.com/joomla/joomla-cms, this is the code that needs to be installed. How that is done is explained a little further under [[#Preparing to test|Preparing to test]].</translate>

<translate>
=== The issue-tracker === 
</translate>
<translate>
The issue-tracker for Joomla is located here: http://issues.joomla.org</translate>

[[File:joomla_issue_tracker-<translate>
en</translate>.png|800px]]

<translate>
The list shows the tracker items from new to old but the order can be changed by using the filters under Search tools. All items in the tracker, that have a patch, have a version number beside the title.
* PR-staging: This is Joomla 3.7.x
* PR-4.0-dev: This is Joomla 4.0</translate>

<translate>
These labels will change in the future as new versions come and old versions go.


The status is important and this is an explanation:</translate>

<translate>
'''New''' - Immediately after an issue is reported it receives this status. When you find a bug, create a description how to reproduce the bug. People who are testing the issue then know how to test the patch.</translate>

<translate>
'''Confirmed''' - The tracker team has been able to reproduce the issue. The coding team is going to look for a solution.</translate>

<translate>
'''Pending''' - A solution has been found for the issue. A patch has been attached that can be tested. The issue needs to be tested. Pay attention to the label beside the title, this indicates for which Joomla version the patch is applicable.</translate>

<translate>
'''Ready to commit''' - The patch has been successfully tested and the code can be committed.</translate>

<translate>
'''Closed''' - This status is for all issues that need no further action.</translate>

<translate>
Filtering is useful in the issue tracker. Monitoring can be useful to receive notifications of an issue that has been updated.</translate>

<translate>
Basically you start testing issues that have the status "Pending".</translate>

<translate>
=== Preparing to test === 
</translate>
<translate>
First the master code has to be retrieved from the Joomla GitHub repository.
There are several different ways to download the Joomla master code but here we only discuss the download option.</translate>

<translate>
==== Create folder ==== 
</translate>
<translate>
First we need to create a folder on either the local webserver or the hosting account that can be accessed via the browser. Create the folder '''bugtesting''' and go to this folder via Explorer or Finder.</translate>

<translate>
==== Download Joomla! ==== 
</translate>
<translate>
Go to the [https://github.com/joomla/joomla-cms Joomla GitHub location] and click on '''Download ZIP'''</translate>

[[File:joomla_github-<translate>
en</translate>.png]]

<translate>
This will get you a copy of the Joomla master code in a ZIP file. Unzip the file in a temporary location, a folder named joomla-cms-staging will appear. Inside this folder is the Joomla master code. Go into the joomla-cms-staging folder and copy the complete contents to the folder '''bugtesting''' that you created in the previous step.</translate>

<translate>
Now you can install Joomla by navigating to <code><nowiki>http://localhost/bugtesting</nowiki></code> if you are using a local webserver, if you use one on a hosting account, navigate to the appropriate URL for the hosting account. You will see the regular installation process of Joomla.
For sample data choose: Test English (GB) sample data


This is important so everybody uses the same data to test!


The installation folder does not have to be removed, this way you can easily reinstall everything if needed.</translate>

<translate>

=== Download Patch Tester === 
</translate>
<translate>
To help you with the process of testing patches, a Joomla extension called Patch Tester has been developed. The Patch Tester can be downloaded from the [https://github.com/joomla-extensions/patchtester/releases Patch Tester page] and after that can be installed via the Extension manager in Joomla.</translate>

<translate>
To use the Patch Tester a GitHub account is required, the reason for this that there is a strict limit on the number of anonymous requests that can be made via the Patch Tester. You can sign up for a GitHub account on [https://github.com/join this page].</translate>

<translate>
=== Setup Patch Tester === 
</translate>
<translate>
The GitHub account details can be entered into the settings of the Patch Tester. After the Patch Tester has been installed go to Components -> Joomla! Patch Tester and click on Options in the top right corner. The Options page shows up and there are three tabs. On the first tab called GitHub Repository you can choose which repository you want to use. By default this is Joomla! CMS.</translate>

[[File:patchtester_repo-<translate>
en</translate>.png]]

<translate>

On the second tab called GitHub Authentication you can enter your GitHub username and password or token if you use a token.
</translate>

[[File:patchtester_details-<translate>
en</translate>.png]]

<translate>

Note: If you have enabled Two-Factor Authentication for your GitHub account, you will need to create a personal access token at https://github.com/settings/applications and enter that in the GitHub token field.
</translate>

<translate>
After entering your account details click on Save & Close. Once back in the Patch Tester click on Fetch Data in the top left corner.</translate>

<translate>
You are now ready to start testing.


Find an issue in the issue tracker you want to test or use the "Feeling lucky" button. First check if you can reproduce the issue. If you can reproduce the issue, then you can install the patch.</translate>

<translate>

=== Installing Patch === 
</translate>
<translate>
In the Patch Tester find the issue you are working on by (partial) title or ID. The title of a tracker always looks like this:


[#4308] - Fixed event dispatching inconsistencies leading to incomplete API


Beside the # is the ID and behind the - sign comes the title.</translate>

<translate>
After the patch has been found click on the blue button Apply Patch. Check if the bug has been fixed and also check if no new bugs have been introduced</translate>

<translate>
=== Recording test results === 
</translate>
<translate>

After testing, please add your test result in the test overview (''use the button "Test this"''). Now you only need to add a comment if you have extra information or if you test unsuccessful. As the Tracker now automatically add a comment that you test it.


It must also be noted that it is much better if you can test patches in a multilingual environment (''with at least 3 content languages published'') as there can be issues triggered only in such environment.
</translate>

[[File:New_testthis_button-<translate>
en</translate>.png|The new Test This button and how to use it]]

<translate>
=== Revert patch === 
</translate>
<translate>
After a patch has been tested it is no longer needed and can be removed from your test installation, this way you are always testing with a clean system. Go back to the Patch Tester and click on the green button Revert Patch. This will remove the patch and you can start testing the next issue.


If you have become enthusiastic to test, give it a try. It takes a bit of effort to set everything up but once that is done, it is fun and easy! In addition you are also contributing to Joomla!.</translate>

<translate>
== Videos== 
</translate>
<translate> Learn How to test patch with this video series ''How to "Patch Test" Joomla! code'':</translate>
<translate> *Part 1: Introduction</translate>
{{#widget:YouTube|id=zmnWkMisdJk}}

<translate> *Part 2: Neard Web Server setup</translate>
{{#widget:YouTube|id=Tqj-BAmPGLA}}

<translate> *Part 3: Sample issue testing.</translate>
{{#widget:YouTube|id=s881RLaFO8U}}

<translate>
== Link== 
</translate>
[https://brian.teeman.net/joomla/873-a-dummies-guide-to-joomla-bug-testing Brian Teeman: A Dummies Guide to Joomla Bug Testing]

<noinclude>
[[Category:Bug Squad{{#translation:}}]]
[[Category:Bug Tracker{{#translation:}}]]
[[Category:Core Contributions{{#translation:}}]]
[[Category: Tutorials{{#translation:}}]]
</noinclude>

Chunk:TinyMCE

2018-06-10T00:47:18Z

Zwiastun: section Accessibility added

<noinclude><languages /></noinclude>
<translate>

The default editor for both front-end and back-end users in Joomla! is the TinyMCE editor.


TinyMCE is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing Articles and other content. The 3-row toolbar below provides many standard editing commands:
</translate>
<section begin="toolbar" />
[[Image:article_tinymce_buttons-<translate>
en</translate>.png|center]]
<section end="toolbar" />
<translate>


*'''Top Row - Menu''' - You will find here Menus offering various features and often complementary to those in the buttons below.
</translate>
<translate>

**'''Edit''': Undo, Redo, Cut, Copy, Paste,
**'''Insert''': Picture, Link, Line, Special character,
**'''View''': with Visual aids,
**'''Format''': Bold, Italic, ... and all the different Formats available,
**'''Table''': with an easy way to specify rows and columns,
**'''Tools''': Edit Source Code. A popup displays, showing the HTML source code, allowing you to edit the HTML source code.
</translate>
<translate>

*'''Second Row'''
**Buttons on the left allow you to make text bold, italic, underlined, or strikethrough.
**Next to that are buttons for align left, center, right and full.
**Paragraph. Select pre-defined formats for Paragraph, Address, Heading 1, and so on.
**List where you can choose between Bullet list or Numbered list.
</translate>
<translate>

*'''Third Row'''
**Decrease and Increase indent.
**Undo and Redo.
**Insert/Edit Link. To insert or edit a link, select the linked text and press this button. A popup dialog displays that lets you enter details about the link.
**Remove link. To remove a link, highlight the linked text and press this button.
**Insert/Edit Image. To insert an image, place the cursor in the desired location and press this button. A popup dialog displays that lets you enter in the Image URL and other information about how the image will display.
**Source code. A popup displays showing the HTML source code, allowing you to edit the HTML source code.
**Horizontal line. To insert a line.
**Table, to insert a new table, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.
**Subscript, Superscript, Insert Custom Character.
</translate>
===Accessibility===
TinyMCE is compatible with screen readers such as JAWS and NVDA. You can use it effectively even if you don't use the mouse. To use the editor's toolbar, use the following keyboard shortcuts:

* [ALT + F9] Move focus and jump to menu bar
* [ALT + F10] Move focus and jump to toolbar
* [ALT + F11] Move focus and jump to element path
* [ESC] Close menu/submenu/dialog (also gets you back to editor area)
* [Tab]/[Arrow] Navigate left/right through menu/toolbar
See for more information: [https://www.tinymce.com/docs/advanced/accessibility/ TinyMCE - Accessibility]

Content editors

2018-06-10T00:45:34Z

Zwiastun: minor

Content editors

2018-06-10T00:44:39Z

Zwiastun: remove section Accessibility

Content editors

2018-06-10T00:43:31Z

Zwiastun: move section Accessibility

<noinclude><languages /></noinclude>
{{version/tutor|2.5,3.x}}
<translate>

The standard editors available in
</translate> {{JVer|multi}}

<translate>
==TinyMCE editor== 
</translate>
{{Chunk:TinyMCE/<translate>
en</translate>}}

===Accessibility===
TinyMCE is compatible with screen readers such as JAWS and NVDA. You can use it effectively even if you don't use the mouse. To use the editor's toolbar, use the following keyboard shortcuts:

* [ALT + F9] Move focus and jump to menu bar
* [ALT + F10] Move focus and jump to toolbar
* [ALT + F11] Move focus and jump to element path
* [ESC] Close menu/submenu/dialog (also gets you back to editor area)
* [Tab]/[Arrow] Navigate left/right through menu/toolbar
See for more information: [https://www.tinymce.com/docs/advanced/accessibility/ TinyMCE - Accessibility]

<translate>
==No editor== 
</translate>
{{Chunk:No editor/<translate>
en</translate>}}

<translate>

[[Category:References]][[Category:Article Management]][[Category:Tutorials]]
[[Category:Content Management]]
</translate>

Content editors

2018-06-10T00:42:30Z

Zwiastun: section Accessibility added

<noinclude><languages /></noinclude>
{{version/tutor|2.5,3.x}}
<translate>

The standard editors available in
</translate> {{JVer|multi}}

<translate>
==TinyMCE editor== 
</translate>
{{Chunk:TinyMCE/<translate>
en</translate>}}

<translate>
==No editor== 
</translate>
{{Chunk:No editor/<translate>
en</translate>}}

<translate>

[[Category:References]][[Category:Article Management]][[Category:Tutorials]]
[[Category:Content Management]]
</translate>
===Accessibility===
TinyMCE is compatible with screen readers such as JAWS and NVDA. You can use it effectively even if you don't use the mouse. To use the editor's toolbar, use the following keyboard shortcuts:

* [ALT + F9] Move focus and jump to menu bar
* [ALT + F10] Move focus and jump to toolbar
* [ALT + F11] Move focus and jump to element path
* [ESC] Close menu/submenu/dialog (also gets you back to editor area)
* [Tab]/[Arrow] Navigate left/right through menu/toolbar
See for more information: [https://www.tinymce.com/docs/advanced/accessibility/ TinyMCE - Accessibility]

Chunk4x:TinyMCE

2018-06-09T22:50:51Z

Zwiastun: section Accessibility added

<noinclude><languages /></noinclude>
<translate>
'''TinyMCE''' is the default editor for both front-end and back-end users. TinyMCE is a '''WYSIWYG''' (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing Articles and other content. TinyMCE can be configured with three different sets of toolbar buttons: Set 0, Set 1, and Set 2. This is set as an option in the [[S:MyLanguage/Help30:Extensions_Plugin_Manager| Plugin Manager]] for the 'Editor - TinyMCE' plugin.</translate>
<translate>
Set 0 is the most extended toolbar and is by default assigned to the Administrator, Editor and Super Users. Set 1 is assigned to the Manager end Registered. Set 2 is assigned to Public.</translate>

<translate>
===Set 1 Toolbar=== 
</translate>

<translate>
The set 1 toolbar provides a three-row (depending your screen) toolbar as shown below:</translate>

[[Image:Help-4x-editor-tinymce-advanced-<translate>
en</translate>.png|600px]]

<translate>
This is the default setting for Manager and Registered. The 3-row toolbar provides many standard editing commands, as follows:</translate>

<translate>
====Top Row.==== 
</translate>
:*<translate>
Buttons in the upper left allow you to make text bold, italic, underlined, or strikethrough. Next to that are buttons for align left, right, center, and full.</translate>
:*<translate>
Styles. Caption and System Pagebreak styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules.</translate>
:*<translate>
Format. Select pre-defined formats for Paragraph, Address, Heading1, and so on.</translate>
:*<translate>
Unordered List, Ordered list, Outdent (move left) and Indent (indent right).</translate>
:*<translate>
Undo (Ctrl+Z) and Re-do (Ctrl+Y).</translate>
<translate>
====Second Row.==== 
</translate>
:*<translate>
Insert/Edit Link. To insert or edit a link, select the linked text and press this button. A popup dialog displays that lets you enter details about the link.</translate>
:*<translate>
Unlink. To remove a link, highlight the linked text and press this button.</translate>
:*<translate>
Insert/Edit Anchor. An [[Glossary#Anchor | anchor]] is a bookmark inside an article that lets you link directly to that point in the article. To insert an anchor, move the cursor to the desired location within the article and click this button. A window will display. Enter the name of the Anchor and press Insert. A small anchor icon will show in the location of the anchor. You can edit the name of the anchor by clicking on it and pressing this button. You can delete the anchor just by selecting it and pressing the Delete key.</translate>
:*<translate>
Edit HTML Source. A popup displays showing the HTML source code, allowing you to edit the HTML source code.</translate>
:*<translate>
Insert Horizontal Ruler.</translate>
:*<translate>

Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.</translate>
:*<translate>
Subscript, Superscript, Insert Custom Character</translate>
:*<translate>

Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.</translate>
:*<translate>

Preview text in popup</translate>
:*<translate>

Insert Module, Menu, Contact, Field. In a popup you can choose the item you want to insert.</translate>
<translate>
====Third Row.==== 
</translate>
:*<translate>

Insert Article, Image, Page Break, Read More. In a popup you can choose the item you want to insert.</translate>

<translate>

===Set 2 Toolbar=== 
</translate>
<hr/>
<translate>
The set 2 toolbar provides one row of buttons as shown below.</translate>

[[Image:Help-4x-editor-tinymce-simple-<translate>
en</translate>.png|500px]]

<translate>
====First Row.==== 
</translate>
:*<translate>
Buttons allow you to make text bold, italic, underlined, or strikethrough.</translate>
:*<translate>
Undo (Ctrl+Z) and Re-do (Ctrl+Y).</translate>
:*<translate>
Unordered list, Ordered list.</translate>
:*<translate>

Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.</translate>
:*<translate>

Insert Field, Image, Read More. In a popup you can choose the item you want to insert.</translate>

<translate>
===Set 0 Toolbar=== 
</translate>
<hr/>
<translate>
The set 0 toolbar provides the most extensive editing options, as shown below.</translate>

[[Image:Help-4x-editor-tinymce-extended-<translate>
en</translate>.png|800px]]

<translate>
This option provides all of the same buttons as documented in the Set 1 (Advanced) Toolbar above. In addition, the following options are available:</translate>

<translate>
====First Row.==== 
</translate>
:*<translate>
Font Family. Select the desired font.</translate>
:*<translate>
Font Size. Select the desired font size.</translate>
:*<translate>
Find and Find/Replace.</translate>

<translate>
====Second Row.==== 
</translate>
:*<translate>
Select Text Color or Background Color.</translate>
:*<translate>
Toggle Full Screen Mode.</translate>
:*<translate>
Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.</translate>
:*<translate>
Insert Emotions.</translate>
:*<translate>
Insert Embedded Media. To insert embedded media (such as Flash), place the cursor at the desired location and press this button. A popup dialog will display that allows you to enter the Type, File or URL, and other information about the media.</translate>
:*<translate>
Insert horizontal line.</translate>
:*<translate>
Direction Left to Right and Direction Right to Left. These buttons allow you to enter or change the text direction, for example for languages that read right to left.</translate>
:*<translate>
Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.</translate>

<translate>
====Third Row.==== 
</translate>
:*<translate>
Show/Hide Visual Control Characters (like paragraph endings).</translate>
:*<translate>
Show/Hide Block Elements.</translate>
:*<translate>
Insert Non-Breaking Space Character.</translate>
:*<translate>
Block Quote.</translate>
:*<translate>
Insert Predefined Template Content.</translate>

===Accessibility===
TinyMCE is compatible with screen readers such as JAWS and NVDA. You can use it effectively even if you don't use the mouse. To use the editor's toolbar, use the following keyboard shortcuts:

* [ALT + F9] Move focus and jump to menu bar
* [ALT + F10] Move focus and jump to toolbar
* [ALT + F11] Move focus and jump to element path
* [ESC] Close menu/submenu/dialog (also gets you back to editor area)
* [Tab]/[Arrow] Navigate left/right through menu/toolbar
See for more information: [https://www.tinymce.com/docs/advanced/accessibility/ TinyMCE - Accessibility]

Chunk30:TinyMCE

2018-06-09T22:50:51Z

Zwiastun: section Accessibility added

<noinclude><languages /></noinclude>
<translate>
'''TinyMCE''' is the default editor for both front-end and back-end users. TinyMCE is a '''WYSIWYG''' (what you see is what you get) editor that allows users a familiar word-processing interface to use when editing Articles and other content. TinyMCE can be configured with three different sets of toolbar buttons: Set 0, Set 1, and Set 2. This is set as an option in the [[S:MyLanguage/Help30:Extensions_Plugin_Manager| Plugin Manager]] for the 'Editor - TinyMCE' plugin.</translate>
<translate>
Set 0 is the most extended toolbar and is by default assigned to the Administrator, Editor and Super Users. Set 1 is assigned to the Manager end Registered. Set 2 is assigned to Public.</translate>

<translate>
===Set 1 Toolbar=== 
</translate>

<translate>
The set 1 toolbar provides a three-row (depending your screen) toolbar as shown below:</translate>

[[Image:Help30-editor-tinymce-advanced-<translate>
en</translate>.png|600px]]

<translate>
This is the default setting for Manager and Registered. The 3-row toolbar provides many standard editing commands, as follows:</translate>

<translate>
====Top Row.==== 
</translate>
:*<translate>
Buttons in the upper left allow you to make text bold, italic, underlined, or strikethrough. Next to that are buttons for align left, right, center, and full.</translate>
:*<translate>
Styles. Caption and System Pagebreak styles can be set. Highlight the desired text and select the style. This will allow this text to be formatted based on CSS rules.</translate>
:*<translate>
Format. Select pre-defined formats for Paragraph, Address, Heading1, and so on.</translate>
:*<translate>
Unordered List, Ordered list, Outdent (move left) and Indent (indent right).</translate>
:*<translate>
Undo (Ctrl+Z) and Re-do (Ctrl+Y).</translate>
<translate>
====Second Row.==== 
</translate>
:*<translate>
Insert/Edit Link. To insert or edit a link, select the linked text and press this button. A popup dialog displays that lets you enter details about the link.</translate>
:*<translate>
Unlink. To remove a link, highlight the linked text and press this button.</translate>
:*<translate>
Insert/Edit Anchor. An [[Glossary#Anchor | anchor]] is a bookmark inside an article that lets you link directly to that point in the article. To insert an anchor, move the cursor to the desired location within the article and click this button. A window will display. Enter the name of the Anchor and press Insert. A small anchor icon will show in the location of the anchor. You can edit the name of the anchor by clicking on it and pressing this button. You can delete the anchor just by selecting it and pressing the Delete key.</translate>
:*<translate>
Edit HTML Source. A popup displays showing the HTML source code, allowing you to edit the HTML source code.</translate>
:*<translate>
Insert Horizontal Ruler.</translate>
:*<translate>

Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.</translate>
:*<translate>
Subscript, Superscript, Insert Custom Character</translate>
:*<translate>

Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.</translate>
:*<translate>

Preview text in popup</translate>
:*<translate>

Insert Module, Menu, Contact, Field. In a popup you can choose the item you want to insert.</translate>
<translate>
====Third Row.==== 
</translate>
:*<translate>

Insert Article, Image, Page Break, Read More. In a popup you can choose the item you want to insert.</translate>

<translate>

===Set 2 Toolbar=== 
</translate>
<hr/>
<translate>
The set 2 toolbar provides one row of buttons as shown below.</translate>

[[Image:Help30-editor-tinymce-simple-<translate>
en</translate>.png|500px]]

<translate>
====First Row.==== 
</translate>
:*<translate>
Buttons allow you to make text bold, italic, underlined, or strikethrough.</translate>
:*<translate>
Undo (Ctrl+Z) and Re-do (Ctrl+Y).</translate>
:*<translate>
Unordered list, Ordered list.</translate>
:*<translate>

Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.</translate>
:*<translate>

Insert Field, Image, Read More. In a popup you can choose the item you want to insert.</translate>

<translate>
===Set 0 Toolbar=== 
</translate>
<hr/>
<translate>
The set 0 toolbar provides the most extensive editing options, as shown below.</translate>

[[Image:Help30-editor-tinymce-extended-<translate>
en</translate>.png|800px]]

<translate>
This option provides all of the same buttons as documented in the Set 1 (Advanced) Toolbar above. In addition, the following options are available:</translate>

<translate>
====First Row.==== 
</translate>
:*<translate>
Font Family. Select the desired font.</translate>
:*<translate>
Font Size. Select the desired font size.</translate>
:*<translate>
Find and Find/Replace.</translate>

<translate>
====Second Row.==== 
</translate>
:*<translate>
Select Text Color or Background Color.</translate>
:*<translate>
Toggle Full Screen Mode.</translate>
:*<translate>
Insert New Table, Table Row Properties, Table Cell Properties, Insert Row Before, Insert Row After, Delete Row, Insert Column Before, Insert Column After, Delete Column, Split Merged Table Cells, Merge Table Cells.</translate>
:*<translate>
Insert Emotions.</translate>
:*<translate>
Insert Embedded Media. To insert embedded media (such as Flash), place the cursor at the desired location and press this button. A popup dialog will display that allows you to enter the Type, File or URL, and other information about the media.</translate>
:*<translate>
Insert horizontal line.</translate>
:*<translate>
Direction Left to Right and Direction Right to Left. These buttons allow you to enter or change the text direction, for example for languages that read right to left.</translate>
:*<translate>
Cut, Copy, Paste, Paste as Plain Text, Paste from Word. Often when copying and pasting text from other sources, such as PDF files, Word documents, or web pages, the selected text contains formatting information that is not needed or wanted. Using the Paste as Plain Text will strip out all formatting from the text. Paste as Word tries to preserve some of the formatting while stripping out unnecessary formatting.</translate>

<translate>
====Third Row.==== 
</translate>
:*<translate>
Show/Hide Visual Control Characters (like paragraph endings).</translate>
:*<translate>
Show/Hide Block Elements.</translate>
:*<translate>
Insert Non-Breaking Space Character.</translate>
:*<translate>
Block Quote.</translate>
:*<translate>
Insert Predefined Template Content.</translate>

===Accessibility===
TinyMCE is compatible with screen readers such as JAWS and NVDA. You can use it effectively even if you don't use the mouse. To use the editor's toolbar, use the following keyboard shortcuts:

* [ALT + F9] Move focus and jump to menu bar
* [ALT + F10] Move focus and jump to toolbar
* [ALT + F11] Move focus and jump to element path
* [ESC] Close menu/submenu/dialog (also gets you back to editor area)
* [Tab]/[Arrow] Navigate left/right through menu/toolbar
See for more information: [https://www.tinymce.com/docs/advanced/accessibility/ TinyMCE - Accessibility]

User:Zwiastun

2017-11-22T15:26:10Z

Zwiastun:

My name is Stefan Wajda. I'm the co-ordinator of Joomla! Polish Centre and Polish Translation Team.
Visit website for PCJ:
* [http://www.joomla.pl Centrum]
* [http://wiki.joomla.pl Elektroniczna Biblioteka Polskiej Dokumentacji Joomla!]
* [http://demo.joomla.pl Demo]

Portal:Accessibility/UI Components. U.S. Web Design Standards

2017-07-15T01:04:05Z

Zwiastun: create page

=UI Components. U.S. Web Design Standards=
The Web Design Standards are a library of design guidelines and code to help government developers and designers quickly create trustworthy, accessible, and consistent digital government services.

The Web Design Standards can be used when developing specifications for Joomla UI components.

==Note==
* A few parts of this project are not in the public domain. Attribution and licensing information for those parts are described in detail in [https://github.com/18F/web-design-standards/blob/develop/LICENSE.md LICENSE.md].
* The rest of this project is in the worldwide public domain, released under the [https://creativecommons.org/publicdomain/zero/1.0/ CC0 1.0 Universal public domain dedication].

==Learn more==
* [https://standards.usa.gov/components/ UI Components. U.S. Web Design Standards]

<noinclude>
[[Category:Accessibility]]
</noinclude>

Portal:Accessibility/Web sccessibility standards

2017-06-24T21:22:47Z

Zwiastun: Zwiastun moved page Portal:Accessibility/Web sccessibility standards to Portal:Accessibility/Web Accessibility standards: title error

#REDIRECT [[Portal:Accessibility/Web Accessibility standards]]

File:Accessibility-logo.png

2017-06-24T19:23:27Z

Zwiastun: {{JEDL}}

== Summary ==
{{JEDL}}
== Licensing ==
{{JEDL}}

JDOC:Documentation Translators

2017-06-24T18:43:59Z

Zwiastun: /* pl - Polski - Polish */ add translator name

[[File:JDOC translation icon.png|right]]
Here, people '''translating''' {{SITENAME}} can sign up as a translator. Please be sure to read the required reading list below.

After you add your username to the list below under the appropriate language heading, a [[JDOC:Translation Administrators|Translation Administrator]] will assign your username translator permissions. After your username is added as a translator you can start translating! Please be on the look out for a [[Template:Translator welcome|welcome messaFvertaage]] with more information posted to your user talk page.{{-}}

== Required Reading ==
* Getting started, read [[JDOC:Page Translation Quickstart Guide|Page Translation Quickstart Guide]]
* Detailed explanation of translating, [[JDOC:Page Translation Explained|Page Translation Explained]].
* Our [[JDOC:Language policy|Language policy]]
* [[JDOC:Translator Tips|Translator Tips]]
* [[Joomla:JDOC%27s_Translation_Guidelines|Translation Guidelines]]
* Having an [[JDOC:Translation Questions|issue or need help]]?

{{tip|text=Dear translators! Please [[Special:TranslatorSignup|register for translator notifications about your language]]. You are placed on a list to receive notices about new/updated pages that need translation.|title=A Tip for Translators}}

===Add Your Language===
If your language isn't listed below, please add it using the format:

<code><lang code> - Localised language name - English language name </code>

Use the syntax, <code><nowiki>* {{User|YourUsername}}</nowiki> - requested</code>

When a Translation Administrator adds you as a translator, they will remove the "- requested" from your username.

==Current Translations Teams==

Documentation language codes are different from Joomla! language codes, they are ISO 639-1 2 letter code. A small quantity of 4 letter language codes are used as an exception, but these language codes are all lowercase.

=== ar - عربي - arabe ===
* {{User|ghilo}}
* {{User|HawraMilani}}
* {{User|hossen}}

=== af - Afrikaans ===
*{{User|JoeSA}}

=== bg - Български - Bulgarian ===
* {{User|bdimov}}
* {{User|Mastwd}}

=== ca - Català - Catalan ===
* {{User|el_libre}}

=== cs - Čeština - Czech ===
* {{User|fredericco-cz}}

=== da - Dansk - Danish ===
* {{User|ot2sen}}
* {{User|rbuelund}}

=== de - Deutsch - German ===
* {{User|Astridx}}
* {{User|Assmann}}
* {{User|Balzercomp}}
* {{User|ceus1984}}
* {{User|Chmst}}
* {{User|chrishoefliger}}
* {{User|FrankyD}}
* {{User|fruppel}}
* {{User|gorgonz}}
* {{User|jehacgn}}
* {{User|joomla-agency}}
* {{User|Ka3media}}
* {{User|King_Louis_1}}
* {{User|Kolvar}}
* {{User|Kurztipp}}
* {{User|m-b-o}}
* {{User|Max123kl}}
* {{User|michaelmyk}}
* {{User|Paterna}}
* {{User|Pete71}}
* {{User|phillopp}}
* {{User|plocher}}
* {{User|Prof.Logout}}
* {{User|RMajewski}}
* {{User|SeigetsuShoen}}
* {{User|Sisko1990}}
* {{User|Stefanie}}
* {{User|Tkahl}}
* {{User|UCFnet002}}
* {{User|Usimon}}
* {{User|Webberry}}
* {{User|Yvesh}}
* {{User|zero24}}

=== el - Ελληνικά - Greek ===
* {{User|pnkr}}

=== es - Español - Spanish ===
* {{User|Abulafia}}
* {{User|BNovoa.S}}
* {{User|brucevalle}}
* {{User|carcam}}
* {{User|cristobal.vio}}
* {{User|Crsanchez}}
* {{User|danielperaza}}
* {{User|filisfutsarov}}
* {{User|framon}}
* {{User|Irene.lopez}}
* {{User|isidrobaq}}
* {{User|ivanramosnet}}
* {{User|Javiparati}}
* {{User|Jcollver}}
* {{User|Koa}}
* {{User|Leo_Soto}}
* {{User|netandsoftware}}
* {{User|NunoLopes}}
* {{User|pfvidal}}
* {{User|shaz}}
* {{User|Urielmx}}
* {{User|VictorYork87}}
* {{User|viena}}
* {{User|Willin}}

=== et - Eesti - Estonian ===
* {{User|Eraser}}

=== fa - فارسی - Persian ===
* {{User|azolfagharj}}
* {{User|Grand}}
* {{User|Heydari}}
* {{User|Joomlafarsi}}
* {{User|Levelup}}
* {{User|mhehm}}

=== fr - Français - French ===
* {{User|david613}}
* {{User|edelouche}}
* {{User|Garstud}}
* {{User|MATsxm}}
* {{User|Opware2000}}
* {{User|Perete}}
* {{User|Sandra97}}

=== ga - Gaeilge - Irish ===
* {{User|rvbgnu}}

=== he - עברית - Hebrew ===
* {{User|ydl}}
* {{User|shirdesign}}

=== hi - हिंदी - Hindi ===
* {{User|Rana}}
* {{User|Syhussaini}}
* {{User|Shivamrajput}}

=== hu - Magyar - Hungarian ===
* {{User|Balazs}}
* {{User|webgobe}}

=== hy - Հայերեն - Armenian ===
* {{User|Aaleksanyants}}

=== id - Bahasa Indonesia - Indonesian ===
* {{User|dw1Rianto}}
* {{User|Micokelana}}
* {{User|sikumbang}}

=== it - Italiano - Italian ===
* {{User|alexred}}
* {{User|alikon}}
* {{User|CinziaDesign}}
* {{User|donato}}
* {{User|Luca.marzo}}
* {{User|marioluciani}}
* {{User|nemo_bis}} (occasionally)
* {{User|Paolo Alberti}}
* {{User|robertolongo}}
* {{User|ste}}

=== ja - 日本語 - Japanese ===
* {{User|Koji Hijikuro}}
* {{User|Nori}}
* {{User|Richell}}
* {{User|Yama}}

=== nl - Nederlands - Dutch ===
* {{User|AboutTime}}
* {{User|Alex0703}}
* {{User|Annemiek}}
* {{User|Arkomat}}
* {{User|bcdesign}}
* {{User|crommie}}
* {{User|Grubosoft}}
* {{User|fcschippers}}
* {{User|HermanPeeren}}
* {{User|Hvdmeer}}
* {{User|janvankuijk}}
* {{User|John Flour}}
* {{User|JorSanders}}
* {{User|Josien}}
* {{User|Lara}}
* {{User|Lianne}}
* {{User|klatte88}}
* {{User|ManuAmpe}}
* {{User|Marcelk}}
* {{User|marionnijhuis}}
* {{User|Marnix}}
* {{User|MartijnM}}
* {{User|Meta}}
* {{User|metdick}}
* {{User|Mtb}}
* {{User|n9iels}}
* {{User|Nemphias}}
* {{User|Nico-van-Leeuwen}}
* {{User|Onderzoekspraktijk}}
* {{User|rachel73}}
* {{User|Renem}}
* {{User|Ries}}
* {{User|Rineke}}
* {{User|Schrijvers123}}
* {{User|slibbe}}
* {{User|Stitch123}}
* {{User|Vertaalbirdy}}
* {{User|webmiep}}
* {{User|webcatsolutions}}
* {{User|willoweb}}
* {{User|wimstrik}}

=== pl - Polski - Polish ===
* {{User|Derek}}
* {{User|justyna}}
* {{User|MiloW}}
* {{User|Zwiastun}}

=== pt - Português - Portuguese ===
* {{User|Djesus}}
* {{User|Horus_68}}
* {{User|Lampreia Lopes}}
* {{User|Mansil}}
* {{User|Nunof}}
* {{User|NunoLopes}}
* {{User|Ricardo.fusco}}

=== pt-br - Português Brasil - Brazilian Portuguese ===
* {{User|Airton}}
* {{User|alangustavo}}
* {{User|AleMorettiSan}}
* {{User|Anabarcellos}}
* {{User|Ariadnepinheiro}}
* {{User|Belisards}}
* {{User|Dagoberto}}
* {{User|DiLeu}}
* {{User|Filipetorres}}
* {{User|Gleisonsoares}}
* {{User|Helvecio}}
* {{User|Henrydouglas}}
* {{User|Jeann Wilson}}
* {{User|Juliano.freitas}}
* {{User|Murilotimo}}
* {{User|VitorAdonai}}
* {{User|Vizetti}}
* {{User|Welkson Ramos}}

=== ro - Română - Romanian ===
* {{User|andreeastefan}}
* {{User|isac}}

=== ru - Русский - Russian ===
* {{User|AlexSmirnov}}
* {{User|Antonio3}}
* {{User|b2z}}
* {{User|Dosfanat}}
* {{User|Igor}}
* {{User|Kanta}}
* {{User|Leo240}}
* {{User|Nikitm}}
* {{User|Serg SSN}}
* {{User|Vyatka}}
* {{User|Yambergaa}}

=== si - සිංහල - Sinhala ===
* {{User|Yasirunilan}}
* {{User|Supun}}

=== sk - Slovenčina - Slovak ===
* {{User|adambako}}

=== sv - Svenska - Swedish ===
* {{User|Propellerhuvud}}
* {{User|Sgagner}}

=== sw - Kiswahili - Swahili ===
* {{User|Ayeko}}

=== th - ไทย - Thai ===
* {{User|Supachai_chai}}
* {{User|Mrs.siam}}
* {{User|Ariesanywhere}}

=== tr - Türkçe - Turkish ===
* {{User|Enes}}
* {{User|Ugur}}
* {{User|Umitkenan}}

=== ukr - Українська - Ukrainian ===
* {{User|Olesya6968ak}}
* {{User|sera527}}
* {{User|trv}}

=== ur - ur-PK - اردو - Urdu Pakistan ===
* {{User|hoornayyer}}

=== vi - Tiếng Việt - Vietnamese ===
* {{User|huyhoa}}

=== zh - 中文 - Chinese ===
* {{User|asika32764}}
* {{User|eyesofkids}}
* {{User|Guozhanfeng}}
* {{User|KellyXYM}}
* {{User|lai32290}}
* {{User|Mori0725ken}}
* {{User|myskies}}
* {{User|Wulijun01234}}
* {{User|Zace}}
* {{User|Zhang19min88}}
* {{User|Zhous98}}

==Translation Administrators==

The responsibilities of a Translation Administrator will require slightly more attention to the documents for translation. Translation Administrators should feel comfortable with using wiki markup, made hundreds of contributions to their specific language and assisted others in translation of docs. Administrators will need to check the documentation every few days and perform any required tasks. These tasks include re-marking pages in en-GB with edit changes, tracking language units which need translation and welcoming new translators. Ideally, we should have at least one Translation Administrator who will not be tied to any specific language and when the time comes, one Translation Administrator for active language teams.

===Current Volunteer Translation Administrators===
{{:Special:ListUsers/translationadmins}}

==Common Language Codes==
<div class="small-4 columns"> afr - Afrikaans - Afrikaans
</div><div class="small-4 columns"> ar - عربي - Arabic
</div><div class="small-4 columns"> bg - Български - Bulgarian
</div><div class="small-4 columns"> bg - Български - Bulgarian
</div><div class="small-4 columns"> bn - বাংলা - Bengali
</div><div class="small-4 columns"> bo - བོད་ཡིག - tibetan
</div><div class="small-4 columns"> ca - Català - Catalan
</div><div class="small-4 columns"> ce - Nohçi - Chechen
</div><div class="small-4 columns"> da - Dansk - Danish
</div><div class="small-4 columns"> de - Deutsch - German
</div><div class="small-4 columns"> es - Español - Spanish
</div><div class="small-4 columns"> fa - فارسی - Persian
</div><div class="small-4 columns"> fi - Suomi - Finnish
</div><div class="small-4 columns"> fr - Français - French
</div><div class="small-4 columns"> hu - Magyar - Hungarian
</div><div class="small-4 columns"> hy - Հայերեն - Armenian
</div><div class="small-4 columns"> id - Bahasa Indonesia - Indonesian
</div><div class="small-4 columns"> is - Íslenska - Icelandic
</div><div class="small-4 columns"> it - Italiano - Italian
</div><div class="small-4 columns"> ja - 日本語 - Japanese
</div><div class="small-4 columns"> ko - 한국어 - Korean
</div><div class="small-4 columns"> lb - Lëtzebuergesch - Luxembourgish
</div><div class="small-4 columns"> min - Baso Minangkabau - Minang
</div><div class="small-4 columns"> ml - liviox alvax - Malayalam
</div><div class="small-4 columns"> mr - मराठी - Marathi
</div><div class="small-4 columns"> ms - Bahasa Melayu - Malay
</div><div class="small-4 columns"> nl - Nederlands - Dutch
</div><div class="small-4 columns"> pl - Polski - Polish
</div><div class="small-4 columns"> pt - Português - Portuguese
</div><div class="small-4 columns"> pt-br - Português do Brasil - Brazilian Portuguese
</div><div class="small-4 columns"> ro - Română - Romanian
</div><div class="small-4 columns"> ru - Русский - Russian
</div><div class="small-4 columns"> sl - Slovenščina - Slovenianjtökók
</div><div class="small-4 columns"> sq - Shqip - Albanian
</div><div class="small-4 columns"> sv - Svenska - Swedish
</div><div class="small-4 columns"> sw - Kiswahili - Swahili
</div><div class="small-4 columns"> ta - தமிழ் - Tamil
</div><div class="small-4 columns"> th - ไทย - Thai
</div><div class="small-4 columns"> tr - Türkçe - Turkish
</div><div class="small-4 columns"> vi - Tiếng Việt - Vietnamese
</div><div class="small-4 columns"> zh - 中文 - Chinese
</div>

<noinclude>
[[Category:Documentation Wiki Policies and Guidelines]]
[[Category:Documentation Translation]]
</noinclude>

Joomla info page/pl-PL

2016-10-11T00:59:28Z

Zwiastun: /* Jak pomóc w rozwoju Joomla! */ remove non exist url

{{RightTOC}}
= Polski =

== Czym jest Joomla? ==
Joomla jest wielokrotnie nagradzanym systemem zarządzania treścią (CMS), który umożliwia budowanie serwisów internetowych i skutecznych aplikacji. Wiele aspektów, takich jak jego łatwość obsługi i rozszerzalność powoduje że Joomla jest jednym z najpopularniejszych programów tego typu dostępnych w Internecie. Najlepszy ze wszystkich, Joomla rozwiązania open source, która jest dostępna bezpłatnie dla wszystkich. Korzyści z Joomla! obejmują:

* Prosta instalacja
* Prosta obsługa
* Wysoki poziom bezpieczeństwa i stabilności
* Ogromna ilość bezpłatnych oraz komercyjnych rozszerzeń
* Zaawansowany system szablonów pozwalający łatwo zmienić wygląd twojej strony internetowej

== Gdzie pobrać Joomla! ? ==
* Ze strony: Polskiego Centrum Joomla!: http://joomla.pl/index.php/pobierz-joomla.html lub ze strony http://www.joomla.org/download.html
* Pakiety językowe można pobrać pod: http://joomla.pl/index.php/pobierz-joomla.html

== Gdzie znaleźć rozszerzenia? ==
* Szukaj rozszerzeń: http://extensions.joomla.org/

== Gdzie znaleźć dokumentację ==
* Dokumentacja w języku angielskim: http://docs.joomla.org/
* Dokumentacja w języku polskim: http://wiki.joomla.pl/

== Gdzie szukać pomocy ==
* Bezpłatna pomoc w języku angielskim: http://forum.joomla.org/
* Bezpłatna pomoc w języku polskim
** http://forum.joomla.pl/
** http://forum.joomla.org/viewforum.php?f=18

== Imprezy regionalne / Joomladays ==
Lokalne społeczności na całym świecie organizują Joomla! Days. Joomla! Day to wydarzenie stworzone wyłącznie dla użytkowników Joomla i projektów i zazwyczaj zwracające się regionalnych odbiorców. Więcej informacji:http://community.joomla.org/events/joomla-days.html

== Joomla User Groups (JUG) ==
Lokalne Grupy użytkowników Joomla (JUG) to świetny sposób na poznanie nowych ludzi, uzyskanie pomocy z projektem, lub podzielenie się swoją wiedzą z innymi użytkownikami Joomla!. Joomla jest wszędzie więc warto sprawdzić, czy istnieje już JUG w Twojej okolicy. Jeśli nie, warto rozważyć utworzenie jednego.

* JUG FAQ: http://community.joomla.org/user-groups/jug-faq.html

== Jak pomóc w rozwoju Joomla! ==
* Zaangażuj się w [http://forum.joomla.pl udzielaniu pomocy]
* Pomóż w rozwoju [http://wiki.joomla.pl dokumentacji]
* Stwórz rozszerzenie lub szablon
* Jeśli znajdziesz błędy w Joomla! zgłoś ten fakt http://docs.joomla.org/How_do_you_report_a_bug%3F
* Dołącz się do Joomla! Working Group
* Pomóż zorganizować wydarzenie typu Joomla! Day lub JUG
* Oraz w setki innych sposobów. Zobacz: http://joomla.pl/index.php/korzystaj-i-dziel-sie.html oraz http://contribute.joomla.org/

Joomla info page/pl-PL

2016-10-11T00:51:28Z

Zwiastun: /* Gdzie szukać pomocy */ remove non exist url

{{RightTOC}}
= Polski =

== Czym jest Joomla? ==
Joomla jest wielokrotnie nagradzanym systemem zarządzania treścią (CMS), który umożliwia budowanie serwisów internetowych i skutecznych aplikacji. Wiele aspektów, takich jak jego łatwość obsługi i rozszerzalność powoduje że Joomla jest jednym z najpopularniejszych programów tego typu dostępnych w Internecie. Najlepszy ze wszystkich, Joomla rozwiązania open source, która jest dostępna bezpłatnie dla wszystkich. Korzyści z Joomla! obejmują:

* Prosta instalacja
* Prosta obsługa
* Wysoki poziom bezpieczeństwa i stabilności
* Ogromna ilość bezpłatnych oraz komercyjnych rozszerzeń
* Zaawansowany system szablonów pozwalający łatwo zmienić wygląd twojej strony internetowej

== Gdzie pobrać Joomla! ? ==
* Ze strony: Polskiego Centrum Joomla!: http://joomla.pl/index.php/pobierz-joomla.html lub ze strony http://www.joomla.org/download.html
* Pakiety językowe można pobrać pod: http://joomla.pl/index.php/pobierz-joomla.html

== Gdzie znaleźć rozszerzenia? ==
* Szukaj rozszerzeń: http://extensions.joomla.org/

== Gdzie znaleźć dokumentację ==
* Dokumentacja w języku angielskim: http://docs.joomla.org/
* Dokumentacja w języku polskim: http://wiki.joomla.pl/

== Gdzie szukać pomocy ==
* Bezpłatna pomoc w języku angielskim: http://forum.joomla.org/
* Bezpłatna pomoc w języku polskim
** http://forum.joomla.pl/
** http://forum.joomla.org/viewforum.php?f=18

== Imprezy regionalne / Joomladays ==
Lokalne społeczności na całym świecie organizują Joomla! Days. Joomla! Day to wydarzenie stworzone wyłącznie dla użytkowników Joomla i projektów i zazwyczaj zwracające się regionalnych odbiorców. Więcej informacji:http://community.joomla.org/events/joomla-days.html

== Joomla User Groups (JUG) ==
Lokalne Grupy użytkowników Joomla (JUG) to świetny sposób na poznanie nowych ludzi, uzyskanie pomocy z projektem, lub podzielenie się swoją wiedzą z innymi użytkownikami Joomla!. Joomla jest wszędzie więc warto sprawdzić, czy istnieje już JUG w Twojej okolicy. Jeśli nie, warto rozważyć utworzenie jednego.

* JUG FAQ: http://community.joomla.org/user-groups/jug-faq.html

== Jak pomóc w rozwoju Joomla! ==
* Zaangażuj się w [http://www.joomla.net.pl/pomoc udzielaniu pomocy]
* Pomóż w rozwoju [http://wiki.joomla.pl dokumentacji]
* Stwórz rozszerzenie lub szablon
* Jeśli znajdziesz błędy w Joomla! zgłoś ten fakt http://docs.joomla.org/How_do_you_report_a_bug%3F
* Dołącz się do Joomla! Working Group
* Pomóż zorganizować wydarzenie typu Joomla! Day lub JUG
* Oraz w setki innych sposobów. Zobacz: http://joomla.pl/index.php/korzystaj-i-dziel-sie.html oraz http://contribute.joomla.org/

J1.5:How to add tooltips to your Joomla! website

2010-04-29T11:07:12Z

Zwiastun: add letter: joomla

{{review}}
===Tooltips Overview===
A tooltips is a piece of text that pops up when you hover the mouse over a region on a website. If you use the Joomla! back end, for example, tooltips are used to help explain the action of different parameters, as shown in the screenshot below:

[[Image:Screen_tooltip_example_20090208.png]]

Tooltips are a great way to give the user access to information without using up space on the screen. You can use basic tooltips just by adding a "title" attribute to a tag. However, this doesn't give you the option to style the tooltips. With Joomla! version 1.5, it is very easy to add styled tooltips to your site. This tutorial will show you how. <blockquote>''Note: If you are converting old code, make sure it doesn't use the prototype.js file. That file will keep the tooltips from working.''</blockquote>

===Activate Tooltip Behavior===
To start, you must activate the tooltip behavior. This is done with the following line of code:
<source lang="php">
JHTML::_('behavior.tooltip');
</source>
Note that you only put this line in once per file. A good place is right after the <code>defined('_JEXEC') or die('Restricted access');</code> line. If you are curious about what this line does, it inserts the following JavaScript code in the heading of the HTML page:
<source lang="html4strict">
<script type="text/javascript">
window.addEvent('domready', function(){
var JTooltips = new Tips($$('.hasTip'),
{ maxTitleChars: 50, fixed: false});
});
</script>
</source>
This allows tooltips to function, as outlined below.

===Create a Tooltip with the JHTML::tooltip Method===
One way to create a tooltip is using the JHTML::tooltip method. The API documentation is available at [http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#tooltip http://api.joomla.org/Joomla-Framework/HTML/JHTML.html#tooltip]. The method definition is shown below.
<source lang="php">
void tooltip (string $tooltip, [string $title = ''], [string $image = 'tooltip.png'],
[string $text = ''], [string $href = ''], [boolean $link = 1])
</source>
The brackets mean the parameter is optional. The first parameter, "$tooltip", is the only required parameter. The equals specifies the default if you do not pass that parameter. For example, the image file 'tooltip.png' is the default image.

The following is a basic tooltip. Keep in mind that the image variable must be in reference to 'includes/js/ThemeOffice'. Use the prefix '../../../' to reference from the root of the Joomla installation.
<source lang="php">
JHTML::tooltip('This is the tooltip text', 'Tooltip title', 'tooltip.png', '',
'http://www.joomla.org');
</source>
The above will make a tooltip using the default "tooltip.png" image, as shown below.[[Image:Tooltip_tutorial_example_screenshot_20090208.png|center|frame]]Clicking the image will take you to <tt>http://www.joomla.org</tt>, since that is the "$href" argument. The HTML source for this tooltip is as follows:
<source lang="html4strict">
<span class="editlinktip hasTip" title="Tooltip title::This is the tooltip text" >
<a href="http://www.joomla.org">
<img src="/my_joomla_path/includes/js/ThemeOffice/tooltip.png" border="0" alt="Tooltip"/></a>
</span>
</source>

<blockquote>''Internet Explorer Bug: As shown above, when you use the JHTML::tooltip method to create an image tooltip, it creates an "alt" attribute with the value "Tooltip". The "alt" attribute is used in cases where the image file cannot be found or for accessibility (for example, for blind users). Internet Explorer automatically -- and incorrectly -- displays the "alt" attribute as a tooltip. This means that image tooltips created by JHTML::tooltip (like the example above) will display with two tooltips when viewed with Internet Explorer, as shown below.''</blockquote>
[[Image:Tooltip_tutorial_ie7bug_20090301.png|center|frame]]
<blockquote>''You can avoid this problem either by using text tooltips or by not using this method for image tooltips. Instead, just enter the HTML manually and set the "alt" attribute to an empty string (alt="").''</blockquote>

This code is almost the same as above except the image will not be a link (because the "$href" argument is omitted).
<source lang="php">
JHTML::tooltip('This is the tooltip text', 'Tooltip title',
'tooltip.png', '', '', false);
</source>

A tooltip can be attached to an image or to text. For example, this code
<source lang="php">
echo JHTML::tooltip('This is a tooltip attached to text', 'Text Tooltip Title',
'', 'Hover on this text to see the tooltip');
</source>
will show a tooltip attached to text, as shown below.

[[Image:Tooltip_tutorial_example_screenshot2_20090208.png|center|frame]]

Note that specifying the "$text" parameter will override any image you have passed to tooltip.

===Create a Tooltip Using a CSS Class Name===
If we look at the HTML page source generated by the <code>JHTML::tooltip</code> function above, here is what we see:
<source lang="html4strict">
<span class="editlinktip hasTip"
title="Text Tooltip Title::This is a tooltip attached to text"
style="text-decoration: none; color: #333;">
Hover on this text to see the tooltip</span>
</source>
This function generates an HTML "span" tag with the classes "editlinktip" and "hasTip" and an attribute called "title". Notice that the the "title" attribute has two parts, <code><tooltip title>::<tooltip text></code> (for example, "Tooltip Title::This is the tooltip text"). You can create a tooltip with only text or with only a title. The title has implications for styling, as we'll see below.

The Javascript inserted by the <code>JHTML::('behavior_tooltip')</code> command we entered earlier picks up this tag based on the class called "hasTip". So, a second way of creating a tooltip is to simply create a tag with a class called "hasTip" and an attribute of "title". For example, this code
<source lang="html4strict">
<span class="hasTip"
title="Text Tooltip Title::This is a tooltip attached to text">
Hover on this text to see the tooltip</span>
</source>
will produce exactly the same effect as the <code>JHTML::tooltip()</code> example above.

===Adding CSS Styling to the Tooltip===
The default tooltips, whether using the JHTML::tooltip method or class method, use the following three CSS classes: <tt>.tool-tip</tt>, <tt>.tool-title</tt>, and <tt>.tool-text</tt>.

Here are the default styles.
<source lang="css">
/* Tooltips */
.tool-tip {
float: left;
background: #ffc;
border: 1px solid #D4D5AA;
padding: 5px;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: bold;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../images/selector-arrow.png) no-repeat;
}

.tool-text {
font-size: 100%;
margin: 0;
}
</source>

If you have a custom CSS file, copy this code and alter it to your liking. Note that the <tt>.tool-title</tt> class uses by default the "selector-arrow.png" image. This is what gives the outline of the tooltip the little pointer in the upper left of the tooltip box. If you leave out a title in your tooltip, you will just get a rectangle, without the pointer.

===Customizing Your Tooltips===
Ok, now it's time to have some fun. The <code>JHTML::_('behavior.tooltip')</code> can take two optional parameters. The first parameter is the name of the CSS class that will be used to identify the tooltip. As we saw earlier, this defaults to "hasTip". The second optional parameter is an array of parameters that you can use to fine-tune the tooltip functionality. These are explained below.
* '''maxTitleChars:''' The maximum length of the title (the part of the "title" attribute before the "::")
* '''showDelay, hideDelay:''' The time to delay showing or hiding the tooltip, in milliseconds. Default is 100.
* '''className:''' The first part of the class name used to style the actual tooltip. The default, as we saw, is "tool", and the full class names by default are "tool-tip", "tool-title', and "tool-text". So, for example, if we set this to "custom", we would style the classes "custom-tip", "custom-title", and "custom-text".
* '''fixed:''' Whether or not to have the tooltip move with the mouse. If set to "true", the tooltip will be centered below the text or image. If set to "false", the tooltip will move with the mouse. Default is "false".
* '''onShow, onHide:''' Functions to call for the onShow and onHide events. We'll see an example below where we can use these to create a fade-in and fade-out for the tooltip.

In the next section, we'll show how to use these parameters with some examples.

===Tooltip With Different Classes===
In this example, we will create a tooltip using different selector and tooltip styling classes. Why might we want to do this? One reason would be if we had different types of tooltips and we wanted to style them differently.

Here is the code to create the tooltip Javascript function:
<source lang="php">
$toolTipArray = array('className'=>'custom2');
JHTML::_('behavior.tooltip', '.hasTip2', $toolTipArray);
</source>
In this code, we are creating an array with just one element -- to set the "className" parameter to "custom2". This means that, to style these tooltips, we would use the classes <tt>custom2-tip</tt>, <tt>custom2-title</tt>, and <tt>custom2-text</tt>. Then we call the method with the arguments ".hasTip2" and the array "$toolTipArray". It can be a little confusing, because we have two CSS classes at work here. The class ".hasTip2" is used in the HTML tag. That is how the Javascript program identifies the tooltips to operate on. The class "custom2" is used as the first part of the three CSS classes to use to style the actual tooltip itself.

To use this new tooltip, we could use the following code:
<source lang="html4strict">
<span class="hasTip2"
title="My Tooltip Title :: Tooltip text for hasTip2 class with custom2 style classes.">
hasTip2 and custom2 example</span>
</source>
Since we set the class to "hasTip2", this tag will be processed by the new version of the tooltip program. So, if we use both the default tooltip ("hasTip" class) and the new tooltip ("hasTip2" class) in the same page, we can style them differently using "tool-" styles for the default and "custom2-" styles for the "hasTip2" tooltips.

Next, let's look at a more complex example, shown below.
<source lang="php">
$toolTipArray = array('className' => 'custom2', 'showDelay'=>'500',
'hideDelay'=>'500', 'fixed'=>true,
'onShow'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(0,1)}",
'onHide'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(1,0)}");
JHTML::_('behavior.tooltip', '.hasTip2', $toolTipArray); ?>
</source>
Again, we are building an array to pass to the <code>JHTML::_('behavior.tooltip')</code> function. Again, we are setting the "className" parameter to "custom2". We are also setting the "showDelay" and "hideDelay" parameters to 500 milliseconds (.5 seconds). So the tooltip will show only after the mouse has hovered for this amount of time.

Notice that we are setting the parameter "fixed" to "true" (without the quotes). This means that the tooltip will not move with the mouse. Instead, it will always show centered below the tooltip text or image.

Finally, the tricky part. We are creating functions to pass in to the "onShow" and "onHide" events. These functions cause the tooltip to fade in and fade out over the space of 500 milliseconds. This is done by gradually varying the tooltip's CSS "opacity" style from "0" (completely transparent) to "1" (completely opaque). If we wanted the tooltip to be partially transparent, we could change these to <code>start(0,.8)</code> and <code>start(.8,0)</code>.

These functions are similar to the sample code in the [http://demos111.mootools.net/Tips MooTools demo tutorial]. Click on the link called "js code" and look at the code for the "Tips2" demo. We have just taken the code from the initialize function and incorporated it into the "onShow" and "onHide" functions.

The last line of code above creates the actual Javascript code in our Joomla! document. If we show the page and view source, we see the following:
<source lang="javascript">
window.addEvent('domready', function(){
var JTooltips = new Tips($$('.hasTip2'), {
maxTitleChars: 50, showDelay: 500, hideDelay: 500, className: 'custom2',
fixed: true,
onShow: function(tip) {tip.effect('opacity', {duration: 500, wait: false}).start(0,1)},
onHide: function(tip) {tip.effect('opacity', {duration: 500, wait: false}).start(1,0)}
});
});
</source>
So we can see the effect of the parameters that we passed to the <code>JHTML::_('behavior.tooltip')</code> method.

'''offsets Parameter'''
<blockquote>''Note: The "offsets" parameter doesn't work in version 1.5.9 and earlier because of a bug. As of version 1.5.10 it should work as outlined below.''</blockquote>
You can control the x and y distance, in pixels, from the cursor to the tooltip using the "offsets" parameter. This parameter must be an array as shown in the example code below:
<source lang="php">
// set x (horizontal) distance to 20 pixels, y (vertical) distance to 30 pixels
$toolTipArray = array('offsets'=>array('x'=>20, 'y'=>30), 'maxtitlechars'=>40);
JHTML::_('behavior.tooltip', '.customOffset', $toolTipArray);
</source>

===Using an External Javascript File===
There are times when you might prefer to work with a separate Javascript file. This gives you complete flexibility to use all of the mootools capabilities. To do this:
# Create the separate Javascript file and save it somewhere in your Joomla! site (for example, "templates/<your template>/js/yourjsfile.js".
# Use the <code>JHTML::script</code> function to add this script to your document. For example:
<source lang="php">
$filename = 'testtooltip.js'; // this file is used for class="hasTip3" titles
$path = 'templates/rhuk_milkyway/js/'; // path to the file
// true means MooTools will load if it is not already loaded
JHTML::script($filename, $path, true);
</source>
This will load your script into the document and make sure that the MooTools library is available.

===Complete Code Example===
Here is an example that incorporates all of the elements discussed in this tutorial. So you can see the code in action, we will create an override of the "mod_stats" Module and add our test code there. We will use the rhuk_milkyway template.

To set up the template override, create a folder called "templates/rhuk_milkyway/html/mod_stats" and copy the file "modules/mod_stats/tmpl/default.php" to this new folder.

After line 2 of this file (<code>defined('_JEXEC') or die('Restricted access');</code>), insert the following:
<source lang="php">
JHTML::_('behavior.tooltip');
$toolTipArray = array('className' => 'custom2', 'showDelay'=>'500', 'hideDelay'=>'500',
'fixed'=>'true'
, 'onShow'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(0,1)}"
, 'onHide'=>"function(tip) {tip.effect('opacity',
{duration: 500, wait: false}).start(1,0)}");
JHTML::_('behavior.tooltip', '.hasTip2', $toolTipArray); // class="hasTip2" titles
$filename = 'testtooltip.js'; // used for class="hasTip3" titles
$path = 'templates/rhuk_milkyway/js/';
JHTML::script($filename, $path, true); // MooTools will load if it is not already loaded
</source>
Here we are creating the Javascript functions we will need later. The first line is the simple default declaration that will use the ".hasTip" and "tool-" CSS classes.

The next 5 lines create the more customized function that includes the fade-in and fade-out. It uses the ".hasTip2" to create the tip and the classes starting with "custom2-" to style the tooltip.

The last 3 lines reference the external Javascript file, which will be created below. The class information will be contained in that file.

Now, time for some more coding. At the end of the "modules/mod_stats/tmpl/default.php" file, add the code shown below:
<source lang="php">
<h1>Tooltip Examples</h1>
<?php echo JHTML::tooltip('This is the tooltip text', 'Tooltip title',
'tooltip.png', '', 'http://www.joomla.org');?>
<br/><br/>
<?php echo JHTML::tooltip('This is a tooltip attached to text', 'Text Tooltip Title',
'', 'Hover on this text to see the tooltip');?>
<br/><br/>
<a class="hasTip" title="My Title::Tooltip on 'a' tag text using default 'hasTip' class"
href="http://www.joomla.org">Tooltip on a link example</a>
<br/><br/>
<span class="hasTip2"
title="My Tooltip Title :: Tooltip text for hasTip2 class with custom2 style classes.">
hasTip2 and custom2 example</span>
<br/><br/>
<span class="hasTip3"
title="hasTip3 Title::This is using class 'hasTip3' using external JS script.">
hasTip3 hover text</span>
<br/><br/>
</source>
The first two examples using the <code>JHTML::tooltip</code> function to create the tooltip HTML code.

The third example shows an "a" tag with a tooltip. This illustrates that you can put tooltips on most HTML tags, not just "span" tags. Again, it is using the "hasTip" class, so it will be controlled by the Javascript above called with the ".hasTip" argument and will be styled with the default "tool-" styles.

The fourth example shows a "span" tag using the "hasTip2" class. So it will be styled using the "custom2-" classes and will have the "showDelay" and "hideDelay" of 500 milliseconds and have "fixed" equal to "true" (so the tip will not move with the mouse). Also, it uses the special fade-in and fade-out effects.

The last example will use the Javascript code from the external file, shown below.

Now, some more coding. Create a JavaScript file called "testtooltip.js" and save it into the folder "templates/rhuk_milkyway/js":
<source lang="javascript">
window.addEvent('domready', function(){
//do your tips stuff in here...
var zoomTip = new Tips($$('.hasTip3'), {
className: 'custom3', //this is the prefix for the CSS class
offsets: {
'x': 20, //default is 16
'y': 30 //default is 16
},
initialize:function(){
this.fx = new Fx.Style(this.toolTip, 'opacity',
{duration: 1000, wait: false}).set(0);
},
onShow: function(toolTip) {
this.fx.start(0,.8);
},
onHide: function(toolTip) {
this.fx.start(.8,0);
}
});
});
</source>
This code will operate on the "hasTip3" class and will use style classes starting with "custom3-". We are setting the x distance (from the cursor to the tooltip) to 20 pixels and the y distance to 30 pixels. This also has the fade-in and fade-out functionality, but the final "opacity" value is set to .8, meaning that the tooltip will be slightly transparent.

Finally, add this to the end of your "templates/rhuk_milkyway/css/template.css" file:
<source lang="css">
.custom2-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom2-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #024A68;
padding: 8px 8px 4px;
background: #3CA0D0;
border-bottom: 1px solid #024A68;
}

.custom2-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #63ADD0;
}

.custom3-tip {
color: #000;
width: 130px;
z-index: 13000;
}

.custom3-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #3E4F14;
padding: 8px 8px 4px;
background: #C3DF7D;
border-bottom: 1px solid #B5CF74;
}

.custom3-text {
font-size: 11px;
padding: 4px 8px 8px;
background: #CFDFA7;
}
</source>
Here we are just adding different colors for the "custom2-" and "custom3-" styles so you can see the effect of the different tooltip code.

Notice that <tt>.custom2-title</tt> and <tt>.custom3-title</tt> classes do not have a background property. So these tooltips will be a box without the neat little arrow pointing at the mouse. If you wanted, you could create an image similar to "templates/system/images/selector-arrow.png" of the right color and add that as a background to these classes.

===Example Code Screenshots===
Here are some screenshots taken from the sample code above. The first screenshot shows the modified "mod_stats" modules with our sample code.
[[Image:Screen_tooltip_example2_20090210.png|center|frame]]
The screenshot below shows the fade-in effect for the ".hasTip2" tooltip. Notice also that the tooltip is centered below the text. This is the effect of setting "fixed" equal to "true".
[[Image:Screen_tooltip_example1_20090209.png|center|frame]]
The last screenshot shows the different styling for the ".hasTip3" tooltip, based on the "custom3-" CSS class styles.
[[Image:Screen_tooltip_example3_20090210.png|center|frame]]

===More Information===
More information about the topics covered in this tutorial is available at the links below. Note that Joomla! version 1.5 uses MooTools version 1.11. The current version of MooTools is 1.2.
* Joomla API - [http://api.joomla.org http://api.joomla.org]
* Documentation for 1.11 MooTools Tips: [http://docs111.mootools.net/Plugins/Tips.js http://docs111.mootools.net/Plugins/Tips.js]
* Mootools demos for version 1.11 - [http://demos111.mootools.net/Tips http://demos111.mootools.net/Tips]
* Mootools Website - [http://www.mootools.net/ http://www.mootools.net/]

[[Category:Development]]

J1.5:Customising the Beez template

2009-08-15T13:15:14Z

Zwiastun: /* Source ordere and Layout */

{{cookiejar}}{{underconstruction}}

NEEDS DESCRIPTION

==Frontpage==
Click on the picture to see the descriptions (if available)
<imagemap>
Image:Beez_overview.jpg
rect 533 5 716 23 [[Customising the Beez template/header/fontsize]]
rect 87 7 717 82 [[Customising the Beez template/header/logo]]
rect 82 82 717 96 [[Customising the Beez template/header/mainlevel/-nav]]
rect 551 97 717 139 [[Customising the Beez template/header/mod_search]]
rect 83 96 168 111 [[Customising the Beez template/header/breadcrumbs]]
rect 81 0 718 141 [[Customising the Beez template/header]]
rect 82 153 223 175 [[Customising the Beez template/left/module/h3]]
rect 90 174 217 189 [[Customising the Beez template/left/module/menu/active]]
rect 90 189 217 311 [[Customising the Beez template/left/module/menu]]
rect 82 322 223 344 [[Customising the Beez template/left/module/h3]]
rect 90 343 217 465 [[Customising the Beez template/left/module/menu]]
rect 82 474 223 496 [[Customising the Beez template/left/module/h3]]
rect 90 495 217 545 [[Customising the Beez template/left/module/menu]]
rect 82 559 223 581 [[Customising the Beez template/left/module/h3]]
rect 89 582 218 724 [[Customising the Beez template/left/module/login]]
rect 81 140 216 888 [[Customising the Beez template/left]]
rect 229 152 549 175 [[Customising the Beez template/main/h1]]
rect 306 201 535 222 [[Customising the Beez template/main/leading/h2]]
rect 306 224 536 239 [[Customising the Beez template/main/buttonheading]]
rect 305 241 535 253 [[Customising the Beez template/main/leading/modifydate]]
rect 305 253 535 265 [[Customising the Beez template/main/leading/createdby]]
rect 305 265 535 277 [[Customising the Beez template/main/leading/createdate]]
rect 229 190 550 436 [[Customising the Beez template/main/leading]]
rect 228 456 375 475 [[Customising the Beez template/main/h2]]
rect 230 478 374 505 [[Customising the Beez template/main/buttonheading]]
rect 227 514 370 524 [[Customising the Beez template/main/modifydate]]
rect 228 524 368 532 [[Customising the Beez template/main/createdby]]
rect 226 530 369 541 [[Customising the Beez template/main/createdate]]
rect 226 457 384 691 [[Customising the Beez template/main/article]]
rect 397 456 544 475 [[Customising the Beez template/main/h2]]
rect 399 478 543 505 [[Customising the Beez template/main/buttonheading]]
rect 396 514 538 532 [[Customising the Beez template/main/modifydate]]
rect 396 532 536 540 [[Customising the Beez template/main/createdby]]
rect 395 539 538 550 [[Customising the Beez template/main/createdate]]
rect 397 660 537 690 [[Customising the Beez template/main/readon]]
rect 396 457 554 691 [[Customising the Beez template/main/article]]
rect 228 726 549 742 [[Customising the Beez template/main/more/h2]]
rect 237 755 448 769 [[Customising the Beez template/main/more/blogsection]]
rect 238 778 482 792 [[Customising the Beez template/main/more/blogsection]]
rect 228 726 550 819 [[Customising the Beez template/main/more]]
rect 228 826 549 843 [[Customising the Beez template/main/counter]]
rect 229 848 549 870 [[Customising the Beez template/main/pagination]]
rect 216 140 567 890 [[Customising the Beez template/main]]
rect 567 158 697 173 [[Customising the Beez template/right/h3]]
rect 567 263 697 278 [[Customising the Beez template/right/h3]]
rect 568 286 696 356 [[Customising the Beez template/right/latestnews]]
rect 567 380 697 395 [[Customising the Beez template/right/h3]]
rect 568 401 696 471 [[Customising the Beez template/right/mostread]]
rect 567 495 697 510 [[Customising the Beez template/right/h3]]
rect 567 515 696 532 [[Customising the Beez template/right/h4]]
rect 567 533 696 645 [[Customising the Beez template/right/poll]]
rect 567 663 697 678 [[Customising the Beez template/right/h3]]
rect 567 140 718 890 [[Customising the Beez template/right]]
rect 86 895 148 912 [[Customising the Beez template/footer/syndicate]]
rect 81 888 718 940 [[Customising the Beez template/footer]]
default [[Customising the Beez template/body]]
desc bottom-left
</imagemap>
===Classes/IDs===
====Body====
*[[Customising the Beez template/body]]
====Header====
*[[Customising the Beez template/header]]
**[[Customising the Beez template/header/logo]]
**[[Customising the Beez template/header/fontsize]]
**[[Customising the Beez template/header/mainlevel/-nav]]
**[[Customising the Beez template/header/mod_search]]
**[[Customising the Beez template/header/breadcrumbs]]
====Left====
*[[Customising the Beez template/left]]
**[[Customising the Beez template/left/h3]]
**[[Customising the Beez template/left/menu]]
***[[Customising the Beez template/left/menu/active]]
**[[Customising the Beez template/left/login]]
====Right====
*[[Customising the Beez template/right]]
**[[Customising the Beez template/right/h3]]
**[[Customising the Beez template/right/h4]]
**[[Customising the Beez template/right/latestnews]]
**[[Customising the Beez template/right/mostread]]
**[[Customising the Beez template/right/poll]]
====Main====
*[[Customising the Beez template/main]]
**[[Customising the Beez template/main/h1]]
**[[Customising the Beez template/main/h2]]
**[[Customising the Beez template/main/leading]]
***[[Customising the Beez template/main/leading/h2]]
***[[Customising the Beez template/main/leading/modifydate]]
***[[Customising the Beez template/main/leading/createdby]]
***[[Customising the Beez template/main/leading/createdate]]
**[[Customising the Beez template/main/article]]
**[[Customising the Beez template/main/buttonheading]]
**[[Customising the Beez template/main/modifydate]]
**[[Customising the Beez template/main/createdby]]
**[[Customising the Beez template/main/createdate]]
**[[Customising the Beez template/main/readon]]
**[[Customising the Beez template/main/more]]
***[[Customising the Beez template/main/more/h2]]
***[[Customising the Beez template/main/more/blogsection]]
**[[Customising the Beez template/main/counter]]
**[[Customising the Beez template/main/pagination]]
====Footer====
*[[Customising the Beez template/footer]]
**[[Customising the Beez template/footer/syndicate]]
==CSS Files==
*[[Customising the Beez template/general.css|Beez general.css]]
*[[Customising the Beez template/ie7only.css|Beez ie7only.css]]
*[[Customising the Beez template/ieonly.css|Beez ieonly.css]]
*[[Customising the Beez template/layout.css|Beez layout.css]]
*[[Customising the Beez template/position.css|Beez position.css]]
*[[Customising the Beez template/print.css|Beez print.css]]
*[[Customising the Beez template/template.css|Beez template.css]]
*[[Customising the Beez template/template_rtl.css|Beez template_rtl.css]]

=== Source ordered and Layout ===
[[Image:beez_layout.png]]
[[Category:Beez]]
[[Category:Customizing Beez]]

File:Beez layout.png

2009-08-15T13:14:41Z

Zwiastun: {{JEDL}}

J1.5:Customising the Beez template

2009-08-15T13:12:51Z

Zwiastun:

{{cookiejar}}{{underconstruction}}

NEEDS DESCRIPTION

==Frontpage==
Click on the picture to see the descriptions (if available)
<imagemap>
Image:Beez_overview.jpg
rect 533 5 716 23 [[Customising the Beez template/header/fontsize]]
rect 87 7 717 82 [[Customising the Beez template/header/logo]]
rect 82 82 717 96 [[Customising the Beez template/header/mainlevel/-nav]]
rect 551 97 717 139 [[Customising the Beez template/header/mod_search]]
rect 83 96 168 111 [[Customising the Beez template/header/breadcrumbs]]
rect 81 0 718 141 [[Customising the Beez template/header]]
rect 82 153 223 175 [[Customising the Beez template/left/module/h3]]
rect 90 174 217 189 [[Customising the Beez template/left/module/menu/active]]
rect 90 189 217 311 [[Customising the Beez template/left/module/menu]]
rect 82 322 223 344 [[Customising the Beez template/left/module/h3]]
rect 90 343 217 465 [[Customising the Beez template/left/module/menu]]
rect 82 474 223 496 [[Customising the Beez template/left/module/h3]]
rect 90 495 217 545 [[Customising the Beez template/left/module/menu]]
rect 82 559 223 581 [[Customising the Beez template/left/module/h3]]
rect 89 582 218 724 [[Customising the Beez template/left/module/login]]
rect 81 140 216 888 [[Customising the Beez template/left]]
rect 229 152 549 175 [[Customising the Beez template/main/h1]]
rect 306 201 535 222 [[Customising the Beez template/main/leading/h2]]
rect 306 224 536 239 [[Customising the Beez template/main/buttonheading]]
rect 305 241 535 253 [[Customising the Beez template/main/leading/modifydate]]
rect 305 253 535 265 [[Customising the Beez template/main/leading/createdby]]
rect 305 265 535 277 [[Customising the Beez template/main/leading/createdate]]
rect 229 190 550 436 [[Customising the Beez template/main/leading]]
rect 228 456 375 475 [[Customising the Beez template/main/h2]]
rect 230 478 374 505 [[Customising the Beez template/main/buttonheading]]
rect 227 514 370 524 [[Customising the Beez template/main/modifydate]]
rect 228 524 368 532 [[Customising the Beez template/main/createdby]]
rect 226 530 369 541 [[Customising the Beez template/main/createdate]]
rect 226 457 384 691 [[Customising the Beez template/main/article]]
rect 397 456 544 475 [[Customising the Beez template/main/h2]]
rect 399 478 543 505 [[Customising the Beez template/main/buttonheading]]
rect 396 514 538 532 [[Customising the Beez template/main/modifydate]]
rect 396 532 536 540 [[Customising the Beez template/main/createdby]]
rect 395 539 538 550 [[Customising the Beez template/main/createdate]]
rect 397 660 537 690 [[Customising the Beez template/main/readon]]
rect 396 457 554 691 [[Customising the Beez template/main/article]]
rect 228 726 549 742 [[Customising the Beez template/main/more/h2]]
rect 237 755 448 769 [[Customising the Beez template/main/more/blogsection]]
rect 238 778 482 792 [[Customising the Beez template/main/more/blogsection]]
rect 228 726 550 819 [[Customising the Beez template/main/more]]
rect 228 826 549 843 [[Customising the Beez template/main/counter]]
rect 229 848 549 870 [[Customising the Beez template/main/pagination]]
rect 216 140 567 890 [[Customising the Beez template/main]]
rect 567 158 697 173 [[Customising the Beez template/right/h3]]
rect 567 263 697 278 [[Customising the Beez template/right/h3]]
rect 568 286 696 356 [[Customising the Beez template/right/latestnews]]
rect 567 380 697 395 [[Customising the Beez template/right/h3]]
rect 568 401 696 471 [[Customising the Beez template/right/mostread]]
rect 567 495 697 510 [[Customising the Beez template/right/h3]]
rect 567 515 696 532 [[Customising the Beez template/right/h4]]
rect 567 533 696 645 [[Customising the Beez template/right/poll]]
rect 567 663 697 678 [[Customising the Beez template/right/h3]]
rect 567 140 718 890 [[Customising the Beez template/right]]
rect 86 895 148 912 [[Customising the Beez template/footer/syndicate]]
rect 81 888 718 940 [[Customising the Beez template/footer]]
default [[Customising the Beez template/body]]
desc bottom-left
</imagemap>
===Classes/IDs===
====Body====
*[[Customising the Beez template/body]]
====Header====
*[[Customising the Beez template/header]]
**[[Customising the Beez template/header/logo]]
**[[Customising the Beez template/header/fontsize]]
**[[Customising the Beez template/header/mainlevel/-nav]]
**[[Customising the Beez template/header/mod_search]]
**[[Customising the Beez template/header/breadcrumbs]]
====Left====
*[[Customising the Beez template/left]]
**[[Customising the Beez template/left/h3]]
**[[Customising the Beez template/left/menu]]
***[[Customising the Beez template/left/menu/active]]
**[[Customising the Beez template/left/login]]
====Right====
*[[Customising the Beez template/right]]
**[[Customising the Beez template/right/h3]]
**[[Customising the Beez template/right/h4]]
**[[Customising the Beez template/right/latestnews]]
**[[Customising the Beez template/right/mostread]]
**[[Customising the Beez template/right/poll]]
====Main====
*[[Customising the Beez template/main]]
**[[Customising the Beez template/main/h1]]
**[[Customising the Beez template/main/h2]]
**[[Customising the Beez template/main/leading]]
***[[Customising the Beez template/main/leading/h2]]
***[[Customising the Beez template/main/leading/modifydate]]
***[[Customising the Beez template/main/leading/createdby]]
***[[Customising the Beez template/main/leading/createdate]]
**[[Customising the Beez template/main/article]]
**[[Customising the Beez template/main/buttonheading]]
**[[Customising the Beez template/main/modifydate]]
**[[Customising the Beez template/main/createdby]]
**[[Customising the Beez template/main/createdate]]
**[[Customising the Beez template/main/readon]]
**[[Customising the Beez template/main/more]]
***[[Customising the Beez template/main/more/h2]]
***[[Customising the Beez template/main/more/blogsection]]
**[[Customising the Beez template/main/counter]]
**[[Customising the Beez template/main/pagination]]
====Footer====
*[[Customising the Beez template/footer]]
**[[Customising the Beez template/footer/syndicate]]
==CSS Files==
*[[Customising the Beez template/general.css|Beez general.css]]
*[[Customising the Beez template/ie7only.css|Beez ie7only.css]]
*[[Customising the Beez template/ieonly.css|Beez ieonly.css]]
*[[Customising the Beez template/layout.css|Beez layout.css]]
*[[Customising the Beez template/position.css|Beez position.css]]
*[[Customising the Beez template/print.css|Beez print.css]]
*[[Customising the Beez template/template.css|Beez template.css]]
*[[Customising the Beez template/template_rtl.css|Beez template_rtl.css]]

=== Source ordere and Layout ===
[[Image:beez_layout.png]]
[[Category:Beez]]
[[Category:Customizing Beez]]

J1.5:Customising the JA Purity template

2009-06-27T01:06:03Z

Zwiastun:

{{underconstruction}}
== Introduction ==
JA Purity is a highly customizable template available by default in standard Joomla 1.5 installations. JA Purity was designed by JoomlArt.com and features the following:
<br />
# Screen width configuration (Fluid/Narrow/Widescreen/Fixed in pixel or percentage)
# Multiple colors schemes (Red, Green, Blue and Black )
# Well Structured, xHTML/CSS validated and SEO-optimized source
# Cross-browser support for Internet Explorer 6+, Firefox, Safari, Opera
<br />
If you have a support question about the JA Purity template check for a solution on the following [http://forum.joomla.org/viewforum.php?f=541 forum].

=== Before You Start ===
Before you start hacking away at the template you may want to do one of the following:

#Create a directory templates/my_japurity. Copy the original ja_purity directory to my_japurity. Go to the administrator/language/en-GB directory and copy en-GB.tpl_ja_purity.ini to en-GB.tpl_my_japurity.ini. Do the same in the language/en-GB directory. Open the templateDetails.xml file and change ALL references to the original ja_purity directory to the new directory my_japurity.
#:<source lang="xml" line start="3"><name>JA_Purity</name></source>
#:<source lang="xml" line start="326"><language tag="en-GB">en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="330"><language tag="en-GB">admin/en-GB.tpl_ja_purity.ini</language></source>
#:<source lang="xml" line start="388">
<param name="theme_header" type="folderlist" directory="templates/ja_purity/styles/header" default="" label="Header Themes" description="HEADER THEMES DESCRIPTION" />
<param name="theme_background" type="folderlist" directory="templates/ja_purity/styles/background" default="" label="Background Themes" description="BACKGROUND THEMES DESCRIPTION" />
<param name="theme_elements" type="folderlist" directory="templates/ja_purity/styles/elements" default="" label="Primary Elements" description="PRIMARY ELEMENTS DESCRIPTION" /></source>
#Download the [http://help.joomla.org/files/ja_purity_tutorial.zip tutorial template]. Once you download the archive, rename it as my_japurity.zip and then log into the Administration area of your Joomla site and install the template.

This will save you from worrying about any updates to the Joomla source that might overwrite your edits. This tutorial is based on the latest template version as of Joomla version 1.5.11.

== Template Layout ==
Here's the directory structure for the template. Click to see a description of the directory contents (if available)
<imagemap>
Image:JA_Purity_directories.jpg
default [[Ja purity directory structure]]
desc bottom-left
</imagemap>

=== Front Page ===
Click on the picture to see the descriptions (if available)
<imagemap>
Image:JA_Purity_Tutorial_Main.png|640px
rect 19 9 220 67 [[Replace the JA Purity Joomla! Logo|Customise the Logo]]
rect 253 9 1102 67 [[Replace the header pictures in JA Purity|Customise the Header Background]]
rect 1140 13 1197 34 [[Modify accessibility in ja purity|Customise Accessibility]]
rect 1113 40 1265 64 [[Modify searching in ja purity|Customise Searching]]
rect 0 76 279 657 [[Modify module position left in ja purity|Customise - Module Position Left]]
rect 278 76 1002 657 [[Modify content position in ja purity|Customise - Main Content Area]]
rect 1002 76 1280 657 [[Modify module position right in ja purity|Customise - Module Position Right]]
rect 0 657 1280 817 [[Modify spotlight position in ja purity|Customise - Spotlight Area]]
rect 0 817 1280 1024 [[Modify module position footer in ja purity|Customise - Module Position Footer]]
rect 0 0 1280 73 [[Modify header position in ja purity|Customise Header Area]]
default [[Customising the JA Purity template]]
desc bottom-left
</imagemap>
===Positions===
[[Image:JA Purity Tutorial Positions.png|640 px]]

[[Image:Ja_purity_module_position.png]]
===Classes/IDs===
====Body====
*[[Ja purity template body|JA Purity body]]
====Header====
*[[Ja purity template header|JA Purity header]]
**[[Ja purity template header logo|JA Purity logo]]
**[[Ja purity template header accessibility|JA Purity accessibility]]
**[[Ja purity template header search|JA Purity search]]
***[[Ja purity template header search user4 |JA Purity user4]]
====Horizontal Navigation====
*[[Ja purity template horizontal navigation|JA Purity horizontal navigation]]
====Top====
*[[Ja purity template spotlight top|JA Purity top]]
====Left====
*[[Ja purity template left|JA Purity left]]
====Right====
*[[Ja purity template right|JA Purity right]]
====Main====
*[[Ja purity template content|JA Purity content]]
**[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
**[[Ja purity template content banner|JA Purity banners]]
====Breadcrumbs====
*[[Ja purity template content breadcrumb|JA Purity breadcrumbs]]
====Spotlight====
*[[Ja purity template spotlight|JA Purity spotlight]]
**[[Ja purity template spotlight user1|JA Purity user 1]]
**[[Ja purity template spotlight user2|JA Purity user 2]]
**[[Ja purity template spotlight top|JA Purity top]]
**[[Ja purity template spotlight user5|JA Purity user 5]]
====User 1====
*[[Ja purity template spotlight user1|JA Purity user 1]]
====User 2====
*[[Ja purity template spotlight user2|JA Purity user 2]]
====User 3====
*[[Ja purity template footer user3|JA Purity user3]]
====User 4====
*[[Ja purity template header search user4|JA Purity user 4]]
====User 5====
*[[Ja purity template spotlight user5|JA Purity user 5]]
====Syndication====
*[[Ja purity template footer syndication|JA Purity Syndication]]
====Footer====
*[[Ja purity template footer|JA Purity Footer]]
**[[Ja purity template footer syndication|JA Purity Syndication]]
**[[Ja purity template footer user3|JA Purity user3]]
===CSS Files===
*[[Ja purity css template css|JA Purity template.css]]

== Customisation - Basics ==
=== Administration Features ===
[[JaPurity enable hornav submenu|Enable Horizontal Navigation Menus]]

=== Customise Module Position and Content ===
[[Modify header position in ja purity|Customise - Header Area]]<br />
[[Modify module position left in ja purity|Customise - Module Position Left]]<br />
[[Modify content position in ja purity|Customise - Main Content Area]]<br />
[[Modify module position right in ja purity|Customise - Module Position Right]]<br />
[[Modify spotlight position in ja purity|Customise - Spotlight Area]]<br />
[[Modify module position footer in ja purity|Customise - Module Position Footer]]

=== Customise the Logo ===
[[Replace the JA Purity Joomla! Logo|Customise the Logo]]<br />
[[Ja_Purity Change position of your logo|Change the Position of Your Logo]]

=== Customise the Header ===
[[Replace the header pictures in JA Purity|Customise the Header Background]]<br />
[[Ja_Purity resize header|Change the Size of the Header]]<br />
[[Add or change header color scheme|Add or Change the Header Color Scheme]]

=== Customise the Favicon ===
[[Changing the site favicon|Customise the Favorite Icon]]

=== Customise Horizontal Navigation Menus ===
[[JaPurity how to center hornav|Center the Horizontal Menus]]<br />
[[Modify horizontal menu color in ja purity|Change the Color of the Horizontal Menus]]<br />
[[Modify horizontal menu background in ja purity|Use a Gradient Image for the Background in the Horizontal Menus]]

== Customisation - Intermediate ==
[[Modify accessibility in ja purity|Customise Accessibility]]<br />
[[Modify searching in ja purity|Customise Searching]]

== Customisation - Advanced ==
[[Modify overrides in ja purity|Customise Overrides]]

== Known Issues and Bugs ==
* Active Menu item not updating. SEE: http://forum.joomla.org/viewtopic.php?f=466&t=396625
* PROBLEM: When Joomla cache is enabled reference Joomla 1.5.10 and before) and clicking a menu item it doesn't change color. It is impossible to understand which is the active menu item. SOLUTION: for now the only solution is to disable the cache function in the mod_mainmenu: go to 'Tools>Module Manager' and select the 'Main Menu' module (type=mod_mainmenu). Under 'Parameters>Advanced Parameters' select 'Caching>No Caching'. SEE: http://forum.joomla.org/viewtopic.php?f=541&t=378584

== See also ==
[http://forum.joomla.org/viewtopic.php?f=541&t=294258 Some information about this template]

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

File:Ja purity module position.png

2009-06-27T01:04:36Z

Zwiastun:

== Licensing: ==
{{JEDL}}

J1.5:Customising the JA Purity template/right

2009-06-25T16:45:06Z

Zwiastun:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, template.css and bullet.gif, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
images/
bullet.gif
js/
ja.rightcol.js
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
images/
bullet.gif
js/
ja.rightcol.js
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="194">
<?php if ($this->countModules('right')): ?>

<div id="ja-col2">
<jdoc:include type="modules" name="right" style="jarounded" />
</div><br />

<?php endif; ?>
</source>
==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="1267">
/* LEFT COLUMN + RIGHT COLUMN
--------------------------------------------------------- */
#ja-col1 {
float: left;
width: 24.99%;
padding-top: 10px;
overflow: hidden;
}

#ja-col2 {
float: right;
width: 20%;
overflow: hidden;
}

#ja-col1 table,
#ja-col2 table {
border-collapse: collapse;
border-spacing: 0;
}

#ja-col1 ul li,
#ja-col2 ul li {
padding-left: 15px;
margin: 0;
background: url(../images/bullet.gif) no-repeat 5px 50%;
}

#ja-col1 ul, #ja-col2 ul {
margin: 0;
}

#ja-col1 ol, #ja-col2 ol {
margin-left: 5px;
}

#ja-col1 .article_separator,
#ja-col2 .article_separator {
display: none;
}
</source>
==Image Files==
* bullet.gif
==Javascript Files==
===ja_purity/js/ja.rightcol.js===
<source lang="javascript" line>
//JS script for Joomla template

var JA_Collapse_Mod = new Class({

initialize: function(myElements) {
options = Object.extend({
transition: Fx.Transitions.quadOut
}, {});
this.myElements = myElements;
var exModules = excludeModules.split(',');
exModules.each(function(el,i){exModules[i]='Mod'+el});
myElements.each(function(el, i){
el.elmain = $E('.jamod-content',el);
el.titleEl = $E('h3',el);
if(!el.titleEl) return;

if (exModules.contains(el.id)) {
el.titleEl.className = '';
return;
}

el.titleEl.className = rightCollapseDefault;
el.status = rightCollapseDefault;
el.openH = el.elmain.getStyle('height').toInt();
el.elmain.setStyle ('overflow','hidden');

el.titleEl.addEvent('click', function(e){
e = new Event(e).stop();
el.toggle();
});

el.toggle = function(){
if (el.status=='hide') el.show();
else el.hide();
}

el.show = function() {
el.titleEl.className='show';
var ch = el.elmain.getStyle('height').toInt();
new Fx.Style(el.elmain,'height',{onComplete:el.toggleStatus}).start(ch,el.openH);
}
el.hide = function() {
el.titleEl.className='hide';
var ch = (rightCollapseDefault=='hide')?0:el.elmain.getStyle('height').toInt();
new Fx.Style(el.elmain,'height',{onComplete:el.toggleStatus}).start(ch,0);
}
el.toggleStatus = function () {
el.status=(el.status=='hide')?'show':'hide';
Cookie.set(el.id,el.status,{duration:365});
}

if(!el.titleEl.className) el.titleEl.className=rightCollapseDefault;
if(el.titleEl.className=='hide') el.hide();
});
}
});

window.addEvent ('load', function(e){
var jamod = new JA_Collapse_Mod ($ES('.jamod'));
});
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/header/search

2009-06-25T16:29:16Z

Zwiastun:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, XXXXX and XXXX, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
images/
icon-search.gif
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
images/
icon-search.gif
</pre>
==HTML and PHP Files==
=== ja_purity/index.php ===
<source lang="php" line start="133">
<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>
</source>
==CSS Files==
===ja_purity/css/XXXXX.css===
<source lang="css" line start="991">
/* Search */
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
}

#ja-search .inputbox {
width: 120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;
background: #444444;
font-size: 92%;
}
</source>
==Image Files==
===icon-search.gif===
==Javascript Files==
===ja_purity/js/XXXXX.js===
<source lang="javascript" line start="">
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/header/search

2009-06-25T16:26:13Z

Zwiastun:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, XXXXX and XXXX, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
</pre>
==HTML and PHP Files==
=== ja_purity/index.php ===
<source lang="php" line start="133">
<?php if($this->countModules('user4')) : ?>
<div id="ja-search">
<jdoc:include type="modules" name="user4" />
</div>
<?php endif; ?>
</source>
==CSS Files==
===ja_purity/css/XXXXX.css===
<source lang="css" line start="991">
/* Search */
#ja-search {
padding-left: 20px;
background: url(../images/icon-search.gif) no-repeat center left;
position: absolute;
bottom: 15px;
right: 0;
}

#ja-search .inputbox {
width: 120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;
background: #444444;
font-size: 92%;
}
</source>
==Image Files==
==Javascript Files==
===ja_purity/js/XXXXX.js===
<source lang="javascript" line start="">
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/footer/user3

2009-06-25T10:34:47Z

Zwiastun:

User:Zwiastun

2009-06-25T03:09:31Z

Zwiastun:

User:Zwiastun

2009-06-25T03:09:01Z

Zwiastun:

My name is Stefan Wajda. I'm the co-ordinator of Joomla! Polish Centre and Polish Translation Team.
Visit website for PCJ:
* [http://www.joomla.pl Centrum]
* [http://wiki.joomla.pl Elektroniczna Biblioteka Dokumentacji Joomla]
* [http://pomoc.joomla.pl Polski serwer pomocy]
* [http://demo.joomla.pl Demo]

User:Zwiastun

2009-06-25T03:05:46Z

Zwiastun: New page: Stefan Wajda I'm the co-ordinator of Joomla! Polish Centre and Polish Translation Team.

Stefan Wajda
I'm the co-ordinator of Joomla! Polish Centre and Polish Translation Team.

J1.5:Customising the JA Purity template/header/accessibility

2009-06-25T03:00:11Z

Zwiastun:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, XXXXX, ja.script.js and user-increase.png, user-decrease.png, user-reset.png, are in the following directories:<br />

<pre>
templates/ja_purity
index.php
ja_templatetools.php
css/
template.css
images/
user-increase.png
user-decrease.png
user-reset.png
js/
ja.script.js
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
ja_templatetools.php
css/
template.css
images/
user-increase.png
user-decrease.png
user-reset.png
js/
ja.script.js
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="101">
<ul class="accessibility">
<li><a href="#ja-content" title="<?php echo JText::_("Skip to content");?>"><?php echo JText::_("Skip to content");?></a></li>
<li><a href="#ja-mainnav" title="<?php echo JText::_("Skip to main navigation");?>"><?php echo JText::_("Skip to main navigation");?></a></li>
<li><a href="#ja-col1" title="<?php echo JText::_("Skip to 1st column");?>"><?php echo JText::_("Skip to 1st column");?></a></li>
<li><a href="#ja-col2" title="<?php echo JText::_("Skip to 2nd column");?>"><?php echo JText::_("Skip to 2nd column");?></a></li>
</ul>
</source>
===ja_purity/index.php===
<source lang="php" line start="131">
<?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?>
</source>
===ja_purity/ja_templatetools.php===
<source lang="php" line start="69">
function genToolMenu($_array_tools=null, $imgext = 'gif'){
if(!is_array($_array_tools)) $_array_tools = array($_array_tools);
if(!$_array_tools) $_array_tools = array_keys($this->_params_cookie);
if (in_array(JA_TOOL_FONT, $_array_tools)){//show font tools
?>
<ul class="ja-usertools-font">
<li><img style="cursor: pointer;" title="<?php echo JText::_('Increase font size');?>" src="<?php echo $this->templateurl();?>/images/user-increase.<?php echo $imgext;?>" alt="<?php echo JText::_('Increase font size');?>" id="ja-tool-increase" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','inc'); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Default font size');?>" src="<?php echo $this->templateurl();?>/images/user-reset.<?php echo $imgext;?>" alt="<?php echo JText::_('Default font size');?>" id="ja-tool-reset" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>',<?php echo $this->_tpl->params->get(JA_TOOL_FONT);?>); return false;" /></li>
<li><img style="cursor: pointer;" title="<?php echo JText::_('Decrease font size');?>" src="<?php echo $this->templateurl();?>/images/user-decrease.<?php echo $imgext;?>" alt="<?php echo JText::_('Decrease font size');?>" id="ja-tool-decrease" onclick="switchFontSize('<?php echo $this->template."_".JA_TOOL_FONT;?>','dec'); return false;" /></li>
</ul>
<script type="text/javascript">var CurrentFontSize=parseInt('<?php echo $this->getParam(JA_TOOL_FONT);?>');</script>
<?php
}
}
</source>
==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="1482">
ul.accessibility {
position: absolute;
top: -100%;
}

/*usertool*/
ul.ja-usertools-font {
font-size: 11px;
position: absolute;
top: 8px;
right: 70px;
}

ul.ja-usertools-font li {
padding: 0;
margin: 0;
display: inline;
background: none;
}

</source>
==Image Files==
* /images/user-increase.png
* /images/user-decrease.png
* /images/user-reset.png
==Javascript Files==
===ja_purity/js/ja.script.js===
<source lang="javascript" line start="83">
switchFontSize=function(ckname,val){
var bd = $E('BODY');
switch (val) {
case 'inc':
if (CurrentFontSize+1 < 7) {
bd.removeClass('fs'+CurrentFontSize);
CurrentFontSize++;
bd.addClass('fs'+CurrentFontSize);
}
break;
case 'dec':
if (CurrentFontSize-1 > 0) {
bd.removeClass('fs'+CurrentFontSize);
CurrentFontSize--;
bd.addClass('fs'+CurrentFontSize);
}
break;
default:
bd.removeClass('fs'+CurrentFontSize);
CurrentFontSize = val;
bd.addClass('fs'+CurrentFontSize);
}
Cookie.set(ckname, CurrentFontSize,{duration:365});
}

</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/spotlight

2009-06-24T11:18:19Z

Zwiastun:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, template.css and vdot2.gif, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
images/
vdot2.gif
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
images/
vdot2.gif
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="207">
<?php
$spotlight = array ('user1','user2','top','user5');
$botsl = $tmpTools->calSpotlight ($spotlight,99,22);
if( $botsl ) :
?>

<div id="ja-botslwrap">
<div id="ja-botsl" class="clearfix">

<?php if( $this->countModules('user1') ): ?>
<div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user2') ): ?>
<div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('top') ): ?>
<div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php endif; ?>

<?php if( $this->countModules('user5') ): ?>
<div class="ja-box<?php echo $botsl['user5']['class']; ?>" style="width: <?php echo $botsl['user5']['width']; ?>;">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
<?php endif; ?>

</div>
</div>

<?php endif; ?>
</source>
==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="1308">
/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}

.ja-box-left div.moduletable,
.ja-box-full div.moduletable {
padding-right: 30px;
background: none;
}

.ja-box-right div.moduletable {
padding-left: 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

.ja-box-center div.moduletable {
padding: 0 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

#ja-botsl h3 {
background: none;
}

#ja-botslwrap {
border-top: 5px solid #CCCCCC;
background: #444444;
color: #CCCCCC;
}

#ja-botsl {
padding: 15px 0;
}

#ja-botsl div.moduletable {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}

#ja-botsl h3 {
margin: 0 0 12px;
padding: 0;
color: #FFFFFF;
}

#ja-botsl a {
color: #CCCCCC;
}

#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
color: #FFFFFF;
}

#ja-botsl ul, #ja-botsl p, #ja-botsl ol {
padding: 0;
margin: 0 !important;
}

#ja-botsl ul li {
padding: 0 0 0 15px;
margin: 0;
background: url(../images/bullet2.gif) no-repeat 3px 8px;
}

#ja-botsl ol li {
margin-left: 25px;
padding: 0 !important;
}

#ja-botsl td {
padding: 0;
}

#ja-botsl .article_separator {
display: none;
}

#ja-botsl table {
border-spacing: 0;
border-collapse: collapse;
}
</source>
==Image Files==
* vdot2.gif
==Javascript Files==
===ja_purity/js/XXXXX.js===
<source lang="javascript" line start="">
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/right

2009-06-24T11:08:56Z

Zwiastun:

J1.5:Customising the JA Purity template/left

2009-06-24T11:06:53Z

Zwiastun:

J1.5:Customising the JA Purity template/left

2009-06-24T10:59:39Z

Zwiastun:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php and template.css, are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
images/
bullet.gif
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
images/
bullet.gif
</pre>
==HTML and PHP Files==
===ja_purity/index.php===
<source lang="php" line start="184">
<?php if ($this->countModules('left')): ?>

<div id="ja-col1">
<jdoc:include type="modules" name="left" style="xhtml" />
</div><br />

<?php endif; ?>
</source>
==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="827">
#ja-mainbody-fr #ja-col1 {
width: 20%;
}
</source>

<source lang="css" line start="860">
#ja-mainbody-fr #ja-col1 {
width: 20%;
float: left;
}
</source>

<source lang="css" line start="1267">
/* LEFT COLUMN + RIGHT COLUMN
--------------------------------------------------------- */
#ja-col1 {
float: left;
width: 24.99%;
padding-top: 10px;
overflow: hidden;
}

#ja-col2 {
float: right;
width: 20%;
overflow: hidden;
}

#ja-col1 table,
#ja-col2 table {
border-collapse: collapse;
border-spacing: 0;
}

#ja-col1 ul li,
#ja-col2 ul li {
padding-left: 15px;
margin: 0;
background: url(../images/bullet.gif) no-repeat 5px 50%;
}

#ja-col1 ul, #ja-col2 ul {
margin: 0;
}

#ja-col1 ol, #ja-col2 ol {
margin-left: 5px;
}

#ja-col1 .article_separator,
#ja-col2 .article_separator {
display: none;
}
</source>
==Image Files==
* bullet.gif
==Javascript Files==
===ja_purity/js/XXXXX.js===
<source lang="javascript" line start="">

</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/footer

2009-06-24T10:51:06Z

Zwiastun:

{{stub}}
The original JA Purity template was provided from JoomlArt.com as a zip but the latest files have been installed along with Joomla.
The relevant files, index.php, template.css and image files: but-css.gif, but-xhtml10.gif, vdot.gif, grad3.gif are in the following directories:<br />
<pre>
templates/ja_purity
index.php
css/
template.css
images/
but-css.gif
but-xhtml10.gif
vdot.gif
grad3.gif
</pre>

If you've been following the [[Tutorial:Customising_the_JA_Purity_template|tutorial]] you can download a tutorial version of the template that installs to the following directory:<br/>
<pre>
templates/my_japurity
index.php
css/
template.css
images/
but-css.gif
but-xhtml10.gif
vdot.gif
grad3.gif
</pre>
==HTML and PHP Files==
===ja_purity/index.php.php===
<source lang="php" line start="245">

<div id="ja-footerwrap">
<div id="ja-footer" class="clearfix">

<div id="ja-footnav">
<jdoc:include type="modules" name="user3" />
</div>

<div class="copyright">
<jdoc:include type="modules" name="footer" />
</div>

<div class="ja-cert">
<jdoc:include type="modules" name="syndicate" />
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
</a>
<a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
</a>
</div>

<br />
</div>
</div>

</source>
==CSS Files==
===ja_purity/css/template.css===
<source lang="css" line start="1395">
/* FOOTER
--------------------------------------------------------- */
#ja-footerwrap {
border-top: 5px solid #CCCCCC;
padding: 20px 0 30px;
clear: both;
background: url(../images/grad3.gif) repeat-x bottom #F6F6F6;
}

#ja-footer {
padding: 0;
color: #666666;
background: url(../images/vdot.gif) repeat-y 22% 0;
position: relative;
}

#ja-footer .copyright {
clear: both;
display: block;
padding-left: 25%;
color: #666666;
font-style: normal;
font-size: 92%;
}

#ja-footnav {
padding-left: 25%;
}

#ja-footer ul {
margin: 0 0 5px;
padding: 0;
}

#ja-footer li {
margin: 0;
padding: 0;
display: inline;
background: none;
}

#ja-footer li a {
padding: 0 15px 0 0;
display: inline;
color: #666666;
font-weight: bold;
font-size: 92%;
line-height: normal;
text-decoration: none;
text-transform: uppercase;
}

#ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus {
color: #333333;
text-decoration: none;
}

.ja-cert {
font-size: 92%;
position: absolute;
right: 0;
top: 18px;
}

.ja-cert a {
margin: 0 0 0 5px;
padding: 0;
border: none;
border: none;
text-decoration: none;
}

.ja-cert a span {
display: none;
}

.ja-cert a img {
border: none;
}

</source>
==Image Files==
* but-css.gif
* but-xhtml10.gif
* vdot.gif
* grad3.gif
==Javascript Files==
===ja_purity/js/XXXXX.js===
<source lang="javascript" line start="">
</source>
<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>

J1.5:Customising the JA Purity template/footer

2009-06-24T10:36:33Z

Zwiastun:

{{stub}}

==Pliki HTML i PHP ==
===ja_purity/index.php.php===
<source lang="php" line start="245">

<div id="ja-footerwrap">
<div id="ja-footer" class="clearfix">

<div id="ja-footnav">
<jdoc:include type="modules" name="user3" />
</div>

<div class="copyright">
<jdoc:include type="modules" name="footer" />
</div>

<div class="ja-cert">
<jdoc:include type="modules" name="syndicate" />
<a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" title="<?php echo JText::_("CSS Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-css.gif" border="none" alt="<?php echo JText::_("CSS Validity");?>" />
</a>
<a href="http://validator.w3.org/check/referer" target="_blank" title="<?php echo JText::_("XHTML Validity");?>" style="text-decoration: none;">
<img src="<?php echo $tmpTools->templateurl(); ?>/images/but-xhtml10.gif" border="none" alt="<?php echo JText::_("XHTML Validity");?>" />
</a>
</div>

<br />
</div>
</div>

</source>
==Pliki CSS ==
===ja_purity/css/XXXXX.css===
<source lang="css" line start="">
</source>
==Pliki obrazków==
==Pliki Javascript ==
===ja_purity/js/XXXXX.js===
<source lang="javascript" line start="">
</source>

<noinclude>
[[Category:Beginners]]
[[Category:JA Purity template]]
[[Category:Tutorials]]
</noinclude>