Thursday March 11 , 2010
Text Size
   
ImageRestructured Layout

The structure places the main content before the side columns in the code hierarchy, which is beneficial for SEO purposes, as your primary content is crawled first by the search engines such as Google.

ImageJavascript Form Styling

Form elements, such as checkboxes and radio icons, typically inherit their styling from the browser. However, with javascript, we can modify the elements for seamless integration of the forms, into the template style.

ImageRokAjaxSearch

Ajax powered module, allowing for interactive search of both local Joomla pages and the web with its Google integration.

ImageRokTabs

Tabbed content module, perfect for maximising content exposure without sacrificing on site real estate. Built-in mootools effects.

ImageRokStories

Functional showcase module for displaying content items and their accompanying images in an interactive and versatile manner.

ImageConfigurable Controls

A series of template parameters allow you to control all aspects of the menu from type such as Fusion Menu or no menu at all, to every aspects of the Fusion Menu animations, transitions and other controls / parameters.

ImageFusion Menu

Fusion Menu, an advanced dropdown based CSS menu. It supports both mootools powered transition and animation enhancements for its dropdown as well as a script-less format with basic, animation-less dropdowns.

ImageCCK Application

K2 is a Content Construction Component (CCK) that expands the Joomla content manager well beyond its default capabilities

You need to disable the K2 Base CSS in its parameters for K2 to load the CSS from the Nexus template.

HTML Typography

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

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

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

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

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: <span class="attention">....</span> 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: <span class="notice">....</span> 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: <span class="alert">....</span> 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: <span class="download">....</span> 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: <span class="approved">....</span> 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: <span class="media">....</span> 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: <span class="note">....</span> 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: <span class="cart">....</span> 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: <span class="camera">....</span> 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: <span class="doc">....</span>
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: <span class="number-[color2]">1[any number]</span>

1To use this style create a list in the following format: <p><span class="number">1</span>....some content....</p>

2To use this style create a list in the following format: <p><span class="number">2</span>....some content....</p>

3To use this style create a list in the following format: <p><span class="number">3</span>....some content....</p>


1To use this style create a list in the following format: <p><span class="number-red">1</span>....some content....</p>

2To use this style create a list in the following format: <p><span class="number-blue">2</span>....some content....</p>

3To use this style create a list in the following format: <p><span class="number-green">3</span>....some content....</p>


1To use this style create a list in the following format: <p><span class="number-purple">1</span>....some content....</p>

2To use this style create a list in the following format: <p><span class="number-orange">2</span>....some content....</p>

3To use this style create a list in the following format: <p><span class="number-brown">3</span>....some content....</p>

4To use this style create a list in the following format: <p><span class="number-grey">3</span>....some content....</p>

Highlight Styles

This is a span that allows you to highlight words or phrases. Use the following format: <span class="highlight">...</span>

This is a span that allows you to highlight words or phrases. Use the following format: <span class="highlight-red">...</span>

This is a span that allows you to highlight words or phrases. Use the following format: <span class="highlight-blue">...</span>

This is a span that allows you to highlight words or phrases. Use the following format: <span class="highlight-green">...</span>

This is a span that allows you to highlight words or phrases. Use the following format: <span class="highlight-orange">...</span>

This is a span that allows you to highlight words or phrases. Use the following format: <span class="highlight-brown">...</span>

This is a span that allows you to highlight words or phrases. Use the following format: <span class="highlight-purple">...</span>

This is a span that allows you to highlight words or phrases. Use the following format: <span class="highlight-grey">...</span>

This is a span that allows you to highlight words or phrases. Use the following format: <span class="highlight-bold">...</span>

Inset Styles

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.You will need to use the following formatting: <span class="inset-right">...some content...</span>Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. 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.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.

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.You will need to use the following formatting: <span class="inset-left">...some content...</span>Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Sed euismod magna a nibh. Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. 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.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.


DropCap Styles

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

You will need to use the following formatting: <p><span class="dropcap">P</span></p>

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

You will need to use the following formatting: <p><span class="dropcap-red">P</span></p>

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

You will need to use the following formatting: <p><span class="dropcap-blue">P</span></p>

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

You will need to use the following formatting: <p><span class="dropcap-green">P</span></p>

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

You will need to use the following formatting: <p><span class="dropcap-purple">P</span></p>

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

You will need to use the following formatting: <p><span class="dropcap-orange">P</span></p>

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

You will need to use the following formatting: <p><span class="dropcap-brown">P</span></p>

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

You will need to use the following formatting: <p><span class="dropcap-grey">P</span></p>

Important Emphasis Styles

Sample Title This is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important"><span class="important-title">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-blue"><span class="important-title-blue">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-red"><span class="important-title-red">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-green"><span class="important-title-green">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-purple"><span class="important-title-purple">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-brown"><span class="important-title-brown">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-orange"><span class="important-title-orange">Sample Title</span>...some content...</div>

Sample TitleThis is a span that lets you place all of the content into a nice well formed section. You will need to use the following formatting: <div class="important-grey"><span class="important-title-grey">Sample Title</span>...some content...</div>

Email Campaign Management

You recognize the exciting possibilities of reaching your market through email marketing; however, you don't currently have the in-house expertise.  No worries, Enterprise Web Solutions can design and deploy a professional and effective email campaign on your behalf.

Website Management

In today's competitive market, having a presence on the web is virtual must; however, employing an in-house staff of professional web designers to keep your website fresh and relevant may not be an economic option.  Enterprise Web Solutions can help.  We offer website management solutions for even the most modest budget.

Enterprise Email Marketer

ImageEmail Marketing

When you need an affordable, profitable way to reach new customers and keep existing customers buying from you, you need our Enterprise Email Marketing solution. You can start your own email newsletter, add a signup form to your website, send automatic, personalized follow up messages and even see who opened your emails and which links they clicked!

Enterprise Shopping Cart

ImageShopping Cart

Enterprise Shopping Cart is an all-in-one e-commerce and shopping cart software platform that includes absolutely everything you need to sell online and attract more customers using the power, reach and affordability of the Internet.

Enterprise Web Design

ImageProfessional Web Design

The solution for your company's web hosting and web design needs. Enterprise Web Solutions provides quality professional web hosting and design for even the most modest budget.  We are dedicated to providing a fresh and engaging web experience for your customers/clients, one that is reflective of the brand/company image you have worked so hard to develop.