|
|
StylehelpDemo Content
Laatst aangepast op donderdag 14 februari 2008 18:53 zondag 29 april 2007 19:53 The Template Color Chooser ModuleThe Versatility III demo features a Color Stylechanger module that is published to the header position and appears in the Control Panel drop down tab. This is a custom module and must manually be created for you to use something similar on your own site. Basically, this module consists of a single image showing all of the available colorstyle thumbnails in a row. There is an image map that designates the links for each of the colorstyles within the image. You can create a duplicate of this module by following the directions below. To enter custom classes into your modules and content, you will first need to disable the default Joomla WYSIWYG editor as it will strip out these classes when the item is saved. You can do this from your control panel by going to Site > Global Configuration and set to No Editor -EditorClick on the image below to view the full size version, save the image to your computer (color_chooser.png) and place it into your images/stories folder. Create a new module and paste the code below in the Custom Output section. Publish the module to the header module position, set Show Title to No, and Save. 
<div style="text-align:center;margin:10px 0 0 -50px;"> <img name="color_chooser" src="images/stories/color_chooser.png" width="942" height="44" border="0" Adding a "Read More" Style Link ButtonThe Versatility III template includes custom styling to allow you to turn any link into a "Read More" style button. There are different button colors based on the section they are in, and provide a nice touch to your modules and content items. To enable this type of styling on your links, follow the directions below: To enter custom classes into your modules and content, you will first need to disable the default Joomla WYSIWYG editor as it will strip out these classes when the item is saved. You can do this from your control panel by going to Site > Global Configuration and set to No Editor -EditorInside the custom output section of your content item or custom module, structure the link you wish have display in the "Read More" styling by using the following syntax: (You can use any text you wish for the link button, in the example we are using "Read More...") <a href="www.yourlink.com" class="readon">Read More..</a> Custom Module WidthsThe Versatility III module positions in the different panels are designed to use an equal width in that each module is the same width as the others in the same panel. However, in the demo frontpage you will notice that certain modules appear wider than others, particularly the "Versatility III Key Features" and "20 Color Variations" modules at the top where "20 Color Variations" is much wider including a large graphic. You can set your own custom widths for each of your modules so that you can acheive the same effect by wrapping your module content in a <div> with a specified width. The following is an example of the format you would use. To enter custom classes into your modules and content, you will first need to disable the default Joomla WYSIWYG editor as it will strip out these classes when the item is saved. You can do this from your control panel by going to Site > Global Configuration and set to No Editor -Editor<div style="width:530px"> Your module content items </div> The "20 Color Variations" ModuleThe "20 Color Variations" module on the front page of the demo is a custom module published to the User 1 position and consists of text with a right aligned 32 bit tranparent png image and a "Read More" style link button. You can create a new custom module exactly like this one from your Admin Control Panel by going to Extensions > Module Manager and selecting the "New" button in the top right corner. In the Custom Output section of the Edit Module page, enter the following example code: To enter custom classes into your modules and content, you will first need to disable the default Joomla WYSIWYG editor as it will strip out these classes when the item is saved. You can do this from your control panel by going to Site > Global Configuration and set to No Editor -Editor<div style="width:530px"> <div class="contentheading">20 Color Variations!</div> <img src="images/stories/screen_cards.png" alt="screenshot" class="screenshot" style="margin-top:-45px" Versatility III Customization
Laatst aangepast op donderdag 14 februari 2008 18:49 dinsdag 24 april 2007 17:50  Basic Customization
Default Color StyleWith 20 exciting color styles, it can be difficult to choose just one. But you will want to choose the one that will show by default to users when they visit your site for the first time. Template WidthSometimes, one size just doesn't fit all; and Versatility III is designed to allow you to display the template in any default width you desire. All you have to do is enter the width size that is perfect for your needs. Side Column WidthAlong with the template width, you can also easily customize the width of the side column (either right or left depending on the orientation). Menu SideVersatility III features the ability to display the Splitmenu items in either a left or right hand configuration when Splitmenu is the active menu system. Default Font SizeBased on your own personal preference, or the preference of your users. Show PathwaySometimes sites just look better with no pathway, and we've provided a convenient toggle to allow you to disable this for your site Show Pull-Down PanelThe pull-down panel is a great way to put content or modules that you want to have around, but don't want them to clutter up your site. Customizing the LogoOne of the first steps of customizing your new Versatility III template will undoubtedly be altering the logo text to reflect the name of your company / organization. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as logo blanks. The most effective way to customize the logo is to use the included Source PNG file. When opened in Adobe Fireworks, this file contains all of the Layers in the design allowing you to tweak and change any of the image elements of the template design. The following steps will help you quickly get your new logo ready to go:
Versatility III Features
Laatst aangepast op zondag 29 april 2007 21:09 dinsdag 24 april 2007 17:27 Versatility III continues the strong RocketTheme tradition of full featured templates with lots of goodies and capabilities that will enable your site to stand out from the pack
Using Versatility III Typography
Laatst aangepast op donderdag 14 februari 2008 18:49 dinsdag 24 april 2007 16:49 A guide to utilizing the included Replicant typography styles and elements into your site as well as instructions for inserting typography using the HTML editor option of your WYSIWYG editor.
Every RocketTheme template has its own set of content styles, these styles are known as Typography. Typography can come in a number of varying and diverse formats, ranging from simple text modifications to image insertions to improve the look, layout of your website and give it life. This tutorial will take you through the necessary steps to adding typography to your Joomla! content. Inserting Typography with the HTML EditorTo insert the Typography into your content, you must use the HTML feature of all Joomla! content editors. The following tutorial will outline the steps in which to does this with the default Joomla! content edit, TinyMCE. Please be aware, even though there are other content editors available, all are basically the same and the steps with be just as effective if you are using another Content editor. Please note that the following tutorial will show you how to insert HTML (typography) into Article, the same precedure is apparent for Content Items and Custom modules.
Module Variations
Laatst aangepast op zondag 29 april 2007 21:13 vrijdag 13 april 2007 12:04 Versatility III provides the ability to use 8 module variations to increase the appeal of your module content. With so many different module variation choices, you can change the entire look and feel of your site just by adding these module variations. To use these you just need to add either "-hilite1", "-hilite2", "-hilite3", "-hilite4", "-hilite5", "-hilite6", "-hilite7" or "-hilite8" in the module class suffix parameter of the module in the module manager.  When you use the "-hilite1" suffix your modules will look like this: Sample Module HeaderLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.When you use the "-hilite2" suffix your modules will look like this: Sample Module HeaderLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.When you use the "-hilite3" suffix your modules will look like this: Sample Module HeaderLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.When you use the "-hilite4" suffix your modules will look like this: Sample Module HeaderLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.When you use the "-hilite5" suffix your modules will look like this: Sample Module HeaderLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.When you use the "-hilite6" suffix your modules will look like this: Sample Module HeaderLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.When you use the "-hilite7" suffix your modules will look like this: Sample Module HeaderLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.When you use the "-hilite8" suffix your modules will look like this: Sample Module HeaderLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Pull-Down Panel
Laatst aangepast op zondag 06 mei 2007 11:14 Geschreven door FuturOn | Ernst zaterdag 31 maart 2007 18:24 The new RocketTheme Pull-Down Panel uses the fantastic mootools JavaScript library and provides a very convenient way to provide functionality on your site without taking up valuable real-estate resources. On this demo site, we are using it for a style changer and a login module. During normal browsing activities, these functions are not often required, making them a perfect choice for the Pull-Down Panel
To modify how the Pull-Down Panel works, you can edit the js/roktools.js file and adjust the variables shown below: /* variables for top panel */ var panelSize = 110; var effectDuration = 750; var openString = "Open Control Panel"; var closeString = "Close Control Panel"; var transition = Fx.Transitions.circOut; The transition variable can be any of the following MooTools transitions and should be in the format ìFx.Transitions.?????î
linear
quadIn quadOut quadInOut cubicIn
cubicOut
cubicInOut quartIn quartOut quartInOut
quintIn
quintOut quintInOut sineIn sineOut
sineInOut
expoIn expoOut expoInOut circIn
circOut
circInOut elasticIn elasticOut elasticInOut
backIn
backOut backInOut bounceIn bounceOut bounceInOut Versatility III Module Positions
Laatst aangepast op zondag 29 april 2007 21:12 Geschreven door FuturOn | Ernst zaterdag 31 maart 2007 18:18 Versatility III has been constructed with an unprecedented 16 module positions. These module positions are fully collapsible meaning that if there are no modules published in a particular area, that area will not be shown. We will use as an example the advert1, user1, user2 area internally known as section1. If at least one of these modules is published on a particular page, this section will be displayed, and that module will be visible. If however, on a particular page, no modules are assigned to those 3 module positions, the entire section1 area will not be displayed. This goes for all the module positions in the template. This provides you with the maximum amount of flexibility possible. 
Versatility III Menu Options
Laatst aangepast op donderdag 14 februari 2008 18:35 zaterdag 31 maart 2007 17:39 Versatility 3 features the exciting and exclusive RokMooMenu system for the ultimate in menu functionality and style, as well as the popular and reliable RTSplitMenu. Here you can read an overview of the Versatility 3 menu configuration options. Selecting your Menu StyleVersatility 3 allows you to choose from 2 menu options:
The Powerful and Popular RokMooMenuMaking its return this month is the immensely popular RokMooMenu. This menu has been developed from scratch using the latest and greatest MooTools JavaScript framework. The RokMooMenu is a highly advanced and fully customizable menu system. It is fully accessible and degrades to a standard SuckerFish menu if JavaScript is not enabled or supported. Some of the great features include:
An example configuration as used in the demo: <script type="text/javascript">
window.addEvent('domready', function() {
new rokmoomenu($E('ul.nav'), {
bgiframe: false,
delay: 500,
animate: {
props: ['opacity', 'width', 'height'],
opts: {
duration:400,
fps: 100,
transition: Fx.Transitions.Cubic.easeOut
}
}
});
});
</script>
bgiframe- Can be true or false. Only turn on if you are having problems with IE and z-index. This feature is experimental.delay- Defaults to 500ms. This is the how long you can mouse off the menu before it vanishes.props- These are the properties that will be applied to the menu. Can be any combination of opacity, width, height. The two properties, width and height are affected by the transition defined in opts.duration- the time in ms the animation will run for.fps- speed of the animation - leave at 100 for best results.transition- any of the available MooTools transitions. See below for more details.The transition variable can be any of the following MooTools transitions and should be in the format Fx.Transitions.????? For example, " Bounce.easeIn or Bounce.easeOut or Bounce.easeInOut" produce a bouncing effect. For more details with diagrams, visit the Mootools documentation site
Using RokMooMenu Menu DropDownsAssigning Parent Items to Create Your Drop-DownsTo have specific menu items appear as sub items, you must assign them to the specific navigation item in which they will originate from. The following tutorial will show you how simple it is to create your ideal menu system.
Versatility III Styles
Laatst aangepast op donderdag 14 februari 2008 18:32 zaterdag 31 maart 2007 16:17 Versatility III comes in 20 stunning color variations to give you a variety of options to suit your varying design needs. The ability to change colors on the fly is intended for demo purposes only, you should set the following variable in the template's index.php file when you have chosen which style you intend to use. To check out the color variations either pull down the Open Control Panel tab at the top of the page, or click on one of the screenshots below:                     Versatility III Custom Modules
Laatst aangepast op donderdag 14 februari 2008 18:42 zaterdag 31 maart 2007 14:55 Installing a Versatility III Custom ModuleStep One: Installing the ModuleDownload the v3_custom_modules.zip archive from the Versatility III download section of the RocketTheme Joomla! Club. Login in to your administratior console on your Joomla! website and navigate to the Extensions menu item, and select Install/Uninstall from the dropdown menu.In the Upload Package File section, click the Choose File button and select the mod_modulename.zip inside of the module zip file you downloaded earlier. Next click the Upload FIle & Install button to install the module. Step Two: Publishing the ModuleNow the module is installed it must be published in the appropriate module position and configured to suite our needs. From the top menu, select Extensions then Module Manager. This will take you to the Site Module Manager which allows you to configure the placement and configuration of all modules in your joomla website.Installing Versatility III
Laatst aangepast op donderdag 14 februari 2008 18:40 zaterdag 31 maart 2007 11:04 This is a guide that covers how to set up your new Versatility III template on your Joomla site and configure its features, functionality, and content to look similar to the Rockettheme Versatility III Demo FrontPage.Downloading the Versatility III FilesThe first step is to download all of the files that will be needed to install your template, custom modules, as well make modifications. Here is a quick explanation of each of the available files in the Versatility III release.
Installing the Versatility III Template into JoomlaTo install the Versatility III template into your Joomla site, follow these steps:
Typography
Laatst aangepast op zaterdag 28 april 2007 13:45 woensdag 21 februari 2007 11:28 This page shows all of the typography styles and settings for Versatility III in action. If you would like to read more detailed information on inserting the included typography into your content, check out the Versatility III Typography Tutorial. This is a ComponentHeading
Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh. This is a Contentheading
Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor. This is an H1 HeaderLorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur pharetra leo sed nisl. Nunc vel nisi. Aliquam nulla. Etiam at est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus. Notice Styles are shown belowThis is a sample of the 'alert' style. Use this style to denote very important information to your users. To use this use the folllowing html: <span class="alert">....</span> This is a sample of the 'info' style. Use this style to denote pieces of information or tips for your readers and visitors. To use this use the folllowing html: <span class="info">....</span> This is a sample of the 'note' style. Use this style to denote items in your content that you would like your users to note or pay attention to. To use this use the folllowing html: <span class="note">....</span> This is a sample of the 'download' style. Use this style to denote information containing a download or information about an available download on your site. To use this use the folllowing html: <span class="download">....</span>This is an H2 HeaderProin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor. This is a sample blockquote (use <blockquote>....</blockquote>)
This is an H3 HeaderBelow is a list with checks. To use this style create a list in the following format: <ul><li class="check1">....</li><li class="check1">....</li>...</ul>
Below is a list with checks. To use this style create a list in the following format: <ul><li class="check2">....</li><li class="check2">....</li>...</ul>
Below is a list with arrows. To use this style create a list in the following format: <ul><li class="arrow1">....</li><li class="arrow1">....</li>...</ul>
Below is a list with arrows. To use this style create a list in the following format: <ul><li class="arrow2">....</li><li class="arrow2">....</li>...</ul>
Below is a list with arrows. To use this style create a list in the following format: <ul><li class="arrow3">....</li><li class="arrow3">....</li>...</ul>
Below is a list with stars. To use this style create a list in the following format: <ul><li class="star">....</li><li class="star">....</li>...</ul>
Below is a list with circles. To use this style create a list in the following format: <ul><li class="circle">....</li><li class="circle">....</li>...</ul>
Below is a regular unordered list. To use this style create a list in the following format: <ul><li>....</li><li>....</li>...</ul>
This is an H4 HeaderMauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.
This is a sample <pre>...</pre> tag:
div.modulebox-black div.bx1 {
background: url(../images/black/box_bl.png) 0 100% no-repeat;
}
div.modulebox-black div.bx2 {
background: url(../images/black/box_tr.png) 100% 0 no-repeat;
}
div.modulebox-black div.bx3 {
background: url(../images/black/box_tl.png) 0 0 no-repeat;
padding: 0;
margin: 0;
}
|
