Joomla TemplaTe: JV Techno Design User gUiDe

longtermsingularInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 6 μήνες)

75 εμφανίσεις

Joomla TemplaTe:
JV Techno Design User gUiDe
i. inTroDUcTion
JV Techno Design (or JV Techno for short) is a template developed by team Joom
-
lavi for Joomla 2.5.
Designed mainly for web designing sites, this template is also a good choice for any
service that need to display a large amount of images, a site for artist to share their
work, for example.
As one of the first templates that run on the new JV Framework 3.0, aside from the
various tools found in older version that make customization easier, JV Techno also
boasts some new features: like a flexible layout that can fit multiple kind of devices
and a new grid-base layout manager.
Joomla! : JV- User guide
Page 1
ii. insTallaTion
The installing process of JV Techno differs according to the installer being used.
There are two version of JV Techno that can be downloaded: Quick-start and
Template.
1. Installation with Quick-start version
Quick-start installer will create an entire new Joomla site with JV Techno, data
and all the related extensions installed, essentially a replication of JV Techno’s
demo site.
To install a QuickStart version of JV Techno, follow the following steps:
-Download the quick-start version.
-Extract the file if there’s ‘unzip_first’ in its name.
-Extract the resulting file into a folder. For example, let name the folder ‘Tech
-
no’.
-Copy or upload said folder into your server’s.
-Open your browser and open the URL to the folder you copied. For example,
on a local host, the URL would be: http://localhost/Techno/
-Install the quickstart template the same way you install a new Joomla! in
-
stance using browser. During the installation process, you must remember to
install Sample Data by clicking on the Install Sample Data button.
Joomla! : JV- User guide
Page 2
You can see Joomla! installation guide or our quick-start instruction for more info.
2. Installation with Template version
The Template version allows JV Techno to be installed on an existing site (in
-
stead of creating entire new site). However, this method will not install the related
extensions, making it look different from the demo site.
To install a Template version of JV Techno, follow the following steps:
- Download JV Framework version 3.0 and the Template version of JV Techno
- Extract any file with ‘unzip_first’ in its name.
- Use Joomla’s default installer to install JV Framework like a normal extension.
- Use Joomla’s default installer to install JV Techno template like a normal ex
-
tension
- In Template Manager, Set the new style/template as default by selecting it
and click on the default button.
iii. managing JV Techno (wiTh JV Framework)
Note: this guide does not cover how to use Template Manager, nor does it cover all
the parameters and features of JV Framework.
Unlike older versions, JV Framework utilizes Template Manager instead of an in
-
dependent Style Manager. This was to make the framework friendlier toward new
users.
The template itself is still has a style edit page and an edit template page
Joomla! : JV- User guide
Page 3
1. Style Edit
To edit a style, simply click on its name in under the style section in Template
Manager.
The defaults tabs found in this page are:
-
Global:
This tab contains a collection of general parameters that affect the
entire site.
Joomla! : JV- User guide
Page 4
+ Logo Setting: With this set of parameters, you can set an image or text
logo for the site and adjust its dimension or padding. Take note that this logo
will be applied to all colors choice. If you want different logos for different
color choices, you have to manually replace the respective logo images with
your own.
+ Direction: This is where you set whether your site should be read from left
to right (LTR) or right to left (RTL).
+ Extension Cache: This is where you enable or disable the cache function
for JV Framework’s extensions.
+ Responsive: This is where you can enable/disable responsive layout for
the entire site or a particular resolution level.
+ Twitter Bootstrap: This is where you can enable and disable bootstrap
functions in the site.
-
Style:
This tab contains the parameters that affect the styling of the site
+ Theme Color: This is where you can select the site’s theme color among
the presets, as well as enable/disable the selector on front end.
+ Logo Style: This is where you can set the style parameters for your logo (if
you chose Text logo for Logo Setting in Global tab)
+ Body: This is where you can set the style parameters for the site’s Body.
Joomla! : JV- User guide
Page 5
+ Main Content: This is where you can set the style parameters for the Main
Content.
+ Menu Style: This is where you can set the style parameters for the menus
and sub-menus.
+ Module: This is where you can set the style parameters for the modules.
-
Extension:
This tabs contains several set of parameters that enhance or
support the Framework .
+ Analytics: This is where you can enable and disable analytics like Google
Analytic and Yahoo Analytic.
+ Breadcrumbs: This is where you select the position for the breadcrumbs.
+ Copyright: This is where you can show/hide all the copyrights, as well as
editing the site’s copyright.
+ Date: This is where you can enable/disable the date indicator, as well as
configure it.
Joomla! : JV- User guide
Page 6
+ Font Resizer: This is where you can enable/disable the font resizer.
+ Lazy Loading: This is where you can enable/disable lazy loading mode.
+ System Message: This is where you can select the position for system
message.
+ Go To Top: This is where you can enable/disable Go To Top button.
-
Layout:
This tab contains parameters that allow you to adjust the size ratio
and configuration of the grid layout.
+ Layout: this is where you can select the general layout for this style (For
example: left-main, left-rigth-main, right-main, right-main-left, etc), as well as
adjusting the size ratio between side bars and main body.
+ Panel, Top, Content Top, Content Bottom, Bottom: this is where you man
-
age the layout for the corresponding sections
-
Performance:
This tab contains features that, when enabled, can help in
-
creasing the site’s performance.
Joomla! : JV- User guide
Page 7
+ Compression: This is where you can enable/disable various mode of com
-
pression to reduce the size of transmitted data. These modes also utilize a
smart compression process to avoid interfering with the site loading speed
.
+ Flexible Image: Allows you to enable and disable Flexible image. This is a
function that will automatically detect your screen size and resize the image
to fit it better.
-
Menu:
This is the tab that allows you to customize the menus.
Joomla! : JV- User guide
Page 8
+ Flex: this is where you can configure flex-type menus.
-
Mobile:
This is where you can enable, disable or setup the mobile-exclusive
layout for JV Techno .
+ All Mobile: This configuration will be applied to all mobile devices.
+ IPhone: This configuration will be applied to iPhone mobile devices.
+ Android: This configuration will be applied to mobile devices using Android.
-
Assign:
If this style is not the default one, this is where you can assign which
page will utilize this style instead of the default one.
Joomla! : JV- User guide
Page 9
2. Template/Template Edit
With the Template Edit provided along with JV Framework, you will be able to
edit, delete, create and upload files and folders easily.
To open template edit page:
In template manager, click on JV Techno’s name in the “Template” column to
open Customise Template page
Joomla! : JV- User guide
Page 10
On the new page, click on “Edit Template” to open the popup.
Joomla! : JV- User guide
Page 11
iV. exTensions
1. JV Slide Pro
a. Introduction:
JV Slide Pro is a Joomla photo slide module developed by team Joomlavi. It
incorporates several display modes from other Slide-type modules.
b. Where to find:
JV Slide Pro is currently an exclusive extension for templates, thus you won’t
be able to find it on our extension page. It will be included in the extension
package for JV Techno though.
c. Setting up JV Slide Pro:
This part will show how JV Slide Pro module was setup in the quickstart ver
-
sion, so that those who weren’t quick-start user can make their site as close to
the demo as possible.
To set up JV Slide Pro:
- Create two folders (<images/partner> and <images/demo/slideshow> in the
quick-start version), then upload the images you need to those folders (in
case of JV Techno logos to ‘partner’ and slide images to ‘slideshow’).
- Create two modules using module type JV Slide Pro and name them “Slid
-
er” and “JV Slide Pro”
- Assign module “Slider” to position ‘contentbottom-1’ on all pages, module
“JV Slide Pro” to position ‘top-1’ on home page.
- Configure the modules according to the following screenshots:
‘Slider’:
Joomla! : JV- User guide
Page 12
‘JV Slide Pro’:
Front end:
Joomla! : JV- User guide
Page 13
2. JV Contact
a. Introduction:
A joomla contact module developed by team Joomlavi. Beside normal contact
messages, it also features functions like social buttons and google map. In the
case of this template, JV Contact is used for both the contact form and google
map.
b. Where to find:
JV Contact can be found on: http://www.joomlavi.com/joomla-extensions/jv-
contact-2.html
You can also get JV Contact from the extension package of JV Techno.
c. Setting up JV Contact:
This part will show how JV Contact module was setup in the quickstart version,
so that those who weren’t quick-start user can make their site as close to the
demo as possible.
To set up JV Contact:
- Create a new module using module type JV Contact, or make use of the
module that was created upon installation
- Rename the module “JV Contact” and assign it to position ‘contact’ on “all”
pages (menu item single contact)
Joomla! : JV- User guide
Page 14
- In the ‘Form & Fields’ tab, Enable ‘Show Form’ and ‘Title in Field’, then add
the custom fields: “Name”, “Email” and “Message” with matching titles.
- In the Google Map tab, select ‘Yes’ for the parameter ‘Show Google Map’
- Create an article named “Contact”, then input the following in html code
form: <div><span class=”readonly plg-desc”>{loadposition contact}</span></
div>
- Create a “Single article” menu item and link it to “Contact” article.
Front end:
3. JV News
An article-displaying module that shows articles or categories in e-newspaper
format
Joomla! : JV- User guide
Page 15
a. Where to find:
- JV-Techno Extensions pack (With styling)
- From URL: http://www.joomlavi.com/joomla-extensions/jv-news.html (with
-
out styling)
b. Setting up JV News to make it similar to quick-start/demo:
We will only concentrate on how to set up menus and module
Create 3 or more categories and the corresponding articles. The demo has a
total of 4 categories under a parent category: “Website Design”, “Website De
-
sign and Development”, “SEO, Search Optimization”, “Website Design pack
-
age cheap”, with “Techno” as the parent category.
In the back end, create 3 modules using the “JV News” Module type, name two
of them “latest news” and the other “Our Recent Work”
Assign one of the “latest news” modules to position ‘contentbottom-1’ on home
page.
Assign the other “latest news” module to position ‘top-2’ on home page.
Assign the “Our Recent Work” module to position ‘contentbottom-1’ on homep
-
age.
In the module_mod of the “latest news” module assigned to ‘contentbottom-1’,
select the sub-categories beside “Website design” for the “Categories” param
-
eter.
In the module_mod of the “latest news” module assigned to ‘top-2’, select all
sub-categories for the “Categories” parameter.
In the module_mod of the “Our Recent Work” module, select “Website Design”
for the “Categories” parameter.
Front end:
Joomla! : JV- User guide
Page 16
4. JV Twitter
a. Introduction:
A joomla module developed by team Joomlavi. You can use it to display new
-
est tweets from your twitter or another twitter, the tweet will be updated by Ajax
depending on the time that you set.
Joomla! : JV- User guide
Page 17
b. Where to find:
JV Twitter can be found on:
http://www.joomlavi.com/joomla-extensions/jv-twitter.html
Or it can be found in the JV Techno extension package
c. Setting up JV Twitter:
- Create a module using JV Twitter type, you can also use the default module
created upon installation.
- Change the module name to “JV Twitter” and assign it to position ‘right-1’ of
all pages except ‘Products’.
- Enter your Twitter account and set “Twitter Profile” to ‘hide’, “Number of
tweets” to 3, “Time refresh” to 10.
- JV Twitter on front-end:
Joomla! : JV- User guide
Page 18
5. JV Gallery
a. introduction:
JV Gallery is an extension developed by Joomlavi group that allows users to
display images in gallery form.
b. Where to find:
JV Gallery can be found in JV Techno extension package or
http://www.joomlavi.com/joomla-extensions/jv-gallery.html
c. Setting up JV Gallery to make it similar to quick-start/demo:
-Prepare a folder where you store the images you wanted to use (example:
images/gallery). Create a “thumbnails” folder within the image folder and
store the resized images you want to use as thumbnails there (each named
after the original size image). Upload the entire image folder to your site’s
directory.
-Within your site back end, go to Module Manager and create a ‘Custom
html’ type module named “Galleries”. Assign this module to the position
‘right-1’ on all pages except ‘Products’
- In the Custom output, click on the “Insert Gallery” button. In the popup box:
+ Select the folder you stored the images in
+ select the images you want to use and enter the title/description if you
want
Joomla! : JV- User guide
Page 19
+Select “FancyBox” for the “Lightbox” option.
+ Set Thumbnail width and height to 70 px
+Click “Insert” to add the code to your module.
Front end:
Joomla! : JV- User guide
Page 20