corvus documentation

120
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

Upload: pavan-kumar

Post on 28-Nov-2015

353 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: Corvus Documentation

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

Page 2: Corvus Documentation

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

Key Features

Responsive Layout

Page 3: Corvus Documentation

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

Page 4: Corvus Documentation

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

Page 5: Corvus Documentation

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

Page 6: Corvus Documentation

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

Page 7: Corvus Documentation

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

Page 8: Corvus Documentation

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.

Page 9: Corvus Documentation

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 10: Corvus Documentation

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.

Page 11: Corvus Documentation

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

Page 12: Corvus Documentation

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.

Style Option Position Setting

Default Logoheader-a

Show: On

DefaultFontSettings

Font Family: Corvus, Font Size:Default

Style

Page 13: Corvus Documentation

Style Option Position Setting

DefaultSocialButtons

top-a Show: On

Default Date top-d Show: Off

DefaultFont-Sizer

feature-b Show: Off

DefaultLoginPanel

utility-cShow: Off, Login Button Text:Member Login , Logout Button

Text: Logout

DefaultPopupPanel

utility-dShow: Off, Popup Button Text:Popup Module

Default Brandingcopyright-a

Show: Off

Default Copyrightcopyright-a

Show: Off, Text:Designed by RocketTheme

DefaultTo-TopScroller

copyright-a

Show: On

DefaultSystemMessages

drawer Show: On

DefaultResetSettings

copyright-d

Show: Off, Text:Reset Settings

DefaultGoogleAnalytics

Enable: Off

Features

Menu

Page 14: Corvus Documentation

Style Option Setting

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

Page 15: Corvus Documentation

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

Page 16: Corvus Documentation

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

Page 17: Corvus Documentation

Module Positions

Page 18: Corvus Documentation
Page 19: Corvus Documentation

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

Page 20: Corvus Documentation

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.

Page 21: Corvus Documentation

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

Page 22: Corvus Documentation

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

Recommended Extensions

Recreating the Front Page

Page 23: Corvus Documentation

Corvus template.

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

Page 24: Corvus Documentation

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 .

Page 25: Corvus Documentation

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

Page 26: Corvus Documentation

The Site Search area of the front page is a mod_rokajaxsearch module that allows visitors tosearch your site using the powerful RokAjaxSearch tool.

RokAjaxSearch

Details

Page 27: Corvus Documentation

Option Setting

Title RokAjaxSearch

Show Title Hide

Position top-b

Status Published

Access Public

Language All

Note Blank

Layout Options

Page 28: Corvus Documentation
Page 29: Corvus Documentation

Option Setting

Search Page URL index.php?option=com_search&view=search&tmpl=component

Advanced SearchPage URL

index.php?option=com_search&view=search

IncludeRokAjaxSearchdefault CSS

No

Theme Style Blue

Searchphrase Any words

Ordering Newest First

Limit 10

Results Per Page 3

Google WebSearch

No

Google BlogSearch

No

Google ImagesSearch

No

Google VideosSearch

No

Show Pagination Yes

GoogleSafeSearch Moderate

Image Size toSearch

Medium

Show Estimated Yes

Hide div id(s) Blank

Page 30: Corvus Documentation

Link to All Results Yes

Show Description Yes

Include(Category/Section)

Yes

Show Read MoreLink

Yes

Option Setting

Module Class Suffix fp-rokajaxsearch hidden-phone

Advanced

Page 31: Corvus Documentation

We used a RokSprocket module with the Strips layout to make up this area of the frontpage. You'll find the settings used in our demo below.

FP RokSprocket Strips Showcase

Details

Page 32: Corvus Documentation

Option Setting

Title FP RokSprocket Strips Showcase

Show Title Hide

Access Public

Position showcase-a

Status Published

Content Provider Joomla

Type Strips

Layout Options

Page 33: Corvus Documentation
Page 34: Corvus Documentation

Option Setting

Theme Default

Display Limit ∞

Preview Length 20

Strip HTML Tags No

Previews Per Page 3

Article Details Position Outside

Items Per Row 3

Arrow Navigation Hide

Pagination Show

Animation Randomize

Autoplay Disable

Autoplay Delay 5

Image Resize Disable

Article Item Example

Page 35: Corvus Documentation

Option Setting

Title Multiple Layouts

Description <span class="hidden-tablet">Powered by </span>RokSprocket

Image Custom

Link Custom

Tags Movies

Icon icon-film

Article Defaults

Advanced

Page 36: Corvus Documentation

|Option | Setting || :------------------ | :------------------------------- || Module Class Suffix | fp-roksprocket-strips-showcase |

Page 37: Corvus Documentation

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

Page 38: Corvus Documentation

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

Page 39: Corvus Documentation

Option Setting

Prepare Content No

Select a Background Image Blank

Advanced

Page 40: Corvus Documentation

Option Setting

Module Class Suffix feature hidden-phone

Page 41: Corvus Documentation

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

Page 42: Corvus Documentation

Option Setting

Title FP RokSprocket - Lists

Show Title Hide

Access Public

Position sidebar-a

Status Published

Content Provider Joomla

Type Lists

Layout Options

Page 43: Corvus Documentation

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

Page 44: Corvus Documentation

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

Page 45: Corvus Documentation

Option Setting

Module Class Suffix fp-roksprocket-lists nopaddingbottom

Page 46: Corvus Documentation

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

Page 47: Corvus Documentation

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

Page 48: Corvus Documentation

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

Page 49: Corvus Documentation

Option Setting

Module Class Suffix fp-sidebar-b

Page 50: Corvus Documentation

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

Page 51: Corvus Documentation

Option Setting

Title Latest News

Show Title Show

Access Public

Position sidebar-b

Status Published

Content Provider Simple

Type Tabs

Layout Options

Page 52: Corvus Documentation
Page 53: Corvus Documentation

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

Page 54: Corvus Documentation

Option Setting

Module ClassSuffix

fp-roksprockettabs title4 nopaddingbottom

Page 55: Corvus Documentation

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

Page 56: Corvus Documentation

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

Page 57: Corvus Documentation

<h3 class="nomargintop">Replicate the <a href="#">demo</a> with the RocketLauncher package</h3><p><a href="index.php?option=com_content&amp;view=article&amp;id=8&amp;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&amp;view=article&amp;id=8&amp;Itemid=115" class="readon">Read More</a></span>

Option Setting

Prepare Content No

Select a Background Image Blank

Basic

Advanced

Page 58: Corvus Documentation

Option Setting

Module Class Suffix fp-mainbottom-a box5

Page 59: Corvus Documentation

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

Page 60: Corvus Documentation

Option Setting

Title Popular Features

Show Title Show

Access Public

Position mainbottom-b

Status Published

Content Provider Joomla

Type Strips

Layout Options

Page 61: Corvus Documentation
Page 62: Corvus Documentation

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

Page 63: Corvus Documentation

Option Setting

Default Link Custom

Advanced

Page 64: Corvus Documentation

Option Setting

Module Class Suffix fp-mainbottom-b box6

Page 65: Corvus Documentation

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

Page 66: Corvus Documentation

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.

Custom Output

Page 67: Corvus Documentation

<div class="hidden-phone"> <div class="gantry-width-25 gantry-width-block"><div class="largemarginright"> <img class="rt-extension-img" alt="image" src="images/rocketlauncher/frontpage/extension/img1.png" /> </div></div>

<div class="gantry-width-25 gantry-width-block"><div class="largemarginright"> <img class="rt-extension-img" alt="image" src="images/rocketlauncher/frontpage/extension/img2.png" /> </div></div>

<div class="gantry-width-25 gantry-width-block"><div class="largemarginright"> <img class="rt-extension-img" alt="image" src="images/rocketlauncher/frontpage/extension/img3.png" /> </div></div>

<div class="gantry-width-25 gantry-width-block"><div class="largemarginleft"> <img class="rt-extension-img" alt="image" src="images/rocketlauncher/frontpage/extension/img4.png" /> </div></div> <div class="clear"></div></div>

<div class="visible-phone"> <div class="largemargintop largemarginbottom largemarginright largepaddingtop"> <img class="rt-extension-img" alt="image" src="images/rocketlauncher/frontpage/extension/img1.png" /><br /> <img class="rt-extension-img" alt="image" src="images/rocketlauncher/frontpage/extension/img2.png" /><br /> <img class="rt-extension-img" alt="image" src="images/rocketlauncher/frontpage/extension/img3.png" /><br /> <img class="rt-extension-img" alt="image" src="images/rocketlauncher/frontpage/extension/img4.png" /> </div> </div>

Page 68: Corvus Documentation

Option Setting

Prepare Content No

Select a Background Image Blank

Basic

Advanced

Page 69: Corvus Documentation

Option Setting

Module Class Suffix fp-extension horiztitle box6

Page 70: Corvus Documentation

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

Page 71: Corvus Documentation

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.

Details

Custom Output

Page 72: Corvus Documentation

<div class="rt-footer-logo-block"> <span class="rt-footer-logo"></span></div>

<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&amp;view=article&amp;id=8&amp;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

Page 73: Corvus Documentation

Option Setting

Module Class Suffix fp-footer-a

Advanced

Page 74: Corvus Documentation

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

Page 75: Corvus Documentation

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

Details

Custom Output

Page 76: Corvus Documentation

<div class="largemargintop largepaddingtop largemarginbottom largepaddingbottom"> <div class="gantry-width-50 gantry-width-block"> <ul class="fp-footer-menu rt-uppercase"> <li><a href="index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=108">Features</a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=109">Positions</a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=110">Variations</a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=111">Typography</a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=5&amp;Itemid=112">Menu<span class="hidden-tablet"> Options</span></a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=113">Extensions</a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=114">Tutorials</a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=115">Installation</a></li> </ul> </div>

<div class="gantry-width-50 gantry-width-block"> <ul class="fp-footer-menu rt-uppercase"> <li><a href="index.php?option=com_content&amp;view=article&amp;id=9&amp;Itemid=116">Logo <span class="hidden-tablet">Editing</span></a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=114"><span class="hidden-tablet">Forum</span> Guides</a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=114">Gantry</a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=10&amp;Itemid=117">Preset Styles</a></li> <li><a href="index.php?option=com_content&amp;view=article&amp;id=11&amp;Itemid=118">J! Stuff</a></li> <li><a href="index.php?option=com_users&amp;view=l

Page 77: Corvus Documentation

ogin&amp;Itemid=123"><span class="hidden-tablet">Member</span> Access</a></li> <li><a href="index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=12&amp;Itemid=124"><span class="hidden-tablet">Category</span> Blog</a></li> <li><a href="index.php?option=com_weblinks&amp;view=category&amp;id=16&amp;Itemid=125">Web Links</a></li> </ul> </div>

<div class="clear"></div></div>

Option Setting

Prepare Content No

Select a Background Image Blank

Basic

Advanced

Page 78: Corvus Documentation

Option Setting

Module Class Suffix fp-footer-b box6 hidden-phone

Page 79: Corvus Documentation

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

Page 80: Corvus Documentation

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.

Details

Custom Output

Page 81: Corvus Documentation

<div class="largemargintop largepaddingtop"> <div class="gantry-width-10 gantry-width-block hidden-phone"> <span class="icon-phone"></span> </div> <div class="gantry-width-90 gantry-width-block"> <strong><span>+1 (555) 555-555-5555</span></strong><br /> <span>+1 (555) 555-555-5556</span> </div>

<div class="clear largemarginbottom"></div>

<div class="gantry-width-10 gantry-width-block hidden-phone"> <span class="icon-home"></span> </div> <div class="gantry-width-90 gantry-width-block"> <strong><span>Corvus Theme, LLC</span></strong><br /> <span>123 Joomla! Boulevard</span><br /> <span>Seattle, WA 00000, USA</span> </div>

<div class="clear largemarginbottom"></div>

<div class="gantry-width-10 gantry-width-block hidden-phone"> <span class="icon-envelope-alt"></span> </div> <div class="gantry-width-90 gantry-width-block"> <strong><span><a href="#">[email protected]</a></span></strong> </div>

<div class="clear largemarginbottom"></div> </div>

Basic

Page 82: Corvus Documentation

Option Setting

Prepare Content No

Select a Background Image Blank

Advanced

Page 83: Corvus Documentation

Option Setting

Module Class Suffix fp-footer-c box6 hidden-phone

Page 84: Corvus Documentation

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

Page 85: Corvus Documentation

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.

Details

Custom Output

Page 86: Corvus Documentation

<div class="rt-social-buttons"> <a href="http://www.facebook.com/RocketTheme" class="social-button rt-social-button-1"> <span class="icon-facebook"></span> <span class="social-button-text">Facebook</span> </a>

<a href="https://twitter.com/rockettheme" class="social-button rt-social-button-2"> <span class="icon-twitter"></span> <span class="social-button-text">Twitter</span> </a>

<a href="https://plus.google.com/114430407008695950828/posts" class="social-button rt-social-button-3"> <span class="icon-google-plus"></span> <span class="social-button-text">gPlus</span> </a>

<a href="http://www.rockettheme.com/blog?format=feed&amp;type=rss" class="social-button rt-social-button-4"> <span class="icon-rss"></span> <span class="social-button-text">rss</span> </a> <div class="clear"></div></div>

Basic

Page 87: Corvus Documentation

Option Setting

Prepare Content No

Select a Background Image Blank

Advanced

Page 88: Corvus Documentation

Option Setting

Module Class Suffix fp-footer-social-buttons

Page 89: Corvus Documentation

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

Page 90: Corvus Documentation

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

Page 91: Corvus Documentation

<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

Page 92: Corvus Documentation

Option Setting

Module Class Suffix expanded rt-center

Page 93: Corvus Documentation

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

Page 94: Corvus Documentation

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.

Page 95: Corvus Documentation

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.

Creating Responsive Content

Responsive Images

Do Not Fix the Width and/or Height of Your Images

Page 96: Corvus Documentation

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:

<img src="path/to/your/image.jpg" width="600" height="200" alt="image" />

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.

<div class="rt-image"> <img src="path/to/your/image.jpg" alt="image" /></div>

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.

Image Width and Container Width

Page 97: Corvus Documentation

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.

Page 98: Corvus Documentation

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.

Page 99: Corvus Documentation

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.

Custom Responsive Grids

Page 100: Corvus Documentation

/* Demo Responsive Grid */.gantry-width-block {display: block; float: left;}.gantry-width-spacer {margin: 15px;}.gantry-width-20 {width: 20%;}.gantry-width-25 {width: 25%;}.gantry-width-30 {width: 30%;}.gantry-width-33 {width: 33.33%;}.gantry-width-40 {width: 40%;}.gantry-width-50 {width: 50%;}.gantry-width-60 {width: 60%;}.gantry-width-66 {width: 66.66%;}.gantry-width-70 {width: 70%;}.gantry-width-75 {width: 75%;}.gantry-width-80 {width: 80%;}

The sample implementation can be seen on the demo frontpage.

Page 101: Corvus Documentation

You may add your own custom class. With these custom classes, you can createmultiple-column content. Just make sure the total width in a row is 100%.

In small tablets, larger and standard smartphones view, those blocks will bestacked by the following.

.gantry-width-20, .gantry-width-25, .gantry-width-30, .gantry-width-33, .gantry-width-40, .gantry-width-50, .gantry-width-60, .gantry-width-66, .gantry-width-70, .gantry-width-75, .gantry-width-80 {width: 100%;}

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

Page 102: Corvus Documentation

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.

Page 103: Corvus Documentation
Page 104: Corvus Documentation

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

Page 105: Corvus Documentation

This feature enables you to make the most of your site without sacrificing its cleanappearance due to limitations in screen size.

Page 106: Corvus Documentation

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

Page 107: Corvus Documentation

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

Page 108: Corvus Documentation

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.

Page 109: Corvus Documentation

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.

How to Set Up a RokBox Member Login

Page 110: Corvus Documentation

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.

Page 111: Corvus Documentation

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

How to Use the Popup Module

Page 112: Corvus Documentation

you wish to assign to a RokBox popup.

6. Assign it to the popup module position.

7. Save your changes and publish the module.

Page 113: Corvus Documentation

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.

K2 Styling Guide

Installing K2

Page 114: Corvus Documentation

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).

Page 115: Corvus Documentation

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

Page 116: Corvus Documentation

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

Page 117: Corvus Documentation

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.

Page 118: Corvus Documentation

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

Page 119: Corvus Documentation

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

Page 120: Corvus Documentation

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.