JA Quartz – Userguide

Forums    Joomla Templates Club    JA Quartz    JA Quartz - Userguide
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • Hung Dinh Friend
    February 2, 2009 at 7:30 am #137720

    JA Quartz – Userguide for Joomla! 1.0.x

    • For users who start your Joomla! site at the beginning, I recommend you using QuickStart package of JA Quartz, named as qs_j1015_ja_quartz.zip. For instruction how to use JoomlArt quickstart package, please check the QuickStart guide
    • For users who new to Joomla!, there are many useful documents available at http://joomla.org about Joomla! and how to use, please spend some time to check them out.

      • Here is some other guides that may useful for you:

    • For users that already have a site with contents and other extensions installed, please follow my instruction below to understand how JA Quartz works:

    I. TEMPLATE

    1.1 Template Installation

    After downloading JA Quartz package and extract it, you will find template package named: tpl_quartz_j1.0.zip

    Proceed installation of JA Quartz as other normal Joomla! templates. If you don’t know how to do installation or set a template as default, please check the How to install Joomla! template guide.

    After installing and setting JA Quartz as default template, your site should look like this:

    To see position located in site, in Navigation toolbar input string “?tp=1” at the end of site link

    1.2 Template Configuration

    To configure JA Quartz template, check How to configure Joomla! template guide!

    Here is the parameter of JA Quartz on demo:

    # BEGIN: TEMPLATE CONFIGURATIONS ##########
    ####################################
    $_params = new mosParameters(”);
    # Joomla menutype used in main navigation
    # LOGO TYPE DESCRIPTION
    $_params->set(‘logoType’,’image’);//image: Image; text: Text
    #LOGO TEXT DESCRIPTION
    $_params->set(‘logoText’,’JA Quartz’);
    #SLOGAN DESCRIPTION
    $_params->set(‘sloganText’,’2nd Jan 9 JA Template’);
    #FONT SIZE DESCRIPTION
    $_params->set(‘ja_font’,’3′);//value from 1 to 6
    #TEMPLATE WIDTH DESCRIPTION
    $_params->set(‘ja_screen’,’wide’);//wide:Wide Screen;
    #Color variation to use
    $_params->set(‘ja_color’,’default’);//default: default; jean: jean; sexy: sexy; spring: spring; summer: summer; winter: winter; autumn: autumn
    #MENU TYPE DESCRIPTION
    $_params->set(‘menutype’,’mainmenu’);
    #MENU’S TYPE
    $_params->set(‘ja_menu’,’css’);//none: Disable; split:Split Menu; css:CSS Menu; moo:Moo Menu
    #FUNCTION TYPE
    $_params->set(‘ja_modfunc’,’1′);//1: Yes; 0: No

    $_params->set(‘usertool_font’, 2); //0: disable, 2: show font tools
    $_params->set(‘usertool_color’, 4); //0: disable, 4: show color tools
    # END: TEMPLATE CONFIGURATIONS ##########

    You can change all JA Quartz parameters as you wish.

    JA Quartz module positions are available here You just need to configure your modules to be loaded on those positions to match JA Quartz style.

    If you don’t know how to create module position in Joomla!, please follow this guide

    II. EXTENSION INSTALLATION

    When extracting JA Quartz package, you will see the folder named Extension with all extensions built in the JA Quartz, including JA Slideshow 2, JA Tabs, JA Category SpotLigh With Image, JA Highslide and JA Bulletin modules and JA Tabs, JA Highslide mambots. That means when you install via template installer, you need to install JA Slideshow, JA Tabs, JA Category SpotLight With Image, JA Highslide, JA Bulletin modules and JA Tabs, JA Highslide mambots separately, then configure their positions as instructed in Template configuration section.

    You check How to install Joomla! module guide and How to install Joomla! mambot guide for installation.

    Extensions built in JA Quartz comprise:

    Note: [xx] stands for module position

    • [header, slideshow, user7] JA Slideshow 2 module
    • [user5] JA Tabs module
    • [user6] JA Catslwi module (Category SpotLight With Image)
    • [right] JA Highslide module
    • [user1, user2] JA Bulletin module
    • JA Tabs plugin
    • JA Highslide plugin

    And extension details as follow:

    2.1. JA Slideshow module(mod_jaslideshow.zip)
    [position: header, slideshow, user7]

    JA Slideshow module allows to show your photos with the beautiful animation effects.

    Moreover, for users looking to customize slideshow, this module gives you the flexibility of editing the javascript object settings, setting global options through the options page.

    On demo, We used three slideshow 2. Please follows below steps to establish three slideshows

    • Install JA Slideshow 2 module (that means you have first slideshow)
    • Copy installed slideshow by ticking checkbox to mark slideshow >> click Copy (That means you have second slideshow)


    • Continue copy module, you will third slideshow.
    • Set parameter for those slideshows.
    • The first Slideshow 2: Title: JA Slideshow 2, Position: header. On demo, it look like:


    In Admin panel, please go to Modules >> Site Modules and click on module name (JA Slideshow 2) to go to configuration page.
    Here is the setting of JA Slideshow 2 on demo:

    • The second Slideshow 2: Title: JA Slideshow, Position: slideshow. On demo, it look like:


    In Admin panel, please go to Modules >> Site Modules and click on module name (JA Slideshow 2) to go to configuration page. Here is the setting of JA Slideshow 2 on demo:

    • The third Slideshow 2: Title: Choose style, Position: user7. On demo, it look like:


    In Admin panel, please go to Modules >> Site Modules and click on module name (JA Slideshow 2) to go to configuration page.
    Here is the setting of JA Slideshow 2 on demo:

    Parameters Explanation:

    • Start status (play, pause): Set the start status of slide show is play or pause.
    • Slide Width : Width of Slideshow [px(s)]
    • Slide Height : Height of Slideshow [px(s)]
    • Images Folder URL : URL to folder contain images in slide show. For example: images/stories/food/ then photos in the food directory will show.
    • Alt Images : Alt images will be displayed when the image not found
    • Order by (1: Time; 0: File name): The order of the image
    • Sort Order (zero:Random; 1:Ascending; 2: Descending ): The sort order of the image
    • Set image array display : You can choose an array of images that you want to display only. Separated by comma. Ex: bread.jpg, bun.jpg, coffee.jpg
    • Start image : Specific image’s name to start slide show.
    • Auto resire image (0:No; 1:Yes): You can set auto resize the images with a size define. Note: This option is best with Face animation
    • Display time : Display time of image on slide show. . Default value is 5.
    • Transition Duration : Time of animation on slide show . Default value is 2.
    • Animation Type (fade: Fading; zoom:Zooming; pan: Panning; combo:Combo – Ken Burns Effect; push:Pushing; wipe: Wiping): Animation effect that you want to display
    • Percent of animation : This option used with Panning or Combo animation. You can set value from 0% – 100%. Default value is 10.
    • Percent zoom effect : This option used with zoom effect only. You can set value from 0% – 100%. Default value is 10.
    • Effect (Linear; Medium to Slow; Fast to Slow; …): Animation effects. Used with Wipe/Push animation only.
    • Navigation type : Choose your navigation type as you want
    • Thumbnail Width: Width of thumbnail [px(s)]
    • Thumbnail Height: Height of thumbnail [px(s)]
    • Switch action: Actions occurs on navigation to switch image when click or mouseover.
    • Show description : Display description for images.
    • Description effection: Effect for description of image, include: Fade, Moveup, Moveup and Fade
    • Description Parameter: Write description content using HTML code according to below syntax:

    Content of description

    For examples:

    <h3>EndWar Exclusive Theater of War Hands-On </h3>
    <p>Augue neque rutrum elit vitae nec in pretium et faucibus In. Felis non sit Phasellus hac dictumst Pellentesque Proin eu leo Phasellus. Magna eros consequat eu eu dui vel consequat ipsum dolor ipsum. Tempus quis id massa nisl ac.</p>

    2.2.JA Tab module(mod_jatabs.zip)
    [position: user5]

    JA Tabs module used to display your specific content, categories, section as well as modules in TABS. You can specify module position to display, or using JA Tabs syntax for advanced features

    On demo, it looks like:

    In Admin panel, go to Modules >> Site Modules and click on module name (JA Tabs for joomla 1.0.x) to go to configuration page.

    Here is the setting of JA Tabs on demo:

    You can select what will be displayed in JA Tabs block. It can be modules, Article ID, Articles-Category ID or content.

    • If Modules selected, you can input module position into the textbox Select an position box. All modules from that position will be displayed in tabs.
    • If Content selected, you can input your JA Tabs string to the Enter content code textarea.
    • If Module selected, you can input list of module to the textbox Module list
    • If Article ID selected, you can input list of Article IDs into textbox Article ID list. All articles which have inputted ID in textbox will be displayed in tabs.
    • If Articles-Category ID selected, you can input list of Category IDs into textbox Category ID. All articles which have inputted category ID will be displayed in tabs.

    To understand the JA Tabs string syntax, please follow this link: JA Tabs Userguide

    2.3. JA Tab mambot(mab_jatab.zip)

    JA Vauxite came with JA Tabs mambot, an advanced tool in creating and presenting your content as well as modules on front page. All of them can be well align in tabs.

    For the syntax of JA Tabs and how to use it, please follow this guide here:
    JA Tabs Userguide

    Notes: to display JA Tabs module on frontpage, you must enable JA Tabs mambot first

    JA Quartz supports some default style for tabs. You can choose style by going to Mambots >> Site mambot>> JA Tabs for Joomla! 1.0 to choose style

    2.4. JA Category SpotLight With Image module(mod_jacatslwi.zip)
    [position: user7]

    This module will show specific content from a category in a very impressive way.

    On demo, it looks like:

    In Admin panel, please go to Modules >> Site Modules and click on module name (Spotlight Module Content with Image) to go to configuration page.

    Here is the setting of JA Catslwi on demo:

    Parameters Explanation:

    • Module Class Suffix: A suffix to be applied to the css class of the module (table.moduletable), this allows individual module styling.
    • Category IDs: Input Category ID that means all articles of that category is shown
    • Number of Elements: How many element are displayed.
    • Module Height: height of the module displayed on front page.
    • Text Color: Color of text
    • Background Color: Color of background
    • Background Transparent: Percentage of background transparent.
    • Expand Height: Height when expand
    • Collapse Height: Height when collapse
    • Auto resize: Two option Yes/No auto resize
    • Image Width: Fixed width of the image in pixel (set to -1 if you want to leave the image’s default size)
    • Image Height: Fixed height of the image in pixel (set to -1 if you want to leave the image’s default size)
    • Max Chars: Maximum character number will be displayed

    2.5. JA Highslide module(mod_jahighslide.zip)
    [position: right]

    On demo, it looks like:

    In Admin panel, please go to Modules >> Site Modules and click on module name (mod_jahighslide) to go to configuration page.

    Here is the setting of JA Highslide on demo:

    Parameters Explanation:

    • Module Class Suffix: A suffix to be applied to the css class of the module (table.moduletable), this allow individual module styling
    • Type: Type of the highslide
    • URL: URL of the element: Example, gl-1.jpg, gl-2.jpg…for Slideshow Caption and Slideshow Controlbar or gl-1.jpg for Image or gl-1.swf for Flash or http://google.com for Frame and Ajax
    • OR Path Folder (for slideshow): Folder of the element
    • Item id: enter ID of the article in case you choose type of highslide is Item
    • Position: Enter position of the module in case you choose type of highslide is Modules
    • Module name: choose type of module in case you choose type of highslide is Module
    • Content id: Enter Id of content, example: 1 in case you choose type of highslide is HTML
    • Content: content of HTML

    To understand the JA Highslide string syntax, please follow this link: JA Highslide Userguide

    2.6. JA Highslide Mambot(mab_jahighslide_j15.zip)

    JA Quartz came with JA Highslide Mambot, for the syntax of JA Highslide and how to use it, please follow this guide here:
    JA Highslide Userguide

    Notes: to display JA Highslide module on frontpage, you must enable JA Highslide mambot first

    2.7. JA Bulletin module(mod_jabulletin.zip)
    [position: user1, user2]

    This module covers 2 default Joomla! modules: Latest and Mostread module. By that mean, you could show latest articles or most popular articles. You can copy the module into multiple instances (For example, in JA Quartz demo, 2 instances of the module are used, one to show latest news, one to show most popular articles). The module also supports to show image and updated date.

    On demo, it looks like:

    In Admin panel, please go to Modules >> Site Modules and click on module name (mod_jabulletin) to go to configuration page.

    Here is the setting of JA Bulletin on demo:

    Parameters Explanation:

    1. Type: Show Latest articles or Most read articles.
    2. Module Class Suffix: Style of module
    3. Enable Cache: Yes/No option
    4. Module Mode: is description mode of module: three mode: Content Items only/Static Content only/Both
    5. FrontPage items: Show/Hide frontpage items
    6. Count: number of article will be displayed
    7. Category ID, Section ID: Input category/section ID, that means published articles belong to Category/Section will be displayed
    8. Show Image: If enabled, an image in each article will be retrieved and shown. The image will be resize to the input size in next parameters.
    9. Image Width: resized image width
    10. Image Height: resized image height
    11. Show Date: Show/Hide last updated date.
    12. Date format: format of date.

    III. SETTINGS LIKE DEMO

    And now, I will instruct you setting your site look like our demo. Beside JA Slideshow 2, JA Tabs, JA Catslwi, JA Highslide, JA Bulletin modules, we used Custom module of Joomla! to create articles on demo page.

    1. JA Slideshow 2 module: You only need copy your image folder into your_site_path/image/stories and set other parameters for slideshow
    2. JA Tabs module: Please follow these steps to create JA Tabs like demo
      • Using Custom module to create two articles: FASHION TODAY and TOP 10 MODEL, publish these modules on jatabs position.
      • Install JA Tabs module and mambot
      • Publish JA Tabs mambot
      • Go to JA Tabs module parameter: put on user5 position
      • Set parameters: Type tabs: Modules and Select a position: jatabs (that means: modules on jatabs position will be displayed on JA Tabs module).
      • Now, your JA Tabs is similar to our demo
  • JA Catslwi module:
    1. When you put in CategoryID, all articles in that category will be shown as spotlight
      • You can limit number of items to display in Number of Elements.
      • Module height specify the height of each content display:

    2. JA Highslide module: is set on right position. You only need copy your image into image path: your_site_path/image/stories/demo and input name of images (sam-8.jpg, sam-9.jpg, sam-10.jpg, sam-11.jpg, sam-12.jpg, sam-13.jpg) into URL param of Highslide module parameters. Note that you can change image path as belows:
      • Go To Mambots >> Site Mambots >> choose Highslide for Joomla! 1.5 to go to JA Highslide plugin parameter page.

      • You can set image path on Path Thumbnails Image param as you wish.
    3. JA Bulletin: show lastest and most popular articles on user1 and user2 position. Follow these below steps to create JA Bulletin:
      • Install JA Bulletin module
      • Go to JA Bulletin parameter, set Title is Lastest News and position is user1
      • Choose Type: Lastest News and set other parameters. So newest articles will be displayed on user1 position
      • On Module Manager panel, tick Lastest News module and choose Copy to copy module.
      • Go to Copy of Lastest News module, rename to Popular, set on user2 position and choose Type: Most read. So articles that are most read will be displayed on user2 position.
    4. Custom module to create content for Title Violet module on right position

    You can check How to create Custom module guides for more details.

    And finally your site will be:

    IV. TYPOGRAPHY

    JA Quartz came with a rich typography to give users more ability to customize content look and feel. Please check all JA Quartz typography here at JA Quartz Typography

    V. FREQUENTLY ASKED QUESTION

    Q: I want to add a template position in to my Joomla!
    A: Go to your Administration Panel, Site -> Template Manager -> Module Positions. Add your template positions and hit the Save button.

    Q: Where can I change my footer?
    A: If you want to change or remove something in the footer, just open the “ja_justicia/footer.php” then modify it to suite your needs.

    Q: My images take a lot of white space and do not look good?
    A: The {mosimage} may show some extra padding and margin. To solve this problem, go to your Joomla! Administrator -> Mambots -> Site Mambots and change the margin and padding parameters of MOS Image mambot to 0.
    Q: Images without caption are stuck with text?
    A: It is because Joomla! generates the code different when {mosimage} has and doesn’t have its caption. So when you decide that the image will not having a caption, put it between the div tag like this <div class=”mosimage” style=”float: left;”>{mosimage}</div>

    Q: What’s a module style? And module class suffix?
    A: Almost modules offer you a parameter called Module Class Suffix. Set a value for this parameter and you will have your module’s appearance differs from the others. JA templates often provide you some module styles which can be found in Module Styles area of the guide.

1 user says Thank You to Hung Dinh for this useful post

  1. weather290
jllamb Friend
February 11, 2009 at 5:32 pm #290699

Hello. Very nice template!

I have question for the install. I used the quick install and am having a problem with an error message when I publish the modules for slideshow, highslide which is this:

Fatal error: Undefined class name ‘self’ in /home/content/0/0/0/site/html/site/modules/mod_jaslideshow2/helper.php on line 246

In error message above I have removed my root info. If i publish these modules I get this error message and then nothing else shows up on the page below either.

Any help would be much appreciated.

kkemp Friend
February 28, 2009 at 3:34 pm #293928

<em>@jllamb 111289 wrote:</em><blockquote>Hello. Very nice template!

I have question for the install. I used the quick install and am having a problem with an error message when I publish the modules for slideshow, highslide which is this:

Fatal error: Undefined class name ‘self’ in /home/content/0/0/0/site/html/site/modules/mod_jaslideshow2/helper.php on line 246

In error message above I have removed my root info. If i publish these modules I get this error message and then nothing else shows up on the page below either.

Any help would be much appreciated.</blockquote>

Yes! Me Too! I get the same exact error.

Using the 1.0 Quickstart package.

weather290 Friend
March 6, 2009 at 9:45 pm #294730

Is there a post explaining how to recreate something similiar to their demo category? It’s the page it takes you to if you click “layouts.”

arnolagendijk Friend
March 26, 2009 at 3:36 pm #298262

How can I change the body? I want to show the dates that you can find left from the articles in the body.

I want to do it as shown in de DEMO. {Sat – 15 Aug / Wed – 09 Sep……} see: http://www.joomlart.com/templates_demo.php?template=ja_quartz

digileaf Friend
December 2, 2009 at 5:07 pm #325552

<em>@jllamb 111289 wrote:</em><blockquote>Hello. Very nice template!

I have question for the install. I used the quick install and am having a problem with an error message when I publish the modules for slideshow, highslide which is this:

Fatal error: Undefined class name ‘self’ in /home/content/0/0/0/site/html/site/modules/mod_jaslideshow2/helper.php on line 246

In error message above I have removed my root info. If i publish these modules I get this error message and then nothing else shows up on the page below either.

Any help would be much appreciated.</blockquote>

I realise that it is several months ago that you had this problem, but I just encountered it today and managed to find a solution.

In the helper.php file, replace all instances of self with modJaSlideshowHelper
 I think there are 3 or 4 replacements to be made.

Kate

  • Author
    Posts
    • Viewing 6 posts - 1 through 6 (of 6 total)

    This topic contains 6 replies, has 6 voices, and was last updated by  digileaf 14 years, 5 months ago.

    We moved to new unified forum. Please post all new support queries in our New Forum

    Important Notice :

    New Unified Portal is live

    Must Read

    Jump to forum

    Categories