Log in  \/ 
x
 Use Facebook account  Use Google account
or
Register  \/ 
x
 Use Facebook account  Use Google account
or


search

Getting Started with Warp

The following tutorial was adapted from the German tutorial written by author Tom Bohacek. As a web designer and founder of Berlin's online agency B01 he has many years of experience in the development of framework based themes and uses Warp as a basis for its own templates and Joomla products. The content of the tutorial was written in June 2012 and based on the then current version of Warp (6.2) Therefore, the descriptions are still valid, but may differ in detail in later versions of the framework. We will continue to update this page as new information arises.

FOREWORD

The days of hand coding web applications in pure PHP code has passed. PHP applications are now developed using frameworks to provide a solid foundation and easier implimentation. During development, you use the same tools and features each time. So why redo the same work over again. Enter a framework. A template framework is basically an empty canvas, or base for designing a theme. Frameworks install just like normal Joomla templates, and contain all of the features you need.

The idea of ​​using frameworks for web design seemed absurd for a long time. Too scattered were the interpretations of various web browser vendors to individually design the solutions of certain ideas or functionality. The problem is aggravated by the fact that a CSS framework is something completely different as a development framework. This is primarily concerned with issues of design, the structure of the page using layout components (mostly grids), flexible typography, assistance with forms, etc. Recently, with the rise of responsive design, the respective grid system was turned on its head.

CSS frameworks should therefore help the web designer in the creation of increasingly complex web pages. I'll talk at this point neither for or against CSS framework. There are countless intelligent articles on the web, which illuminate the pros and cons.

Joomla template developers have, however, developed  their own frameworks for the production of templates to make creation as streamlined and effective as possible. Some use or were inspired by the common CSS frameworks. You have to remember that the CSS is only a fraction of the work. It's also about a lot PHP code to generate all the possible menu structures, module versions, javascript widgets, layout variations, compression techniques, etc.

Each template framework also includes either a private or familiar CSS framework. For example, RocketTheme's Gantry uses the 960 grid system. Almost every template club has made ​​its template framework publicly available. After we had tested most of them, we decided to use the Warp Framework from YOOtheme.

Warp offers a layout component but also a grid system. It is full featured, lightweight and well engineered framework. We think you will find it suprigsingly simple to use. We feel that Warp has the best mix of features and simplicity to meet the needs of the widest range of users.

 

PREREQUISITES

To benefit from this tutorial should have good to very good CSS-knowledge. PHP and Javascript-knowledge are not mandatory, but certainly help. In any case, you should have already developed a simple Joomla template and have a pretty good understanding of how Joomla works.

OBJECTIVE

The goal of this tutorial is not  to show you how to create a complete Joomla template from sctratch, but rather how to create/customize a template using the Warp framework.

 

joomla installationTEMPLATE INSTALLATION - LET'S BEGIN

This tutorial requires a fresh Joomla 2.5.x installation with the default demo content installed. Here you can see how the page looks fresh Joomla after installation.  The template, which is active by default after installation, is Beez2. To start, we will replace with the warp master template. You can download here: http://www.yootheme.com/themes/downloads  Install the file, called yoo_master_j25.zip, in the Extension Manager in the Joomla administrator. After successful installation, set the the yoo_master as the default template using the template manager.

 

warp plain

When you refresh the site, you should see something like the image seen here. A very sad sight, is not it? Not even a navigation module is visible. Behind this barren view is hidden a massive potential of possibilities! This is where the work to make this soulless shell a template begins. For this tutorial we will use (almost) all the possibilities offered by the Warp framework to build a presentable template.

 

Before we get down to it, we want to clarify some things. You are now using the master template and the Warp framework. But what exactly does that mean? Well, it's pretty easy. YOOtheme has, over the years, like any other template manufacturer, created a basic framework for the creation of templates. This basic framework is called the Warp framework. The bare framework resides in the directory / warp of your installed master template.

The master template is a bare bones template based on the framework. The master template is more a foundation from which you can create your own template and can modify.

 

The word "modify" plays a big role. Thanks to the Warp framework we dont' have to worry about things like browser compatibility, flexibility or the grid. All the Warp code located in the warp folder handles this for us so we can focus entirely on the good things in web design.

 


 

WARP OVERRIDES

overrides warp framework

To understand how and why we are about to make adjustments, you must understand the override approach of the Warp framework. Overrides are what you should know as a Joomla template developer actually. If not, we refer you to (now a bit outdated but still valid) tutorial content to override . So how do overrides work on the Warp Framework? Let us look at the graph to understand.

The Warp framework level is the deepest level for all the basic resources (CSS, JS, etc.). These resources take care of all the unpleasant things  like browser compatibility, flexible menus and modules, the grid, and many other things that you never or rarely need to adapt.

Second, The Theme-level stands for the current template. In our case, the current template is the master template. This level includes resources that are specific to this template.

 

Third, In my opinion the most exciting level, is custom styles. This builds on the template elements, but allows variations (styles) of the current template/theme. These styles can be so profound that it can not only change the entire look, but also enable other functional variations.

 

Let us look at the directory structure of the master template:

warp directories

It is important to understand what is behind this structure. Let's go at it piece by piece.

  • /css: Here are the theme CSS files level.
  • /fonts: Here are the template level fonts.
  • /html: The content overrides for the core Joomla views.
  • /images: Here are the template-level images.
  • /js: Here are the javascript files for the current template.
  • /layouts: One of the most important directories. Here are the PHP files at the tempalte/theme level. Among other things here is the index.php of your template (except that it is called template.php).
  • /styles: As the name suggests, here are the styles of your template, also the third level from our image. Within the Styles directory, other directories are allowing your template/theme to have unique and individual styles.
  • /warp: This is where the Warp framework. You can seek inspiration from it, but you never change files in this directory. That way we can easily upgrade trhe framework when needed.

 

Within this directory structure is the ability to have inherited or "overridden" styles. Much like CSS, styles in the Style folder take precidence over default styles. Of course, you may have no idea how exactly how to do this, yet, but you'll soon see practical examples.

There are two ways we can go about creating your own styles. One way would be to modify the current theme (master template). This path is an adjustment to the second level, the theme level. Essentailly you are directy editing the current tempaltes styles.

But, the better and prefrerd method (for easy updates to the template in the future) is to leave everything intacted and create a "template" on the third level, the styles level. Actually, we don't create a new template/theme, we just add our own style. But as styles can be very powerful, we use it to build our "custom" version of the instaleld template.

 


TEMPLATE STYLES  - A NEW STYLE "NICE"

style switch

I assume that you are using the Web design tools such as Firebug or the developer tools on Chrome. OK, so let's get started with some simple tasks - we want to change the background color! But where do we do that exactly?

 

Since we want to create your own style, we need to communicate this to the Warp framework. For this we create in the /styles directory, a folder named nice . Here our style will develop piece by piece. Once the folder is created,  go to the Joomla backend. Edit the tempalte in the Template Manager. Click on the yoo_master - Default Template to configure it.

 

Edit the tab Profiles . Here we change the style of default to Nice and then save.

Back in the front end we notice when we reloaded the page ... nothing has changed. Why? We have only created the folder to hold our style. We now need toadd some files and folder to shape it.

 

joomla body css

To find out what CSS we need to adjust, we use the developer tools to select the BODY element. Here we can find in which CSS files the style is defined. First there was the base.css: Line 9, which the /css/ base.css refers file. Then there are the base.css: line 60 andbase.css: see line 21, both on /warp/css/base.css reference file.

 

We want to edit the files (2nd level), but we don't want to edit the base.css from

the /css folder. As we described above, this is a folder, which refers to the second level. We want to make adjustments on the third level (styles) to override the second level. For this, we copy the css/base.css file into a folder of style/ So in the nice folder, we create a new sub directory called CC, then add our copy of the base.css. It looks like this: styles/nice/css/base.css.


When you re-load the page now, you notice that something is wrong. The H1 heading "Joomla" is suddenly too small. What has happened? Explore the base.css from your /nice/css folder. There you will find the top row:

 

@import url(../warp/css/base.css);

 

This makes sure that the base.css from the first level, (Warp framework) is loaded. This worked until this call came from the second level, which is the /css directory. But it is now become a style and so we need to adjust the line as follows:

 

@import url(../../../warp/css/base.css);

 

We now adjust the BODY - element to add our background color:

 

body { 
font: normal 14px/20px Arial, Helvetica, sans-serif;
color: #444;
background-color: #F2F0DF;
}

 

If you now refresh the page, you will see a new background color. Congratulations! You have just created your first Warp override.

Summary

We have the base.css in which the BODY element is described in the second level (/css) in the third level (/css/nice/css) copied and adapted. Thus we have an override for file base.css created. The Warp framework no longer leverages the base.css from the second level, instead it uses the third (and of course the first level). If you have understood this, I still want to describe two alternative routes for this adaptation.

The base.css file which we copied includes several other CSS instructions. We may want to adjust these not. We could therefore adapt the file as follows:

@import url(../../../warp/css/base.css);

@import url(../../../css/base.css);
body {

font: normal 14px/20px Arial, Helvetica, sans-serif;
color: #444;
background-color:#F2F0DF;
}

This file contains only the BODY element, which we want to adapt. The rest we have removed. By adding the line @ import url (../../../css/base.css)is now, unlike before,adding the base.css from the template/theme level (level 2). So again: First the base.css loaded the first level (Warp Framework), then the second level (Theme/Template) and then the third styles level.

Once you understand this hierarchy, you can easily make CSS adjustments without editing the core template (level 2) or changing Warp (level 1). Simply copy the respective CSS files from the /css folder to your styles/css folder. As you can see, there are many other files like modules.css, menus.css and system.css. Understanding how to use the different CSS files only for the purposes for which they are intended is important. This will keep everything organized and you will always know where you can find specific instructions if you want to customize it.

 


warp layout positionsMODULE POSITIONS

Moving on. Our "template" has now been given a background color, but otherwise not much has happened. Once we add a couple of modules, the site will begin to take shape. We provide an overview of the possible module positions for the Warp Framework.

 

As you can see, there are plenty of ways to place modules. Of course, you can at any time, add your own module positions. Using the Warp Module layout features, the blue positions can be customized further. We'll get to that later.

 

So now we know the possible module positions. If you used a fresh Joomla install, with the Beez template, module positions such as position-7 are installed. If you choose, you can uninstall any Beez template, the Atomic template and backend Hathor template in the Extensions Manager.

 

 

 

 

 

 

 

joomla modules 1

 

In the Module Manager, we place a few key modules. Make sure that the modules are visible on all pages and set to public, if this is not already the case.

  • The Main Menu to position menu
  • The Top Menu position on toolbar-r
  • The sample menu to position sidebar-b
  • The Footer module position footer
  • The Smart Search Module position on search
  • The Breadcrumbs module position breadcrumbs


If you've done everything correctly, your page should look like on the right.

That's better. This makes it a little more complete.

joomla modules2

 

 

 




Now create and place the following modules:

  • Custom HTML module with a pretty picture on location top-a
  • The Who's Online Module position on bottom-a
  • The Latest Users Module position on bottom-a
  • The Newsflash module position inside bottom-a
  • The login module to position menu
  • The Most Read Articles module on position innertop
  • The Web Links module on position innertop


The page should now look like on the right.



 


 

 

 


 

template parameter generalTEMPLATE CONFIGURATION

Now that we have something like a website, we want to view the existing template parameters. Using the template parameters, we control the appearance and functionality of the template from the backend. So let's move to the Template Manager and click on the master template.

Now we see the same options as the right picture.

 

The settings of Warp based templates are divided into two areas:

General and Profiles. The Mobile area from theWarp Framework version  below 6.2+ has disappeared. Responsive capabilities have been added to provide the ability to support all devices without a seperate mobile template.  The General Settings area changes affect the template regardless of the active profile.  Now the Profiles section.

 

template parameter profiles

The Profiles Settings area only affects the currently selected profile. Here we have our new "Nice" profile selected. So what are profiles? Think of an individual settings that you can shape however you want. You can create multiple styles which can be assigned to different profiles and different pages, giving you the freedom to style pages or sections of the website however you like.

 

Imagine, your website has a menu item that leads to a page that contains a large Google Map. Unlike the rest of the site, both module positions sidebar-a and sidebar-b should be hidden to allow room for the entrire map. Here is a reason to create a new profile. You can create a new profile, called "Map"  and disable sidebar-a and sidebar-b and assign this profile to the Map page. So you create the link Add a profile named "Map", configure it as needed, and save it. Under Assigned pages , you can now assign this profile to the menu of Map. Now you have a page which is structured differently than the rest of your website.

 

If you have ever used a template based on Warp, you are already aware of the possibilities of this approach. Profiles are very powerful and one of the greatest attributes of this framework. Later in the tutorial, I'll describe how you can define your own template parameter. 

 

 

 

 

module layouts 1Let's look at what one of module layouts can do. I am assuming that you are in the Profiles area, and have selected the default profile with the Nice Style is selected.

 

In the Layout area of the parameter settings, you can set the modules to behave in certain ways. This can be on Double , Equal or stack. Let's try it out directly. Set the parameters Inner top layout to double and save. Previously we saw this module position set to "equal". Meaning all modules were equal width. We had 2, so they are each 50% wide.

 

 module layouts 2


Now, after our change, the following has happened:

Double means that the width of the first module will be doubled in the position. Now the Most Read Artticle occupies 66% and the Weblinks only 33%. But what if you prefer the links have double-wide module instead of the Most Read Articles module? It's simple - just change in the Joomla Module Manager, the order of the two modules.

 

 

 Stack module layout in warp

Here we test the stack module layout.

The modules are stacked instead od side by side. The module layout feature is for me one of the examples of the wonderful pragmatism of the Warp framework. Several frameworks offer countless module positions. Often 60 or more module positions are offered. With the module layout feature , this is unnecessary. Each of these settings can achieve the layout that is needed. For those who want more options for module positioning and formatting, the framework offers complete customization possibilities to which we will cover later.

 

Now you are wondering how that little graphic in the Web Links is added (the little Twitter icon next to the title and the New icon on the top right)

 

 


module suffix

MODULE STYLES

The Warp framework leverages module class suffix for individual formatting of modules. What suffixes are available, are defined by the developers and will be provided to you from them.

Basically, you have to imagine the approach as a definition of variables. The first word is the variable name and the second the value. If we want to have the Twitter icon, we define icon-twitter as classes suffix. For New Icon (also called badge ) we add badge-new . The module suffixes you define in the advanced options of the module. In the picture on the right, you can see an example in the web links module.

Before we introduce a separate parameter, I must first go back a bit. The positioning and formatting of the modules is defined in large part in the above mentioned /layouts/module.php file. The wonderful thing is that we can modify this file by override too if we choose. Copy this file to your /styles/nice/layouts/ folder. Now with the use of the nice Styles, we are no longer using the modules.php on the second level, but instead are using our own on the third level (our own style). These override techniques are a very important aspect of working with the Warp framework and you should understand the underlying mechanisms in order to take full advantage.

For those who are familiar with PHP, the content is modules.php sufficient to understand the workings behind it. For everyone else I will give an introduction based on two small examples.

In modules.php you see the following lines:

foreach (array('suffix', 'style', 'color', 'badge', 'icon', 'dropdownwidth') as $var) { $$var = isset($params[$var]) ? $params[$var] : null; 
}
module suffix color


Here you can see which suffixes are treated in this file. Among other things, we see the suffix color  So we extend our module to use the class suffixcolor-color1

 

 

 

 

 

The source code of our module above as follows:

<div class="grid-box width50 grid-h">
    <div class="module mod-box  deepest">
        <div class="badge badge-new"></div>
        <h3 class="module-title"><span class="icon icon-twitter"></span>Weblinks</h3>
        <ul class="weblinks icon-twitter badge-new">
        ...
        </ul>        
    </div>
</div>

Now we have:

<div class="grid-box width50 grid-h">
    <div class="module mod-box mod-box-color1 deepest">
        <div class="badge badge-new"></div>
        <h3 class="module-title"><span class="icon icon-twitter"></span>Weblinks</h3>
        <ul class="weblinks color-color1 weblinksicon-twitter badge-new">
        ...
        </ul>        
    </div>
</div>

The renderer module of the Warp framework binds the new variable in the issuing HTML that can be used by a web designer to style the module.

Copy the modules.css from the /css folder in the /styles/nice/css/ folder. Again, we have created an override! However, do not forget to adjust the relative paths within this CSS file. These are:

1. @import url(../../../warp/css/modules.css);
2. background: url(../../../images/module_badges.png) 0 0 no-repeat;
3. background: url(../../../images/module_icons.png) 0 0 no-repeat;

Now everything should the same as before.

If we add to the just copied modules.css (in our nice style) the following lines:


Now you can use the new module suffixes such as color1 and color2, which is rendered as a box template for the module, with your custom background color. You should of course still define CSS instructions for the content of these modules. But since this is trivial, I leave it up to you.

 


A MODULE TEMPLATE

So, that was pretty easy, but you are a little more demanding. We want to have an absolutely positioned module in the content area of our website, which presents the most widely read article. So in principle, the Most Read module, positioned just perfectly. This module requires a lot of space, we will make a little CSS and Javascript that are not permanently stored on the current content. Technically, this is trivial, but for us it is interesting to see how this is to be realized with Warp.

When we look at the available module positions, we quickly realize that there is nothing suitable for us. So we need to add a new module position. Copy the /layouts/template.php  to the /styles/nice/layouts/  folder. Again, we have created an override and this time one that determines the structure of the entire template.

Reminder: the template.php is what the index.php template is for a "normal" Joomla template. It defines the layout of the site.

Here we can to around line 100 to see the following code:

<?php if ($this['config']->get('system_output')) : ?>
<section id="content" class="grid-block">

Now we add our own.


<section id="content" class="grid-block">

<div id="contentabs"><?php echo $this['modules']->render('contentabs'); ?></div>
<?php endif; ?>
<?php echo $this['template']->render('content'); ?>
</section>
<?php endif; ?>
new module 1

 

 

So we have a new module position called contentabs (which should stand for absolute content) directly inserted into the content area of the page. Let's test it! Change the position of the Most Read Articles module of innertop to contentabs. Now the page looks like in the picture on the right.

Even if it does not look like the module is in the right place. It is. What is missing is to add some CSS to position it.

 

 

 

 

In modules.css we add the following:

#contentabs {
position: absolute;
right: 0;
background-color: #FCFBF2;
}

In layout.css , (for which you also create an override) we add the following:

#content { position:relative; }
New module position in warp 2


The page now looks like this:

We could use the new module position now and/or add it in the templateDetails.xml. If we don't add it to the template details, we can still use it, by typing in the name, but it is best practice to add it so it can be selected from the position list.

 

Paste the following code into the templateDetails.xml area under positions:

<position>contentabs</position>

Now I want to show you how easy it is to incorporate a little functionality in a Warp template. The module looks quite nice, but it would be better if we could expand/contract it so it could be hidden if we want. These are the minimum requirements, because it is mainly a matter of understanding where and not how to perform the adjustments.

Before reading further, I should mention that you can of course create any other module positions you wish. See: Create a new module position

So to incorporate the collapse (toggle), we need some Javascript (JS). The javascript that takes care of functions of the template is called the template.js which the /js folder. We do not want to edit this directly, but we want to create an override to our nice style (folder: /styles/nice/js/ ).

NOTE: If you copy the template.js to this location, you are hopefully now aware, that this Javascript will only affect the nice style (3rd level). If you are in the template configuration and set the style to something other than nice, your site will be using the template.js from the /js folder of the (2nd level).

In the JS file you can see a couple of jQuery statements, which you can leave at the moment and are not of interest. Here we will add the JS, which we need for our module Toggler. First we need to look at the HTML structure of our module. We see the following:

<div id="contentabs">
<div class="module deepest">
<h3 class="module-title">Articles Most Read</h3>
<ul class="line line-icon">
<li>...</li>
<li>...</li>
...
</ul>
</div>
</div>

You still remember that the way in which a module is rendered is deermined in the modules.php. For this we have already created an override. If you look at the file, you will find the following line:

switch ($style) { ...

The following case statements define which style and which is appropriate module templates (yes, there are module templates!) taken. When no module style was explicitly passed, the module template is default-1 loaded. This is in the Warp Framework folder /warp/layouts/modules/templates/ . If we, in the Joomla backend, specify a module class suffix of style-box in a module. Using this we can style the module to have the box style. Only the HTML structure for our Toggler is not suitable.

Why do we not simply create a new, tailor-made style, including the Toggler module in the module templates? Said and done. Create an override (yes, module templates can have overrides) for module 1 default module templates. Copy the file default-1.php in the folder /styles/nice/layouts/modules/templates

When you think about it, we actually don't want to override any of the default templates, because this will not used by any other module styles. We rename the newly copied file to cabs.php. That is our name: cabs . The Toggler in our new module template cabs.php still contains HTML instructions on how we will change. It is as follows:

<div class="module  deepest">


<div id="cabs-wrap">
<?php echo $content; ?>
</div>
</div>

As a result, we have placed around the content of the module, the DIV element cabs-wrap, which can use for our Toggler. Therefore, this modules loaded template needs adjusted. We have to in the template.php (in the nice style folder) add the following case statement:

case 'cabs':
$template = 'cabs';
$title_template = '<h3 class="module-title closed">%s</h3>';
break;

cabs suffix

 

 

The variable$templatenow that we created is cabs.php the template module style cabs is assigned. If you would like more information about module styles and templates, read the Create a new module style tutorial.

 

OK, we give a module class suffix of style-cabs


 

We have told our template that this module with the new module style cabs should render. As output it appears like this:

<div id="contentabs">
<div class="module cabs deepest">
<h3 class="module-title closed">Articles Most Read</h3>
<div id="cabs-wrap">
<ul class="line line-icon">
<li>...</li>
<li>...</li>
...
</ul>
</div>
</div>
</div>

Just as it should be! The alternate way to render the module with the style cabs, would be in the modules.php integrated in. Line 30 around the following:

if ($module->position == 'contentabs') $style = 'cabs';

No matter how you do it, our Toggler can now access the DIV element cabs-wrap. In the already copied template.js we write the following lines:

window.addEvent('domready', function(){
var cabs_slide = new Fx.Slide('cabs-wrap');
cabs_slide.hide();
$$('#contentabs .module-title').addEvent('click', function(event){
event.stop();
this.toggleClass("closed");
cabs_slide.toggle();
});
});

Although the file contains instructions for jQuery, I added support for Toggler with a few lines of Mootools. If we now load the page, the toggler should work, and low and behold - nothing! What's wrong?

We find out quickly if we see in the JS Console of the browser. There we see an error message to the effect that the Toggler used Mootools class Fx is unknown - of course! Joomla generally charged only the core files of Mootools. Effects, etc. are part of the package mootools more , which loaded only when needed for performance reasons we. We have needs, so bring it on!

For our template index file we have already created an override. We open the file template.php and add the following line at the very beginning:

JHtml::_('behavior.framework', true);

The true ensures that even Mootools More is loaded. The JS error is gone and the module can now be collapsed by clicking on the title. The functionality is  trivial, it is only important that you understand the potential of education and conversion capabilities of Warp Templates.

With a little CSS in modules.css our Toogler is also looking nice:

#contentabs {
position: absolute;
right: 0;
box-shadow: 0 0 -3px 8px rgba(0, 0, 0, 0.15);
background-color: #FCFBF2;
}
#cabs-wrap {padding-top:10px; }
.cabs {margin:8px;}
.cabs .module-title {padding-right: 40px;cursor:pointer;margin: 0;}
.cabs .module-title {background: url(../images/bullet_toggle_minus.png) right center no-repeat}
.cabs .closed {background: url(../images/bullet_toggle_plus.png) right center no-repeat;}

most read

 

 

The images will be placed in the folder /styles/nice/images .

The trouble is that the Most Read module shows up everywhere. Even where it has no content. Sure, we could edut the module in the Joomla backend and only assign it to certain menu items and so on, but that would quickly get bothersome an we want this module only to appear in the detail view of an item. This can't be configured in the Joomla backend, so we can solve it in the template.php by adding the following two lines:

$coption = JRequest::getCmd('option', null);
$cview = JRequest::getCmd('view', null);

In the same file, we have added a new module position for our absolutely positioned module. We change now as follows:

 echo $ this [ 'modules' ] -> render ( 'contentabs' ) >? </ div> <? php endif ; >?

In order for our custom module to only shown in detail views of Joomla articles.


CUSTOM DESIGN (PART 1)

Let's give the template gets some character. To start, we add our logo. To add it, we create a Custom HTML module, add out logo image and publish to the position logo. Whether the logo image in inserted directly into the module or defined as a CSS background for a div you you added is up to you. If you added as a background div, you need to add some CSS to the layout.css. Something like:

#logo {
background: url(../images/logo.png) 0 0 no-repeat;
width: 195px;
height: 44px;
margin-left: 10px;
}

Also, in the template configuration -> Profiles we set the date parameter to No.  The top menu in the module position toolbar-r wasn't needed either, so we disabled it and we will replaced the background color as well.

logo position

We would like to place the navigation at the same height as the logo. To see how this can be done, let's look at the HTML structure. You should always have template.php in mind. Here is where the HTML structure is defined that styles the template.

In the template.php we see that the logo DIV is insdie the div with the id headerbar. Additionally, this mod position is only loaded when the position headerbar is loaded. The module in the position headerbar can be ignored or removed from the template.php, it all depends on whether you want to load this module. I removed it from the template:

<?php if($this['modules']->count('headerbar')) : ?>
<div class="left"><?php echo $this['modules']->render('headerbar'); ?></div>
<?php endif; ?>

After we have deleted this section, we place the following CSS in the layout.css for the logo:

#headerbar { margin: 10px 0; float:left; }
#menubar { margin: 26px 0 0 0px; }
#menu { float: right; }

logo position 2

 The search module is not needed, so we disable it for now. Now I need another DIV element below the menu and the logo to add a shadow to differentiate it from the rest of the site. So I add the following DIV in the template.php just below the menubar:

<div class="menu-shadow"></div>

Now we add the following CSS code in the layout.css :

.menu-shadow { 
opacity: 0.6;
height: 12px;
border-top: 1px solid rgba(233, 82, 26, .5);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .2)), to(transparent));
-webkit-mask-box-image: -webkit-gradient(linear, left top, right top, color-stop(0.0, rgba(0,0,0,.2)), color-stop(0.5,rgba(0,0,0,.8)), color-stop(1.0, rgba(0,0,0,.2)));
}

logo shadow

Here we added a few CSS3 instructions that only work in the Chrome browser, but you can also  use a transparent PNGs or browser alternative CSS instructions.

sub parameters

The menu itself is styled in the file menus.css. This we have not touched yet. What should we do? Create an override, of course! We copy the file /css/menus.css to our CSS override folder /styles/nice/css (do not forget to copy the import row!).

 

Now we can edit the menu as we wish. Before we do that, a bit of information about the main menu. The menu, which is placed in a template position called "menu" uses the default Joomla menu. It can benefit from the many capabilities of the Warp framework. Perhaps you are familiar with menus which can have sublines, icons, multiple hierarchies, any width and column numbers and so forth. You can implement rthese with the menu system of the Warp framework. Some information can be found here: Setup the Joomla menu .

 

 

menu dropdown

 

I have also disabled some menu items to add some room. Now, the menu looks like this:

But now into the menus.css needs adjusted for the main menu. The menus.css can be tricky, because there a lot of CSS definitions are inherited. If you pay close attention to the different level classes, you should quickly find it.

 

I performed the following adjustments:

 

.menu-dropdown li.level1 {
margin: 0;
padding-bottom: 4px;
}

.menu-dropdown a.level1,
.menu-dropdown span.level1 {
border: none;
color: #555;
font-weight: bold;
}

.menu-dropdown a.level1 > span,
.menu-dropdown span.level1 > span {
height: 30px;
line-height: 30px;
padding: 0 20px;
text-shadow: 1px 1px 0 white;
}

/* Set Active */
.menu-dropdown li.active .level1 { color: #D07711; }
.menu-dropdown li.active { border-bottom: 5px solid #D07711;}

/* Set Hover */
.menu-dropdown li.level1:hover ,
.menu-dropdown li.remain {border-bottom: 5px solid #D07711; }

.menu-dropdown li.level1:hover .level1,
.menu-dropdown li.remain .level1 { color: #D07711; }

/* Drop-Down */
.menu-dropdown .dropdown {
top: 39px;
margin-left: 0px;
border-top: none;
}

.menu-dropdown .dropdown-bg > div {
padding: 5px;
border-top: none;
border: 1px solid #ddd;
border: 1px solid rgb(208, 119, 17);
background: rgba(255, 255, 255, 0.85);
}

.menu-dropdown li.level2 {
margin: 0 5px;
border-top: 1px solid #ddd;
}
.menu-dropdown a.level2 > span, .menu-dropdown span.level2 > span {
padding: 3px 0;
}

 

menu dropdown width

 

So our drop-down is not too wide, we adjust their widths to 200 pixels. We do this at the bottom of the template parameters in the current profile:

 

 

 

menu dropdown openOnce you do that, your drop now looks like this:

 

 

 

 

 

 

 

 

warp layout positions

 

Before looking at the rest of the page, I want to first of all turn off all unnecessary modules. This would be all the modules above and below the content. The submenu module we move from location sidebar-b to sidebar-a. So the submenu module should move from the right side (sidebar-b) to the left side (sidebar-a). This didn't work you, why?

 

 

 

 

 

 

 

 

 

 

 

 

 

sidebar position

 

 

Let's look again at the template parameters:

You can see that the red module positions sidebar-a and sidebar-b are both set to right in the template configuration. Here we have the following settings:

 

 

 

 

So we switch the sidebar-a position to Left . Now all modules that are loaded in this position, will appear to the left of the content. You can imagine how flexible this setting can be for possible layouts. The best feature, however, is that this functionality (as well as many others) can be completely rebuilt by its own style.


CUSTOM DESIGN (PART 2)

By extending the CSS instructions in the CSS files /styles/nice/css/ I adapted the design as follows:

design


CUSTOM TEMPLATE PARAMETERS

To demonstrate how you can integrate your own template parameters, we want to provide the option to change between round and square corners in the template. Such a parameter we can add in the config.xml file in the root directory of our template (not Styles) provided. The config.xml can not be customized in this way, by overriding in the style directory. There is only one config.xml and this applies to all styles. Add the following XML code:

<field name="rounded" type="radio" default="0" label="Rounded Corners" description="Use rounded corners">
<option value="0">No</option>
<option value="1">Yes</option>
</field>

What is an appropriate position? If this new field within the Profiles install tags, they can append round corners off profile-based on and off. So it is best toadd directly as follows:

<fields name="Profiles">
<field name="Style" type="separator" />
<field name="rounded" type="radio" default="0" label="Rounded Corners" description="Use rounded corners">
<option value="0">No</option>
<option value="1">Yes</option>
</field>
...

rounded corners

So, now you can set the parameter, ie, round corners , activate it before:

In order to introduce the necessary functionality we need to create an override for a file, which we have not used so far. Copy the file /yoo_master/layouts/template.config.php to /yoo_master/styles/nice/layouts/. So you have an override for file template.config.php created.

This file is a marvel of opportunities that can not possibly all be discussed in this tutorial. However, if you can understand a little PHP and understand these instructions, you should have no trouble recognizing the potential of this file.

At around line 85, we insert the following code:

if ($this['config']->get('rounded') == 1) $this['asset']->addFile('css', 'css:rounded.css');

Then we place a blank CSS file called rounded.css in our style folder /styles/nice/css/ .
What happens is this:

  1. The Warp framework discovered our template.config.php on the 3rd Level and uses them.
  2. The framework searches at all three levels lokking for rounded.css.
  3. The rounded.css is found on the third and loaded.

You could add rounded.css on the second level ( /css ) and make it available for all styles. If not, you need to put it in all styles folders needed.

In the rounded.css we place some CSS to create rounded corners:

.menu-sidebar a, .menu-sidebar li > span,
#sidebar-a .grid-box {
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
}

#maininner {
border-radius: 6px;
}

#innertop {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
#breadcrumbs {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}

.menu-dropdown .dropdown-bg > div {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top-right-radius: 6px;
}

compression parameters

 

Since we rounded.css within template.config.php invite only relatively far down, all about it that are available CSS instructions are superimposed.Only the font CSS files come next. You can determine the order of the loaded CSS files so self.

Include CSS files in this way, ie by the Warp framework one, so they are included in the possible CSS and JS compression and minimization processes that provides a Warp template.

 

Back to our template. Now, if the template parameter "Rounded Corners" is active, our template looks like this:

 

design rounded corners

Let's switch from the parameter, the rounded.css not loaded and our template looks like before.

prime styles

 

In the same way, you can realize at Templates color variations or graphic backgrounds. Of course, you can create various styles, which hold the necessary colors. In the three styles of the PRIME templates under http://demo.prime-real.de/ we have created for the six color palettes own CSS files, which can be assigned to each of the three styles in the backend.

 

color parametersIf we had integrated the colors directly in the Styles, the customer could only choose between three styles. This gives our customers 3 * 6 possible combinations, not the font variations included. The master template has two parameters in terms of color: Color and Link Hover Color

 

This allows you to choose a color for links and their hover States your entire page. The corresponding CSS files are located in /css/color1/ and /css/color2/ . I could not do much with it. Why define colors for links, if you sooner or later must specify color palette for the entire website. Be inspired by these two settings do not confuse words. Maybe you will use and expand the available colors or you just let it and delete the two parameters from the config.xml of the template.


FONTS

fonts parameters

Fonts in Warp templates are also defined only in individual CSS files and then loaded on demand. In the folder /css are three font folders. Each of them refers to a master template from our template with predetermined design level. I have selected times following typos configuration:

  • Body Font (font1) - The font for the page content
  • HeaderFont (font2) - (H1, etc.) The script for module titles or headings
  • Menu font (font3) - The font for the main menu

 

With the chosen parameters, we obtain the following look:

Example font design in Warp


paper parameter optionsRemember: These three divisions are only writing a specification of the master themes. You can modify these parameters, completely omit, summarize, whatever. In a Warp template almost nothing is set in stone. To demonstrate this I have a parameter called Paper introduced.

 

The following file called paper.css was added to the CSS folder:

#breadcrumbs {	
background: transparent url(../images/bc-bgr.png) 0 0px repeat-x;
margin-top: -21px;
padding-top: 100px;
box-shadow: 0 6px 7px -3px rgba(0, 0, 0, .4);
}

#innertop {
background: #fff url(../images/top-bgr.jpg) 0 0 no-repeat;
}
#maininner {
background: #fff url(../images/paper-bg.jpg) 40px 0 repeat;

}

#sidebar-a .paper {
margin:0;
padding: 12px 15px 30px 15px;
background: #fff url(../images/karton.jpg) 0 -70px no-repeat;
box-shadow: 0 6px 7px -3px rgba(0, 0, 0, .4);
}
#sidebar-a .paper .module-title{
color:#fff;
margin-bottom:40px;
}
.menu-sidebar a, .menu-sidebar li > span {
background: #fff url(../images/navi-bgr.jpg) 0 0 repeat;
box-shadow: 0 4px 4px -2px rgba(0, 0, 0, .3);
color:#82531D;
}

Activating the paper parameters, the following happens:

design paper


NEXT STEPS

Why not complete the template? Change the modules from the left to the right side (module position sidebar-b<

On Point Newsletter

Stay up-to-date with all things Pixel Point Creative!

Your cart is empty.