Uno

Premium, Niche One Page Joomla Template


Uno - Niche & Premium One Page Joomla Template

Joomla 3.7 Quickstart package and Joomla 3.X Template Only

Author: PixelHut

Thank you for choosing our theme! We hope Uno will suit your needs in developing your site. With Uno One Page Joomla Template promoting every business, product or service. Uno is based on the Helix 3 framework and boosted up with SP Page Builder PRO with more than 40 shortcodes. All pages are optimized for desktop and mobile devices. You can develop and boost your business. We hope to use our Joomla Template for your brand new site or to redesign your existing one.

Enjoy Uno's design, features and ideas!

You can choose to install the template with its full demo package - the Quickstart package, or only the template itself. Note that we Highly Recommend the Full Demo Quickstart installation, rather than only the template itself.

1. How to install the Quickstart Demo package:

To make it easier and more clear for you we made a short video on how to install the quickstart for our Joomla templates.


2. Template Only installation:

 

All your customization (custom code) should be placed in your "Custom Style Sheet" file. This is the custom.css file. By default, the custom.css file does not exists, so you will need to create it. You need to create this file in templates/TEMPLATE-NAME/css/custom.css.

Customizations from the template settings page:

First you need to go to Joomla administration > Extensions > Template manager > and choose the template you're using (it will be called TEMPLATE-NAME - Default). You will find 9 tabs as follows:

  1. Basic (basic template options)
  2. Presets (define main color theme)
  3. Layout (template layout and module positions)
  4. Menu (menu options)
  5. Typography (define heading, menu and content fonts)
  6. Custom Code (add custom css or js)
  7. Advanced (cache and LESS settings)
  8. Blog (comments, social share and post format)
  9. Assignment (assign the template to specific menus)

1. Basic Tab:

Header:

Boxed Layout: choose between boxed or full-width layout.

Logo:

Body Background Image:

Footer:

Social Icons:

Contact Information:

Coming Soon:

Error Page:

2. Presets:

By default you have 4 preset styles with color schemes included.

Please note that all the colors will work if the LESS option from the Advanced tab is enabled! This way the LESS files will automatically generate your CSS files with those colors.

3. Layout:

By default in the Layout tab you will find the preset module positions and template layout. You can either use the created module positions or create your own module positions.

Customizing module position or entire row from the template settings:

Customize entire row settings: click on the Settings button on the right of the row you want to customize and change the options depending to your needs. Per example, you can change the row background, text color, add background image, or disable it on desktop, tablet or mobile views.

Same applies for a module position: by clicking on the 3 cogs icon you will load the settings applied to this particular module position.

4. Menu:

5. Typography:

From this tab you can choose different fonts for different headings, menu, content or add a custom font which can be assigned to specific classes.

6. Custom Code: here you can add custom lines of code if needed.

7. Advanced:

Cache Settings:

Compile LESS to CSS: with this option enalbed the CSS files will be autogenerated from the LESS files.

8. Blog:

9. Assignment: assign any of your menus to the template.

This option is used mostly when you want to display different preset on a different menu.

If you want to have a different color theme on any of your menus you need to:

Site admin > Extensions > Template Manager -> click on Uno.

In the Basic Tabs:

Header
Sticky Header: Yes

Favicon
Select your favicon and save it.

Boxed Layout
Enable No, but if you want to use the boxed version, you can just switch to Yes.

Logo
Everything is explained in Changing the Logo section in the documentation.
 

To use the presets and change colors go to:

Module Positions:

To add or rearrange modules you need to go to:

Site admin > Extensions > Template manager;
click on Uno template;
click on the Layout tab;
You can drag and drop the modules or content or create new positions/ rows.

Module variations:

Uno template comes with 9 different module title variations (Module Class Suffix):
default (leave the module class suffix empty), title1, title2, title3, title4, title5, title6, title7, title8, title9

Using SP Page Builder Heading:

By default we have added 2 custom classes, which can be used in the Custom Class field, when using SP Page Builder to add your headings. The classes are: "conference" and "makeup". They both add different styling to the H3 heading titles. You can check the demo for more information.
 

When using SP Page Builder, you can add unlimited positions directly from the page builder visual editor. Just click Add New Row and you have a new position/ row. If you want to add module positions to the template itself, you can use the below method.

Layout Builder:

You can open the layout builder from Joomla admin > Extensions > Template manager > Uno > click on the Layout tab. You can create new rows or change the columns layout of a current position. You can change both columns settings and column/ position settings.

To create new module positions you need to:

1. Open templates/uno/templateDetails.xml and locate the following lines:

<positions>
        <position>title</position>
        <position>logo</position>


2. Copy one line - per example <position>title</position> and paste it below the other one, then rename it (in this example the new position will be called "newposition"):

<positions>
        <position>title</position>
        <position>newposition</position>
        <position>logo</position>


- save and close the file

3. Open the Layout tab in the template settings > choose wherever to place the new position (the position should first have a row and then click on the cogs icon) > when you click on the cogs icon you'll see the drop down list Module Position > choose the "newposition" from the list and save.

4. Go to templates/uno/less/theme.less and add the new css style for the new position. The class of the new position should be:

#sp-newposition


5. Finally create a module and publish it in the new position.

The default Joomla editor (TinyMCE) is known for stripping the code in articles or Custom HTML modules, or any other modules that use an editor.
We recommend to use JCE as a text editor or disable the text editor at all.

1. JCE - download and install JCE from https://www.joomlacontenteditor.net/

You can turn it on by going to Site Admin > Global Configuration > Default Editor * > select "Editor - JCE" and save.
Thus, when you open an article or a module, you will see the "Toggle Editor" button, from which you can switch between HTML editor and Text editor.

EXAMPLE:
Let's say you open a module and this module is "Social Icons". When you open it with TinyMCE you won't see any code and you might think that the icons are there - if you save the code will get stripped.
Now if you have enabled JCE as a default editor and open the module, again you won't see the icons, BUT if you click on the "Toggle Editor" button the code will be displayed. You can edit it and save. Thus you will not lose any code neither from article or module.

2. No Editor - You can turn off the editor by going to Site Admin > Global Configuration > Default Editor * > select "Editor - None" and save.
Thus when you open any article or module you will see the original code and when saving no code will get stripped.

Place vector icons anywhere using an icon font. You can use the original Font Awesome code or uk-icon-* code from UI Kit component.

UI Kit component integrated in our template  is using the fantastic Font Awesome icon font, a project by Dave Gandy. Altogether Font Awesome provides more than 600 symbols and glyphs for web-related actions. Icon fonts are great, because they enable you to easily change color, size and more via CSS. They are scalable vector graphics, which means that they look great on high-resolution displays.

Usage

To apply this component, add any .uk-icon-* class to an <i> or <span> element. Et voilà, you have a vector icon, which inherits size and color just like your text does.

This is an icon

<i class="uk-icon-cog"></i>

This is an icon in a link

<a href=""><i class="uk-icon-cog"></i> ...</a>

More about Font Awesome icons you can find here: http://getuikit.com/docs/icon.html

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name.

<i class="fa fa-camera-retro"></i> fa-camera-retro


Example usage of font awesome icons as a social icons
<a class="uk-icon-button uk-icon-facebook" href="#"></a>
<a class="uk-icon-button uk-icon-twitter" href="#"></a>
<a class="uk-icon-button uk-icon-google-plus" href="#"></a>
<a class="uk-icon-button uk-icon-youtube" href="#"></a>
<a class="uk-icon-button uk-icon-linkedin" href="#"></a>
<a class="uk-icon-button uk-icon-instagram" href="#"></a>
<a class="uk-icon-button uk-icon-pinterest" href="#"></a>
<a class="uk-icon-button uk-icon-flickr" href="#"></a>
<a class="uk-icon-button uk-icon-tumblr" href="#"></a>
<a class="uk-icon-button uk-icon-dribbble" href="#"></a>

Buttons - Default Size:

<a class="uk-button" href="#">Default Button</a>
<a class="uk-button uk-button-primary" href="#">Primary Button</a>
<a class="uk-button uk-button-success" href="#">Success Button</a>
<a class="uk-button uk-button-warning" href="#">Warning Button</a>
<a class="uk-button uk-button-danger" href="#">Danger Button</a>


Buttons - Mini Size:

<a class="uk-button uk-button-mini" href="#">Default Button</a>
<a class="uk-button uk-button-primary uk-button-mini" href="#">Primary Button</a>
<a class="uk-button uk-button-success uk-button-mini" href="#">Success Button</a>
<a class="uk-button uk-button-warning uk-button-mini" href="#">Warning Button</a>
<a class="uk-button uk-button-danger uk-button-mini" href="#">Danger Button</a>



Buttons Large size:

<a class="uk-button uk-button-large" href="#">Default Button</a>
<a class="uk-button uk-button-primary uk-button-large" href="#">Primary Button</a>
<a class="uk-button uk-button-success uk-button-large" href="#">Success Button</a>
<a class="uk-button uk-button-warning uk-button-large" href="#">Warning Button</a>
<a class="uk-button uk-button-danger uk-button-large" href="#">Danger Button</a>


Buttons Groups wtih default size buttons:


<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button">Link</a> <a href="#" type="submit" class="uk-button">Button</a> <a href="#" type="submit" class="uk-button">Button</a></div>
</div>

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-primary">Link</a> <a href="#" type="submit" class="uk-button uk-button-primary">Button</a> <a href="#" type="submit" class="uk-button uk-button-primary">Button</a></div>
</div>

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-success">Link</a> <a href="#" type="submit" class="uk-button uk-button-success">Button</a> <a href="#" type="submit" class="uk-button uk-button-success">Button</a></div>
</div>

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-danger">Link</a> <a href="#" type="submit" class="uk-button uk-button-danger">Button</a> <a href="#" type="submit" class="uk-button uk-button-danger">Button</a></div>
</div>


Buttons Groups wtih large size buttons:

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-large">Link</a> <a href="#" type="submit" class="uk-button uk-button-large">Button</a> <a href="#" type="submit" class="uk-button uk-button-large">Button</a></div>
</div>

<div class="uk-margin">
<div class="uk-button-group"><a href="#" class="uk-button uk-button-primary uk-button-large">Link</a> <a href="#" type="submit" class="uk-button uk-button-primary uk-button-large">Button</a> <a href="#" type="submit" class="uk-button uk-button-primary uk-button-large">Button</a></div>
</div>


Full width button:

<p><button class="uk-button uk-button-large uk-width-1-1" type="button">Button</button></p>


Full width primary button:

<p><button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="button">Button</button></p>



Badges:

<p><span class="uk-badge uk-badge-primary">Primary</span> <span class="uk-badge uk-badge-success">Success</span> <span class="uk-badge uk-badge-warning">Warning</span> <span class="uk-badge uk-badge-danger">Danger</span> <span class="uk-badge uk-badge-percent">Percent</span> <span class="uk-badge uk-badge-notification uk-badge-primary">1</span> <span class="uk-badge uk-badge-notification uk-badge-success">2</span> <span class="uk-badge uk-badge-notification uk-badge-warning">3</span> <span class="uk-badge uk-badge-notification uk-badge-danger">4</span> <span class="uk-badge uk-badge-notification uk-badge-percent">5</span></p>

Alert Messages:


<div class="uk-alert uk-alert-success" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<p>To indicate success or a positive message add the <code>.uk-alert-success</code> class.</p>
</div>

<div class="uk-alert uk-alert-warning" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<p>To indicate a message containing a warning add the <code>.uk-alert-warning</code> class.</p>
</div>

<div class="uk-alert uk-alert-danger" data-uk-alert=""><a class="uk-alert-close uk-close"></a>
<p>To indicate an important message add the <code>.uk-alert-danger</code> class.</p>
</div>

<div data-uk-alert="" class="uk-alert uk-alert-large uk-alert-danger"><a class="uk-alert-close uk-close"></a>
<h3>Title Large Alert</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Progress Bars:

<div class="uk-progress">
<div class="uk-progress-bar" style="width: 90%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-small">
<div class="uk-progress-bar" style="width: 55%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini">
<div class="uk-progress-bar" style="width: 43%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini uk-progress-warning">
<div class="uk-progress-bar" style="width: 75%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini uk-progress-danger">
<div class="uk-progress-bar" style="width: 65%;">&nbsp;</div>
</div>
<div class="uk-progress uk-progress-mini uk-progress-success">
<div class="uk-progress-bar" style="width: 55%;">&nbsp;</div>
</div>


Modal Dialogs:

<p><button class="uk-button" data-uk-modal="{target:'#modal'}">Click Me</button>
<a href="#modal2" data-uk-modal="{center:true}">Click Me</a>
</p>
<div id="modal" class="uk-modal">
<div class="uk-modal-dialog"><a class="uk-modal-close uk-close"></a>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>
<div id="modal2" class="uk-modal">
<div class="uk-modal-dialog uk-modal-dialog-large"><a class="uk-modal-close uk-close"></a>
<h1>Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div></div>


Off-canvas Sidebars:

<p><button class="uk-button" data-uk-offcanvas="{target:'#offcanvas-1'}">Click Me</button> <a href="#offcanvas-1" data-uk-offcanvas="">Click Me</a></p>
<div id="offcanvas-1" class="uk-offcanvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="uk-panel">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>


Tooltips:

<p><button class="uk-button" data-uk-tooltip="" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'bottom'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'bottom-right'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'top'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'top-left'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'top-right'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'left'}" title="Hello!">Hover me</button>
<button class="uk-button" data-uk-tooltip="{pos:'right'}" title="Hello!">Hover me</button>
<span data-uk-tooltip="" title="Hello!">Hover me</span></p>

 

Scrollspy animations - Triggers events and animations while scrolling your page.

<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
<h3>Fade</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
<h3>Scale up</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-2-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
<h3>Scale down</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-3-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
<h3>Slide top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-2-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
<h3>Slide bottom</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4 uk-push-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
<h3>Slide right</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
<h3>Slide left</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>

<div class="uk-grid">
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300, repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600, repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="uk-width-medium-1-4">
<div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900, repeat: true}">
<h3 class="uk-panel-title">Delay</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>


Parallax usage:

You can use UI Kit Parallax code to make beautiful parallax sections. UI Kit provides a number of options that you can add to the data-uk-parallax attribute. Here are some options for the parallax component:

You can see many other variation of usage here: http://getuikit.com/docs/parallax.html

Uno template was designed to be used for One Page web site. This feature can be used both with the default Joomla modules and sections or with SP Page Builder. Because we have used SP Page Builder to create the demo pages, that are also included in the quickstart package, we will show you how to build a one page home your own. Of course you can use the quickstart, but in case you want to build everything from scratch, you can watch the following video on how to create the menu structure and content.

Stock and Free Images used in the demo site and NOT included in the download package: