windows
Demo Content
The demo for Meridian utilises a large stock of custom code and styling to make the most of every content item and show what Meridian can do. This basically means that the HTML used in the custom modules and content have customisations which employ the characteristics of the template to make the "perfect" content.
This demo content section will take you through some of the content areas and general techniques used to further your understanding and help you realise the true potential of Meridian. If you would like to quickly deploy a replica of our Meridian demo for a new Joomla site, be sure to check out our RocketLauncher package.
Showcase
The following statement produces the showcase effect as seen on the frontpage, which is using RokCandy syntax:[showcase readon="Read More" img1="images/stories/demo/showcase2.jpg" title1="FUENTE ANTIX™" text1="Chrome Lens <br />Color:VR32 Red <br />Iridium" url1="#" label1="Read More" img2="images/stories/demo/showcase3.jpg" title2="PROPAGANDA HIJINX®" text2="Chrome Lens <br />Color:VR32 Black <br />SKU-089-98-76" url2="#" label2="Read More"&;#93;Meridian is the latest release for 2009 and does not disappoint. It is equipped with a fantastic array of features such as support for RokTabs and RokAjaxSearch. Elegance, usability and professionalism are the core elements of the theme. [/showcase]
Tabbed Content
The following statement produces the tabbed content as seen in RokTabs, which is using RokCandy syntax:[feature-tab img="images/stories/demo/tab1.jpg" url="#" label="Drive" readon="Read More"][span class=highlight-bold]Meridian, the epitome of elegance, usability and form.[/span] The template is a conservative approach, with low image counts and complexity with the vast majority of styling and structure emanating from CSS, resulting in a professional / business design, perfect for a plethora of different purposes.[/feature-tab]
Connect with us
The following statement produces the content in the Connect with us module, which is using RokCandy syntax:Visit us on: <br /> [connect line1="Twitter" line2="linkedin" line3="Flickr" line4="Facebook" /]
Article Row : Frontpage Main1 module
The following statement produces the content effect in main1 of the frontpage, which is using RokCandy syntax:[feature img="images/stories/demo/main1.jpg" url="#" label="Listen" title="RTL Support" readon="Read More"]Meridian is the first of our templates to offer native RTL (right-to-left) support for the template. Simply load up a RTL language in Joomla to load the RTL code from the template. International support has never been easier.[/feature] [feature img="images/stories/demo/main2.jpg" url="#" label="Look" title="RokCandy Extensions" readon="Read More"]The popular RokCandy extension provides an essential feature to any Joomla site, allowing you to quickly and efficiently insert complicated and functional code, perfect for amateurs and professionals alike.[/feature] [feature img="images/stories/demo/main3.jpg" url="#" label="Read" title="Tabbed Module" readon="Read More"]The standalone module provides you with a highly functional presentable feature that showcases your content in tabbed format along with the facility for automation or manual interaction from the user.[/feature]
Extra Content
The following statement produces the content effect in component area of the frontpage, which is using RokCandy syntax:[feature2 img="images/stories/demo/product1.jpg" title="RokAjaxSearch" label="Read More"]A powerful and functional standalone module that expands on the search facility of Joomla, utilising the wondrous power of Mootools javascript effects.[/feature2] [feature2 img="images/stories/demo/product2.jpg" title="Light & Dark" label="Read More"]Meridian has 4 inbuilt styles, these are light, blue, beige and dark. The former 3 are all lighter themes with the latter being the opposing darker style.[/feature2] [feature2 img="images/stories/demo/product3.jpg" title="Color Chooser" label="Read More"]The prolific template feature, the Color Chooser, is present in this template, in a form matching the conservative style of the template, allowing for rapid changes of style and colour. [/feature2] [feature2 img="images/stories/demo/product4.jpg" title="Multiple Dropdown Menu" label="Read More"]A new prominent feature of our sophisticated dropdown menu is the multiple column facility, allowing multiple columns to appear in the menu, as compared to the typical singular variant.[/feature2]
Video
The following statement produces the video showcase as seen on Logo Tutorial page, which is using RokCandy syntax:[video url="images/video/logo.mov" title="RokCandy Video Tutorial" img="images/stories/logo-editing-video.jpg" header="RokCandy Video Tutorial" label="Watch Now!"]Learn how to edit the template logo using Adobe Fireworks.[/video]
Read More Buttons
Read more buttons are automatically generated for content items that use the intro and main text option. However, you can easily insert them manually as witnessed on this demo. Use the following code:[readon url="insert link here"]Read More...[/readon]
Using Typography
If you are using RokCandy, you do not need to disable your content editor or enter HTML mode, simply use the RokCandy typography syntax.A guide to implementing the included Meridian typography styles and elements into your site as well as instructions for inserting typography using the HTML editor option of your WYSIWYG editor.
Video Tutorial Currently Available! Launch the Joomla Using Typography Video Tutorial now!Every RocketTheme template has its own set of content styles, these styles are known as Typography. Typography can come in a number of varying and diverse formats, ranging from simple text modifications to image insertions to improve the look, layout of your website and give it life. This tutorial will take you through the necessary steps to adding typography to your Joomla! content.
Inserting Typography with the HTML Editor
To insert the Typography into your content, you must use the HTML feature of all Joomla! content editors. The following tutorial will outline the steps in which to do this with the default Joomla! content editor, TinyMCE. Please be aware, even though there are other content editors available, all are basically the same and the steps would be just as effective if you are using another Content editor.
Please note that the following tutorial will show you how to insert HTML (typography) into Article, the same procedure is apparent for Content Items and Custom modules. You may skip steps 4 and 5 if you are using No WYSIWYG editor or if you are using RokCandy.Step 1 - Login
Login to the Joomla! Administration Control Panel. Go to www.yoursite.com/administrator. Enter the Administrator's Username and password.Step 2 - Navigation
Navigate to the Article Manager. Hover over the Content link on the top taskbar, scroll down to Article Manager.Step 3 - Article Manager
When you have selected the Article Manager link, you will be sent to the Article Manager control panel. Select either Edit (after selecting a particular content item) or New, depending on whether you want to add typography to an existing or new item.Step 4 - HTML Icon
To add typography to your content, you must enter the HTML mode of your Content editor. In the TinyMCE editor, this is an icon called "HTML", in some other content editors, it is a tab. Press the icon to enter HTML mode. This step is not necessary if you are using No WYSIWYG editor.Step 5 - HTML Mode
A popup shall appear with your content in HTML format, only if you are using TinyMCE, with other editors, a new tab may become selected. You shall do all your editing here for typography.Step 6 - Inserting HTML
You then proceed to add your HTML coding into the tab/textbox that appears in front of you. This can be any HTML such as span class typography or styled lists.Logo Editing
The following is a step by step guide to customising your Meridian logo image by replacing the logo text with your own organisation or company's name and logo.
In order to utilise the Fireworks Source PNG included with the meridian template release, you will need Adobe Fireworks. The 30-day free trial of this software as well as more information is available here at the Adobe website.Logo Editing Video Tutorial
Learn how to customise your Meridian logo using Adobe Fireworks with this detailed video tutorial.
One of the first steps of customising your new Meridian template will undoubtedly be altering the logo text to reflect the name of your company / organisation. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as the font(s) used.
The most effective way to customise the logo is to use the included Source PNG file. When opened in Adobe Fireworks, this file contains all of the Layers in the design allowing you to tweak and change any of the image elements of the template design. The following steps will help you quickly get your new logo ready to go:
Step 1
First, open the meridian-logo-source.png file in Adobe Fireworks. On the right side, you will notice a taskbar named Layers. Inside this column, a list of elements within the source will appear, divided into folders. The first is Web Layers which controls the green slices on the page that are used to export the images. Click the eye which is immediately left to the folder name Web Layers to make it invisible. This allows use to edit the logo.
Step 2
Next, double click on the logo. This will activate the text tool so you can edit the element. Highlight the entire text box with your cursor and type your text instead(such as your company name.)
You will also notice the image to the left of logo. Select these and change them if you so desire. In this guide, we shall delete it.
Step 3
Next, reactivate the Web Layers slice. As you did in the initial step, select the eye icon to make it visible and subsequently making the slices visible on the canvas. Select the logo slice, either on the canvas itself or in the Web Layers folder. If you find the slice is too small, hover your cursor the blue points around the slice and drag it to a new size.
Step 4
Before you export your logo, click on the Optimize setting in the Layer pallette and choose png8 exact. Then click on the transparency eyedropper to activate it and click on the background color in the image. That will remove the color from this part of the image giving it nice smooth edges. To export your logo, right click on the green slice that is situated above your new logo. A popup menu should appear with numerous options. The value we want to deal with is "Export Selected Slice...". As the name suggests, this option will export/save this slice only out of the entire source window.
Step 5
If you are new to Fireworks, you may be wondering why it appears that there is only one style variation in the source. This is not the case as we take advantage of the Frame features of Fireworks. You need to simply switch frames to see all the other style variation sources.There are a few ways to change frames and we will show 2 methods that you can use.
In the right column where you find the Layers toolbar including the Web Layers area, you should see another tab/toolbar named Frames. Just left click on the title Frames to enter the frames area. Then you can click on either of the frames which are named to show which style variant is on that particular frame.
The second method is the most easiest and simplistic. At the bottom of the Fireworks canvas is a row of buttons, arrows just as previous and next. Select the arrows to switch between frames.
By default, the source should set the export file format to PNG32. If this is not the case, you will need to change your Fireworks export settings. Firstly, expand the Optimise & Align taskbar in the upper right of Fireworks. From the available dropdowns, select PNG32.
Step 6
Once you have successfully edited then exported your new logo, you will need to upload it to your server. This process is best done via a FTP client such as Filezilla- Open your FTP client on your local computer.
- Login to your web server where Meridian is installed.
- Navigate to the /templates/rt_meridian_j15/images/*style* directory.
- Upload logo.png (and any other logo related images) to this directory (You may need to browse on the local panel in the FTP client to find where you have exported your logo).
- Clear your browser cache before viewing such as using the keyboard commands on Windows, Ctrl+F5.
Basic Customisation
A guide to the basic Meridian customisation options that can be configured in the template managerPreset Style
The template is bundled with 4 pre-made style variants that can be easily and quickly chosen from the template configuration. There is also an option for Custom which you will choose if you do not wish to use the preset styles. NOTE: The body style, header style, title text colour and body text colour options will not work unless you click Custom in the Preset Styles section.Colour Chooser Options
If you selected Custom in the Preset Styles option, you will now have a choice of several options to customise your sites colour scheme. Therefore, you can either manually type your desired colour into the input field or select the colour from the popup.The names of the various selections denote the area that they apply to. Click the Custom Styles button in the toolbar to output your custom style configuration into the Custom Config output box, underneath all the params. You will use these values in the styles.php file to customise your own defaults.
Display Frontpage Component
This setting allows you to select whether the frontpage area (where content items are placed) is active or not. This is useful if you wish to have an entirely modular frontpage and no article-based content.IE6 Warning
Warn your visitors using Internet Explorer 6 to upgrade to a more secure version with this toggle. This option activates a javascript based dropdown in IE6 at the top of the template where a description of why IE6 is a redundant browser is visible. The warning will only appear once as it is stored via a cookie.Font Family
You can choose which font you would like to use for your entire website, these are all web standard fonts.Template Width
This template configuration option allows you to easily change the width of the template itself, simply change the number to another pixel value.LeftColumn Width
This template configuration option allows you to easily change the width of the left column, simply change the number to another pixel value.RightColumn Width
This template configuration option allows you to easily change the width of the right column, simply change the number to another pixel value.Left Inset Width
This template configuration option allows you to easily change the width of the left inset position, simply change the number to another pixel value.Right Inset Width
This template configuration option allows you to easily change the width of the right inset position, simply change the number to another pixel value.Splitmenu Location
One of the template's menu options is splitmenu which displays the first level items in the horizontal menu bar and the 2nd in a side column module. This option allows you to choose between the left column or the right column.Default Font
This option allows you to choose what the font size will be, you have 3 options to choose from, these are small, default and large.Show Main Logo
Choose whether the logo area has the template logo image, or is the logo module position. If this option is set to no and there are no modules assigned to the logo area, it will collapse completely.Show Copyright
Choose whether the copyright area has the RocketTheme logo image, or is the footer module position. If this option is set to no and there are no modules assigned to the footer area, it will collapse completely.Show Font Controls
This setting allows you to disable the text size controls in the upper right of the template.Mootools / Javascript Compatibility
Enable or disable js compatibility mode for better compatibility with non mootools based js libraries. Warning, setting to "true" will cause several js template features to not work properly.Menu Type
Meridian is bundled with 4 menu options, 3 of which are integrated menu approaches. These are splitmenu, moomenu, suckerfish and module. Splitmenu displays the 1st level menu items in the horizontal bar and the 2nd in the side column; moomenu and suckerfish display the menu items in dropdown lists with moomenu having a javascript powered approach; and the module options turns the menu bar into the toolbar module position so you can insert modules into the area (this will disable the menu however). You can also select none so the entire horizontal menu does not appear.Drop Down Rows per Column
The maximum number of menu item rows per column. Applicable only to MooMenu and Suckerfish, as well as second+ menu levels.Drop Down Columns
The number of columns for a dropdown. Applicable only to MooMenu and Suckerfish, as well as second+ menu levels.Multi-Column Level
The menu level that is affected by the multiple column dropdown affect. Set to 0 to affect all dropdown levels or set a number greater than 0 to specify a particular level with the multiple column function. Applicable only to MooMenu and Suckerfish.Menu Name
The following parameter controls which Joomla menu is loaded for the horizontal navigation bar, by default this is mainmenu but you can change it to whatever menu such as othermenu.Menu Options
Note: RokNavMenu is an essential module for the template. It is required for the modules to work so ensure that you install it into Joomla.Meridian features an array of elegant, professional and exclusive menu systems. Here you can read an overview of the Meridian menu configuration options.
Video Tutorial Currently Available! Launch the Joomla Menu Setup Video Tutorial now!Selecting your Menu Style
Meridian allows you to choose from 4 menu modes:
- RokMooMenu - The advanced menu system based on the ever popular Suckerfish menu style, featuring mootools powered transitions and effects.
- Suckerfish - The versatile dropdown menu is an option in combination with RokMooMenu to minimize library conflicts and improve site performance.
- SplitMenu - The venerable SplitMenu is a solid choice for navigation. It works by rendering the top-level menu options horizontally, and the submenu/child items are rendered in a module on the side.
- No Menu Bar - Setting the menu type to "none" will remove the horizontal menu as well as the menu bar graphics making the header flush with the main content giving you more control over the appearance of your site.
You can designate which menu type you want to use on your site with a single control in the template configuration.
DropColumn Menu
A brand new menu function, the Multiple Drop Column ability. This applies only to MooMenu and Suckerfish and allows for multiple drop down columns instead of the typical single variant. The advanced options with this feature, allow you to choose the number of columns, specify individual menu levels which exhibit the behaviour and restrict the number of columns per row. A truly versatile new feature as showcased on this demo.The Powerful & Popular RokMooMenu
This menu has been developed from scratch using the latest and greatest MooTools JavaScript framework. The RokMooMenu is a highly advanced and fully customisable menu system. Some of the great features include:-- Hover support for IE6 using the sfHover javascript class just like in Suckerfish.
- Fully degradable to standard SuckerFish menu if javascript is not supported.
- Configurable mouse-out delay to allow for accidental mousing out of the menu.
- Completely customizable animation effects using MooTools transitions. Can be configured in X and/or Y directions.
- Support for fade-in transparency
- Experimental support for IE6 z-index bug using the iFrame hack.
Creating the dropdown menu items
To have specific menu items appear as sub items, you must assign them to the specific navigation item in which they will originate from. The following tutorial will show you how simple it is to create your ideal menu system.Step 1 - Navigation
Once you have logged into the Joomla! Administration Area, you must navigate to the Menu area. Hover over the Menu item in the taskbar to show the dropdown menu. For this example, we are going into the mainmenu but the technique is exactly the same for all menus in the Administrative area.Step 2 - The Menu Manager
You will then be transported to the Menu Manager for mainmenu. At this point, you can do two things. The first is to edit an existing menu item, which we will be doing in this tutorial or create a New menu item to be subordinate to an existing item. Click on the item you want to be part of the dropdown menu.Step 3 - Assigning a Parent Item
You can now assign the content item to the mainmenu item in which you want to be in the dropdown menu. Identify the "Parent Item" section of the manager. You will select the item in which you wish to be the parent and the source of the dropdown menu. In this example, we have selected "Home".More Articles...
Page 7 of 9
