INSTALLATION OF TEMPLATE:

engineachooInternet and Web Development

Dec 4, 2013 (3 years and 10 months ago)

91 views




INSTRUCTIONS FOR SETTING UP YOUR TEMPLATE WITHOUT OUR SQL DUMP
For those who need to preserve their existing content, follow the manual instructions provided below.
Please DO NOT use the SQL dump we provide if you have content you do not want to lose.

Be sure you already have Joomla 1.6, 1.7, OR 2.5 installed and running on your server. For Joomla
download and instructions see the http://www.joomla.org/
website.

You have the option of installing the “sample data” that comes with the Joomla installation, or building
from scratch. If you do not install the “sample data” you will need to manually install some of your default
modules by following our detailed instructions below.

INSTALLATION OF TEMPLATE:

(Please note: The Joomla template for installation is located within the “joomla” folder of your unzipped download
package)

IMPORTANT: Joomla now requires that all templates be installed through the “Extension
Manager”. Your template will not be registered or recognized if you do not install through the
“Extension Manager”.
 Go into the admin section of your Joomla from the top menu > Extensions > Extension Manager.
 Then, in the “Upload package file” section, browse to find the zipped file located in your “joomla”
folder.



 Next, open an upload file dialogue box by clicking on the “browse” button. When located, click on
“Upload File and Install”.
 From there go to Extensions > Template Manager. Then choose the newly installed template by
selecting the box left of the template name, and then click “Make Default” button (orange star) in the
upper right hand corner. This makes your template the default one for your site.

UPLOADING IMAGES
Before getting started with setting up your template lets go ahead and upload our “article_images” and
“flash_images” folder to your “images” folder on your Joomla server. These folders are located within
your Sources folder of the main directory of your unzipped package. You can drag the entire folders to
the “images” folder, or alternately, you can create a these folders within your “Media Manager” of your
Joomla admin and then upload the images to those folders.

SETTING UP YOUR MODULE POSITIONS
Our templates are supplied with predefined module positions. Once your Joomla template is installed,
modules need to be assigned to different positions in order to match the appearance of the live demo.
You will also need to include any additional extensions we provide. *If you do not do this your site will not
appear like the live demo of the template. Note: instructions for additional (but not required) extensions
are also included.

Setting up your modules with existing “sample data”:
 In the administrator section go to Extensions > Module Manager. Note: the Joomla default
“sample data” is heavily loaded with modules and some are duplicated for other template
positions. You will need to update each module, rename, organize, and clean out what you
choose not to use.
 Open each module you see in your manager and assign each to the correct position (described
below). Some renaming of the modules may be required.

Setting up modules from scratch:

 In the administrator section go to Extensions > Module Manager.
 Click the “New”
button in the upper right-hand corner.
 You should see a list of modules in a new pop up window. Select the module needed from the list
and proceed with each module set-up.
 This same process applies to all modules that need to be installed and set up. Please follow the
“Module Positions” table guide below. Also, detailed instructions for setting up all the modules we
use in our live demo are provided below the table guide.


MODULE POSITIONS TABLE
Note: The items below are the modules that are used in our live demo. Most additional modules are
optional, and can be used either in the “sidebar-1”, or “bottom” positions. The “bottom” (footer section)
position is designed to hold 4 modules. Do not exceed this number of modules.

Module Name Position Enabled Pages Show title Module Class Suffix
Breadcrumbs breadcrumbsload Yes All No
Search position-0 Yes All No
Main Menu dropmenu Yes All No _dropmenu
Special Services
(install custom html module)

sidebar-1 Yes Varies Yes
User Menu
sidebar-1
Yes All Yes

Social Icons
(install custom html module)

user1 Yes All No
Who’s Online user2 Yes All No _online
Slide Show Custom
(install custom html module)

slideshow-images Yes Home No
_flashImages

Latest News bottom Yes All Yes
Current Projects
(install custom html module)

bottom

Yes All Yes
Weblinks bottom Yes All Yes
Login Form bottom Yes All Yes


Drop Menu (Utilizing the Main Menu) * dropmenu
We are going to utilize the “Main Menu” for our “Drop Menu” module. Alternately, you can use
the “Top Menu”. However, we recommend that you use the “Main Menu” for proper function of
active link and because of other technical issues. By default your “Main Menu” is pre-installed.

It is very important that you set up the “Main Menu” exactly as how we have provided in the
following (dropmenu-module.jpg) screen shot located within your Sources > screen shots
folder.
 Open your “Main Menu” module while in your “Module Manager”
 Select “dropmenu” for the position
 Select “Hide” for “Show Title”
 Select only the “Home” page in your “Menu Assignment”
 Under “Basic Options” in the right-hand corner select “Yes” for “Show Sub-menu Items”
 Under “Advance Options” directly below the “Basic Options” we are going to place the
following info:
o Menu Tag ID = nav
o Menu Class Suffix = _dropmenu
o Module Class Suffix = _dropmenu


Slide Show module * slideshow-images
Note: We include a screen shot inside the Sources > screen shot folder named “slideshow-module.jpg”
to help you see what it should look like.

 While in the “Module Manager” click the “New”
.
 After clicking the “New” button you will see a new screen with a list of modules. We are
going to select the “Custom HTML” link and click “Next”.
 Now we have our new custom module window open. Here we are going to give our
module a title, so go ahead and type in your preferred name where you see the “Title”
input box.
 Now we need to select “No” for Show Title, and “Yes” for Enable. We will select
“slideshow-images” position for this module. Also, be sure to set your module to
“Published”.
 Now, input “_flashImages” in your “Module Class Suffix” section.
 You will notice at the very bottom a section that says “Custom Output”. Here is where you
insert your code. Now click your “HTML” icon so that you have a window open that is for
code only. Note: we have included a screen shot of this view included in your Sources >
screen shots folder under “slideshow-module-content.jpg”.
 Copy (CTRL + C) and Paste (CTRL + V) the following code (in blue) into your pop up
window, and then click the “Update” button in the lower left hand corner. Once the
window has closed be sure to also click “Save” in the upper right hand corner.

<div id="faded">
<ul class="fadedul">
<li><a href="#"><img src="images/flash_images/1.jpg" border="0" alt="pic" /></a></li>
<li><a href="#"><img src="images/flash_images/2.jpg" border="0" alt="pic" /></a></li>
<li><img src="images/flash_images/3.jpg" border="0" alt="pic" /></li>
<li><img src="images/flash_images/4.jpg" border="0" alt="pic" /></li>
<li><img src="images/flash_images/5.jpg" border="0" alt="pic" /></li>
<li><img src="images/flash_images/6.jpg" border="0" alt="pic" /></li>
</ul>
</div>


Note: to add, change, or take away images please be sure to edit in code view by clicking
the “HTML” icon and allowing the pop up window to open.

To make changes both to the Images and content, please utilize the six images in layered
PSD format located in your Sources > PSD > slideshow images folder . When adding
your own images w/content to the slideshow, please make sure your image size is
identical to the existing banners. It is important that you use the same pixel size as our
original file for the site to render properly. Also note, that you can add links to each image
by placing the beginning tag before your image <a href=”yoururl.com”> and the ending
tag </a> after your image.


Current Projects module (Custom HTML module) * bottom


 While in the “Module Manager” click the “New”
.
 After clicking the “New” button you will see a new screen with a list of modules. We are going
to select the “Custom HTML” link and click “Next”.
 Now we have our new custom module window open. Here we are going to give our module a
title, so go ahead and type in your preferred name where you see the “Title” input box. We
are also going to select “Yes” for both “Show Title” and “Enable”. Now we will select the
“bottom” position for this module.
 You will notice at the very bottom a section that says “Custom Output”. Here is where you will
type in your content.


Social Icons module * user1
NOTE: we include a screen shot inside the Sources > screen shot folder named “social-icons.jpg” to
help you see what it should look like.

 While in the “Module Manager” click the “New”
button.
 After clicking the “New” button you will see a new screen with a list of modules. We are
going to select the “Custom HTML” link and click “Next”.
 Now enter your title, and select “No” for “Show Title”.
 Place your module in the “sidebar-1” section, and if needed, reorganize it so it’s at the top
of the “user1”.
 Lastly, insert your social icons in the “Custom Output” section without spaces in between.
Then simply insert your own personal links to each icon. Note: you can change, or
remove the icons as needed.


Who’s Online module * user2

 While in the “Module Manager” click the “New”
button.
 After clicking the “New” button you will see a new screen with a list of modules. We are
going to select the “Who’s Online” link and click “Next”.
 Now select “user2” for the position. Here you can assign your module to all pages, or just
the home page if you prefer.
 Lastly, we are going to place “_online” in the “Module Class Suffix” input box and click
“save”.


Recent News module * bottom
NOTE: it’s important that you already have “Latest News” category established in your Content >
Category Manager, and have articles created and published to the “Latest News” category prior
to setting up the module.
 While in the “Module Manager” click the “New”
button.
 After clicking the “New” button you will see a new screen with a list of modules. We are
going to select the “Latest News” link and click “Next”.
 Now enter your title name and place the module in the “bottom” position.
 Lastly, under “Basic Options > Category” section to the right side, select the “Latest
News” category.


Weblinks module * bottom
NOTE: To use this module you must already have web links published within your Components
> Weblinks section.
 While in the “Module Manager” click the “New”
button.
 After clicking the “New” button you will see a new screen with a list of modules. We are
going to select the “Weblinks” link and click “Next”.
 Now enter your title name and place the module in the “bottom” position.
 Lastly, under “Basic Options > Category” section to the right side, select the category of
your weblinks you wish to display. There are additional settings below that you can adjust
and explore as well.

Special Services module * sidebar-1
NOTE: this module uses the category. In order to use this module you will need to have your
category established within the Content > Category Manager section, and articles established
to the category beforehand.
 To install this module while in the “Module Manager” click the “New” button and select the
“Article Category” link.
 Now give the module a and place it at the “bottom” position.
 Select the “Filtering Options” in the right hand corner and now select the category you
want it to use. IMPORTANT: Until you have actual articles published using the selected
category, nothing will be displayed.


User Menu module * sidebar1
This module is optional.
 You must first create a “User Menu” in your “Menus” section. Then publish your links to
the menu. In the “Access” section of each link you publish, the “Special” should be
selected.
 While in the “Module Manager” click the “New”
button.
 After clicking the “New” button you will see a new screen with a list of modules. We are
going to select the “Menu” link and click “Next”.
 Now enter your title name and place the module in the “sidebar-1” position.
 Under the “Access” section, be sure to select “Registered”.
 Lastly, select the “User Menu” you created earlier from the “Basic Options” section in the
right hand section.


Login Form module * bottom
This module should already be installed by default, even without installing “sample data”.
 Open the “Login Form” module and place in the “bottom” position.

Breadcrumbs module * breadcrumbsload
This module should already be installed by default, even without installing “sample data”.
 Open the “Breadcrumbs” module and place in the “breadcrumbsload” position.
 Lastly, in the “Basic Options” section (right side) we have selected “No” under Show "You
are here".

Search module * position-0
 While in the “Module Manager” click the “New”
button.
 After clicking the “New” button you will see a new screen with a list of modules. We are
going to select the “Search” link and click “Next”.
 Now enter your title name and place the module in the “position-0” position.
 Lastly, select “No” for the “Show Title” section.



FOOTER/COPYRIGHT EDITING
Please note: To change the footer information located on the bottom the home page you will need to
hardcode your details within the “index.php” of your template theme. In code view open up your
index.php page (from your template theme) and locate the footer or text/copyright section. Then simply
copy over with your correct footer details.

FONTS INSTRUCTIONS
In order to use the same fonts as the sample file (i.e. to modify your logo) you will need to copy and paste
the fonts located in your Sources > Fonts folder, into your fonts’ folder on your computer.
Location Of folder: My Computer/WINDOWS/fonts

LOGO/IMAGE EDITING:

You will need to edit your “header-logo.psd” image to match your own website name. To do this you will
need Adobe Photoshop, or any other graphic software program that handles PSD files. To locate the
modifiable image open your sources > PSD files folder. Remember to save the file in the appropriate
format (png) to the template images folder after editing. Once you have completed modifying your
“header-logo.psd”, and have saved it with a png extension in your template images folder, you will need
to upload it via FTP to your server under “templates” and then your “theme name > images” folder.
Please note: The image needs to be uploaded to your server/host location; this is NOT your Joomla
admin.

A screen shot example of where you will upload your modified logo:






We have provided stock images, and other misc. graphics, located in your Sources > “article_images”
folder. You will need to upload this folder if you want to use the same images as our live demo. You can
simply upload the entire folder to the media manager of your Joomla! CMS, or upload via FTP to your
“images” folder on your server. Because this template works within a third party CSM infrastructure, all
additional inquiries (beyond the template set-up itself) should be directed to the community Joomla!
forums http://www.forum.joomla.org
and (when appropriate) specific extension resources.

IMPORTANT: Because this template will work within the Joomla! infrastructure, we cannot offer
additional technical support in regards to your upload and maintenance process. We will be happy to
answer questions about the template itself, but the overall Joomla! functionality is something we do not
control. Again, the Joomla! forums are a great, free resource to get your questions answered.


CONGRATULATIONS!
Now it’s just a matter of creating your links, content, categories, etc. to suit your own needs. You should
already be familiar with how to create your own links and articles within Joomla!. However, if you are not,
you should seek visual/content guides from the main site www.joomla.org
.

We appreciate your business. We wish you the best of luck with your website venture and hope you will
find this custom Joomla! template useful.