Slide me some content

All YJSG based templates come with 3 sliding panels that you can use to populate your content. Sliding panels are completely responsive and are visible on all devices. Their locations are:

• Page top above header - contains 5 modules grid with module positions names tpan1 - tpan5
• Page bottom below footer - contains 5 modules grid bpan1 - bpan5
• Page left side - contains 1 module position with name sidepanel

Top Panel

Bottom Panel

Side Panel

Panels settings

Panels can be activated all at once or individually. To activate sliding panel just publish your module in any of module positions mentioned above. Panels settings including the width adjustments for modules in top and bottom panel, can be found in template manger
under the tab name Layout .

Panels styling

Panels are very easy to style and they do not contain any images.
Default panels style is located in site_root/templates/yjsg_based_template/css/yjsg_layout.css .
Panels default background color is white but it can be changed with few simple CSS rules.

/* top panel container */
#yjsg_toppanel_slide {
background:#0ebcd1;
color:#fff;
border-bottom:1px solid #098594;
}
/* top panel open/close button */
#yjsg_toppanel_open {
background:#0ebcd1;
color:#000;
border:1px solid #098594;
}
/* side panel container */
#yjsg_sidepanel_slide{
}
/* side panel open/close button */
#yjsg_sidepanel_open{
}
/* bottom panel container */
#yjsg_botpanel_slide{
}
/* bottom panel open/close button */
#yjsg_botpanel_open{
}

The above code would result in following top panel style

Setting up accordion menu

YJSG template framework comes with built in accordion side menu that you can take advantage of.
To activate accordion menu, go to your Menu Module manager, tab name Yjsg Menu Options and from parameter Select menu type,
select either Accordion or Accordion no toggle;

Next click on Module tab and select the End level. Read info above to make easier decision.

Your accordion menu is setup. Please remember to publish it in any module position you like. When you click the parent menu item it's child elements will slide down. Demo can be seen here .

Accordion menu items styling

Once the accordion menu is activated there are few CSS class names that you can use to style your menu items.
Depending on state ( open/closed ) the toggler ( parent menu item ) gets additional class name:

• active_yjsgacc: Active, open parent item.
• inactive_yjsgacc: Inactive, closed parent item.

Better web fonts with @font-face

Since CSS2 we had the opportunity to take advantage of @font-face and use custom font types for our web applications. Rather than being limited to default web fonts we now can use our own font-family and style the web how we like it. With simple inclusion of few CSS parameters the magic happens:

markup:

@font-face {
font-family: 'PacificoRegular';
src: url('Pacifico-webfont.eot');
src: url('Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('Pacifico-webfont.woff') format('woff'),
url('Pacifico-webfont.ttf') format('truetype'),
url('Pacifico-webfont.svg#PacificoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
h1,h2,h3,h4,h5,h6{
font-weight:normal;
font-family:'PacificoRegular', Arial, sans-serif;
}

and you can turn your font style from:

in to something more stylish like:

Using FoontSquirrel @font-face kits in YJSG based templates

As you can see above , the process is simple but instead of looking for or creating web font files you can use free service provided by FoontSquirrel which will let you download or generate @font-face kits and use them as they are in your YJSG based templates. For demonstration purpose please go to Pacifico @font-face kit click on @font-face Kit above the specimen and than click on the big blue button that says Download @font-face Kit.

Since we are using wamp we will download the zip file to site_root/templates/yjsg_template_name/css/fontfacekits folder. If you are doing this on a live server , download the zip, extract it to its own folder and upload that folder to the path mentioned above. For your convinience YouGrids template is deliveered with PTSansNarrowBold @font-face kit:

Right click on the pacifico-fontfacekit.zip file and extract to its own folder:

Go to your template manager, tab name Style and activate following parameters:

• Use Element Tags font override set to Yes
• Element tag override type select @font-face kit
• From @font-face Kit Font-Family select, choose your newly created @font-face kit folder which in our case is pacifico-fontfacekit

Add custom style declarations

Since @font-face usage sometimes requires you to change font size , font weight or other font attributes , we have disabled Affected selectors param in template admin if you select @font-face kit as your elements tag override, and you should add all your declarations to
site_root/templates/yjsg_template_name/css/fontfacekits/your_font_face_kit/stylesheet.css file.

Please make sure that the css file in your @font-face kit folder is always named as stylesheet.css and that you don't have any space in your @font-face kit folder name.
Now open the stylsheet.css file and add this code to change font-family for headings , article title, module title and component name:

h1,h2,h3,h4,h5,h6,.article_title,.module_title,.pagetitle{
font-weight:normal;
font-family:'PacificoRegular', Arial, sans-serif;
}

your output should be this:

example:

There are several ways to include your custom Javascript code in to Joomla. In this tutorial we will explain how to use them and which one is better depending on the code that you like to include.

Trough template manager

YJSG template administration comes with Custom code tab that you can use to add your custom javascript snippets to template head or footer.

Using JDocument

In joomla you can use JDocument class to add custom Javascript files or block of Javascript code in head section of your template.
This first example shows how to add custom Javascript file in YJSG based template.
For your convenience you can use file name yjsg_custom_params.php to add any custom files or code blocks.
This file is located in site_root/template/yjsg_template_name/custom/ folder.

Adding custom Javascript file via JDocument/addScript

First move your Javascript file to site_root/template/yjsg_template_name/src/ folder , open yjsg_custom_params.php and add this line.

example:

$document->addScript($yj_site.'src/my_new_js_file.js');

Adding custom file via $YjsgCustomJS array

This option is specific to YJSG based templates only and is used to load your Javascript file after all template scripts and Joomla Javascript library files have loaded.
To use $YjsgCustomJS first move your Javascript file to site_root/template/yjsg_template_name/src/ folder , open yjsg_custom_params.php and add this line.

example:

$YjsgCustomJS= array();
$YjsgCustomJS[] = $yj_site.'src/my_new_js_file.js';

To add multiple files add this line in yjsg_custom_params.php

example:

$YjsgCustomJS= array();
$YjsgCustomJS[] = $yj_site.'src/my_new_js_file.js';
$YjsgCustomJS[] = $yj_site.'src/my_new_js_file2.js';

Adding block of Javascript in head with JDocument/addScriptDeclaration

To add block of Javascript code, open yjsg_custom_params.php and add this line

example:

$document->addScriptDeclaration("
var myVar = 'myValue';
");

Adding block of Javascript in head with $yjsg_js variable

One advantage of $yjsg_js variable use is that is loading your Javascript block code at the bottom of your page instead of the head. This way the code blocs are not clogging up your page load plus is much better for your website SEO. For better performance and cleaner head tags $yjsg_js is echoed at the end of the page in layouts/yjsg_footer.php. Usage is very simple and it is similar to JDocument/addScriptDeclaration.
Just add following line to yjsg_custom_params.php file.

example:

$yjsg_js.="var myVar ='my_js_var;'";

Simple approach

In YJSG we have used very simple approach for implementing Google fonts .
This option will let you use all 600+ available font families in Google fonts library.

example:

Usage

Go to your template manager, tab name Style and activate following parameters:

• Use Element Tags font override set to Yes
• Element tag override type select Google font
• Google Font-Family leave as default or use this as example Mouse+Memoirs|cursive|normal
• In Affected Selectors textarea add the selectors that should use Google font-family defined above

Google font param explained

Google font param has 3 attributes that you can use and each of them needs to be separated by |:

example:

Mouse+Memoirs|cursive|normal

First attribute is the actual font name taken directly from Google font stylesheet link, family= ( including + ):

example:

http://fonts.googleapis.com/css?family=Mouse+Memoirs

Second attribute is general font-family like:

• sans
• sans-serif
• cursive
• fantasy
• monospace

Second attribute can be combined:

example:

Mouse+Memoirs|'Helvetica',arial|normal
Mouse+Memoirs|Helvetica,arial|normal

Third attribute is font-weight which you can define as:

• bold
• normal
• 500
• 700

example:

Mouse+Memoirs|cursive|normal
Mouse+Memoirs|cursive|bold
Mouse+Memoirs|cursive|700

Multiple fonts

For stylesheet with multiple fonts, use double equal sign between font names. Note that additional font will be included in Google stylesheet but you would need to add affected selectors for additional font inside one of the template CSS files.

example:

Rock+Salt==Open+Sans:400,500

in custom.css add :

h2.my_class{
font-family:Open Sans,sans-serif;
font-weight:300;
}

Step 1 - Prepare the field

You should first decide where to add your new module position. Open template index.php and try to find a suitable place for your new module. For example under the main menu.

Step 2 - Add the code snippet in index.php

<jdoc:include type="modules" name="newposition" style="YJsgxhtml" />

module print attributes

• name= module position name.
• style= module chrome output which can be , YJsgxhtml ,Yjround, YJsgplain.

Step 3 - Add new module position to your templateDetails.xml file

<position>user25</position>

<position>newposition</position>

YJsgxhtml module chrome output:

<div class="yjsquare modidMODULEID">
    <div class="h2_holder">
        <h2 class="module_title"> Title </h2>
    </div>
    <div class="yjsquare_in"> module content... </div>
</div>

Note that a space in module title will split your title and each part will be surrounded by a span.
This way you can additionally style the separated title.

YJsground module chrome output:

<div class="yjsquare modidMODULEID addround">
    <div class="h2_holder">
        <h2 class="module_title">
            <span class="title_split titlesplit0">Module</span>
            <span class="title_split titlesplit1">Title</span>
        </h2>
    </div>
    <div class="yjsquare_in"> module content... </div>
</div>

YJsgplain module chrome output:

<div class="yjplain modidMODULEID"> module content... </div>

In YJSG you can add additional 7 grids. Each grid can have up to 5 modules. Please note that they all must be named as you see it in example below. Only changeable variable is the name of your module position. You can name your module positions aka. modNames located in yjsg_print_grid_area function as you wish.

available grids:

<?php yjsg_print_grid_area('yjsgName=newgrid1|modNames=anynameyoulike'); ?>
<?php yjsg_print_grid_area('yjsgName=newgrid2|modNames=anynameyoulike'); ?>
<?php yjsg_print_grid_area('yjsgName=newgrid3|modNames=anynameyoulike'); ?>
<?php yjsg_print_grid_area('yjsgName=newgrid4|modNames=anynameyoulike'); ?>
<?php yjsg_print_grid_area('yjsgName=newgrid5|modNames=anynameyoulike'); ?>
<?php yjsg_print_grid_area('yjsgName=newgrid6|modNames=anynameyoulike'); ?>
<?php yjsg_print_grid_area('yjsgName=newgrid7|modNames=anynameyoulike'); ?>

Step 1 - Prepare the field

You should first decide where to add your new grid position. Open template index.php and try to find a suitable place for your new grid.
For example under the main menu.

Step 2 - Add the code snippet in index.php

markup:

<?php yjsg_print_grid_area('yjsgName=newgrid1|modNames=newposition',true); ?>

See information about Grid print function for additional function options.

Step 3 - Add new module positions to your templateDetails.xml file

markup:

<position>user25</position>

markup:

<position>newposition1</position>
<position>newposition2</position>
<position>newposition3</position>
<position>newposition4</position>
<position>newposition5</position>

Step 4 - Add new grid params to template-settings.xml

markup:

<fields name="params" addfieldpath="/plugins/system/yjsg/elements">

markup:

<fieldset name="YJSG_LAYOUT_LABEL">
    <field name="yjsg_newgrid1_width" type="yjsgmultitext" default="20|20|20|20|20" labels="Newposition1|Newposition2|Newposition3|Newposition4|Newposition5" customchrome="YJsgxhtml|YJsgxhtml|YJsgxhtml|YJsgxhtml|YJsgxhtml" items="5" size="2" class="serialize_multiple" />
</fieldset>

Custom grid field explained:

• name: variable that contains your new grid information.
• default: an array of default module widths.
• labels: visible positions names labels in template manager.
• customchrome: default module chrome. Can be YJsgxhtml, YJsground, YJsgblank, YJsgtabs, YJsgaccordion, YJsgslides.
• items: number of modules in the grid.
• size: width inputbox size.
• class: default grid class in template admin.Do not change this.

Please note that new field name variable name="yjsg_newgrid1_width" must match the grid print function attribute yjsgName=newgrid1.
Once you are done your new grid will be visible in template manager under tab Layout. Also note that the position of the grid in index.php will be replicated in your Layout tab. As you can see in our example the new grid is positioned under the main menu.

Step 5 - Publish your module in new module position

Go to your desired module manager and publish the module in your new module position.

result:

Step 1 - add style name to template-settings.xml

Open site_root/templates/template_name/template-settings.xml file and find variable name yjsg_get_styles

markup:

<field name="yjsg_get_styles" type="yjsglist" default="blue|40b1e2" label="YJSG_COLOR_LABEL" description="YJSG_COLOR_DESC" yjsgstyles="blue==40b1e2">
    <option value="blue|40b1e2">Blue</option>
</field>

yjsg_get_styles field name attributes:

• name: variable that contains style information.
• type: yjsglist element type.
• default: default select color style and its link color.
• label: element label for template manager
• description: element description for template manager.
• yjsgstyles: all available template styles.
• option value: option style name and its default link color.

add new style name:

We will now add new style name green to existing style names so our field name yjsg_get_styles changes to this;

markup:

<field name="yjsg_get_styles" type="yjsglist" default="blue|40b1e2" label="YJSG_COLOR_LABEL" description="YJSG_COLOR_DESC" yjsgstyles="blue==40b1e2|green==748500">
    <option value="blue|40b1e2">Blue</option>
    <option value="green|748500">Green</option>
</field>

You new template style name should now be visible in template manager.

Step 2 - add new style images folder

Please go to site_root/templates/template_name/images folder copy blue images folder and rename it to green.

Step 3 - add and edit new stylesheet

Since we already have stylesheets for each style name please go to site_root/templates/template_name/css folder copy blue.css file name and rename it to green.css.

Open green.css and replace all instances of images/blue to images/green and all instances of color code 40b1e2 to 748500.
Note that some CSS properties like a:hover color property or specific background images need to be changed as well.
We will not go in to details for those but just note that you might need to change them in order to adapt your new template style.
Now go to template manager and set Green as your default template style. Hit save and go to your homepage:

change and replace your logo:

As you can see only thing left is changing your logo to fit your new style. Please open logo.psd and change it's color code.
Now replace existing logo.png file name in site_root/templates/template_name/images/green folder with new logo;

Go to your homepage and refresh. Your new logo should be visible.

If logo process change is to complicated, you can upload new logo file within template manager. Go to tab name Layout and upload or select logo file from your server:

YJSG comes with over 400 font icons by FontAwesome that you can place before or after the module title.
To set this up go to module manager, click on Yjsg Module Options tab and click on any icon you like. The icon before/after inputbox will be filled in automatically. You can also start typing the icon name. The icon you are looking for will be placed on top of the list.

you can than transform your module titles from simple text to something like this:

To slim down the markup and make rounded corners faster and easier to understand we have used simple CSS class .addround
with default 5px border radius.

example:

.addround {
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #999;
margin:5px;
}

To activate rounded corners for your module just go in template manager, tab Layout hover over the module position,
click on top left icon, select Round and hit save.

With small CSS change you can turn your default rounded corners in to this:

example:

.addround{
background: #40b1e2;
border:none;
box-shadow:inset 0px -100px 100px #329dcc;
color:#fff;
}
.addround .module_title,
.addround a{
color:#fff;
}
.addround a:hover,
.addround a:focus{
color:#121212;
}

YJSG based templates are capable of switching built in top menu to a module position thus giving you the freedom to publish own menu modules in its place. The switch is in template manager parameter Default Menu Style located under tab name Top menu.
By selecting it, built in top menu turns in to module position name topmenupoz that you can utilize for your menu modules.