Search

Theme Layouts | clarke Joomla

Posted in clarke Joomla Joomla Templates | Published May 19, 2012

clarke Joomla theme comes with a standard module layout and positions.

Module layouts

Module layouts define how the modules are arranged in the grid, their alignment and proportions. There are four preset module layouts - equal, double, uneven or stack:

  • equal – Each modules placed in the module position will have equal width, arranged one besides the other.
  • double – One out of the many modules placed in that position will have double the width of the rest, arranged one besides the other.
  • uneven – The modules will have varying widths, arranged one besides the other.
  • stack – The modules will have the same height, arranged one on top/below the other.
module layouts

Module Layouts

Module Positions

The module positions in blue borders allow to choose a module layout. The two available sidebars, highlighted in red, can be switched to the left or right side and their widths can easily be set in the theme administration. You can also set specific template and sidebar widths for certain pages of your site. For modules in the blue and red positions you can choose different module styles.

module positions  

Module positions

Additional Information

Customizing your theme using CSS | clarke Joomla

Posted in clarke Joomla Joomla Templates | Published May 19, 2012

In this tutorial we’ll show you, how to start customizing your theme and which tools do you need to learn to make small modifications like changing the look and colors of a theme.

Web Developer Tools

Whenever you try customizing our templates we highly recommend using Web Developer Tools like the famous Firebug plugin for Firefox. Other browsers like Chrome, Opera or Safari include very similar functionalities. Using these tools you have the possibility of easily trying out CSS styles right in your browser and inspecting existing styles to find their location in the theme’s CSS files.

Editing CSS styles directly in your browser

Bring up Firebug by right-clicking on an interesting element and choosing “Inspect Element”. On the left side you see the html-structure of your document (make sure you have the HTML-Tab enabled). Here you have the possibility to add and edit attributes and their values. Just double-click parts of the code to edit them.

customize_firebug

Even more interesting is the right side of the plugin, here you see all css-styles for the selected element. If you want to edit something just double click on it, enter your new value and press enter when you are done. You will notice that Firebug opens a new empty line so can not just edit existing styles but also add new ones. Firebug even shows you the computed style-values for the selected element, make sure you have activated the style-tab for our example.

Finding the right CSS file in your theme

As you might already have noticed, next to each css-selector (in our case #headerbar) a filename and a line number are being displayed. Just hover over it and you will see the full path to the file. To learn more about your templates directory structure have a look at {doc: directory-structure-explained text: this tutorial}.

More Resources

Here are some useful resources to get you more started with the web developer tools:

Where to put the CSS to style my custom content?

If you want to style your content, for example some custom markup inside your Joomla or WordPress articles, please use the custom.css file, located in your templates css directory.

Create your own theme style

The recommended way to customize themes is to create your own custom style. Styles are variations of the default theme and are similar to the concept of child themes in WordPress or sub themes in Drupal. All styles benefit from inheriting layouts and assets from the main theme, which allows to create minor customizations really fast. The main benefit from using a custom style is that it allows you to updated a theme without merging all your customization later. Read on {doc: create-a-new-style text: how to create a new style}

Learn the basics

In general one can say that theme customization is not an easy task. Sometimes it might not work on your first try, but if you do invest some time, things will start to do what you expect them to do. Further you don’t necessarily need a profound knowledge of web programming, but you do need to know your way around HTML and CSS. Of course if that knowledge is supported by some PHP and JavaScript skills – depending on the task – that is even better. Here are some useful resources to get you started:

Tagged

Theme Options | clarke Joomla

Posted in clarke Joomla Joomla Templates | Published May 19, 2012

Clarke Joomla template comes with different style variations to give you flexibility and variety. In addition to these styles, you can tweak several other style settings like colors and fonts right from the admin panel. Combining the different style options allows you to create your own unique theme design which are referred as Profiles. You can create your own profiles and assign them to different menu items.

General Options

On the general tab, you can define the default profile for the site, and set other general settings like compression, google tracking code and IE6 Upgrade page

profiles Options

A profile is a collection of theme settings and styles that can be customized and assigned to single or multiple pages. Profiles define how a specific page will be styled. You can have as many profiles as you like. By default the theme comes with a 8 profiles that have color settings and 4 that have page specific settings such as column width. The default profile is set to the olive style. To customize your theme profile, do the following:

  • Login to your joomla backend e.g. http://www.mysite.com/administrator and navigate to the template manager.
  • Select the clarke template link which will open the template options on the right.
  • Navigate to the profiles tab and select the profile that closely matches the colors that you’d want to use. Once you select the profile, it will load the styles, colors and settings in the fields to allow you to customize. Apart from the default profile, all other profiles have a check box besides each settings which allows you to turn on/off that particular setting. When unchecked, the profile will use the setting of the default profile. For instance if you’d want to your template to use the header font ‘Open Sans’, you can set the header font on the default profile, then when customizing the amber profile you can leave the header font setting unchecked.
  • Navigate to the general tab and set the default profile to the one you have customized.
  • Click on ‘save’ to store your config settings.

The following are the settings that can be configured per profile:

clarke-theme-config-options

Theme configuration options

System Options

The system configuration settings define the template system settings like logo and footer slogans, back to top scroller, date widget and other settings

Social Options

The social configuration settings define the social links settings of joomla blog-style articles and the social links that are displayed on the top right toolbar position.

Mobile Options

The mobile options allow you to configure if the dedicated mobile theme will be viewable on iphone/android mobile device and the position aliases to be used on the mobile theme.

Directory Structure | clarke Joomla

Posted in clarke Joomla Joomla Templates | Published May 19, 2012

The Warp framework has HTML, CSS, JavaScript and PHP helper classes to cover all aspects in theme development. It’s really portable since all framework related files are kept in a single place, a folder called warp. This folder resides directly in every theme. There are no dependencies on other components or plugins. Nothing needs to be installed or maintained separately.

Warp separates into three layers. The first layer is the core framework which provides the base CSS, a JavaScript effects library and a collection of PHP helpers. Each part of the core framework is universal and designed to work on every supported system. The second layer is the system depended layer, which provides the individual system implementation needed to integrate with a particular CMS. This layer makes Warp adapt to a certain system to form a consistent API for theme development. The third layer is the theme specific layer, this is where all the individual theme files go. It’s the working place where all the themes custom HTML, CSS, JavaScript and images are being stored.

To provide as much flexibility as possible we implemented a special file cascade into Warp. If you include any file like CSS, JS or template PHP files Warp looks successively in specific folders for the files and the first file found will be loaded. Here is the cascade:

  • theme folder
  • specific system folder, for example /warp/systems/joomla
  • warp framework folder

This gives you full flexibility to override any important theme related file. In the following we will give a short overview about the most important files if you want to customize a Warp theme.

Styles

Styles are variations of the default theme and are similar to the concept of child themes in WordPress or sub themes in Drupal. A style defines a layer after the default theme and can inherit or override resources from the parent default theme. Warp walks along the file cascade looking for the resource until it is found. This gives you full flexibility to override any file of the default theme. Each style is placed in its own directory in the themes /styles folder and can provide its own custom HTML layouts, CSS, JavaScript and images. Our {doc: create-a-new-style text: Create a new style} tutorial explains you how to create your own custom style.

Layouts

The main template file /layouts/template.php is the heart of every theme, it provides the complete HTML markup for the base theme layout. This is different from standard Joomla templates or WordPress themes where the index.php is the main template file. Second important file is the /layouts/template.config.php which includes some layout calculations and defines all the themes CSS and JavaScripts.

  • Template File: /layouts/template.php
  • Template Configuration File: /layouts/template.config.php

Modules

Modules or widgets can be displayed in different styles with additional icons and badges. The /layouts/module.php takes care of displaying all these module variations. Depending on the selected style the module.php loads the right HTML markup from predefined module templates. Further the framework comes with three commonly used module layouts equal, double and stacked, which are used to position modules next or above each other. It’s also possible to extend them with your own custom module templates and layouts.

  • Module Styles: /layouts/module.php
  • Module Layouts: /warp/layouts/modules/layouts/
  • Module Templates: /warp/layouts/modules/templates/

Stylesheets

The CSS files are divided in three different layers and are placed in their respective folders for theme specific /css, system depended /warp/systems/joomla/css and framework styles /warp/css. Including these files is really easy because Warp also uses its file helper to locate them across the different folders. Here is on overview on the different files:

  • base.css – Sets baseline defaults to reduces inconsistencies across all browsers.
  • custom.css – Use it to style your custom content. It is blank by default.
  • error.css – Defines base styles for error and offline pages
  • extensions.css – Provides a useful set of extensions css to style forms, columns and extensions
  • ie.css, ie7.css, ie8.css – Only loaded by the specific Internet Explorer version.
  • layout.css – Provides a fluid grid and helper classes to create any layout.
  • menus.css – Defines base styles for our mega drop down menu, line menu and accordion menu.
  • mobile.css – Styles the theme for mobile phones.
  • modules.css – Defines general module styles, headings, badges and icons.
  • print.css – Used when printing.
  • system.css – Defines a base style for the WordPress and Joomla system HTML markup.
  • rtl.css – Used for right-to-left language localizations.
  • style.css – Defines the main look like colors and backgrounds in one place.
  • tools.css – Provides a useful set of CSS classes to style your content like lists and boxes.

JavaScript

Warp also provides a library of JavaScript effects used in dropdown and accordion menus, the AJAX search or the mobile theme. The JavaScript files are also structured and stored in their own folders for theme specific /js, system depended /warp/systems/joomla/js and framework scripts /warp/js. All scripts are configured in a single file /js/template.js. This file is used to enable or disable effects which will be loaded with the theme.

  • Theme JavaScript: /js/template.js
  • Plugins JavaScript: /js/script.js
  • Mobile Plugins JavaScript: /js/script-mobile.js

System Markup

Every system has a set of layouts which defines the HTML markup for the core CMS output. For Joomla these are typically the HTML overrides that are used by the theme to render the content component or modules like the login or search. The Joomla 1.7 files are located in /warp/systems/joomla/layouts. In WordPress the layouts provide a HTML markup for the different pages like blog frontpage, the archive or a single post. The WordPress files are located in /warp/systems/wordpress/layouts. To keep things simple, Warp basically uses the same HTML output for all supported systems. Regardless of what you are viewing, articles of a category in Joomla’s content component or posts from a category in WordPress, Warp renders the HTML. This allows to create universal CSS rules which apply for both CMS platforms.

Tagged

Installation Guide | clarke Joomla

Posted in clarke Joomla Joomla Templates | Published May 19, 2012

There are two ways in which you can install the theme:

  • Quickstart –  a quick-launch joomla installation pack that contains all the data and extensions to replicate the live demo. (recommended)
  • single theme – install the theme in an existing Joomla installation

Installing the theme using the quickstart method

The quickstart package helps you to re-create a replica of the live demo that we have on our site. It is the recommended way for newbies or if you don’t want to go through the individual setup of each component, module or plugin. The steps to follow are as follows:

  • Upload the clarke_j25_quickstart.zip to your server using your preferred FTP software and unpack the contents to your server. A good FTP that I use is filezilla. In most cases you will unpack it under the public_html folder, wwwroot folder (windows hosting) or the root folder of your server.
  • Access your site on the browser e.g http://www.mysite.com and this should direct you to the installation prompt of your joomla installation.
  • Follow the joomla installation prompts as you would a normal joomla installation. In this step, I assume that you have some very basic joomla experience; however, if this is all new to you you can watch the setup video here
  • Once the installation is complete, delete the installation folder and your site should look exactly like the demo version

Installing the theme in an existing Joomla 2.5 installation

If you have an existing Joomla 1.7/2.5 installation, these are the steps to follow:

  • Login to your joomla backend e.g. http://www.mysite.com/administrator and navigate to the extension manager.
  • On the install tab, click on choose file on the Package File field and locate your template_j25.zip file. Click on ‘Upload & Install‘. Once the theme has installed successfully you will get a success notification.
  • Navigate to Extensions > Template manager and you should see the abana template on the list. To activate your theme, click on the default column of the abana theme (third last column) to make it the default site template.
  • You can further customize the look and feel of the template by selecting the template link to access the administration panel of the template.

Installing the components

NOTE: This is only necessary when you have an existing Joomla 2.5 installation. For the quickstart option, all the components, modules and plugins are included and installed.
To install the components, modules and plugin, do the following:
  • Extract the clarke_extensions_j25.zip to a local folder.
  • Login to your joomla backend e.g. http://www.mysite.com/administrator and navigate to the extension manager.
  • On the install tab, click on choose file on the Package File field and locate your unzipped extensions file and select one. Click on ‘Upload & Install‘. Once each extension has installed successfully you will get a success notification.
  • Repeat step 3  for all the other extensions.
Tagged

Getting Started | clarke Joomla

Posted in clarke Joomla Joomla Templates | Published May 19, 2012

Once you upload the package to your FTP, extract the files to a local folder. The package includes the following files/folders:

  • clarke_j25.zip –  the template file that you can use to install into your existing or clean joomla 2.5 installation.
  • clarke_j25_quickstart.zip – a quick-launch joomla installation pack that contains all the data and extensions to replicate the live demo.
  • clarke_image_sources.zip – PSD sources and PNGs that you can use to customize your theme.
  • clarke_extensions_j25.zip – includes a set of components, plugins and modules that have been used in the abana quickstart package. You need to unzip it first to use the bundled components, plugins and modules. The extensions included are:
    • com_acymailing – a newsletter component
    • com_zoo (lite) – a flexible and powerful content application builder to manage your content
    • rok_candy – a pretty handy component to include shortcodes into the Joomla editor
    • widgetkit (lite) – a next-generation toolkit that bundles nice widgets and plugins
    • mod_news_pro_gk4 – a nice scroller module for showcasing article or module content
    • mod_sequencejs – a content slider based on sequence js slider
    • mod_tabs_gk4 – a module to add tabs to your site
    • plugin_googlemap – a plugin that adds google maps api to your site
  • documentation –  a link to this documentation
Tagged

Template Overview | clarke Joomla

Posted in clarke Joomla Joomla Templates | Published May 18, 2012

clarke Joomla Template is an elegant business and professional Joomla Template design that has been built on a warp framework that uses the latest techniques in HTML5 and CSS3. The warp framework gives the theme an immeasurable weight of flexibility and agility, fast loading site using built in compression of files, data URIs and gzip minification and we’ve topped it up with a splash of beautiful colors ranging from bright to laid back colors. The features at a glance are:

  • Joomla 1.6, 1.7 and 2.5 Ready
  • Built on Warp framework
  • HTML5/CSS3 Technology
  • 8 Color Styles
  • 50+ module positions
  • Dedicated mobile theme
  • Image and content slider
  • Flexible columns and template widths
  • Cross browser compatible (Chrome, Safari, Opera, Firefox, IE 7-9)
  • Custom Form Elements custom UI
  • SEO friendly
  • And much, much more

Theme Styles and admin options

clarke Joomla template comes with different style variations to give you flexibility and variety. In addition to these styles, you can tweak several other style settings like colors and fonts right from the admin panel. Combining the different style options allows you to create your own unique theme design.

clarke joomla - template admin options

template admin options

Theme profiles

clarke Joomla template comes with some nice theme profiles built with different styles, colors and fonts, you can choose from in the theme administration. You can create your own profiles and even assign them to different menu items.

Theme Layouts

clarke Joomla theme comes with a standard module layout. The module positions in blue borders allow to choose a module layout which defines the module alignment and proportions: equal, double, uneven or stack. You can easily add your own module layouts. The two available sidebars, highlighted in red, can be switched to the left or right side and their widths can easily be set in the theme administration. For modules in the blue and red positions you can choose different module styles.

Tagged

Template Overview | abana Joomla

Posted in abana Joomla Joomla Templates | Published April 28, 2012

abana Joomla Template is an elegant business and professional Joomla Template design that has been built on a warp framework that uses the latest techniques in HTML5 and CSS3. The warp framework gives the theme an immeasurable weight of flexibility and agility, fast loading site using built in compression of files, data URIs and gzip minification and we’ve topped it up with a splash of beautiful colors ranging from bright to laid back colors. The features at a glance are:

  • Joomla 1.6, 1.7 and 2.5 Ready
  • Built on Warp framework
  • HTML5/CSS3 Technology
  • 8 Color Styles
  • 50+ module positions
  • Dedicated mobile theme
  • Image and content slider
  • Flexible columns and template widths
  • Cross browser compatible (Chrome, Safari, Opera, Firefox, IE 7-9)
  • Custom Form Elements custom UI
  • SEO friendly
  • And much, much more

Theme Styles and admin options

Abana Joomla template comes with different style variations to give you flexibility and variety. In addition to these styles, you can tweak several other style settings like colors and fonts right from the admin panel. Combining the different style options allows you to create your own unique theme design.

abana joomla - template admin options

template admin options

Theme profiles

Abana Joomla template comes with some nice theme profiles built with different styles, colors and fonts, you can choose from in the theme administration. You can create your own profiles and even assign them to different menu items.

Theme Layouts

abana Joomla theme comes with a standard module layout. The module positions in blue borders allow to choose a module layout which defines the module alignment and proportions: equal, double, uneven or stack. You can easily add your own module layouts. The two available sidebars, highlighted in red, can be switched to the left or right side and their widths can easily be set in the theme administration. For modules in the blue and red positions you can choose different module styles.

Note
The HTML version is also available here

Tagged

Getting Started | abana Joomla

Posted in abana Joomla Joomla Templates | Published April 28, 2012

Once you upload the package to your FTP, extract the files to a local folder. The package includes the following files/folders:

  • abana_j25.zip –  the template file that you can use to install into your existing or clean joomla 2.5 installation.
  • abana_j25_quickstart.zip – a quick-launch joomla installation pack that contains all the data and extensions to replicate the live demo.
  • abana_image_sources.zip – PSD sources and PNGs that you can use to customize your theme.
  • abana_extensions_j25.zip – includes a set of components, plugins and modules that have been used in the abana quickstart package. You need to unzip it first to use the bundled components, plugins and modules. The extensions included are:
    • com_acymailing – a newsletter component
    • com_zoo (lite) – a flexible and powerful content application builder to manage your content
    • rok_candy – a pretty handy component to include shortcodes into the Joomla editor
    • widgetkit (lite) – a next-generation toolkit that bundles nice widgets and plugins
    • mod_news_pro_gk4 – a nice scroller module for showcasing article or module content
    • mod_sequencejs – a content slider based on sequence js slider
    • mod_tabs_gk4 – a module to add tabs to your site
    • plugin_googlemap – a plugin that adds google maps api to your site
  • documentation –  a link to this documentation

Tagged

Video Tutorials | abana Joomla

Posted in abana Joomla Joomla Templates | Published April 28, 2012

How to setup your site using the quickinstall method – in 60 Seconds

Tagged

Copyright © 2012. Designed by arrowthemes. Powered by Wordpress