SunnyLane

Setup&Readme


Welcome to this small readme file and thanks for using one of my Joomla! 1.6/1.7+ templates. The following documentation will help you to install, setup and maintain the template and its file(s). If you have further questions, problems or if you need support feel free to contact me via webmaster@pixelsparadise.com.

  • Provider:
  • by Pixelsparadise
  • Designer:
  • Holger Koenemann
  • Template Version (Date):
  • 1.0 (13. Dec 2011)
  • Source File(s) Format:
  • Photoshop CS+
  • Included Source Files:
  • main.psd
  • HTML/CSS type:
  • HTML5/ CSS 2.1&CSS3
  • Joomla Compatibility:
  • 1.6/1.7+ version included

joomla template

Installation&Activation

Read and follow the three steps below to install and activate your new template. After the successful installation and activation read on and learn more about the setup and the different options provided by the template.
1.

Download&Extracting

download First of all you have to download the template package to your local HDD from your pixelsparadise.com account. Than extract the .zip archive. The archive includes the templates installation file (another .zip archive) plus additional files like this documentation, Photoshop source files etc. Keep in mind where you store the installation file and proceed to step 2...
2.

Installation

downloadLog into your Joomlas admin backend (enter http://www.yourwebsiteurl.com/administrator in your browser) and click on "Extensions -> Install/Uninstall" to access the extension manager. Hit the "Search" button, select the installation file from your HDD and hit the "Upload File & Install" button. Wait a moment and you are done. Proceed to step 3 to learn more about the activation and setup...
3.

Activation

downloadYour new template is installed now but inactive. To activate it click on "Extensions -> Template Manager". A list of all installed templates appears. Select your new template and hit the "default" button in the upper right corner. Your template is now installed and active and you can start to set it up by following the next steps in this document.

Modulepositions&Setup

modulepositions overview

1.Number of positions

The Template provides a total of 50 modulepositions, separated into different sections. Click on the image to the left to open a modulepositions overview map.
All modulepositions are collapsible, they are removed completely if they are not in use.

2.The header slider module(s)

The Template comes with a build in JavaScript slider area. The slider area includes up to 12 slides. Every slide is a stand alone moduleposition called header1, header2, header3...header12. If none of these 12 modulepositions are in use, the slider area disappears completely. If you setup just one moduleposition it will load just this one static module without the sliding navigation. If you use more than one of these modulepositions (for example "header3" and "header5") the slider area will load the first module on show the navigation to "slide" to the second one. You can use the 12 modulepositions to setup what ever you want. For example: A image, a text, HTML code, a video or one of the thousands of free and commercial Joomla modules out there.

Template Configuration

As mentioned before the slider area will be activated automatically as soon as you publish a module on position "header1 - header12". But you can also setup and change some basic settings from the templates config screen. To access the config screen click on "extensions->template manager". Select the template from the list and hit the "edit" button in the upper right corner. The templates config screen will appear. Inside the right column you can setup the hight, the duration between two slides in milliseconds, the positions of the navigation elements and you can choose one of two different effects (slide horizontal, slide vertical). And the configuration lets you also activate/deactivate the "auto play" function and edit other template related options.

3.Setup individual HTML modules

youtube video
A small video tutorial of setting up a custom Module in joomla 1.6
setup custom modulesJoomla allows you to add your own modules with your own text/HTML content very easily. We use such custom modules on the templates demo site to outline the different module positions. If you want to add your own log into your admin backend and click on "extensions->module manager". Hit the "new" icon in the upper right corner and select as module type "custom HTML".
The setup screen of your new module appears. Add a name, select the module position where you want to display your content (take a look at the "module map" above) and add your content into the editor text box at the bottom of the setup screen. You can add texts, images, links and any other HTML elements. Save your module and publish it.

3.1.Setup a header area like on our demo site

headerIf you like the header area image/text on our demo site you can rebuild it on your Joomla website very easily. Just follow the steps descibed above to setup you individual HTML module. To add your own HTML code switch your editor to HTML mode (hit the small "html" icon in the toolbar or click on the "toggle editor" button below the editors text window) and copy&paste the following code:



<p><img src="templates/sunnylane/images/header.jpg" alt="static header" /></p>


You can also use the "image" icon in the toolbar to add a single image instead of adding HTML code directly. In this case a popup window appears where you have to enter the image URL "alt" text etc.
Of course you can add/edit the text and add another images and/or links.
Publish your new header module on position "header" for a static header or on one of the "header1", "header2", "header3"...."header12" positions if you want to use the module slider area for a set of two or more header modules.

3.2 Hide a module (for example the "breadcrumb" module) on certain pages

Sometimes it can be usefull to display a module on certain pages only, but hide it on others. For example the "breadcrumbs" navigation module appears on our demo site on subpages only but not on the frontpage, while the header modules are appear on the homepage but not on other pages. Joomla provides a nice and easy but well hidden option to assign a module to a certain page but hide on others.
To link a module to certain pages go again to your module manager (click on "extensions->module manager" in your backend) and select a module you want to link to some pages only. For example the Joomla default "breadcrumbs" module. Hit the "edit" button in the upper right corner to access the modules setup screen. On this setup screen you will find the "Menu Assignment" area on the bottom of the right column. By default a module is assigned to all pages, but if you set it to "Select item(s) from the list" you can mark certain menu items in the selection box. You can mark more than one item by holding down the CTRL key. Mark all items except the mainmenus "home" link. Save the changes and you will see that the "breadcrumb" navigation will appear on subpages only.

3.3 Embed a Youtube or Vimeo video into a custom module or article

Like described in Step 3 and 3.1 you can create your own custom module with your own content with a few clicks. Joomla let you also enter the "embed" code of most external video or content providers like YouTube, Vimeo, google Maps, Flickr etc.
BUT: If you just copy and past the code you will notice that Joomla removes some important parts of the embed code automatically. The problem is that by default the editor removes some HTML tags to avoid security problems and that there is a text filter applied to any user type (including the Super Admin). But that are just the Joomla default settings after a fresh installation. Means you can change it. Basically you have to disable any text filter for your user account and disable the default text editor (Tiny MCE) before you can add <object> or <iframe> tags into a module or article.

Disable the text filter
Login to your backend and click on "content->article manager". Hit the small "Options" icon in the upper right corner. The options popup screen appears. Select the "Text Filter" tab at the top and select for the Super Users "no filters". Save the changes. Now you as "Super Admin" can add any type of code even if it is on a blacklist.

Disable teh test editor
Click on "Site->My Profil" in your backend and select "no editor" in the "Editor" selection field in the right column. Save the changes.

Add the code
Now grap the "embed" code from a content provider and create a new article or custom HTML modul. The text editor window will now be a plain and empty space without any toolbars or icons at the top. Just past the code and save your article/module.


4.Setup the Drop Down menu

menusetupThe template comes with an moduleposition called "mainmenu". To display your main menu module on this position log into your backend and click on "extensions->module manager". Select your main menu module from the list and hit the "edit" button in the upper right corner. The main menu module setup screens appears. Select as moduleposition "mainmenu" and save the changes. To activat the "Suckerfish" drop down function for sub menu items click on "Module Parameters" in the right column and activate the "Always show sub-menu Items" function. Than click on "advanced Parameters" and enter the value "nav" (without the "") into the "Menu Tag ID" input field. Save the changes. Make sure that the module is published on all home- and subpages and that no other module is published on the "mainmenu" module position.

5.Lightbox

lightboxThe template comes with a nice and simple "Lightbox" script. Means you can add images or external sites which opens in a nice box overlay while the background becomes dark.
For example this code:
<a class="lightbox" href="bigversion.jpg" title="A sample title" rel="lightbox"><img class="content_image" src="smallversion.jpg" border="0" alt="image" /></a>Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu, ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat enim faucibus felis, quis rutrum mauris lorem quis sem. <br /><a href="#">Read more...</a>
shows one image (smallversion.jpg) and if the user click on it the link target (bigversion.jpg) will open up in the lightbox. The important thing is the rel="lightbox" code. If you add it to a link somewhere on your website the link"href" target will open up in a lightbox.
Of course you have to create the images and upload them before you can see ´em! And don´´ forget to replace the "smallversion.jpg" and the "bigversion.jpg" image path with a real file loaction!

6. Edit the frontpage blog article layout

frontpage settingsBy default Joomla presents a blog like news page as frontpage with several articles. If you don´t want this kind of frontpage, for example if you just want to use modules instead of the "blog" component, or if you want to display another amount of articles in another number of colums, you have to change your frontpage parameters.
Login to your backend and click on "menu->main menu". A list with all mainmenu links appears. One of them is marked with a star. Thats the frontpage link and marks the page with will be displayed first if a user came to your website. By default it is the "Home" link. Mark that link and hit the "edit" button in the upper right corner to access the frontpage config screen.
In the right column you will find four tabs with several configuration options for your frontpage. In the "Parameters (Basic)" tab set everything to "0". So Joomla will stop displaying any articles, or enter another amount of articles instead of.
In the second "Parameters (Advanced)" tab hide the "pagination" and the "pagination results" and disable in tab four ("Parameters (System)") the "show title" function.Save the changes. These settings will result in a clean and empty, unused component area which is invisible for the visitors.

7.Understand and re- create the demo sites frontpage

frontpage overview
Joomla makes it easy to create stunning (front-) pages with a lot of different content areas, articles and modules. To understand how we setup the frontpage of the templates demo site and how you can recreate it with a few clicks, read the following instructions carefully:

Click on the image above the see which modulepositions are in use on the templates demo website. If you want to recreate the demos sites frontpage there are several thing to do:
1. Follow Step 2 and 3.1 to setup the sliding header area.
2. Place your mainmenu module on position "mainmenu".
3. Create several custom modules (like described in Step 3) and place them on the same modulepositions which are in use on the demo sites frontpage (use the linked image above to compare it).
4. Setup the Drop Down menu system (follow Step 4).
5. Make sure that all unneeded modules are disabled.
6. Setup three frontpage Articles in three columns with one leading article (see step 6).


Credits

Build- in Scripts
JS Framework: Mootools
Module Slider: NoobSlider
LightBox: SlimBox by Christophe Beyls

Fonts
Google Fonts: Open Sans
Google Fonts: Rochester

Demo Site

Images from the demo site are NOT included but can be purchased for a few bucks from Photodune here:
Image 1
Image 1
Image 1

Vimeo Video: "Dagdraumar" by Allan Wilson