advanced

Enter Part of Title

Display #

Available page class names
YJSG comes with few page class names applied to the html element. You can use those class names to style your page differently.

example:
```
<html xml:lang="en-gb" lang="en-gb"  dir="ltr" class="bootstrapoff itemid-352 com_content view-article">
```
available class names:
- bootstrapoff: depending on bootstrap version set in template manager, this class changes to, bootstrapoff, bootstrap2, bootstrap3.
- itemid: itemid class comes from your menu item id and is specific to each Joomla page. If you are on frontpage this class changes to homepage.
- com: this class is specific for each Joomla extension page. On this page it is com_content.
- view: this class is specific for each Joomla extension view page. On this page it is view-article.
to change article title font size on this specific page we would use:
```
html.itemid-352 .article_title{
font-size:50px;
}
```

Body class name based on browser
We know how difficult it can be for you to style element based on browser or to find a matching properties that match all browsers. To ease your pain and make it easier for all of us, YJSG comes with custom body class name based on the browser name. Sure we have tough of all IE versions and as always they have to have a "special" class name for them. If you look at this page source code you will find special class name attached to body tag:

example:
```
class="style_blue yjsgbr-chrome"
```
As you can see there is class name .yjsgbr-chrome attached to the body class that will help you style your website based on this class. In case of all IE browser versions the class name changes to .yjsgbr-msie80 or .yjsgbr-msie90, thus giving you the option to target properties based on IE browser versions. For example , if you have an issue with a div class .my_bad_div in IE8 you can add something like this in custom.css file:

example:
```
body.yjsgbr-msie80 .my_bad_div{
zoom:1
}
```
Use this method to have your CSS file hacks free and differentiate between the fixes easier. Now start opening those browsers to find their class names :)

Body class name by text direction
YJSG comes with specific class name added to body element based on the text direction :

example:
```
class="yjsgbody style_blue yjsgbr-chrome yjsgrtl"
```
If your default text direction is RTL, body tag gets class name .yjsgrtl attached to it that will help you style your website based on text direction.

example:
```
body.yjsgrtl .my_div{
float:right;
}
```

Custom layout based on style
Specific styling

YJSG comes with additional body class name based on template style name. If you look at this page source code you will find
<body id="stylefont" class="yjsgbody style_yjsg yjsgbr-chrome"> where .style_yjsg class name is specific for this template style.
You can use this class to add specific styling to your elements.

Specific markup

To test specific markup based on style name you can add this code to your index.php or yjsg_custom_params.php file:

example:
```
if($css_file == 'yjsg')[// change yjsg to your default style name
echo '<h1> My style name is '.$css_file.'</h1>';
}
```
result:

Elements styling based on link color
YJSG comes useful feature for dynamic color styling. PHP class Yjsgcolor can help you style any of your HTML elements based
on style link color.

Yjsgcolor class methods that you can use:
- $yjsg_color->darker('percentage') = makes the color darker based on the link color.
- $yjsg_color->lighter('percentage') = makes the color lighter based on the link color.
Usage

To make it easier for you we have already created $cc_css variable that you can use to define your multiple elements.
If you open site_root/templates/template_name/custom/template_custom_params.php
you will see this variable defined with one or more elements inside :
```
$cc_css ="a{color:".$style_color.";}";
```
You can simply add more elements and either use your style default link color for them $style_color or you can extend it with
$yjsg_color->darker('percentage') or $yjsg_color->lighter('percentage') methods.
If you open Eximium template template_custom_params.php file you will find $cc_css variable populated with few css class names that are affected once you change default style links color:

As you can see we used default link color to style some of our elements. This can be further extended to use custom color for other elements based on link color.

What file can I edit?

Please do not edit or change template_custom_params.php file directly. This file is used for each template differently and it might be changed on template update. You can use yjsg_custom_params.php file instead. Just copy the variables or params from template_custom_params.php to yjsg_custom_params.php and extend them.

If you were wondering where the $style_color variable comes from, this would be your selected stylesheet link color that you can find in template manager under the tab Style.

After you have declared all elements that you would like to style based on link color you can change default color code for your stylesheet within your template manager and all elements defined within $cc_css variable will be changed and adapted based on this param.

Enable rich snippets
Increase your website ranking with custom rich snippets ( microdata ) options. These settings will generate structured microdata (schema.org) code snippets that will boost your search engines ranking.
- Article
- Blog posting
- News Article
- Medical Scholarly Article
- Tech Article
- Events
- Movies
- Product
- Book
- Recipe
- Video
Article rich snippets can be activated in your article manager under the tab Yjsg Rich Snippets. This settings is disabled by default.

Category rich snippets can be activated in Menu item manager under the tab Yjsg Category Rich Snippets. If set to yes, your category and its articles will get rich snippet type CreativeWork which is applicable to most generic kind of creative work, including books, movies, photographs etc. This settings is disabled by default.

Extend article options
YJSG v2 is completely modular and gives you a chance to extend each part of it as well as Joomla article options. If you look in site_root/templates/eximium/custom/yjsgarticle/ folder you will find file name yjsg_article.xml.

We have placed one custom parameter inside as an example. You can use this file to add any additional options that you might need for your articles.

To see this article parameter in action copy the html override from plugins/system/yjsg/includes/html/com_content/article/default.php
to templates/eximium/html/com_content/article/ folder.

Note
Please note that if you are using a template that was released prior to Yjsg v2, you would need to copy the file located in plugins/system/yjsg/legacy/html/com_content/article/ folder.

Open the newly copied file and after the first php closing ?> add this snippet.

snippet:
```
<?php echo  $params->get('yjsg_custom_article_param') ?> 
```
Now go to your article view page and you will se the parameter output.

View Yjsg Article Options tab in frontpage article edit view

Yjsg Article Options tab is by default set to be visible only in administrator article manager. To see these optons tab in frontend please go to your template manager , tab Advanced options and set the parameter Show extra article options to? to desired user groups.

Extend module options

YJSG v2 is completely modular and gives you a chance to extend each part of it as well as Joomla module options. If you look in site_root/templates/eximium/custom/yjsgmoduleoptions/ folder you will find file name yjsg_module_options.xml.

We have placed additional module styles parameters in there as an example. You can use this file to add any additional options that you might need for your modules.

Force module float

The grids are setup so that by default if you have 1 module in the grid it will be as wide as the grid holder or if you have more modules in any given grid they will either get the assigned width value from template manager or they will split the holder width between themselves. In both cases you are not able to float them to a specific side without defining the floats and widths for them within css files.

To make it easier for you we added Force float parameter in Yjsg Module Options tab that will let you force the module floats to specific side thus creating a gap between them or position them to the side you like.

By selecting options Float left or Float right module will float to the defined side and it will also get assigned fixed width of the value you entered in Force float width parameter.

Here is how this would look like with 1 or 2 modules in a grid:
no float:

float left:

no float:

float left and float right:

Top menu inside header
YJSG comes with the option to place the top menu next to the logo faster and easier.
Go to template manager tab Top Menu and set parameter Top menu location to In header an hit save.

This option will move your menu from it's default position:

next to your website logo:

To adjust your top menu position just add following code to site_root/templates/yjsg_template_name/css/custom.css file:

example:
```
#topmenu_holder{
margin-top:15px;
}
```
If you wish to float your menu, just add float to #top_menu div id:

example:
```
#topmenu_holder{
margin-top:15px;
float:right;
}
```

Using Browser detect class

YJSG comes with YjsgBrowser class which is a lightweight PHP class for detecting mobile devices browser name or browser version. You can test it by adding following code block to yjsg_custom_params.php file.

detect device or OS:

if ($detect->isMobile()) {
echo 'I am mobile device';
}
// or YJSG variable 
if ($yjsg_mobile)) {
echo 'I am mobile device';
}
// or 
if($detect->isIphone()){
echo 'Hello my name is isIphone';
}
if($detect->isIpad()){
echo 'Hello my name is isIpad';
}
if($detect->isIpod()){
echo 'Hello my name is isIpod';
}
if($detect->isBlackBerry()){
echo 'Hello my name is isBlackBerry';
}
if($detect->isiOS()){
echo 'Hello my name is isiOS';
}
if($detect->isAndroidOS()){
echo 'Hello my name is isAndroidOS';
}
if($detect->isBlackBerryOS()){
echo 'Hello my name is isBlackBerryOS';
}
if($detect->isWinOS()){
echo 'Hello my name is isWinOS';
}

detect browser version:

if($yjsgBrowser->Name == 'chrome'){
echo 'My name is ' . $yjsgBrowser->Name . ' and my version is ' . $yjsgBrowser->Version;
}
//or
if($yjsgBrowser->Name == 'msie' &&  $yjsgBrowser->Version == '8.0'){
echo 'My name is IE8. I am an old browser';
}

Using Custom CSS file
Every YJSG based template comes with custom.css. Custom.css is loaded as a very last file in header thus you have an option to override any CSS declaration from your template or extensions. We strongly encourage you to use this file to make any modification you might need.
This way when there is a template update your overrides will still be in effect.

Once you activate the custom.css in template manager, custom.css file will be placed in site_root/templates/yjsg_template_name/css folder.

Using custom.css for responsive add-ons

Please use custom.css file for all your CSS overrides or add-ons even responsive layouts. See example below for responsive layouts override.

change module and article title font size on screens smaller than 980px:
```
@media screen and (max-width: 979px){
.module_title,
.article_title{
font-size:50px;
}
}
```

Using Custom params file

YJSG based templates come with yjsg_custom_params.php file which is a magic bullet for all developers. This file is located in site_root/templates/yjsg_template/custom/ folder and it "sees" all template parameters, functions and settings which gives you the power to override them. It is very easy to make your own conditions and have your template act on them.

customparams

For your convenience here is the list of few custom parameters you can override and control trough yjsg_custom_params.php file:

-- JOOMLA DOCUMENT TYPE EXAMPLES --
$document = &JFactory::getDocument();
$document->addStyleSheet(JURI::base() . 'location/css/style.css');
$document->addScript('');
$document->addScriptDeclaration("jQuery.noConflict();");
$document->addCustomTag('');
$document->addScriptDeclaration("");
//////////////////////////// 
////////////////////////////   
-- IF STATEMENTS VARS --
$text_direction == 1------------------------| RTL is on
$topmenu_off == 2 || $itemid == 0 ----------| Top menu is on 
$selectors_override ==1 --------------------| Selectors override is on -  css , google font , cufon , squirrel
$selectors_override_type -------------------| 1 = CSS | 2 = Google | 3 = @font-face
$default_menu_style ------------------------| 1 = YJ Mega CSSDropdown | 2 = YJ Mega SMoothDropdown | 
--------------------------------------------| 3 = YJ Mega SMoothDropline | 4 = YJ Mega CSSDropline | 5= Split Menu
--------------------------------------------| 6 = Module position topmenupoz
$responsive_on == 1 ------------------------| yjresponsive.css and yjresponsive.js are loaded
$yjsg_mobile -------------------------------| all mobile devices   use as    if($yjsg_mobile) do something
$midblock_off ------------------------------| <jdoc:include type="component"  /> and surrounding divs are disabled.
--------------------------------------------| use as   if(!$midblock_off) mid block is ON do what I need
//////////////////////////// 
//////////////////////////// 
--GRID LOADED CHECK--
check if grid is loaded with these variables. Default is false. 
Description is advising what module positions the grid contains
$yjsg1_loaded----------------------------| top1-top5
$yjsg_header_loaded ---------------------| header1-header3
$yjsg2_loaded----------------------------| adv1-adv5 
$yjsg3_loaded----------------------------| user1-user5
$yjsg_bodytop_loaded---------------------| bodytop1-bodytop3
$yjsg_bodybottom_loaded------------------| bodybootom1-bodybootom3 
$yjsg4_loaded----------------------------| user6-user10
$yjsg5_loaded----------------------------| user11-user15
$yjsg6_loaded----------------------------| user16-user20 
$yjsg7_loaded----------------------------| user21-user25
$yjsgTopPanel_loaded---------------------| tpan1-tpan5
$yjsgBotPanel_loaded---------------------| bpan1-bpan5
//////////////////////////// 
//////////////////////////// 
-- CUSTOM JS --
use var name  $yjsg_js .= 
Example:
$yjsg_js.="var myVar ='my_js_var;'";
// note
dont forget the dot before = operator
For better performance and cleaner head tags
$yjsg_js is echoed at the end of the page in layouts/yjsg_footer.php
//////////////////////////// 
//////////////////////////// 
-- CUSTOM COLOR STYLING --
custom color styling based on link color. use $cc_color ( custom color css ) variable to declare css properties
use if($css_file == 'gray'){} for specific stylesheets
//////////////////////////// 
$yjsg_color->darker('10%') makes the color 10% darker based on the link color
$yjsg_color->lighter('10%') makes the color  10% lighter based on the link color
//////////////////////////// 
use those 2 methods to make auto colors based on percentage
Use this example to see result. Just add below $cc_css:
//////////////////////////// 
$cc_css.="a.readon{background:".$style_color.";}";
$cc_css.=".button,.validate,a.readon:hover{background:".$yjsg_color->darker('10%').";}";

Using grid print function

Default grids functions:

Your YJSG based template comes with 12 default grids and gives you the option to add more . Here are the default grids and their modules positions names:

------- Grid call function ---------------------- GRID NAME ------- MP START ------ MP END // MP = module position 
yjsg_print_grid_area('yjsg1');-------------------| Grid 1 ---------- top1-----------top5
yjsg_print_grid_area('yjsg2');-------------------| Grid 2 ---------- adv1-----------adv5
yjsg_print_grid_area('yjsg3');-------------------| Grid 3 ---------- user1----------user5
yjsg_print_grid_area('yjsg4');-------------------| Grid 4 ---------- user6----------user10
yjsg_print_grid_area('yjsg5');-------------------| Grid 5 ---------- user11---------user15
yjsg_print_grid_area('yjsg6');-------------------| Grid 6 ---------- user16---------user20
yjsg_print_grid_area('yjsg7');-------------------| Grid 7 ---------- user21---------user25
yjsg_print_grid_area('yjsgheadergrid');----------| Header ---------- header1--------header3
yjsg_print_grid_area('yjsgbodytop');-------------| MB Top ---------- bodytop1-------bodytop3
yjsg_print_grid_area('yjsgbodybottom');----------| MB Bottom ------- bodybottom1----bodybottom3
yjsg_print_grid_area('toppanel');----------------| Top panel ------- tpan1----------tpan5
yjsg_print_grid_area('botpanel');----------------| Bottom panel ---- bpan1----------bpan5

Grid function explained

Grid function has 4 attributes that u can use:

<?php yjsg_print_grid_area($yjsg_grid_name,$add_width=true,$before,$after);?>

$yjsg_grid_name - grid name as in yjsg1 | see complete list of grid names above.
$add_width=true - will add class name yjsgsitew ( main site width class ) to the grid like: <div id="yjsg1" class="yjsg_grid yjsgsitew" />.
$before - anything you want before the grid including additional module positions,
$after - closing of what you started in $before IF you did not close it already or anything you want to add AFTER the grid.

grid function can be echoed or simply called:

<?php yjsg_print_grid_area('yjsg1',NULL,NULL,NULL);?>//  just grid
<?php yjsg_print_grid_area('yjsg1');?>//  just grid
<?php yjsg_print_grid_area('yjsg1,$add_width=true');?>// grid and width defined
<?php yjsg_print_grid_area('yjsg1,true');?>// grid and width defined
<?php yjsg_print_grid_area('yjsg1',NULL,'<div id="before">,'</div>');?> // grid inside the before div 
<?php yjsg_print_grid_area('yjsg1',false,'<div id="before">,'</div>');?>// grid inside the before div
<?php yjsg_print_grid_area('yjsg1',$add_width=false,'<div id="before">,'</div>');?>// grid inside the before div

using grid loaded hooks

For easy check if specific grid is loaded ( present ) on the page , we have created simple boolean variables that you can use. Default is FALSE:

$yjsg1_loaded----------------------------| top1-top5
$yjsg_header_loaded ---------------------| header1-header3
$yjsg2_loaded----------------------------| adv1-adv5 
$yjsg3_loaded----------------------------| user1-user5
$yjsg_bodytop_loaded---------------------| bodytop1-bodytop3
$yjsg_bodybottom_loaded------------------| bodybootom1-bodybootom3 
$yjsg4_loaded----------------------------| user6-user10
$yjsg5_loaded----------------------------| user11-user15
$yjsg6_loaded----------------------------| user16-user20 
$yjsg7_loaded----------------------------| user21-user25
$yjsgTopPanel_loaded---------------------| tpan1-tpan5
$yjsgBotPanel_loaded---------------------| bpan1-bpan5

HTML Grid Output

<div id="GRID_NAME" class="yjsg_grid"> //GRID_NAME eq: yjsg1
    <div id="MODULE_POSITION_NAME" class="yjsgxhtml"> //MODULE_POSITION_NAME eq: user1
        <div class="yjsquare modid(MODULEID) + SUFFIX IF DEFINED IN MODULE SUFFIX">//MODULEID eq: modid28
            <div class="h2_holder">
                <h2 class="module_title"> 
                    + <span class="fa fa-ICON_NAME"></span>// IF ICON IS USED eq: fa fa-glass
                    Module title... 
                </h2>
            </div>
            <div class="yjsquare_in"> Module content ... </div>
        </div>
    </div>
    -||-
    -||-
    -||-
    -||- 
</div>

Using LESS Compiler

Since YJSG comes with support for Twitter Bootstrap which is based on LESS CSS , we included lessphp class by Gpeasy.com that compiles your LESS CSS files in to one CSS file.

LESS compiler settings

There are 4 compiler settings that you can use in order to take advantage of lessphp class:

Select Bootstrap version:

Here you can select which bootstrap version to use. You also turn Bootstrap off and use YJSG only which can tremendously speed up your website.

Compile CSS files:

Once you are done editing your website, set this ON so that all your CSS files get compressed into one stylesheet.

Compress compiled CSS:

If set to YES, this setting will compile and compress your generated CSS file and reduce the file size.

Ajax Frontend Recompile:

This setting is mostly used by developers to see immediate changes to CSS/LESS files while editing. If this setting is set to YES recompile process will run in background via AJAX and it will not slow down first page load. Note that after any LESS/CSS file change you would need to wait few seconds and the script will do "hard refresh" so you can see the changes. If this setting is set to NO first page load will be slow until files are recompiled but you will see changes immediately.

example:

available class names:

to change article title font size on this specific page we would use:

example:

example:

example:

example:

Specific styling

Specific markup

example:

result:

Yjsgcolor class methods that you can use:

Usage

What file can I edit?

available microdata types:

Note

snippet:

View Yjsg Article Options tab in frontpage article edit view

Here is how this would look like with 1 or 2 modules in a grid:

example:

example:

detect device or OS:

detect browser version:

Using custom.css for responsive add-ons

change module and article title font size on screens smaller than 980px:

Default grids functions:

Grid function explained

grid function can be echoed or simply called:

using grid loaded hooks

HTML Grid Output

LESS compiler settings

Select Bootstrap version:

Compile CSS files:

Compress compiled CSS:

Ajax Frontend Recompile:

About YJSG

About Joomla!

Bootstrap Info

LESS CSS Info

Youjoomla

Developed and maintened by Youjoomla.com

Quick menu