SJ ONEPAGE USERGUIDE


When you download template from our store and unzip, you will be got full of main files for theme installation. They're:

INSTALLATION GUIDE

There are two ways to install a Joomla theme:

 

At the basic level, this template will require the following conditions:

Download Packages from our store

There are two ways to install a Joomla Template:

Go to Extensions > Template Manager > SJ Onepage. All of parameters of this template are divided into the following groups, in which they are explained themselves:

1. Slideshow - Sj Image Grid Module

  • Module Position - Module Suffix
  • Position: slideshow
    Class suffix: hidden-tablets hidden-mobile
  • Frontend - Backend

             FRONTEND - Sj Image Grid Module

BACKEND - Sj Image Grid Module

2. Profile Pic - Custom HTML Module

  • Module Position - Module Suffix
    Position: topnav
    Class suffix: clear
  • Frontend - Backend

FRONTEND - Profile Pic

BACKEND - Profile Pic

Code - Custom Output

<p><a href="#"><img src="images/demo/profile-pic.png" border="0" alt="" /></a></p>
<h3 class="profile-title">Join. Webdesign</h3>

3. Sticky right - Custom HTML Module

  • Module Position - Module Suffix
    Position: sticky_right
    Class Suffix - For using special positions: clear bg-white @bullhorn
    Class Suffix - For customize module in special position: clear bg-white @info-sign
  • Frontend - Backend

FRONTEND - For using special positions

    BACKEND - For using special positions

    Code - Custom Output:

    <p>Special positions are: sticky_left, sticky_right, notice, tool_bottom. You can use them for any module type. For using this, please go to Module Manager and config your module to your desired position.</p>
    <p><strong>You can disable by:</strong></p>
    <ul class="yt-list type-smallnumber4">
    <li>Go to Administrator » Template Manager » Your_Template » Tab: Advanced » Use special positions » select: No for all special positions</li>
    <li>Go to Administrator » Module magager » Your_Module(by postion: sticky_left/ stickey_right /notice /tool_bottom) » Status: Unpublish for that module</li>
    </ul>

FRONTEND - For customize module in special position

    BACKEND - For customize module in special position

    Code - Custom Output:

    <p>The solution is using Module Class Suffix. You can customize button, module content follow Module Class Suffix</p>
    <p>E.g. Module Class Suffix: <strong>bg-white</strong> @<strong>bullhorn</strong> then:<br />- Class of buttom is 'ico-<strong>bullhorn</strong>'<strong>. </strong>If without @<strong>... </strong>the default is 'icon-pushpin'<br /><strong>- </strong>Class of module is '<strong>bg-white</strong>'</p>

4. Top1 - Custom HTML Module

  • Module Position - Module Suffix
    Position: top1
    Class Suffix - Hello World!:
    Class Suffix - Orientation: clear titleFont30
  • Frontend - Backend

FRONTEND - Hello World!

    BACKEND - Hello World!

    Code - Custom Output:

<div class="sj-wellcome">
<h1>Hello World!</h1>
<h2>I am John Public.</h2>
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at loborti a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit</p>
</div>

FRONTEND - Orientation

    BACKEND - Orientation

    Code - Custom Output:

<div class="block-service clearfix">
<div class="box-service span4">
<div class="service-avatar pull-left">
<div class="service-img"><img src="images/demo/paint.png" border="0" alt="" /></div>
</div>
<div class="service-content pull-left">
<h3><a href="#">Logo Design</a></h3>
<p>Maecenas laoreet eget. Ultricie</p>
</div>
</div>
<div class="box-service span4">
<div class="service-avatar pull-left">
<div class="service-img"><img src="images/demo/rocket.png" border="0" /></div>
</div>
<div class="service-content pull-left">
<h3><a href="#">Banner Design</a></h3>
<p>Maecenas laoreet eget. Ultricie</p>
</div>
</div>
<div class="box-service span4">
<div class="service-avatar pull-left">
<div class="service-img"><img src="images/demo/control.png" border="0" /></div>
</div>
<div class="service-content pull-left">
<h3><a href="#">Web Design</a></h3>
<p>Maecenas laoreet eget. Ultricie</p>
</div>
</div>
</div>

5. Top2 - Custom HTML Module

  • Module Position - Module Suffix
    Position: top2
    Suffix: titleFont50
  • Frontend - Backend

FRONTEND - Skills

    BACKEND - Skills

    Code - Custom Output:

<div class="block-skill">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt diam ac lectus tristique scelerisque. Quisque vitae libero sit amet turpis</p>
<div class="box-skill span3 first">
<div class="skill-inner"><input class="dial  animated" type="text" value="0" /></div>
<h3>Adobe Photoshop</h3>
</div>
<div class="box-skill span3"><input class="dial  animated" type="text" value="0" />
<h3>Adobe Illustrator</h3>
</div>
<div class="box-skill span3"><input class="dial  animated" type="text" value="0" />
<h3>CorelDRAW</h3>
</div>
<div class="box-skill span3"><input class="dial  animated" type="text" value="0" />
<h3>AutoCAD</h3>
</div>
</div>

6. Top3 - Sj content reslisting Module

  • Module Position - Module Suffix
    Position: top3
    Class suffix: titleFont50
  • Frontend - Backend

FRONTEND - Sj content reslisting Module

BACKEND - Sj content reslisting Module

7. Top4 - Custom HTML Module

  • Module Position - Module Suffix
    Position: top4
    Class suffix: titleFont50
  • Frontend - Backend

FRONTEND - Resume

BACKEND - Resume

Code - Custom Output:

<div class="sj-resume">
<div class="resume-col1 pull-left"><img src="images/demo/resume.png" border="0" alt="" /></div>
<div class="resume-col2 pull-left">
<div class="main-timeline">
<div class="timeline-head">
<h3 class="timeline-title">Work experience</h3>
</div>
<ul class="timeline blank">
<li class="items clearfix">
<h3 class="timeline-l pull-left ">2013 - Now</h3>
<div class="toggle-box-click "> </div>
<div class="timeline-r pull-left">
<h3 class="toggle-box-head ">Senior UX Designer @ Company</h3>
<div class="toggle-box-content ">
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at loborti a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc</p>
<a class="more" href="#">View Website [icon name="long-arrow-right" size="14" ] </a></div>
</div>
</li>
<li class="items clearfix">
<h3 class="timeline-l pull-left">2011 - 2013</h3>
<div class="toggle-box-click"> </div>
<div class="timeline-r pull-left">
<h3 class="toggle-box-head">Graphics and media skills</h3>
<div class="toggle-box-content">
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at loborti a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc</p>
<a class="more" href="#">View Website [icon name="long-arrow-right" size="14" ] </a></div>
</div>
</li>
<li class="items clearfix">
<h3 class="timeline-l pull-left">2009 - 2011</h3>
<div class="toggle-box-click"> </div>
<div class="timeline-r pull-left">
<h3 class="toggle-box-head">Programming Skills</h3>
<div class="toggle-box-content">
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at loborti a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc</p>
<a class="more" href="#">View Website [icon name="long-arrow-right" size="14" ]</a></div>
</div>
</li>
<li class="items clearfix">
<h3 class="timeline-l pull-left">2006 - 2009</h3>
<div class="toggle-box-click"> </div>
<div class="timeline-r pull-left">
<h3 class="toggle-box-head">Phd Computer Science</h3>
<div class="toggle-box-content">
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at loborti a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc</p>
<a class="more" href="#">View Website [icon name="long-arrow-right" size="14" ]</a></div>
</div>
</li>
</ul>
</div>
<div class="main-timeline">
<div class="timeline-head">
<h3 class="timeline-title">Education Experience</h3>
</div>
<ul class="timeline blank">
<li class="items clearfix">
<h3 class="timeline-l pull-left">2013 - Now</h3>
<div class="toggle-box-click"> </div>
<div class="timeline-r pull-left">
<h3 class="toggle-box-head ">Phd Computer Science</h3>
<div class="toggle-box-content">
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at loborti a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc</p>
<a class="more" href="#">View Website [icon name="long-arrow-right" size="14" ]</a></div>
</div>
</li>
<li class="items clearfix">
<h3 class="timeline-l pull-left">2011 - 2013</h3>
<div class="toggle-box-click"> </div>
<div class="timeline-r pull-left">
<h3 class="toggle-box-head">University</h3>
<div class="toggle-box-content">
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at loborti a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc</p>
<a class="more" href="#">View Website [icon name="long-arrow-right" size="14" ]</a></div>
</div>
</li>
<li class="items clearfix">
<h3 class="timeline-l pull-left">2009 - 2011</h3>
<div class="toggle-box-click"> </div>
<div class="timeline-r pull-left">
<h3 class="toggle-box-head">High School</h3>
<div class="toggle-box-content">
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Sed posuere consectetur est at loborti a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc</p>
<a class="more" href="#">View Website [icon name="long-arrow-right" size="14" ]</a></div>
</div>
</li>
</ul>
</div>
</div>
</div>

8. Bottom1 - Sj Contact Ajax Module

  • Module Position - Module Suffix
    Position: bottom1
    Class suffix: titleFont50
  • Frontend - Backend

FRONTEND - Contact Me

BACKEND - Contact Me

SmartAddons have supported as following: 

  • Support time: Monday - Friday 8:30AM to 5:30PM UTC+7
  • Response Time: Within 24 hours (1 business day)

Item support includes:

  • Responding to questions or problems regarding the item and its features
  • Fixing bugs and reported issues
  • Providing updates to ensure compatibility with new software versions

Item support does not include:

  • Customization and installation services
  • Support for 3rd parties' extensions

Besides, we support services as following:

Thank you so much for purchasing our product. If you have any questions that are beyond the scope of this help file, please send us: click here