admin

Logo Editing

17/04/2009 por admin

The following is a step by step guide to customising your SolarSentinel logo image by replacing the logo text with your own organisation or company’s name and logo.

[span class=attention]In order to utilise the Fireworks Source PNG included with the solarsentinel template release, you will need Adobe Fireworks. The 30-day free trial of this software as well as more information is available here at the Adobe website.[/span]

[video url="video/logo.mov" title="Logo Editing Video Tutorial" img="images/stories/logo-editing-video.jpg" header="Logo Editing Video Tutorial" label="Watch Now!" vwidth="450" vheight="318"]Learn how to customise your SolarSentinel logo using Adobe Fireworks with this detailed video tutorial.[/video]

[clear]

One of the first steps of customising your new SolarSentinel template will undoubtedly be altering the logo text to reflect the name of your company / organisation. RocketTheme makes this process a simple one by including both the Source PNG for the template, as well as the font(s) used.

The most effective way to customise the logo is to use the included Source PNG file. When opened in Adobe Fireworks, this file contains all of the Layers in the design allowing you to tweak and change any of the image elements of the template design. The following steps will help you quickly get your new logo ready to go:

Step 1

First, open the solarsentinel-headerfooter-source.png file in Adobe Fireworks. On the right side, you will notice a taskbar named Layers. Inside this column, a list of elements within the source will appear, divided into folders. The first is Web Layers which controls the green slices on the page that are used to export the images. Click the eye which is immediately left to the folder name Web Layers to make it invisible. This allows you to edit the logo.

Step 2

Next, double click on the logo. This will activate the text tool so you can edit the element. Highlight the entire text box with your cursor and type your text instead (such as your company name.)

You will notice the crescent icon above the logo name, you can keep it but in this guide we shall remove it.

Step 3

Next, reactivate the Web Layers slice. As you did in the initial step, select the eye icon to make it visible and subsequently making the slices visible on the canvas. Select the logo slice, either on the canvas itself or in the Web Layers folder. If you find the slice is too small, hover your cursor over the blue points around the slice and drag it to a new size.

Step 4

To export your logo, right click on the green slice that is situated above your new logo. A popup menu should appear with numerous options. The value we want to deal with is «Export Selected Slice…». As the name suggests, this option will export/save this slice only out of the entire source window.

Step 5

If you are new to Fireworks, you may be wondering why it appears that there is only one style variation in the source. This is not the case as we take advantage of the Frame features of Fireworks. You need to simply switch frames to see all the other style variation sources.

There are a few ways to change frames and we will show 2 methods that you can use.

In the right column where you find the Layers toolbar including the Web Layers area, you should see another tab/toolbar named Frames. Just left click on the title Frames to enter the frames area. Then you can click on either of the frames which are named to show which style variant is on that particular frame.

The second method is the most easiest and simplistic. At the bottom of the Fireworks canvas is a row of buttons, arrows just as previous and next. Select the arrows to switch between frames.

[span class=attention]By default, the source should set the export file format to PNG32. If this is not the case, you will need to change your Fireworks export settings. Firstly, expand the Optimise & Align taskbar in the upper right of Fireworks. From the available dropdowns, select PNG32.[/span]

Step 6

Once you have successfully edited then exported your new logo, you will need to upload it to your server. This process is best done via a FTP client such as Filezilla

Open your FTP client on your local computer.
Login to your web server where SolarSentinel is installed.
Navigate to the /templates/rt_solarsentinel_j15/images/header/*style* directory.
Upload logo.png (and any other logo related images) to this directory (You may need to browse on the local panel in the FTP client to find where you have exported your logo).
Clear your browser cache before viewing such as using the keyboard commands on Windows, Ctrl+F5.

[span class=attention]
Ensure that you are uploading the correct logo to avoid confusion if it does not change. Also take into account hosting permissions. Sometimes, hosts which are not designed for Joomla may have permissions not suited for the setup, thus, the upload will not be complete. In this case, contact your hosting provider.
[/span]

Configuration

17/04/2009 por admin

A guide to the many configurable options that can be configured in the template manager.

Preset Style
Header Style
Body Style
Background Style
Footer Style
Primary Color
Display Frontpage Component
Enable IE6 Warning	Enabled Disabled
Font Family
Enable Font Spans	Enabled Disabled
Enable Input Style	Enabled Disabled
Template Width
Left Inset Width
Right Inset Width
Choose Splitmenu Location
Font Size

Show Date	No Yes
Client Side Date	No Yes
Show Main Logo	No Yes
Show Logo Slogan Text	No Yes
Logo Slogan Text
Show Copyright Information	No Yes
Show Text Size Controls	No Yes
Show Top Button	No Yes
Enable JS Compatibility	No Yes

Menu Type
Drop Down Rows Per Column
Drop Down Columns
Multi-Column Level
Menu Name
MooMenu BGI Frame	No Yes
MooMenu Delay
MooMenu Duration
MooMenu FPS
MooMenu Transition

MooMenu Background Effect	No Yes
MooMenu Over Background Duration
MooMenu Over Background Transition
MooMenu Out Background Duration
MooMenu Out Background Transition

MooMenu Submenus Effect	No Yes
MooMenu Submenus Max Opacity (0 to 1)
MooMenu Submenu Over Background Duration
MooMenu Submenu Over Background Transition
MooMenu Submenu Out Background Duration
MooMenu Submenu Out Background Transition
MooMenu Submenu Top offset
MooMenu Submenu Right offset
MooMenu Submenu Bottom offset
MooMenu Submenu Left offset

Preset Style

The template is bundled with 10 pre-made style variants that can be easily and quickly chosen from the template configuration. There is also an option for Custom which you will choose if you do not wish to use the preset styles.

[span class=attention]NOTE: The various options will not work unless you click Custom in the Preset Styles section.[/span]

Colour Chooser Options

If you selected Custom in the Preset Styles option, you will now have a choice of several options to customise your sites colour scheme. Therefore, you can either manually type your desired colour into the input field or select the colour from the popup.

The names of the various selections denote the area that they apply to.

[span class=alert]Click the Custom Styles button in the toolbar to output your custom style configuration into the Custom Config output box, underneath all the params. You will use these values in the styles.php file to customise your own defaults.[/span]

Display Frontpage Component

This setting allows you to select whether the frontpage area (where content items are placed) is active or not. This is useful if you wish to have an entirely modular frontpage and no article-based content.

IE6 Warning

Warn your visitors using Internet Explorer 6 to upgrade to a more secure version with this toggle. This option activates a javascript based dropdown in IE6 at the top of the template where a description of why IE6 is a redundant browser is visible. The warning will only appear once as it is stored via a cookie.

Font Family

You can choose which font you would like to use for your entire website, these are all web standard fonts.

Font Spans

Set to Enable or Disable Font Spans. Font Spans refer to the multi-coloured effect on titles, such as module headers.

Input Style

Set to Enable or Disable Input Styles. This is the javascript enabled custom styling for radio icons and similar inputs such as in the Poll. You can see these icons in the params above.

Template Width

This template configuration option allows you to easily change the width of the template itself, simply change the number to another pixel value.

Left Inset Width

This template configuration option allows you to easily change the width of the left inset position, simply change the number to another pixel value.

Right Inset Width

This template configuration option allows you to easily change the width of the right inset position, simply change the number to another pixel value.

Splitmenu Location

One of the template’s menu options is splitmenu which displays the first level items in the horizontal menu bar and the 2nd in a side column module. This option allows you to choose between the left column or the right column.

Default Font

This option allows you to choose what the font size will be, you have 3 options to choose from, these are small, default and large.

Show Date

Choose whether the date, in the upper left of the template appears.

Client Side Date

Select whether the date is server based or based on the time and date of your visitors computer.

Show Main Logo

Choose whether the logo area has the template logo image, or is the logo module position. If this option is set to no and there are no modules assigned to the logo area, it will collapse completely.

Show Logo Slogan Text

Choose whether the slogan, to the right of logo appears.

Slogan Text

Enter the text you wish to appear for the slogan.

Show Copyright

Choose whether the copyright area has the RocketTheme logo image, or is the footer module position. If this option is set to no and there are no modules assigned to the footer area, it will collapse completely.

Show Text Size Controls

This setting allows you to disable the text size controls in the upper right of the template.

Show Top Button

This setting allows you to disable the top button in the lower right of the template.

Mootools / Javascript Compatibility

Enable or disable js compatibility mode for better compatibility with non mootools based js libraries. Warning, setting to «true» will cause several js template features to not work properly.

Menu Type

SolarSentinel is bundled with 4 menu options, 3 of which are integrated menu approaches. These are splitmenu, moomenu, suckerfish and module. Splitmenu displays the 1st level menu items in the horizontal bar and the 2nd in the side column; moomenu and suckerfish display the menu items in dropdown lists with moomenu having a javascript powered approach; and the module options turns the menu bar into the toolbar module position so you can insert modules into the area (this will disable the menu however). You can also select none so the entire horizontal menu does not appear.

Drop Down Rows per Column

The maximum number of menu item rows per column. Applicable only to MooMenu and Suckerfish, as well as second+ menu levels.

Drop Down Columns

The number of columns for a dropdown. Applicable only to MooMenu and Suckerfish, as well as second+ menu levels.

Multi-Column Level

The menu level that is affected by the multiple column dropdown affect. Set to 0 to affect all dropdown levels or set a number greater than 0 to specify a particular level with the multiple column function. Applicable only to MooMenu and Suckerfish.

Menu Name

The following parameter controls which Joomla menu is loaded for the horizontal navigation bar, by default this is mainmenu but you can change it to whatever menu such as othermenu.

Menu Options

17/04/2009 por admin

[span class=alert]Note: RokNavMenu is an essential module for the template. It is required for the modules to work so ensure that you install it into Joomla.[/span]

SolarSentinel features an array of elegant, professional and exclusive menu systems. Here you can read an overview of
the available menu configuration options.

[span class=attention]
Video Tutorial Currently Available!

Launch the Joomla Menu Setup Video Tutorial now![/span]

Selecting your Menu Style

SolarSentinel allows you to choose from 4 menu modes:

[list class=bullet-1][li]RokMooMenu – The advanced menu system based on the ever popular Suckerfish menu style, featuring mootools powered transitions and effects.[/li]
[li]Suckerfish – The versatile dropdown menu is an option in combination with RokMooMenu to minimize library conflicts and improve site performance.[/li]
[li]SplitMenu – The venerable SplitMenu is a solid choice for navigation. It works by rendering the top-level menu options horizontally, and the submenu/child items are rendered in a module on the side.[/li]
[li]No Menu Bar – Setting the menu type to «none» will remove the horizontal menu as well as the menu bar graphics making the header flush with the main content giving you more control over the appearance of your site.[/li][/list]

You can designate which menu type you want to use on your site with a single control in the template configuration.

DropColumn Menu

A brand new menu function, the Multiple Drop Column ability. This applies only to MooMenu and Suckerfish and allows for multiple drop down columns instead of the typical single variant. The advanced options with this feature, allow you to choose the number of columns, specify individual menu levels which exhibit the behaviour and restrict the number of columns per row. A truly versatile new feature as showcased on this demo.

The Powerful & Popular RokMooMenu

This menu has been developed from scratch using the latest and greatest MooTools JavaScript framework. The RokMooMenu is a highly advanced and fully customisable menu system. Some of the great features include:-

[list class=bullet-1][li]Hover support for IE6 using the sfHover javascript class just like in Suckerfish.[/li]
[li]Fully degradable to standard SuckerFish menu if javascript is not supported.[/li]
[li]Configurable mouse-out delay to allow for accidental mousing out of the menu.[/li]
[li]Completely customizable animation effects using MooTools transitions. Can be configured in X and/or Y directions.[/li]
[li]Support for fade-in transparency[/li]
[li]Experimental support for IE6 z-index bug using the iFrame hack.[/li][/list]

An example configuration as used in the demo:

Menu Type
Drop Down Rows Per Column
Drop Down Columns
Multi-Column Level
Menu Name
MooMenu BGI Frame	No Yes
MooMenu Delay
MooMenu Duration
MooMenu FPS
MooMenu Transition

MooMenu Background Effect	No Yes
MooMenu Over Background Duration
MooMenu Over Background Transition
MooMenu Out Background Duration
MooMenu Out Background Transition

MooMenu Submenus Effect	No Yes
MooMenu Submenus Max Opacity (0 to 1)
MooMenu Submenu Over Background Duration
MooMenu Submenu Over Background Transition
MooMenu Submenu Out Background Duration
MooMenu Submenu Out Background Transition
MooMenu Submenu Top offset
MooMenu Submenu Right offset
MooMenu Submenu Bottom offset
MooMenu Submenu Left offset

[span class=attention]For more details with diagrams, visit the Mootools documentation site[/span]

Creating the dropdown menu items

To have specific menu items appear as sub items, you must assign them to the specific navigation item in which they will originate from. The following tutorial will show you how simple it is to create your ideal menu system.

Step 1 – Navigation

Once you have logged into the Joomla! Administration Area, you must navigate to the Menu area. Hover over the Menu item in the taskbar to show the dropdown menu. For this example, we are going into the mainmenu but the technique is exactly the same for all menus in the Administrative area.

Step 2 – The Menu Manager

You will then be transported to the Menu Manager for mainmenu. At this point, you can do two things. The first is to edit an existing menu item, which we will be doing in this tutorial or create a New menu item to be subordinate to an existing item. Click on the item you want to be part of the dropdown menu.

Step 3 – Assigning a Parent Item

You can now assign the content item to the mainmenu item in which you want to be in the dropdown menu. Identify the «Parent Item» section of the manager. You will select the item in which you wish to be the parent and the source of the dropdown menu. In this example, we have selected «Home».

Installation

17/04/2009 por admin

The following is a guide that covers how to set up your new template on your Joomla site. Here you can find an overview of the files included in the SolarSentinel release and instructions on installing and activating the template in your Joomla install.

[span class=attention]
Video Tutorial Currently Available!
Launch the Joomla Template Installation Video Tutorial now!
[/span]

Downloading the necessary files

The first step is to download all the necessary files needed for installation, setup and configuration. Below is a summary of each of the available packages for the SolarSentinel release.

[list class=bullet-1][li]SolarSentinel Template (rt_solarsentinel_j15.tgz) This file is the template package you will use to install your template into Joomla.[/li]

[li]SolarSentinel Custom Extensions (solarsentinel-extensions-j15.zip) This package contains each of the individual custom extensions included in the SolarSentinel template release.[/li]

[li]SolarSentinel Source PNG(s) (solarsentinel-sources.zip) This zip contains the source PNG(s) for making modifications and customisations to the images in the template (and if applicable, the font used for the logo). You will need an image editing software (preferably Adobe/Macromedia Fireworks) to utilise the Source PNG files. [/li]

[li]SolarSentinel RocketLauncher (Joomla_RT_SolarSentinel_j15.zip) This is the RocketLauncher pack for SolarSentinel which is a complete and separate Joomla install which has the template pre-installed and configured. Similarly, the demo content is injected and the extensions are also pre-installed.[/li][/list]

Step 1 – Using the Joomla installer

Navigate to the Joomla administrator (http://yoursite.com/administrator) for your site. Along the top menu bar, go to Extensions → Install/Uninstall. Next, select the browser button and locate the rt_solarsentinel_j15.tgz package on your computer that you downloaded. Then, click Upload File & Install. After installation, an introduction page will appear with the template’s name, description and thumbnail, select Continue when this page appears. You should now see rt_solarsentinel_j15 in the list of installed templates.

Step 2 – Making SolarSentinel Default

In the Joomla Administrator, navigate to Extensions → Template Manager. You will be directed to a page which lists all the installed templates. Locate rt_solarsentinel_j15 in the list. Select the radio button / circular icon to the left of the name. Then select the Default in button menu in the top right area of the Administrator. The SolarSentinel template will now be the default template on your Joomla site.

Tutorials

17/04/2009 por admin

[tutorial url=»index.php?option=com_content&view=article&id=59&Itemid=70″ img=»images/tutorials/icon1.png» title=»Installation» label=»Read More…»]An overview of template files and instructions for installing and activating the template.[/tutorial]

[tutorial url=»index.php?option=com_content&view=article&id=60&Itemid=71″ img=»images/tutorials/icon2.png» title=»Extensions» label=»Read More…»]Learn all about the included custom modules and how to configure them for your site.[/tutorial]

[tutorial url=»index.php?option=com_content&view=article&id=61&Itemid=72″ img=»images/tutorials/icon3.png» title=»Menu Options» label=»Read More…»]An overview of the menu options including the top menu icon configuration.[/tutorial]

[tutorial url=»index.php?option=com_content&view=article&id=62&Itemid=73″ img=»images/tutorials/icon4.png» title=»Configuration» label=»Read More…»]A guide to the many configurable options that can be selected within the template manager.[/tutorial]

[tutorial url=»index.php?option=com_content&view=article&id=64&Itemid=74″ img=»images/tutorials/icon5.png» title=»Using Typography» label=»Read More…»]A guide to using the included the typography styles for your site.[/tutorial]

[tutorial url=»index.php?option=com_content&view=article&id=65&Itemid=75″ img=»images/tutorials/icon6.png» title=»Demo Content» label=»Read More…»]A look at some of the modules and techniques used in the demo content on the frontpage of this demo.[/tutorial]

[tutorial url=»index.php?option=com_content&view=article&id=63&Itemid=76″ img=»images/tutorials/icon7.png» title=»Logo Editing» label=»Read More…»]An overview for customizing your logo and replacing the logo text with your organization or company name and logo.[/tutorial]

[tutorial url=»index.php?option=com_content&view=article&id=66&Itemid=77″ img=»images/tutorials/icon8.png» title=»IE6 PNG fix» label=»Read More…»]An overview of how to utilise and understand the Internet Explorer 6 PNG fix.[/tutorial]

[contentheading]More SolarSentinel Template Tutorials[/contentheading]

Continue learning how to configure and customize the SolarSentinel template with the following guides and tutorials available in the RocketTheme members forum board.

HTML Typography

17/04/2009 por admin

This tutorial page features all the typography available with the template, showcasing them in HTML form. If you wish to use the RokCandy format, which is WYSIWYG friendly, please go to the RokCandy Typography page.

This page shows all of the typography styles and settings in action. If you would like to read more detailed information on inserting the included typography into your content, check out the Typography Tutorial.

This is a ComponentHeading

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 Header

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

This is an H2 Header

This is an H3 Header

Mauris 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 an H4 Header

This is an H5 Header

Notice Styles are shown below

This is a sample of the ‘attention’ style. Use this style to denote very important information to your users. To use this use the folllowing html: ….

This is a sample of the ‘notice’ style. Use this style to denote very important information to your users. To use this use the folllowing html: ….

This 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: ….

This is a sample of the ‘download’ style. Use this style to denote very important information to your users. To use this use the folllowing html: ….

This is a sample of the ‘approved’ style. Use this style to denote very important information to your users. To use this use the folllowing html: ….

This is a sample of the ‘media’ style. Use this style to denote very important information to your users. To use this use the folllowing html: ….

This is a sample of the ‘note’ style. Use this style to denote very important information to your users. To use this use the folllowing html: ….

This is a sample of the ‘cart’ style. Use this style to denote very important information to your users. To use this use the folllowing html: ….

This is a sample of the ‘camera’ style. Use this style to denote very important information to your users. To use this use the folllowing html: ….

This is a sample of the ‘doc’ style. Use this style to denote very important information to your users. To use this use the folllowing html: ….

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;
}

Blockquote Styles

This is a blockquote, you will want to use the following formatting: <blockquote>….</blockquote>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 blockquote, you will want to use the following formatting: <blockquote class="blue">…</blockquote> 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 blockquote, you will want to use the following formatting: <blockquote class="red">…</blockquote>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 blockquote, you will want to use the following formatting: <blockquote class="green">…</blockquote>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 blockquote, you will want to use the following formatting: <blockquote class="purple">…</blockquote>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 blockquote, you will want to use the following formatting: <blockquote class="orange">…</blockquote>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 blockquote, you will want to use the following formatting: <blockquote class="brown">…</blockquote>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 blockquote, you will want to use the following formatting: <blockquote class="grey">…</blockquote>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.

List Styles – Bullets

Below is a list with bullets. To use this style create a list in the following format: <ul class=»class name«><li>….</li><li>….</li>…</ul>

To use this style create a list in the following format: <ul class=»bullet-1«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=»bullet-2«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=»bullet-3«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=»bullet-4«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=»bullet-5«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=»bullet-6«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=»bullet-7«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=»bullet-8«><li>….</li><li>….</li>…</ul>.

List Styles – Special Icons

Below is a list with special icons. To use this style create a list in the following format: <ul class=»class name«><li>….</li><li>….</li>…</ul>

To use this style create a list in the following format: <ul class=»special-1«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-2«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-3«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-4«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-5«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-6«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-7«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-8«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-9«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-10«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-11«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-12«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-13«><li>….</li><li>….</li>…</ul>.

To use this style create a list in the following format: <ul class=» special-14«><li>….</li><li>….</li>…</ul>.

Span Styles – Number

Below is a list with number. To use this style create a list in the following format: 1[any number]

1To use this style create a list in the following format: 1.…some content….

2To use this style create a list in the following format: 2.…some content….

3To use this style create a list in the following format: 3.…some content….

1To use this style create a list in the following format: 1.…some content….

2To use this style create a list in the following format: 2.…some content….

3To use this style create a list in the following format: 3.…some content….

1To use this style create a list in the following format: 1.…some content….

2To use this style create a list in the following format: 2.…some content….

3To use this style create a list in the following format: 3.…some content….

4To use this style create a list in the following format: 3.…some content….