Corvus is content centric template, built with rich media and text blocks, on a foundation of detailed design elements. The template spruces up your site with easily configurable items. Corvus features integrated styling that works with RokSprocket to create a more seamless user experience. It's also built on the powerful Gantry framework, which adds an array of additional features to improve site management and performance. NOTICE: Corvus is a Joomla 2.5 and Joomla 3.x Template. Apache 2.2+ or Microsoft IIS 7 PHP 5.3+ MySQL 5.0.4 or higher Introduction Requirements
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Corvus is content centric template, built with rich media and text blocks, on afoundation of detailed design elements. The template spruces up your site witheasily configurable items.
Corvus features integrated styling that works with RokSprocket to create a moreseamless user experience. It's also built on the powerful Gantry framework, whichadds an array of additional features to improve site management andperformance.
NOTICE: Corvus is a Joomla 2.5 and Joomla 3.x Template.
Apache 2.2+ or Microsoft IIS 7PHP 5.3+MySQL 5.0.4 or higher
Introduction
Requirements
Joomla 2.5 or 3.1+Gantry Framework
NOTE: Gantry v4.1.15+ is required for Corvus to work correctly. Formore details on the Gantry Framework, please visit its DedicatedWebsite.
Joomla 2.5 & Joomla 3.1 CompatibleResponsive Layout8 Preset Styles76 Module Positions10 Styled & Numerous Structural Module SuffixesRokSprocket Integrated StylingOptimized for RokBoosterStyled Support for Responsive K2 LayoutPowerful Gantry 4 FrameworkDropDown Menu & SplitmenuCustom Content TypographyFF, Safari, Chrome, Opera, IE8+ CompatibleHTML5, CSS3, LESS CSS
Corvus' responsive grid system is designed for desktop, tablet and smartphonesystems, each with minor modifications to ensure compatibility in each mode.
The table below shows the breakdown of screen resolutions and associateddevices, and which layout characters are then applied to each.
Label DescriptionLayoutWidth
ColumnWidth
Smartphones Standard smartphones480px andbelow
100%fluid
Smartphonesto Tablets
Larger smartphones andsmall tablets
767px andbelow
100%fluid
Tablets Larger tablets768px andabove
64px
DesktopStandard desktops andlaptops
960px andabove
80px
Large DisplayLarge desktops and high-resolution laptops
1200pxand above
100px
Responsive Layout for RokSprocket
Corvus comes with the RokSprocket extension that are built to work with aresponsive layout and support mobile touch events, such as 'swipe'.
K2 is the popular powerful content extension for Joomla! with CCK-like features.Corvus also comes with the K2 extension that is built to work with the responsivelayout.
K2 (Third Party) Responsive Layout
Joomla templates are basically the shell of your site. They're comprised of aseries of files that determine the look and feel of a site once your content andmodules have been put into place. A template determines things like fonts, colors,menu styles, navigation controls, basic layout design, and certain images such asthe header and background (in some cases). A template isn't an entire website inand of itself at all. It's more accurately described as a base on which your site'sappearance and layout are formed.
Templates offer you the ability to completely separate a site's content from itsdesign. This enables you to quickly switch between templates with only a smallamount of necessary changes in the backend versus having to completely rebuildthe site from the ground up. A CMS, like Joomla, gives you this ability.
While some templates offer a great degree of control over layout to users, otherscan be significantly more rigid. Templates built on a framework that offers a greatdeal of user customization options, like Gantry, can extend on the built-in backendoptions Joomla offers in a way that empowers the user to rearrange andreconfigure a site's layout without having to modify the template's code directly.
You can also modify an existing template to appear slightly differently dependingon which page you're accessing. For example, many sites are designed with adifferent layout for the home page than a single article page. You might not wantsome modules to appear in specific areas of your site. By duplicating the templatestyle and assigning the adjusted layout to specific pages, you can do this fairlyeasily.
There are several different ways to install a Joomla template from RocketTheme.You can start your Joomla install from scratch (including building a new database)by downloading the RocketLauncher for your desired template. This will give you
What is a Joomla Template?
How to install a Joomla template
everything you need to hit the ground running, including a preconfigured versionof the demo for the specific theme, the Gantry framework, and any extensionsrequired for the theme's demo build to work.
If you have an existing site, but haven't yet installed the Gantry library, you cangrab a bundle download that takes the standalone version a bit further by addingGantry framework.
If you have an existing site running a Gantry-enabled template, you need but todownload and install the standalone template along with any required and/orrecommended extensions listed on the template's product page.
RocketLauncher is a working copy of our demo site which you can install on yourown server and bring live within minutes. This is essentially a demo replica whichyou can modify to create a robust site that fits your individual needs.
You can find the RocketLauncher file by visiting the main template page andselecting Download. RocketLauncher packages may be available for differentversions of Joomla. This gives you a choice between the slightly older yet morewidely supported Joomla 2.5 (J25) or the newer and slightly less extension-supported Joomla 3.0+. If you have a set of extensions in mind that you wish touse on your site that don't presently support the latest version of Joomla, thenpackages labeled J25 in the download page will probably be the best choice foryou. You can always update your Joomla installation, as well as othercomponents of the site, within the Administrator area.
After you've downloaded the RocketLauncher ZIP file, you can unpack it. This willgive you a directory filled with the files you'll need to install Joomla and theRocketTheme template on your site.
Simply upload these files and subdirectories to your server's root web hostingdirectory. This is usually done via FTP/SFTP though your individual host mayhave other options available to you.
Installing a Template Using RocketLauncher
Once these files are in place, you can finish installation using your browser byvisiting the URL you have elected to have your Joomla installation installed. Thiscould be the root of your domain (http://example.com) or a subdirectory(http://example.com/joomla) depending on where you placed it in your server's filesystem.
At this point, you'll access the Joomla Web Installer to complete installation.
Assuming that you already have Joomla installed and just wish to change yourexisting site over to a RocketTheme template using Gantry Framework, thebundle installation option is probably going to be what you're looking for. Thisbundle includes the template itself in addition to Gantry, so you can hit the groundrunning with a single installation package.
Note: The Bundle template is only necessary if the Gantry Library isnot installed at /components/com_gantry .
You can find this bundle package on all Gantry-supported template downloadpages. Simply download the bundle ZIP file and install it to your existing Joomlasite.
Installing a Template Bundle
The easiest way to do this is by going to Admin → Extensions → ExtensionManager (point 1) within the Administrator area of your site.
Once you've done this, you should be at an installation page (indicated by thesidebar in the image above). From here, you'll need to select Browse (point 1)and choose your template package zip file you downloaded previously. Afteryou've made your selection, hit Upload and Install (point 2). Joomla willautomatically unzip the package and install its components for you.
Once this is done, a series of green messages will appear on the upload pageindicating that the template, and any included components, have beensuccessfully installed.
The downloads page for the template might indicate one or more extensions arerequired for it to operate properly. These extensions will be linked on thedownloads page. You can install them using the same process listed above.
Once you've successfully installed the bundle, you can navigate to Admin →Extensions → Template Manager and select the star next to your new template(point 1) to set it as the default template for the front end of your site.
The standalone template is the bare bones of the template itself. If you alreadyhave the Gantry Library installed on your site, then adding another Gantry-enabled template is just a matter of selecting the standalone ZIP file from thetemplate's downloads page and uploading it via the administrative extensionsuploader described previously.
There are several other files that you might find useful on the template's download
Installing a Standalone Template
Other Available Files
page. For example, the Source PNG(s) including some of the image filesexclusive to the template are made available so that you may customize them tomeet your individual needs.
While these files are not directly intended to be installed on your Joomla site, theycan serve as a useful resource for further customization and understanding ofwhat went in to creating the template.
One of the most important aspects of any Gantry template is its ability to be easilycustomized using the settings present in the Template Settings page. Thesesettings can be adjusted by navigating to Administration -> Template Manager -> Corvus Template. To replicate the demo, the main changes being made willhappen within the Style, Features, Layouts, and Advanced tabs.
Template Settings
This table will break down the various settings you may need to adjust in order torecreate the demo. Most of the settings under Style are adjusted automaticallywith the selection of a template preset. You can set presets using the Presetsbutton located next to the Save option at the top of the Template Settings page.
Once you've selected a Preset, these options can be further adjusted to match thedemo. Keep in mind that the Style indicated here relates to the template Style inthis menu. More information about how Styles work can be found in our Gantrydocumentation.
Default Menu Control Show: On, Type: Dropdown-Menu
Default Select a Menu Main Menu
Default Position header-b
Default Responsive Menu Selectbox
Default Enable ID Off
Default Module Cache On
Layouts
Style Option Setting
Default Top Positions Positions: 2, 8:4
Default Header Positions Positions: 2, 3:9
Default Showcase Positions Positions: 1, 12
Default Feature Positions Positions: 1, 12
Default Utility Positions Positions: 4, 3:3:3:3
Default MainTop Positions Positions: 4, 3:3:3:3
Default MainBody Positions Positions: 3, 6:3:3
Default MainBottom Positions Positions: 2, 6:6
Default Extension Positions Positions: 1, 12
Default Bottom Positions Positions: 4, 3:3:3:3
Default Footer Positions Positions: 3, 4:4:4
Default Copyright Positions Positions: 1, 12
Home MainBody Positions Positions: 3, 4:5:3
Home MainBottom Positions Positions: 2, 4:8
Advanced
Style Option Setting
Default Layout Mode Responsive
DefaultLoadTransition
Off
DefaultDisplayContent
On
DefaultMainbodyEnabled
On
Default RTL Support On
Default Page Suffix On
Default Selectivizr Off
DefaultLessCompiler
CSS Compression: On, Compile Wait: 2,Debug Header: Off
Default IE7 Redirect On
Default K2 Styling On
Style Option Setting
Home Main Menu Home
Assignments
Module Positions
Recreating features of the demo site used to show off some of the moreinteresting aspects of Corvus can be done fairly easily. All you need is the rightextensions and settings, and you should be able to reproduce most (if not all) ofthe elements found in our demo site.
Below, we'll break down some of these elements and give you the information youneed to know to recreate them on your own site using the Corvus Template.
Keep in mind that a lot of the detail that makes our demos look so good are theresult of many hours of hard work by our team, and some of them will require amoderate level of experience working with the Joomla back end. We've addedmost of these elements into the Template's core files in order to make them easilyaccessible without having to edit any code.
Recreating the Demo
Module Settings
Like any Gantry template, Corvus allows you to assign modules to specificpositions within selected overrides. This makes it possible to not only utilize thefull power of the Gantry framework, but to make each area of your site uniquelysuited to meet your user's needs.
Below, you'll find the module placement and settings for the various modulepositions as they appear on the front page of our demo. Not all of these positionassignments are unique to the front page.
We've detailed how to recreate the individual modules and features picturedabove in the links below.
1. Social Icons2. RokAjaxSearch3. FP RokSprocket Strips Showcase4. The Big Story5. FP RokSprocket - Lists6. Demo Corvus7. Latest News8. RocketLauncher Package9. Popular Features
10. Popular Templates11. FP Footer A12. Inside Corvus13. Contact Us14. FP Footer Social Button
There is also one additional module that activates as you scroll down the page(pictured above). You can find details about this particular module [here][module15].
Here is a list of RocketTheme extensions used to create the demo version ofCorvus:
Gantry Template FrameworkRokAjaxSearchRokBoxRokCommon Library (Installed with RokSprocket)RokSprocketRokCandyRokNavMenuRokBooster
All of these plugins are included with the Corvus RocketLauncher, and can bedownloaded and installed individually by going to the RocketTheme website.
The front page of the Corvus demo sits apart from the rest of the page layouts inthat it features the latest and greatest features of the blog. It's because of this thatseveral module and layout overrides were done. In this section, we'll break downthe settings you'll need to recreate elements present in the front page of the
The first thing you'll need to do in order to set your front page apart as it appearsin the demo is to create a style override. This can be done by navigating toAdministrator -> Extensions -> Template Manager and selecting the templateyou wish to change. Once you've checked the box next to the template, you canclick the Duplicate button to create a second copy of the template. This willbecome the Override while the primary copy of the template remains thedesignated Master.
Only options that are different from the Master copy will take hold on the menuitems you've assigned to the override. In this case, you'll be assigning the frontpage to the override as we have in the demo.
It would be a good idea for organization to name this override something likeCorvus - Home as it would be used only for the front page of your site.
The next step you'll need to take in creating your Template Settings override is toassign the Front Page style to the site's home page. Under the Main Menu list,you'll want to select both Home.
Doing this will assign the style to the home page. This will allow the style to coverall access scenarios that would lead a user to your site's main home page.
You can find more information about the entire override breakdown for both thefront page and our default settings in the demo by visiting the template styleportion of this tutorial.
Template Settings
Assignments
Menu Settings
In your site's main menu, you'll want to make a couple key changes in order foryour home page to appear as it does in our demo.
First, you'll need to change the Page Class setting under the Home menu PageDisplay Options submenu to sep13-home .
The social buttons found in this area of the front page are the result of the SocialIcons feature which can be activated through Template Settings. We've detailedthe specific settings used in our demo in the Template Settings area of thisguide.
To put it simply, you can navigate to Administrator -> Extensions -> Template -> Corvus -> Features and turn the Social Buttons feature on. You can insertURLs specific to your social network pages and assign this feature a position. Inour demo, the feature is assigned the top-a position.
Social Icons
The Site Search area of the front page is a mod_rokajaxsearch module that allows visitors tosearch your site using the powerful RokAjaxSearch tool.
This area of the front page is a mod_custom module. You'll find the settings usedin our demo below.
Any mod_custom (Custom HTML) modules are best handled usingeither RokPad or no editor as a WYSISYG editor can cause issueswith any code that exists in the Custom Output field.
The Big Story
Details
Option Setting
Title The Big Story
Show Title Show
Position feature-a
Status Published
Access Public
Language All
Note Blank
Enter the following in the Custom Output text editor.
<span class="rt-expanded-1"><span>The Big <a href="#">Story</a></span></span><span class="rt-expanded-2"><span>Multiple Layouts<span class="hidden-tablet">, Powered by RokSprocket</span></span></span><span class="rt-expanded-3"><a class="readon" href="#">Read More</a></span><div class="clear"></div>
Custom Output
Basic
Option Setting
Prepare Content No
Select a Background Image Blank
Advanced
Option Setting
Module Class Suffix feature hidden-phone
We used a RokSprocket module with the Lists layout to make up this area of the front page. You'll find the settings used in our demobelow.
FP RokSprocket - Lists
Details
Option Setting
Title FP RokSprocket - Lists
Show Title Hide
Access Public
Position sidebar-a
Status Published
Content Provider Joomla
Type Lists
Layout Options
Option Setting
Theme Default
Display Limit 6
Collapsible Preview Disable
Preview Length 50
Strip HTML Tags No
Previews Per Page 2
Article Details Show Author and Date
Arrow Navigation Show
Pagination Show
Autoplay Disable
Autoplay Delay 5
Image Resize Disable
Article Item Example
Option Setting
Title <span class='visible-large'>Integrated s</span><span class='hidden-large'>S</span>tyling for RokSprocket
Description RokSprocket is a powerful, multi-purpose content display module<span class="visible-large"> with multiple layouts and an advanced interface</span>.
Image Custom
Link Custom
Tags Games, Action
Article Defaults
Advanced
Option Setting
Module Class Suffix fp-roksprocket-lists nopaddingbottom
This area of the front page is a mod_custom module. You'll find the settings usedin our demo below.
Any mod_custom (Custom HTML) modules are best handled usingeither RokPad or no editor as a WYSISYG editor can cause issueswith any code that exists in the Custom Output field.
Any mod_custom (Custom HTML) modules are best handled using
Demo Corvus
either RokPad or no editor as a WYSISYG editor can cause issueswith any code that exists in the Custom Output field.
Option Setting
Title Demo Corvus
Show Title Show
Position sidebar-b
Status Published
Access Public
Language All
Note Blank
Details
Enter the following in the Custom Output text editor.
<p><strong>RocketLauncher</strong> installs a replica of the demo.</p><a href="#"><span class="rt-image-b"><img src="images/rocketlauncher/frontpage/sidebar-b/img1.jpg" alt="image"></span></a>
Option Setting
Prepare Content No
Select a Background Image Blank
Custom Output
Basic
Advanced
Option Setting
Module Class Suffix fp-sidebar-b
We used a RokSprocket module with the Tabs layout to make up this area of thefront page. You'll find the settings used in our demo below.
Latest News
Details
Option Setting
Title Latest News
Show Title Show
Access Public
Position sidebar-b
Status Published
Content Provider Simple
Type Tabs
Layout Options
Option Setting
Theme Default
Tabs Position Top
Display Limit ∞
Animation Slide and Fade
Autoplay Disable
Autoplay Delay 5
Preview Length 0
Image Resize Disable
Strip HTML Tabs No
Advanced
Option Setting
Module ClassSuffix
fp-roksprockettabs title4 nopaddingbottom
This area of the front page is a mod_custom module. You'll find the settings usedin our demo below.
Any mod_custom (Custom HTML) modules are best handled usingeither RokPad or no editor as a WYSISYG editor can cause issues withany code that exists in the Custom Output field.
RocketLauncher Package
Details
Option Setting
Title Replicate the demo with the RocketLauncher package
ShowTitle
Hide
Position mainbottom-a
Status Published
Access Public
Language All
Note Blank
Enter the following in the Custom Output text editor.
Custom Output
<h3 class="nomargintop">Replicate the <a href="#">demo</a> with the RocketLauncher package</h3><p><a href="index.php?option=com_content&view=article&id=8&Itemid=115"><span class="rt-image-b"><img src="images/rocketlauncher/frontpage/mainbottom-a/img1.jpg" alt="image"></span></a></p><p><span>The RocketLauncher package installs a full version of Joomla<span class="hidden-tablet"> with the demo sample data and sample images included</span>.</span></p><span class="readon-wrapper2"><a href="index.php?option=com_content&view=article&id=8&Itemid=115" class="readon">Read More</a></span>
Option Setting
Prepare Content No
Select a Background Image Blank
Basic
Advanced
Option Setting
Module Class Suffix fp-mainbottom-a box5
We used a RokSprocket module with the Strips layout to make up this area ofthe front page. You'll find the settings used in our demo below.
Popular Features
Details
Option Setting
Title Popular Features
Show Title Show
Access Public
Position mainbottom-b
Status Published
Content Provider Joomla
Type Strips
Layout Options
Option Setting
Theme Default
Display Limit 6
Preview Length 50
Strip HTML Tags No
Article Details Show Author and Date
Previews Per Page 3
Items Per Row 3
Arrow Navigation Show
Pagination Hide
Animation Scale Out
Autoplay Disable
Autoplay Delay 5
Image Resize Disable
Article Defaults
Option Setting
Default Link Custom
Advanced
Option Setting
Module Class Suffix fp-mainbottom-b box6
This area of the front page is a mod_custom module. You'll find the settings used inour demo below.
Any mod_custom (Custom HTML) modules are best handled using eitherRokPad or no editor as a WYSISYG editor can cause issues with any codethat exists in the Custom Output field.
Popular Templates
Details
Option Setting
Title Popular [span class="hidden-tablet"]Templates[/span]
ShowTitle
Show
Position extension-a
Status Published
Language All
Note Blank
Enter the following in the Custom Output text editor.
This area of the front page is a mod_custom module. You'll find the settings usedin our demo below.
Any mod_custom (Custom HTML) modules are best handled usingeither RokPad or no editor as a WYSISYG editor can cause issueswith any code that exists in the Custom Output field.
FP Footer A
Option Setting
Title FP Footer A
Show Title Hide
Position footer-a
Status Published
Access Public
Language All
Enter the following in the Custom Output text editor.
<p class="rt-uppercase"><span>All demo content is for <strong>sample</strong> purposes only<span class="visible-large">, intended to show a live site</span>. <span class="hidden-tablet">Use the <a href="index.php?option=com_content&view=article&id=8&Itemid=115"><strong>RocketLauncher</strong></a> for demo replication.</span> All images are copyrighted to their respective owners.</span></p>
<p class="rt-copyright-text nomarginbottom">Designed by <a href="http://www.rockettheme.com/" target="_blank">RocketTheme</a></p>
Option Setting
Prepare Content No
Select a Background Image Blank
Basic
Option Setting
Module Class Suffix fp-footer-a
Advanced
This area of the front page is a mod_custom module. You'll find the settings usedin our demo below.
Any mod_custom (Custom HTML) modules are best handled usingeither RokPad or no editor as a WYSISYG editor can cause issueswith any code that exists in the Custom Output field.
Inside Corvus
Option Setting
Title Inside Corvus
Show Title Show
Position footer-b
Status Published
Language All
Note Blank
Enter the following in the Custom Output text editor.
<div class="largemargintop largepaddingtop largemarginbottom l
This area ofthe front page is a mod_custom module. You'll find the settings used in our demobelow.
Any mod_custom (Custom HTML) modules are best handled usingeither RokPad or no editor as a WYSISYG editor can cause issueswith any code that exists in the Custom Output field.
Contact Us
Option Setting
Title Contact Us
Show Title Show
Position footer-c
Status Published
Language All
Note Blank
Enter the following in the Custom Output text editor.
This area of the front page is a mod_custom module. You'll find the settings used inour demo below.
Any mod_custom (Custom HTML) modules are best handled using eitherRokPad or no editor as a WYSISYG editor can cause issues with any codethat exists in the Custom Output field.
FP Footer Social Button
Option Setting
Title Popular [span class="hidden-tablet"]Templates[/span]
ShowTitle
Hide
Position footer-c
Status Published
Language All
Note Blank
Enter the following in the Custom Output text editor.
This area of the front page is a mod_custom module. You'll find the settings usedin our demo below.
Any mod_custom (Custom HTML) modules are best handled usingeither RokPad or no editor as a WYSISYG editor can cause issueswith any code that exists in the Custom Output field.
The effect that makes the module expand as you scroll down is the result of themodule class suffix used in the Advanced Options area of the module's settings.
Scroll Triggered Expanded Module
Details
Option Setting
Title Scroll Triggered Expanded Module
Show Title Show
Position showcase-a
Status Published
Language All
Note Blank
Enter the following in the Custom Output text editor.
Custom Output
<p>A feature of Corvus is the <strong>expanded</strong> module. Any module that has the <strong>expanded</strong> module class suffix applied to it, will expand based on window <strong>scroll</strong>. The feature is best applied in the <strong>showcase</strong> position, with a full width module, as demoed currently. The <strong>overlap</strong> effect below, is via CSS and can be customized through the <a href="http://www.gantry-framework.org/documentation/joomla/tutorials/custom_stylesheet.md">custom stylesheet process</a>, depending on your content needs.</p>
Option Setting
Prepare Content No
Select a Background Image Blank
Basic
Advanced
Option Setting
Module Class Suffix expanded rt-center
Some words used in our template's frontend are set via the language file for that template. Othercommonly modified statements (such as the copyright, Scroll To Top, and Login Panel) are setwithin Gantry and can be changed through the backend without accessing any files directly.
Below, we'll outline the two primary methods for changing custom language strings on ourtemplate's frontend.
Words that are used in the template frontend, such as Text Size are set via our language file.
1. Open en-GB.tpl_rt_(template name).ini at:<Joomla Root>/templates/rt_(template name)/language/en-GB/(various).ini
The exact name of the file varies by template, though it should be the only .ini file in thefolder.
2. Change the lower-case text in the listed settings.
We've outlined an example below.
TEXT_SIZE="Font Size"
Can be changed to:
TEXT_SIZE="Font Size"
How to Edit Template Text
Changing the Template Frontend and Backend Text
Change the Text via Gantry
Some text items are set through Gantry and can be modified in Template Manager. You'll justneed to navigate to Administrator → Extensions → Templates Manager and select yourdefault Gantry-powered template. From there, you can select the Features tab and find theappropriate field to modify.
Copyright and To-Top Scroller are two of the most frequently customized fields.
Building a responsive template is a long and detailed process that involvescoordinating all of your site's elements in a way that makes for a perfect stormallowing smooth and seemingly seamless transitions between the largest desktopbrowser windows to the smallest mobile devices.
There are several design choices we take into consideration when building ourdemos in order to demonstrate exactly what our templates are capable of, and setour users up for the best possible experience with them.
Before we get into some of the tricks we use to make our demo content look theway it does, you might want to check out these blog posts outlining our take onresponsive design.
Responsive Design: Part 1 - RocketTheme's PlanResponsive Design: Part 2 - RocketTheme's SolutionResponsive Design: Part 3 - RocketTheme's Extensions
Our responsive templates are only part of a properly-executed responsive site.Your content should be set up for success with various browser widths. Anycontent with fixed sizes could have a detrimental impact on how your page loadson various screens. Everything from your text to your images should be able toscale up or down at will.
NOTE: The explanation and the screenshots used in this tutorial arebased on the Kirigami template. These methods can be applied to anyother responsive RocketTheme template.
There are two points we need to cover in order to create responsive images.
First, you must not have fixed width and height attributed specified for any imagesplaced on your site. A max width or height is fine, but locking any image in to aparticular size will likely break your site's responsive features.
Here's an example of an image set in a way that will break the responsive layout:
Doing this locks the image at 600px by 200px, regardless of the size of the screenused to view it. To combat this issue, we provide a custom class called.rt-image1 which you can wrap your image in.
Doing this will ensure that the image is responsive and will scale proportionallywith the rest of your content.
The image's width should be matched for the container at the largest width. Let'ssee how we get the best width for the images in "RokSprocket Features" module.
Before cropping and resizing the actual image, we can use a placeholder image tocreate the large image. Placehold.it is one service which offers a quick and simpleimage placeholder. In the sample below, the image has a width/height of 1000pxby 500px.
Below, we'll take a look at how a 1000px x 500px image appears in the browser.
Now, you can resize the browser for two screen size breakdowns. You can alsouse the Chrome Developer Toolbar to check the image width. In this example, aLarge Display (>= 1200px width) displays the image at 659px.
Scaling down your browser's width to 767px or below initiates the smartphonestage of the site's responsiveness. The image width in this case becomes 478px.
From the result above, we will take the largest width, 659px. So, we can nowresize and crop the actual image to the 659px width. For the height, you mayadjust it to fit the article description. In our demo, the height of the image is 350px.This doesn't mean all of your images should be cropped or resized to a width of659px, though doing so will certainly improve the optimization of your site as it'llonly require users to download the image file at a size it will actually be presentedat.
We have some responsive grid classes that you can use to create custom widthfor your content.
We have a quick guide set up to assist in the understanding of responsive supportclasses which you can use to make content on your site appear or disappeardepending on the size of the browser window being used to display it. This allowsyou to trim around the edges where a little too much (or too little) content can
Responsive Utility Classes
make your site appear either too cluttered or bare.
These classes aren't just for whole modules. They can be used to cut out contentas it appears in a single block of text, or even some images. By adding<span class="hidden-phone"></span> to an area of text you wish to
have hidden on smartphones and other small-screen devices but presentelsewhere, you can trim this content out without losing the whole module.Otherwise, the content might be a bit crushed in the smaller screen and appearstretched (pictured below).
Below is an example paragraph you might find in an article.
<p>The main focus of the <strong>Kirigami</strong> release, is its Responsive Layout. <span class="hidden-tablet"><strong>Responsive</strong> effectively means a design that will adapt automatically to match whatever device or window size is loading it.</span></p>
The result: A leaner, more aesthetically pleasing article tease without sacrificingthe content on larger-screen devices.
Another useful feature available, via Bootstrap, is the collection of responsiveutility classes that can be used to help tweak layouts by providing a simplemethod of showing or hiding modules. Insert the following module class suffixesinto your module settings to show/hide a module for a particular mode.
ClassPhones(<=767px)
Tablets(768-959px)
Desktops(960-1199px)
Desktops(>=1200px)
visible-phone Visible Hidden Hidden Hidden
visible-tablet Hidden Visible Hidden Hidden
visible-desktop Hidden Hidden Visible Visible
visible-large Hidden Hidden Hidden Visible
hidden-phone Hidden Visible Visible Visible
hidden-tablet Visible Hidden Visible Visible
hidden-desktop Visible Visible Hidden Hidden
hidden-large Visible Visible Visible Hidden
As an example, if you wish to have a login module appear on desktop and tabletdevices, but not necessarily phones, you can place hidden-phone in theModule Class Suffix field (as pictured below). This will allow the module toremain visible on any device displaying the page at a width above 768, allowingyou to maintain the look you wish to achieve across multiple device types.
Responsive Support Classes
This feature enables you to make the most of your site without sacrificing its cleanappearance due to limitations in screen size.
Editing the logo on a RocketTheme template is fairly simple. There are twoprimary methods of getting the job done.
First, you'll have to decide whether you want to create a "default logo" that's easyto go back to after any temporary or seasonal logos, or a promotional"replacement logo".
The easiest method to use a "replacement logo" is to use the Logo Pickermethod. Alternatively, you can use the Manual Logo Change method to changeyour default logo, outright. We've outlined these two primary methods below.
The Logo Picker method essentially allows you to pick from any image in yourMedia Manager (or RokGallery) and use that in place of the logo in its associatedposition. The logo will continue to act the same way as it did when you firstinstalled the RocketLauncher and/or standalone template, though its sourceimage file will be directed to the image you've selected.
To accomplish this, you'll want to follow these steps:
1. Navigate to Administrator → Extensions → Templates Manager and
How to Edit the Logo
The Logo Picker
select the Gantry-powered RocketTheme template you're currently using asyour default. If you wish to change your logo in only a select number ofpages, you will need to either create or choose an existing template overrideto apply this change to.
2. Navigate to the Style tab.
3. Set the Logo Type to Custom.
4. Select the source you would like to use for your custom logo. This can beeither MediaManager or RokGallery, depending on what you have installedand are using to store the file.
5. Select your logo, click Insert, and Save.
Your logo should now be replaced by the image you've selected.
Note: Some templates have this option under the Features tab ratherthan Style.
Let's say you want to set a primary logo that you can go back to at any given timewithout having to reselect it as a custom logo. This can be done fairly easily byreplacing our logo image file with your own by doing a manual FTP upload to aspecific directory.
Doing this makes it a little easier to revert back to the logo you wish to have after
Manual Logo Change
a seasonal or temporary change.
Here are the steps you'll want to follow:
1. Navigate to Administrator → Extensions → Templates Manager andselect the Gantry-powered RocketTheme template you're currently using asyour default. If you wish to change your logo in only a select number ofpages, you will need to either create or choose an existing template overrideto apply this change to.
2. Navigate to the Style tab.
3. Make sure the Logo Type is set to the name of the template. For example:The Logo Type for Praxis is set to Praxis by default.
4. Take your custom logo and rename it to logo.png in your local filedirectory.
5. Upload the logo.png file to the/templates/(your RocketTheme template)/images/logo/
directory and choose to override the existing file, if prompted. Sometemplates might have additional directories for presets, light, dark, and otheradditional variables accessible via the /logo/ directory.
6. Clear your browser cache and refresh your site's home page to test thechange.
If you can not see your new logo, ensure you have uploaded it to the rightdirectory and the directory permissions are writable.
Note: Some templates have this option under the Features tab ratherthan Style.
Setting up a RokBox member login is a great way to add quick and easy visualappeal to the process of logging in for your site's members. It only takes a fewminutes to set up.
Note: Before following the instructions below, make sure you have thelatest version of RokBox Plugins for Joomla 2.5 / 3.x installed. Onceinstalled, confirm that they are enabled in the Plugin Manager bynavigating to Extension → Plugin Manager.
Here are the steps you'll want to take to set up the RokBox login for your site.
1. In your Administrator panel, navigate to Extension → Template Managerand select your default RocketTheme template.
2. In the template parameter, set the Login Panel option to On.
3. Set the position to where you would like the login button to appear on yoursite. You can also set the button text that will appear before and after amember has logged in to your site.
4. Save your changes and close the Template Manager.
5. Navigate to Extension → Module Manager and search for login. If youdon't see a module called mod_login you can create a new module andselect Login as its type.
6. Assign it to the login module position and assign it to all pages. Even ifyou don't wish to have the login button appear on all pages, this particularmodule will only appear when it is called.
7. Save your changes and publish the module.
You can also (optionally) elect to set the theme of your RokBox module to furtherenhance its appearance on your site.
You can do this via Joomla Administrator by navigating to Extensions → PluginManager → System - Rokbox and setting the right-hand Preset Themesdropdown to Clean . Hit Save and check the site to make sure everything ispublished to your liking.
The Popup Module feature is made possible with RokBox and is featured innumerous Gantry-powered RocketTheme templates. This feature enables you toposition a module within a popup for enhanced visual presentation and addedeffect.
Using this feature is fairly straightforward, and can be done with just about anymodule type. In general, a button is set in a position on your site which activatesthe popup module, loading any module set to the popup position.
Note: Before beginning any of the steps below, you should make sureyou have the latest version of RokBox Plugins installed and activatedon your site.
1. In your Administrator panel, navigate to Extension → Template Managerand select your default RocketTheme template.
2. In the Features tab, set the Popup Panel option to On.
3. Set the position to where you would like the popup activation button toappear on your site. You can also set the button text that will let the userknow what that button does.
4. Save your changes and close the Template Manager.
5. Navigate to Extension → Module Manager and create or select the module
K2 is a powerful content extension for Joomla, and we use it in our demo sites toenhance content management and presentation. While you can certainly run oneof our themes without K2 installed, we choose to use it because it is a solidextension that provides a benefit to us.
The philosophy behind K2 is to bring the best bits and pieces from WordPressand Drupal to Joomla. Where Joomla excels as a content management system(CMS), it does have points where it could be a little more user friendly, especiallyfor someone migrating from another platform.
While K2 might not completely replace Joomla's integrated article system foreveryone, it does add a number of useful tidbits that can help you make the mostof your site. Tagging, image management, comments, and other options picks upwhere Joomla leaves off with a powerful full-featured article management solution.This is in addition to its user and media management enhancements.
Below, we'll detail exactly how we set up each of our Gantry-powered templatedemos using K2.
K2 is installed the same way any other Joomla extension would be installed. Werecommend downloading it directly from the official K2 site so you have the mostupdated copy.
Once downloaded, you just need to follow the standard module installationprocedures.
Once installed a screen similar to the one pictured above should appear.
The next step you'll want to take is actually activating K2. You can do this via theTemplate Manager by navigating to Administrator -> Template Manager ->(Your Default RocketTheme Template) -> Advanced and turning the K2Styling option On (pictured below).
You might also want to check to make sure the K2 extensions are individuallyactivated by navigating to Administrator -> Extension Manager -> Manage andsearching k2 . There are about a dozen individual extensions that belong to K2which should be activated in order to allow you to take full advantage of itsfeatures.
For the purpose of our demo sites, we do make one common modification in K2'simage parameters in order to ensure that our content is displayed in a way that isboth responsive and in-line with our style preferences.
You can reach the K2 Parameters menu by navigating to Administrator ->Components -> K2 and selecting Parameters from the options in the upper-rightarea of the resulting page. From there, you'll need to select the Images tab to seethe options below.
Setting K2 Image Parameters
As pictured above, we've set the image width maximum to 850 in all of theapplicable fields. This allows our template's built-in responsive features to functionin sync with K2.
Creating categories in K2 works very similarly to the way you would do it inWordPress. You can create any number of categories and subcategories to meeta variety of article topics. For example, a food blog might have Fruit as a categoryand Oranges as a subcategory filled with recipes and tips about oranges.
To create a new category, you'll want to navigate to Administrator ->Components -> K2 -> Categories and select New from the options listed in the
Creating a Category
upper-right area of the K2 Categories screen.
Here, you'll see a page with a number of different options and fields. While thelayout options are all optional and typically work well at their default settings, youwill want to give your category a name, optionally an alias which your site willreference when building a URL for the content, a description for the category, andan image (we recommend one set to 850px or wider) which will be used to displayyour category in conjunction with our unique styling in RokSprocket, as well asother areas of your site where category listings might warrant an image and/ordescription.
Creating a subcategory works almost the exact same way as a category. The onlydifference is that you'll assign the parent category in the Add Category screen aspictured below.
Subcategories can be assigned their own description, image, and unique displayoptions. You can also add access level permissions to make them visible only toselect user groups.
K2 refers to articles as items. These items can be assigned to categories as theywould be in any other scenario on Joomla, WordPress, or Drupal. The onlydifference is that these assignments are based in K2 and not on the built-inJoomla article management system.
Creating a Subcategory
Creating an Article/Item
You have all the features of Joomla's article manager on this screen withadditional support for extra fields, images, attachments, and tags. Tags can be ahuge advantage for any site manager with a lot of content to present that needs alittle something more than simple categorization. Tags make it easy to sort andpresent content based on specific subject without putting your users through amaze of different menu items to do so. It can also make it a lot easier to locatesimilar content to recommend to readers searching for more information on thetopic.
Like any Joomla content, you will need to add K2's categories to your menusystem in order to have them appear on the main menu of your site. This is aneasy process, and it works very much the same way as it does with contentwritten in Joomla's article management system.
Simply navigate to Administrator -> Menus -> (your desired menu) -> New andselect your desired category, article, tag, or even any of the latest items in your K2
Creating a K2 Menu Item
article collection to appear in the menu as a menu item (as pictured below) as theMenu Item Type.
Everything else from this point works as it would if you were displaying contentfrom Joomla's article manager. Just remember to use K2 when you create newarticles otherwise they won't appear in the K2 portions of the menu.