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:

available microdata types:

• 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.

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.

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.

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.

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

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

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.

Requirement

Please note that extending Yjsg shortcode function requires extended knowledge of PHP, Javascript, HTML and CSS.

YJSG v2 is completely modular and gives you a chance to extend each part of it as well as built in Yjsg shortcodes. If you look in site_root/templates/eximium/custom/yjsgshortcodes/ folder you will find extended shortcode example for link shortcode.

Please use these files as a template for extending Yjsg shortcode function.
The simple way is to keep on adding own shortcodes to existing $shortcodes array inside the yjsg_shortcode.php file and build additional case for your shortcode inside the yjsg_shortcodes_replace.php file.

link shortcode example:

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

example:

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

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

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

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

$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>

-- 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%').";}";