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

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

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

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;'";

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:

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:

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>

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.

Step 1 - switch top menu to module position

Go to your template manager tab name Top menu and set Default Menu Style to Menu module position :

Step 2 - assign menu module to topmenupoz module position

Go to your Menu module manager and assign it to topmenupoz module position:

Bootstrap nav pills

Bootstrap navbar

Bootstrap navbar inverse

navbar navbar-inverse class name can also be used if you wish to have dark navbar menu style;

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