tutorials

The logo ST DEEP is the default sample logo and you should replace it with your own.

Technically, logo is an image file called logo.png located in folder joomla_root_folder/templates/st_deep/images

Just replace it with your own logo.

ST DEEP provides 8 major color variations for you to choose from. Each color variation covers fills drop-down menu, links and some others. For each template color, you can pick a main background image to create your own unique look. (ST DEEP provide 17 background image for your choice)

Follow these steps bellow to configure template color :

#1 - Access the admin area >>> Extensions >>> Template Manager >>> st_deep - Default

#2 - Open tab "Options" >>> open tab "Global" >>> Choose template color in parameter "Showcase" and background image in parameter "Select Background"

All available colors are described below.

Default color

Cyan

 

Green

Yellow

 

Grey

Orange

 

Purple

Red

ST DEEP provides three menu styles to present your website navigation. The default Joomla! built-in menu module (mod_mainmenu) is utilized, so you don’t need to install any external menu modules.

Main menu default

To set up Main Menu please select the menu module you want to use and set up parameters as follows:

  • Title : Main menu (or any other you like)
  • Show Title : Hide
  • Position : Tool
  • Status : Published
  • Access : Public
  • Select Menu : Main Menu (you might want to use another menu source here)
  • Start Level : 1
  • End Level : All
  • Show Sub-menu Items : Yes
  • Menu Class Suffix : avatar-main-menu avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)
  • Alternative Layout : Responsive

 

Main menu with icon

To set up icons, you need to go to menu item settings and take the following steps:

Add symbol combination icons-xxx to menu item’s parameter Link CSS Style, where xxx is the icon name.

 

Slide menu left

Side Menu is a unique vertical menu with slide-out panels. This menu is extremely efficient when you have complex navigation with a lot of menu items.

To set up Slide Menu left please select the menu module you want to use and set up parameters as following:

  • Title : Slide menu (or any other you like)
  • Show Title : Show
  • Position : left-top
  • Status : Published
  • Access : Public
  • Select Menu : Main Menu (you might want to use another menu source here)
  • Start Level : 1
  • End Level : All
  • Show Sub-menu Items : Yes
  • Menu Class Suffix : avatar-slide-menu-left avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)

 

Slide menu right

To set up Slide Menu right, do the same config with Slide Menu left. In parameter Menu Class Suffix : avatar-slide-menu-right avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)

 

Slide menu with icons

You can set up menu items to utilize icons just as you can with Main Menu.

 

Tree Menu

Tree Menu represents menu items in a clear tree-like hierarchy which is very appropriate for indexing menu. By default all sub-menu items are collapsed until you select the parent menu item.

To set up Tree Menu please select the menu module you want to use and set up parameters as following:

  • Title : Tree menu (or any other you like)
  • Show Title : Show
  • Position : left-top
  • Status : Published
  • Access : Public
  • Select Menu : Main Menu (you might want to use another menu source here)
  • Start Level : 1
  • End Level : All
  • Show Sub-menu Items : No
  • Menu Class Suffix : avatar-tree-menu avatar-menu-icons white (Please only use “avatar-menu-icons white” if you want to display icons - white is icon's color)

 

Tree Menu with icons

You can set up menu items to utilize icons just as you can with Main Menu.

ST DEEP comes with different module styles and icons. For each module you can combine it with 23 predefined icons for module title styling. Take a look around to see how module styles are applied.

Module Style

Module styles are configured by module's parameter Module Class Suffix with very simple syntax.

Module Style 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-1

Module Style 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-2

Module Style 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-3

Module Style 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-4

Module Style 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-5

Module Style 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-6

Module Style 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-7

Module Style 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-8

 

Module styles with icon

To set up icons, you need to add string "icons-xxx white" to module class suffix, where xxx is the icon name and white is icon color.

Module Style 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-5 icons-user white

Module Style 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-6 icons-bookmark white

Module Style 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-7 icons-briefcase white

Module Style 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu arcu quis mauris consectetur pellentesque. Suspendisse in orci vitae sem vehicula venenatis.

st-module-8 icons-calendar white

 

Icons style

ST Magazine provide 23 predefined icons with 2 colors : white and grey.

  • st icon user
  • st icon bookmark
  • st icon briefcase
  • st icon calendar
  • st icon clock
  • st icon compass
  • st icon design
  • st icon document
  • st icon download
  • st icon glasses
  • st icon help
  • st icon home
  • st icon idea
  • st icon key
  • st icon megaphone
  • st icon paperclip
  • st icon picture
  • st icon pin
  • st icon rss
  • st icon search
  • st icon settings
  • st icon tones
  • st icon umbrella

 

ST icon style white

  • st icon user
  • st icon bookmark
  • st icon briefcase
  • st icon calendar
  • st icon clock
  • st icon compass
  • st icon design
  • st icon document
  • st icon download
  • st icon glasses
  • st icon help
  • st icon home
  • st icon idea
  • st icon key
  • st icon megaphone
  • st icon paperclip
  • st icon picture
  • st icon pin
  • st icon rss
  • st icon search
  • st icon settings
  • st icon tones
  • st icon umbrella

 

Icon list style

  • st icon umbrella
  • st icon umbrella
  • st icon umbrella
  • st icon umbrella
  • st icon tones
  • st icon tones
  • st icon tones
  • st icon tones
  • st icon settings
  • st icon settings
  • st icon settings
  • st icon settings
  • st icon search
  • st icon search
  • st icon search
  • st icon search

ST DEEP provide 12 social icons for your choose

 

 

 

To use these icons, just create new custom module, click the "Toggle editor", add the HTML code :

<div class="st-socials">
<a href="#" class="social-digg">digg</a>
<a href="#" class="social-email">email</a>
<a href="#" class="social-facebook">facebook</a>
<a href="#" class="social-google-plus">google-plus</a>
<a href="#" class="social-linked-in">linked-in</a>
<a href="#" class="social-twitter-bird">twitter-bird</a>
<a href="#" class="social-map">map</a>
<a href="#" class="social-phone">phone</a>
<a href="#" class="social-pinterest">pinterest</a>
<a href="#" class="social-rss">rss</a>
<a href="#" class="social-skype">skype</a>
<a href="#" class="social-you-tube">you-tube</a>
</div>

Disable / Enable Setting Bar

#1 - Access the admin area >>> Extension Manager >>> Template Manager >>> st_magazine - Default

#2 - Open tab "Options" >>> open tab "Global" >>> Change value to "No" in parameter " Setting Bar"

 

Google Analytics

#1 - Access the admin area >>> Extension Manager >>> Template Manager >>> st_magazine - Default

#2 - Open tab "Options" >>> open tab "Global" >>> Enter Google Analytics Code in parameter "Google Analytics - Tracking ID"

The section "our service" include 2 parts : the header and the content.

The header area

Create new custom HTML module and following these steps :

- Show Title : Hide

- Position : full-1

- Module Class Suffix : st-module-special

- Click the "toggle editor", add the sample HTML code then edit to suit with your content

<div id="st-our-services">
<h3 class="st-module-heading">our services</h3>
<p>Nam tincidunt, purus at scelerisque consectetur, elit erat pharetra eros, a laoreet neque elit sed orci.</p>
<p>Mauris quis sapien viverra, facilisis nibh quis, dictum purus.</p>
</div>

 

The content area

Create new custom HTML module and following these steps :

- Show Title : Hide

- Position : full-1

- Click the "toggle editor", add the sample HTML code then edit to suit with your content.

Please note that: "xxx" is the icon name. you can see these icons name in Font Awesome

<div class="st-service-style-1">
    <div class="row-fluid">
        <div class="span4">
            <div class="st-service-symbol">
                <div class="fa fa-xxx">
                    <h3>
                        Smart and Flexible
                    </h3>
                </div>
                <p>
                    Lorem lpsum simply dummy typesetting industry ever. Mauris quis sapien viverra.
                </p>
            </div>
        </div>
        <div class="span4">
            <div class="st-service-symbol">
                <div class="fa fa-xxx">
                    <h3>
                        Fully Responsive
                    </h3>
                </div>
                <p>
                    Lorem lpsum simply dummy typesetting industry ever. Mauris quis sapien viverra.
                </p>
            </div>
        </div>
        <div class="span4">
            <div class="st-service-symbol">
                <div class="fa fa-xxx">
                    <h3>
                        Cross Browsered
                    </h3>
                </div>
                <p>
                    Lorem lpsum simply dummy typesetting industry ever. Mauris quis sapien viverra.
                </p>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
            <div class="st-service-symbol">
                <div class="fa fa-xxx">
                    <h3>
                        Well Structured
                    </h3>
                </div>
                <p>
                    Lorem lpsum simply dummy typesetting industry ever. Mauris quis sapien viverra.
                </p>
            </div>
        </div>
        <div class="span4">
            <div class="st-service-symbol">
                <div class="fa fa-xxx">
                    <h3>
                        Different Websites
                    </h3>
                </div>
                <p>
                    Lorem lpsum simply dummy typesetting industry ever. Mauris quis sapien viverra.
                </p>
            </div>
        </div>
        <div class="span4">
            <div class="st-service-symbol">
                <div class="fa fa-xxx">
                    <h3>
                        Fullwidth &amp; Boxed
                    </h3>
                </div>
                <p>
                    Lorem lpsum simply dummy typesetting industry ever. Mauris quis sapien viverra.
                </p>
            </div>
        </div>
    </div>
</div>

The section "Meet our team" include 2 parts : the header and the content.

The header area

Create new custom HTML module then following these steps :

- Show Title : Hide

- Position : full-2

- Module Class Suffix : st-module-special

- Click the "toggle editor", add the sample HTML code bellow then edit to suit with your content

<div id="st-our-team">
    <h3 class="st-module-heading">Meet our team</h3>
    <p>Nam tincidunt, purus at scelerisque consectetur.</p>
    <p>Mauris quis sapien viverra, facilisis nibh quis, dictum purus a laoreet.</p>
</div>

 

The content area

Create new custom HTML module then following these steps :

- Show Title : Hide

- Position : full-2

- Click the "toggle editor", add the sample HTML code bellow then edit to suit with your content.

Please note that : "xxx" is the icon name, ST DEEP provide 10 icons social :

dribbble - facebook - foursquare - google_plus - instagram - linkedin - my_space - pinterest - tumbler - twitter

<div class="st-ourteam-style-1">
    <div class="row-fluid">
        <div class="span4">
            <div class="st-ourteam-item">
                <div class="st-ourteam-social">
                    <a href="#"><span class="st-team-icon-xxx">dribbble</span></a>
                    <a href="#"><span class="st-team-icon-xxx">facebook</span></a>
                    <a href="#"><span class="st-team-icon-xxx">twitter</span></a>
                    <a href="#"><span class="st-team-icon-xxx">google_plus</span></a>
                    <a href="#"><span class="st-team-icon-xxx">instagram</span></a>
                </div>
                <img alt="" src="/images/sampledata/st_deep/our-team/1.jpg">
                <div class="st-ourteam-info">
                    <h3>
                        Larry Queen
                    </h3>
                    <p>
                        Marketer
                    </p>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="st-ourteam-item">
                <div class="st-ourteam-social">
                    <a href="#"><span class="st-team-icon-xxx">dribbble</span></a>
                    <a href="#"><span class="st-team-icon-xxx">facebook</span></a>
                    <a href="#"><span class="st-team-icon-xxx">twitter</span></a>
                    <a href="#"><span class="st-team-icon-xxx">google_plus</span></a>
                    <a href="#"><span class="st-team-icon-xxx">instagram</span></a>
                </div>
                <img alt="" src="/images/sampledata/st_deep/our-team/2.jpg">
                <div class="st-ourteam-info">
                    <h3>
                        Bud Fossett
                    </h3>
                    <p>
                        Marketer
                    </p>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="st-ourteam-item">
                <div class="st-ourteam-social">
                    <a href="#"><span class="st-team-icon-xxx">dribbble</span></a>
                    <a href="#"><span class="st-team-icon-xxx">facebook</span></a>
                    <a href="#"><span class="st-team-icon-xxx">twitter</span></a>
                    <a href="#"><span class="st-team-icon-xxx">google_plus</span></a>
                    <a href="#"><span class="st-team-icon-xxx">instagram</span></a>
                </div>
                <img alt="" src="/images/sampledata/st_deep/our-team/3.jpg">
                <div class="st-ourteam-info">
                    <h3>
                        Lizbeth Schacher
                    </h3>
                    <p>
                        Marketer
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
            <div class="st-ourteam-item">
                <div class="st-ourteam-social">
                    <a href="#"><span class="st-team-icon-xxx">dribbble</span></a>
                    <a href="#"><span class="st-team-icon-xxx">facebook</span></a>
                    <a href="#"><span class="st-team-icon-xxx">twitter</span></a>
                    <a href="#"><span class="st-team-icon-xxx">google_plus</span></a>
                    <a href="#"><span class="st-team-icon-xxx">instagram</span></a>
                </div>
                <img alt="" src="/images/sampledata/st_deep/our-team/4.jpg">
                <div class="st-ourteam-info">
                    <h3>
                        Millard Koger
                    </h3>
                    <p>
                        Marketer
                    </p>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="st-ourteam-item">
                <div class="st-ourteam-social">
                    <a href="#"><span class="st-team-icon-xxx">dribbble</span></a>
                    <a href="#"><span class="st-team-icon-xxx">facebook</span></a>
                    <a href="#"><span class="st-team-icon-xxx">twitter</span></a>
                    <a href="#"><span class="st-team-icon-xxx">google_plus</span></a>
                    <a href="#"><span class="st-team-icon-xxx">instagram</span></a>
                </div>
                <img alt="" src="/images/sampledata/st_deep/our-team/5.jpg">
                <div class="st-ourteam-info">
                    <h3>
                        Owen Schumacher
                    </h3>
                    <p>
                        Marketer
                    </p>
                </div>
            </div>
        </div>
        <div class="span4">
            <div class="st-ourteam-item">
                <div class="st-ourteam-social">
                    <a href="#"><span class="st-team-icon-xxx">dribbble</span></a>
                    <a href="#"><span class="st-team-icon-xxx">facebook</span></a>
                    <a href="#"><span class="st-team-icon-xxx">twitter</span></a>
                    <a href="#"><span class="st-team-icon-xxx">google_plus</span></a>
                    <a href="#"><span class="st-team-icon-xxx">instagram</span></a>
                </div>
                <img alt="" src="/images/sampledata/st_deep/our-team/6.jpg">
                <div class="st-ourteam-info">
                    <h3>
                        Kizzy Monzo
                    </h3>
                    <p>
                        Marketer
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

The section "recent work" include 2 parts : the header and the content.

The header area

Create new custom HTML module and following these steps :

- Show Title : Hide

- Position : full-3

- Module Class Suffix : st-module-special

- Click the "toggle editor", add the sample HTML code then edit to suit with your content

<div id="st-recent-work">
    <h3 class="st-module-heading">Recent Work</h3>
    <p>Nam tincidunt, purus at scelerisque consectetur.</p>
</div>

 

The content area

Create new st_content_showcase module and following these steps :

- Show Title : Hide

- Position : full-3

- Module Class Suffix : st-wall-style-1

- Extension : Wall

- Source : Image Folder

- Choose all value to “Yes”, Image Intro Link : “Link To Image”

 

Open the tab "Image Folder Source"

- Sync Folder : No

- Image Folders : Choose your folder

 

Open the tab "Showcase - wall piterest"

- Grid Columns : 3

- Grid Columns in 320px screen : 1

- Grid Columns in 480px screen : 2

- Grid Columns in 767px screen : 3

- Item Width : 1

- Category : No

- Style : style-1.css

- Modal : Yes

The section "Testimonials" include 2 parts : the header and the content.

The header area

Create new custom HTML module and following these steps :

- Show Title : Hide

- Position : full-4

- Module Class Suffix : st-module-special

- Click the "toggle editor", add the sample HTML code then edit to suit with your content

<div id="st-our-client">
    <h3 class="st-module-heading">TESTIMONIALS</h3>
    <p>Nam tincidunt, purus at scelerisque consectetur.</p>
    <p>Mauris quis sapien viverra, facilisis nibh quis, dictum purus a laoreet.</p>
</div>

 

The content area

Content >>> Category Manager >>> Add New Category named "testimonial" or other that you want.

Add new article and following these steps :

Title : Client's name

Category : Choose category "testimonial"

Click "Toggle editor", add the sample HTML code bellow then edit to suit with your content

<p>CEO, Company</p>
<p>Clean websites, great support. Unlimited faetures. Five stars. Keep the good work guys.</p>

Open the tab : "Images and Links", choose image in parameter "Intro Image"

Save your settings

 

Create new st_content_showcase module the follow these configs :

- Show Title : Hide

- Position : full-4

- Module Class Suffix : st-news-horizontal-style-1

- Extension : news_horizontal

- Source : article

- Title : Yes

- Title Link : No

- Display Introtext : Yes

- IntroText Length : 0

- Image Intro : Yes

- Image Intro Link : No

- Display Category : No

- Auto Find Image : Yes

- Seo Url : Yes

 

Open the tab "Article Source"

- Category : Testimonials

 

Open the tab "Showcase - News Horizontal"

- Columns : 2

- Show Image : Yes

- Show Time Create : No

- Modal : No

The section "Contact Us" include 3 parts : the header and the info and the form.

The header area

Create new custom HTML module and following these steps :

- Show Title : Hide

- Position : full-6

- Module Class Suffix : st-module-special

- Click the "toggle editor", add the sample HTML code then edit to suit with your content

<div id="st-contact-us">
    <h3 class="st-module-heading">Contact Us</h3>
    <p>Nam tincidunt, purus at scelerisque consectetur.</p>
</div>

 

The Info area

Create new custom HTML module and following these steps :

- Show Title : Hide

- Position : user-custom-1

- Module Class Suffix : st-contact-info

- Click the "toggle editor", add the sample HTML code then edit to suit with your content

<p>We always look forward to meet new awesome people and discuss brilliant project ideas. Come visit us! We have a great place to sit.</p>
<p>MEET US. <br> 1234 Street - City Name <br> New York, United States</p>
<p>(+123) 345 678</p>
<p><a href="mailto:Dit e-mailadres wordt beveiligd tegen spambots. JavaScript dient ingeschakeld te zijn om het te bekijken.">Dit e-mailadres wordt beveiligd tegen spambots. JavaScript dient ingeschakeld te zijn om het te bekijken.</a></p>

 

The Form

Create new ST Contact module

- Show Title : Hide

- Position : user-custom-2

- Module Class Suffix : st-contact-style-1

  • 1.png
    2.png
    3.png
    4.png

Contact Us

Need info in English? Send us an email with your question and we will be happy to help you out.
En Dutchies mogen natuurlijk ook mailen!

Drop us a line

Showcases

Background Image

Header Color

:

Content Color

: