Промышленные металлоконструкции
Вы будете уверены, что предлагаемая продукция максимально полно удовлетворит все ваши потребности и цена будет доступной!

Latest

Typography Options

This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.

<div class="s5_greenbox"> <div class="point"> Your text here </div> </div>

<div class="s5_redbox"> <div class="point"> Your text here </div> </div>

<div class="s5_bluebox"> <div class="point"> Your text here </div> </div>

<div class="s5_graybox"> <div class="point"> Your text here </div> </div>

This is a styled box. Use <div class="black_box">Your content goes here!</div>

This is a styled box. Use <div class="gray_box">Your content goes here!</div>

This is a styled box. Use <div class="red_box">Your content goes here!</div>

This is a styled box. Use <div class="blue_box">Your content goes here!</div>

This is a styled box. Use <div class="green_box">Your content goes here!</div>

This is a styled box. Use <div class="yellow_box">Your content goes here!</div>

This is a styled box. Use <div class="orange_box">Your content goes here!</div>


This is an image with the "boxed" class applied:






This is an image with the "boxed_black" class applied:



This is an image with the "padded" class applied:



This is an image with the "full_width" class applied. This can also be done automatically in the template configuration. Be sure to review our Vertex Guide here for other full width image options.



Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

<a> With readon class applied:

readon

<span> With highlight1_text class applied:

highlight1_text

<span> With highlight2_text class applied:

highlight2_text

<span> With highlight_font class applied:

highlight_font

<span> With large_highlight_font class applied:

large_highlight_font

<a> With highlight_button class applied:

highlight_button

This is a sample code div. Use <div class="code">Your content goes here!</div> to create a code div.

#s5_code { width: 30px; color: #fff; line-height: 45px; }

  1. This is an Ordered List
  2. Congue Quisque augue elit dolor nibh.
  3. Condimentum elte quis.
  4. Opsum dolor sit amet consectetuer.

  • This is an Unordered List
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class plus
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_arrow
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_star
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

  • This is an Unordered List with class ul_bullet
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.


The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class="ul_numbers":

  • This is a sample styled number list <li class="li_number1">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number2">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number3">Your content goes here!</li>
  • This is a sample styled number list <li class="li_number4">Your content goes here!</li>
Basic
$49/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back

Premium
$99/per month
Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back
FREE Domain Name

To use the price table on your site grab the following example code below and add to your site. The price table is fully responsive and can display up to 7 price columns. Once you have determined the number of columns you will be using set the wrapper div to the number of columns that you've added. You can use the wrapping classes of "s5_pricetable_1" to "s5_pricetable_7".



<div class="s5_pricetable_3">
<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Basic</div>

<span class="dollarsign">$</span><span class="price">49</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br><br>
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column recommended">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Standard</div>

<span class="dollarsign">$</span><span class="price">79</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name<br>
Personal Concierge
</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div class="s5_pricetable_column">
<div class="s5_pricetable_column_padding">
<div class="s5_title">Premium</div>

<span class="dollarsign">$</span><span class="price">99</span><span class="month">/per month</span>

<div class="s5_options">
Unlimited Space & Traffic <br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name

</div>

<div class="s5_horizontalrule"></div>
<div class="s5_buttoncenter"><a class="button s5_pricetable" href="#">Choose</a></div>

</div>
</div>

<div style="clear:both;"></div>
</div>

Tool Tips


Note - The tool tips script is by default disabled. If you wish to use it you must enable this script in the template's configuration area. This also includes site shaper installations.



Demo 1:


Demo 2:
Demo 2 Image Tool Tip

Demo 3:
Demo 3 Image Tool Tip

The Template's Settings

This template comes loaded with options that you can use to customize your site exactly how you want it. Here's how to get to these custom settings:

  1. In the backend of Joomla go menu item Extensions/Template Manager.
  2. Click on the title of the template.
  3. This will bring you to the template manager screen where you can edit the template's parameters.
  4. Click save when you are done




I like what I see! I want to JOIN TODAY.

Template Specific Options

This template is built on the very powerful S5 Vertex Framework, which comes packed with amazing features! Learn More About Vertex...

Every template built on Vertex also comes with its own unique template specific options applicable to that particular template such as highlight colors, social icons, and much more. These features are in addition to the standard functions of Vertex, and are still controlled through the very user friendly interface of Vertex. This page will document the features specific to this template.

Template Specific Configuration Interface of Vertex

Below is a screenshot that shows all the template specific features available in the user friendly Vertex admin:



Custom Module Gaps

This template comes with the ability to change the side gap and bottom gap between modules. You can set the gap from 0px to 30px. This demo by default shows each module with a 1px gap, and the image below shows the modules with a 20px gap. Because the top_row1 and bottom_row3 sections have a unique background you can control the modules in these sections separately. This is all done very easily through drop down menus in the backend of Vertex.



Custom Highlight Colors

Set your own custom color scheme with the built in highlight colors. Highlight1 primarily controls the buttons, title, menu background, etc. while highlight2 mostly controls the hover over color for buttons as well as a highlight module class suffix. You can set these colors to any color that you want.



Optional Highlight Color On Module Titles

The first word of some module classes is highlighted with the custo highlight1 color. This feature can easily be disabled as shown below.



Custom Header Image

Easily apply any image that you would like as a custom header image for your site. The image will automatically stretch to fit, but it should be relatively large to begin with, between 1500px and 2000px is a good width to use. We recommend matching the custom background color option to match your header image, but you do not have to.

Custom Highlight Fonts

Choose a custom highlight font powered by Google fonts. You can set a custom font for the S5 Flex Menu main level items, titles, buttons, and much more. This is used in conjunction with the default site font which is controlled under the Layout tab of Vertex, and controls many elements as well.



Social Icons

Easily link to a social media site with the built in social icons found in the header of this template. Simply enter the url of your social site in the configuration and the icon will automatically appear. To disable an icon simply leave the url blank for that particular icon.



Uppercase Leters

Choose to enable or disable uppercase letters on most menu items, buttons, titles and more.



Small Menu

The S5 Flex Menu gives you the ability to have subtext on each menu item. If you choose not to use subtext on the first level links simply choose to disable this option and the menu will automatically down size.





Stock Photography

All content and images shown on this site is for demo, presentation purposes only. This site is intended to exemplify a live website and does not make any claim of any kind to the validity of non-Shape5 content, images or posts published. Stock photography and icons were purchased from shutterstock.com for this demo only, and is not included with this template. You may not use these items for your own use without first purchasing them from their copyright owner. Links will be provided for some images if you wish to purchase them from their copyright owners.

Site Shapers


So what are Site Shapers? They are quick installs of Joomla combined with all the modules, content, etc used on our demo, excluding stock photography. Within a few minutes you can have your site up, running and looking just like our demo. No more importing SQL dumps and installing modules. Just head on over to the download section of this template and grab a Site Shaper. Simply install the Site Shaper like any other Joomla installation, it's that easy!



How to setup a Site Shaper

  • Login to your cpanel or your server admin panel.
  • Locate the area where your databases are (usually labeled Mysql Databases)
  • Create a new database
  • Next create a new database user and assign it to this newly created database in the previous step
  • You will then need to extract the site shaper to either a folder on your server or the root directory such as WWW. NOTE: if you already have a website in the root of your WWW folder, we suggest creating a new folder and extract the site shaper there. If your cpanel does not have an extract option or you cannot find it, you may also extract the contents of your site shaper in to a folder on your desktop and upload all the files via an ftp client to your server.
  • Next, navigate to the url where you extracted the site shaper via your web browser.
  • Continue through each screen until you reach the below screenshot:



  • At the above screen be sure to enter localhost as shown, continue to fill in the following text fields with your newly created database and username information
  • Follow through the rest of the site shaper setup and click the install sample data at the last screen and the installation is complete! (be sure to rename/remove the installation directory after finishing the install)



Search Engine Optimized


SEO - Get your site noticed!

Not only is this template beautifully designed but it is great for search engine optimization as well! What is SEO? It is simple the act of altering a web site so that it does well in the organic, crawler-based listings of search engines such as google.com. How does this template accomplish this? It's simple, the majority of your most valuable content is found in the main body of your site, through css we are able to alter the layout of the site and call the main content before the left and right columns are called. This allows for your content to be found first by search engines before it reaches your other content, which is vital in search engine optimization. This is a common feature this can be done with almost all of Shape 5 templates as well.

I like what I see! I want to JOIN TODAY.

S5 Tab Show

The S5 Tab Show can be demo'd at the bottom of this page. This version of the module is customized specifically for this template and cannot be used with any other templates. We do have another version that can be used on any Joomla template.

The module holds up to 10 actual module positions so you can publish any of your favorite modules to one of the slides and keep your site clean and consolidated while giving it some eye candy. So simply publish the s5 tab show module to your desired module position and pages. Then start publishing modules to the positions in the tab show (s5_tab1, s5_tab2, etc); these modules will become the slides.

S5 Frontpage Display

This module is shown on this page just above this text. The frontpage display module is a great way to attract customers and organize your content, and best of all it's fully responsive! It consists of one main display area and 2-9 boxes below that control the main display area that can be split into multiple rows. The main content area and boxes are fully customizable by allowing to you specify your own images, sizes, hyperlinks and much more to adapt to any template! Setup is very easy, by simply supplying images for the top area, background images for the boxes, and your own custom html for each box.

Features at a glance:

  • Fully responsive width and bottom boxes.
  • Responsive re-distribution. Configure the bottom boxes to re-size at your own specified page widths.
  • Fading transition.
  • Width of boxes (set individually).
  • Margins of both top and bottom area.
  • Show between 2 and 9 boxes, that can be split into multiple rows.
  • Set the background position and repeat of each box.
  • Choose to cycle the boxes automatically or manually.
  • Choose the display time.
  • Use any image for the boxes and top area.
  • Create hyperlinks for the boxes or top area.
  • Open hyperlinks in a new window or same window.
  • Insert your own HTML code.

S5 Flex Menu - Menu System

The S5 Flex Menu system is a very powerful plugin that provides functionality far beyond what the standard Joomla menu system can provide. This plugin is intended to be as an extension of the existing menu system in Joomla to add many new features! Please see the full list of features below.

This menu system works off of the core Joomla jquery/mootools scripts so no extra javascript library is needed and keep download sizes to a minimum. Also, if you do not want to use this menu you can simply turn it it off from the template configuration page.

Take your website to the next design level by using the robust and feature rich S5 Flex Menu System. Organize your links with ease and show content in places you never could before!

Menu Features:

  • Automatic onclick functionality for tablet sized touch screens. If a device's screen is detected as touch screen and is of table size, then the menu will function with an onclick method rather than the onmouseover effect that is shown on a laptop or desktop that has a mouse for use.
  • Multiple javascript effects such as fade, slide, etc.
  • Multiple columns for menu items or modules.
  • Modules load directly into the menu.
  • Group sub menu items into the same column or fly out.
  • Optional sub texts for each menu item.
  • Optional menu icon images for each menu item.
  • Automatic multi-language menu change. If you are setting up a multi-language site, the flex menu will automatically change if your site's visitor has a language specific menu setup for their language in the menu manager.
  • And much more!


Menu Screenshot:



I like what I see! I want to JOIN TODAY.

S5 Drop Down Panel

The S5 Drop Down Panel is a slide down panel that can be demo'd at the top of this page. The panel itself contains six module positions. You may publish any module that you wish into these positions. It comes packed with features so be sure to check out the list and screenshot below.

Note - If the responsive layout is enabled the drop down will disable when the screen size reaches 750px so that it does not interfere with the mobile menu bar


  • Customize almost everything! Shadows, borders, gradient, opacity
  • Contains 6 module positions drop_down_1, drop_down_2, drop_down_3, drop_down_4, drop_down_5 and drop_down_6
  • Auto adjust to the height of your content
  • Set your own open and close text
  • Auto collapse if no modules are published to it
  • And many more features!


Screenshot of Drop Down admin in template configuration area:


S5 Accordion Menu

The S5 Accordion menu is demo'd on the left of this page. This version was built specifically for this template and cannot be transferred to another template. We do have another version that can be used on any Joomla template.

This module is based off the Joomla main menu system module so you can still specify which Joomla menu you want to use with the S5 Accordion menu. The menu is powered off of the default mootools/jquery calls that are built directly into Joomla to avoid any javascript conflicts.

This demo is showing the module using module class suffix '-grey2'. If you do not use a module class suffix then the module will appear as shown below.



I like what I see! I want to JOIN TODAY.

Responsive Layout

Responsive design at its most elementary definition is simply the use of css media queries and some javascript to rearrange a website's layout to fit multiple screen sizes. This can range from a wide screen monitor down to the smallest of smart phones. It is done all through the same site, same installation, sharing the same files, and no extra layouts needed as in the past. Unlike many pixel grid based templates, Shape5 Vertex templates are already built on a fluid width layout based on percentages, with an optional pixel width wrapper, which is what responsive layouts require. Because of this Vertex templates do not require a responsive layout, instead it is completely optional! That's right, if you're uncomfortable with responsive layouts or it won't work with your site, then simply turn it off and use the standard fixed or fluid width layout instead!


See It Live On Responsinator.com

Open this website on responsinator.com to see its layout on multiple devices.

What Makes The Vertex Responsive Layout The Best and Most Flexible?

  • The responsive layout is completely optional, don't use it if you don't want it!
  • Virtually no javascript. The only javascript used is for the mobile bar effects and to add responsive capabilites to IE7. We believe that javascript should only be used as a last resort.
  • Start with a fixed or fluid layout.
  • Every area of the template, ie: columns, row, and body; can be set to a fluid layout.
  • Automatic onclick menu functionality for small touch screens.
  • Optional IE7/8 responsive layout.
  • Very easy to understand layout, which allows you to setup your site with very little effort.
  • Fully customizable mobile bar styling.
  • Optional row re-distribution at smaller screens.
  • Hide divs, modules and content easily with hide classes at specified screen sizes.
  • Wide screen support options.
  • Multiple options for fluid width images.
  • And much more!

Easy To Understand Layout

One of the biggest advantages to the Vertex Responsive Layout is that we start the layout as if it were designed for a desktop viewer, and then simply reduce, modify, or remove certain sections or font sizes based on the size of the user's screen. This is all done through css media queries, and is all done automatically for you!

The best way to see this approach, is simply resize your browser to see it all take effect.

Some responsive designs simply use a series of floating divs that re-arrange themselves on the page and add columns as the screen width increases or decreases. The biggest con to this approach is it can become very confusing as to where your content will actually exist on any given screen; making it very hard to create a specific layout and confusing for a client; especially those with specific product and content placement needs.

Our approach is much easier to understand. The site will always keep its core layout shown here. When the screen changes it will adjust as described below. The majority of rows and columns will not change their basic styling or positions until they reach the mobile version. Again, only minor adjustments are made on varying screen sizes so that you always know what your site will look like and where content will be placed!

  • If the columns are set to use fluid widths then no changes will occur for large screens, everything will simply be percentage widths based on the availalbe area. If you are using the max-body width calculations the column widths will be based off of this setting instead of screen width.
  • Between 1050px and 600px if you have set the columns to fluid widths, you have an option to combine the inset columns, if they are shown on the page, into a single column with their adjacent column. In other words right_inset and right become one column to save space. Because each site is different, you can choose the screen size to specify this change.
  • At 580px (a standard mobile device size) the entire body will become one single column and module stack on top of each other. Some adjustments to the header and footer will occur.
  • Please note - you have an option to use either fluid or fixed width columns (right_inset, right, left_inset, and left). We highly recommend using fluid columns when responsive is enabled. If you choose fixed widths there are other responsive options available for this setting as well in the template configuration under the Layout tab.

Below are illustrations of the center columns only in the scenarios described above.



Row Re-Distribution

Each row in a Vertex template contains six module positions. If you are using a lot of modules in a particular row the content can become squished when the screen becomes too narrow, specifically on smaller seven inch tablet screens. The row re-distribution features allow you to change the layout into multiple rows with new module widths to give each position more room at specific screen sizes. You get to specify the screen width that this change will trigger at, and you can specify from several preset width options for each row indepent of each other. Single Column will set all modules in that row to 100% and one module per row. Two Columns will set all modules in that row to 50% and two modules per row. Three Columns will set all modules in that row to 33.33% and three modules per row. Redis. 33/50 will set positions 1 through 3 to 33.33% and positions 4 through 6 to 50%, this setting is meant to be used when positions 1 through 5 are in use. Redis. 50/100 will set positions 1 through 2 to 50% and positions 3 through 6 to 100%. Redis. 100/33 will set position 1 to 100% and positions 2 through 6 to 33.33%. Redis. 100/50 will set position 1 to 100% and positions 2 through 6 to 50%. This setting will override any custom row widths you set under the Row Sizes tab when the screen size reaches the selected width. All modules will always change to a single column at 580px for mobile view. This feature is NOT available for IE7 or IE8!

Below you will find a screenshot of the responsive options available in the Vertex framework. Below that you will find documentation for each feature shown.



General Layout

The general layout options are the ones starting with Enable Font Resizer? and ending with Right Inset Width. These parameters are the core layout options that apply to all templates, whether responsive is enabled or not. Configuring this area is the first step in configuring a responsive layout. You can choose to set the site to either a fixed pixel width or fluid percentage width, the responsive layout will work with either option. If you are using the fluid width option we recommend enabling the Max Body Width option so that that your site does not go above the set pixels; this helps keep your site looking proportionate across very wide screen.

Enable The Responsive Layout

If you wish to use the responsive layout simply turn on the switch and the Vertex framework will take care of the rest! It's really that simple! Notice there is a separate switch for IE7 and IE8. This browser does not support css media queries natively, which is what makes responsive layouts possible. In order to add this functionality the template must use javascript, which can affect the performance of a website. With this added javascript IE7 and IE8 will support the responsive layout, but we highly recommend leaving it turned off. Keep in mind that the primary target for responsive websites is tablet and mobile devices, where IE7 and IE8 do not exist. Please also note that some features such as the row re-distribution functions are not supported by IE7/8.

Hide Tablet and Mobile Divs

One of the biggest obstacles to overcome when designing a responsive layout site is that not all content, images and extensions were designed to work with responsive layouts. That means that sometimes you need the ability to hide a specific element on only certain sized screens, so that something doesn't break the site's layout and everything looks proportionate. We've made that all possible and very easy to do for you with hiding classes! There are three main ways to hide content on different size screens, and they are documented here.

Column Settings

Depnding on whether you have set the side columns to fixed or fluid widths, you have several options to choose from. We do highly recommend fluid columns when responsive is enabled. The first option, which pertains to both fixed and fluid, allows you to combine articles, will set modules published to middle_top and middle_bottom positions as well as articles published to the component area to a single column at the chosen screen width, this setting effects only those areas and nothing else. The settings below that are split into two sections depending on your column width setting. These settings effect combining the inset columns, creating a single column, and reducing the column widths. Be sure to read the tooltip of each section for a full description.

Mobile Bars

When the screen size reaches 750px wide (anything smaller than a standard 10 inch tablet), a navigation bar will appear across the top of the site and the bottom. This bar replaces the main menu, login, register, and search, for easier user on mobile devices. In the configuration you can choose what to enable on these bars as well as change the colors and style however you would like.





Mobile Links

Even though this is a responsive layout and there is no separate layout page for mobile devices, that does not mean that your site's viewers will understand this or even know what a responsive layout is. It has become a standard for websites that use a mobile layout to have a link to view the desktop view of the website, and this is what your site viewers will expect to see. This link simply turns off the responsive configuration using a cookie and calls the website like a standard desktop would when viewing in mobile. There is then a link to return back to the mobile view of the site presented.

I like what I see! I want to JOIN TODAY.

Page, Column and Row Widths


Fixed or Fluid Width

This template has the ability to set the entire width of your set to either a fixed pixel width or a fluid percentage width. You can set the width to any size you want.



Column Widths

You may also set the widths of the following positions to any width that you need to: left, left_inset, right, and right_inset. You may set them to any width you need to. Columns can either be set to a fixed px width or they can be set to a fluid percentage width. If you are enabling the responsive layout we recommend setting these to percentage width.


Row Widths

This template comes loaded with module positions, many of which appear in rows of 6 module positions. Any row that contains 6 module positions can have it's row columns set to automatic widths or manual. For example, in the picture below the first row shows 4 modules published and since it's set to automatic each is set to 25% width. The second row shows a manual calculation for each module in the row. Again, you may do this for any row that contains 6 modules. If you setup a manual calculation they must total to 100%. Not all 6 modules need to be used, as shown below.

All of this is done very easily in the template configuration.


Multibox



Features:

  • Supports a range of multimedia formats: images, flash, video, mp3s, html!
  • Auto detects formats or you can specify the format
  • Html descriptions
  • Enable/Disable page overlay when multibox pops up (via template parameters)
  • Enable/Disable controls (via template parameters)

  • Images Example

    Image #1. It can support html.
      
    Image #2. It can support html.
      
    Image #3. It can support html.

    Separeate Group Images Example

    Image #1. It can support html.
      
    Image #2. It can support html.
      
    Image #3. It can support html.

    Video Example:

    Youtube.com Video - CLICK ME
    UP: Carl and Ellie


    You can use the following video formats: flv, mov, wmv, real and swf. Just insert the URL to the videos in the href of the hyperlink, here is an example of how we did this for a Youtube video:

    YouTube Tutorial: Simply right click on a youtube video and copy the embed code, then paste into a text editor and look for the embed src and use that URL in your hyperlink.

    MP3 Example:

    MP3 example - CLICK ME
    mp3 example


    iFrame:

    iFrame/HTML Example - CLICK ME
    getfirebug.com



    I like what I see! I want to JOIN TODAY.

Module Positions and Styles



Module Features Related To This Template:

1. The gap between modules can be changed from 0px to 30px in the Vertex admin.
2. The first word of some modules uses the highlight color, this can be disabled.
Be sure to check out the full list of template specific features from here.


All modules are fully collapsible

What exactly is a collapsing module? It's quite simple, whenever a module is not published to a postion that position does not appear on the frontend of the template. Consider the example below:



This particular row has 6 module positions available to publish to. Let's say you only want to publish to 4 of these positions. The template will automatically collapse the modules you do not want to use and adjust the size of the modules accordingly:



If no modules are published to the row the entire row itself will not show. The best feature of this is every module can be published to its own unique pages so the layout of your site can change on every page!


Infinite Layouts

Because there are so many module positions available in so many different areas, the number of layouts you can create are limitless! For example, if you would like to show your main content area on the right side of your site but still have a column of modules, simply published your modules to the right or right_inset positions or both. The same would be true for the opposite, if you want a column on the left simply publish modules to left or left_inset. Of course you can always choose to not have a column at all. Remember, any module not published to will automatically collapse and the remaining area will automatically adjust. There is no need to choose a pre-defined layout for your entire site, simply use the power of collpasing module positions and take advantage of the numerous amount of module positions to create any layout you can dream of! Be sure to checkout the layout of modules below.


Dozens of Modules

Below is a complete list of all the module positions available for this template.



How to install and setup module styles:

  1. Download any module you wish to publish to your site.
  2. In the backend of Joomla navigate to the menu item Extensions/Install Uninstall


  3. Browse for the module's install file and click Upload File & Install.
  4. Once the module has be installed navigate to the menu item Extensions/Module Manager (same menu as above)
  5. Find the Module just installed and click on it's title.
  6. Change any parameters that you wish and be sure to set it to published and publish it to your desired module position.
  7. To apply a module style simply fill in the module class suffix field with any of this template's included module styles. This parameter setting is found under Module Parameters on the right side of the screen.


  8. Assign what pages you would like the module to appear on and finally click Save.


Menu Scroll To Section

This template includes a scroll to feature that will scroll your page to a specified section of your site. All you have to do is create an external link in your menu manager and then in the URL area enter in any ID on your page. You can reference any of the following IDs in order:

  • #s5_header_area1
  • #s5_top_row1_area1
  • #s5_top_row2_area1
  • #s5_top_row3_area1
  • #s5_center_area1
  • #s5_bottom_row1_area1
  • #s5_bottom_row2_area1
  • #s5_bottom_row3_area1
  • #s5_footer_area1

Screenshot of admin area of an external menu item with DIV reference entered:

Login and Register Setup

The S5 Box can be demo'd by clicking on either the Login or Register buttons found towards the top of this page.

The module allows for up to 10 different S5 Box's on one page all via 10 module positions. You simply add a class to any HTML element on your site and enable the corresponding box and you are good to go!


To enable the login and register modules:

1. Install the S5 Box module and publish it to all pages on your site. Try to publish it to a position where a module already exists on all pages, but don't worry it won't change the layout of your site, the script is automatically hidden on your site.

2. Install and publish the S5 Register module to the 'register' module position

3. Publish the default Joomla login module to the 'login' module position.

4. In your template parameters area of Joomla you can change the text for login, register and logout.

5. That's it, you're all done!


If you do not wish to use the S5 Box but would still like to use the Login and Register links then simply complete step 4 above and also fill out your own custom urls just below those fields in the template configuration. Filling out the custom url fields will disable the S5 Box.

The S5 Box runs off of the core Joomla jquery/mootools libraries so there will be no conflicts with third party extensions or extra javascript files to download.

Features:

  • Powered by no conflict mode jQuery Javascript or mootools
  • Choose, elastic, fade or none for the popup effect
  • Up to 10 S5 Box's throughout your site or on any one page!
  • Set the percentage of width of each box according to overall screen size

Tutorial on how to get the s5 box working and use all 10 module positions it includes

1. Adding the S5 Box positions:

  • Open up the templateDetails.xml file included with the template you are using.
  • Locate the positions area.
  • Start adding new positions s5_box1, s5_box2, s5_box3, etc all the way up to s5_box10.

2. Adding the S5 Box classes:

  • The S5 Box class name of the corresponding position must be added to the link that will open the box. For example the following code will display a link that says Click Here and will open the S5 Box and display whatever module is published to the s5_box3 module position:



  • These classes can be added to any element, ie: divs, spans, etc., but the common use will be to add this into content with a link similar to the one shown in the picture above. To enter this link you must do so from the HTML edit screen on your content editor:

    Once you have clicked the HTML button the HTML code window will appear much like the first image.
  • You can continue adding these classes throughout your site just be sure to have published a module to the corresponding position or the box will not work correctly. So if you add the class s5box_two you will also have to publish a module to the s5_box2 position.
  • Module positions and their corresponding classes:

    s5_box1 = s5box_one
    s5_box2 = s5box_two
    s5_box3 = s5box_three
    s5_box4 = s5box_four
    s5_box5 = s5box_five
    s5_box6 = s5box_six
    s5_box7 = s5box_seven
    s5_box8 = s5box_eight
    s5_box9 = s5box_nine
    s5_box10 = s5box_ten

3. Lastly, publish your modules to the S5 Box positions:

  • Now that you have added the s5 box positions just go to your site modules area and publish modules to those positions
  • Make sure that you have added a class to an HTML element as described above or the s5 box will have no activation button
  • Also make sure to publish the actual s5 box to a non s5 box position, perhaps publish it to the "debug" position or a similar one in your template.

Main S5 Box Module Settings:

  • In the backend of the S5 Box module you can adjust the width of each box independent of each other.
  • Make sure that the S5 Box module is published to all pages, it can be published to any template position. Also make sure that the module opening in the box is published to the page the link is on.

Lazy Load Images

The lazy load script is a great way to save bandwidth and load your pages much faster. Images that are not visible on the initial page load are not loaded or downloaded until they come into the main viewing area. Once an image comes into view it is then downloaded and faded into visibility. Scroll down this page to see the script in action.

Setup is very easy! By default this script is disabled, in order to enable it simply choose All Images or Individual Images from the drop down, as shown below from inside the template configuration page.



All images will load every standard image on the page with lazy load. There is no extra configuration or extra code to add with this configuration, it will just happen automatically. Individual images would be used if you want only certain images to load with this script and not all of them. To do this simply add class="s5_lazyload" to the image like so:
<img class="s5_lazyload" src="http://www.yoursite.com/image.jpg"></img>


This script is compatible with Firefox3+, IE8+, Chrome14+, Safari5.05+, Opera 11.11+

See the script in action:


Installing The Template


    • Download the installation package from our download section.
    • Once the download is complete go to the backend of Joomla.
    • Navigate through your menu system to Extensions/Extensions Manager.

                    

    • Once at the installation screen click the browse button and navigate to where you downloaded the template file.
    • Once you have the file selected click 'Upload File and Install'
    • The template is now installed, now let's set it as the default template:

    • Navigate through your menu system to Extensions/Template Manager.
    • Find the radio button next to the newly installed template.
    • Click on the Default button at the top right of the screen and you're done!

     

Info Slide

The info slide script is a great way to display your content to your customers! It will place a sliding text box over any image on the page. It can be placed inside of content or modules. It will also automatically adjust to any size screen size on window resize. See below for a demonstration.


Example Slide

This is dummy text. You can add any text or html markup here.

Example Slide

This is dummy text. You can add any text or html markup here.

Example Slide

This is dummy text. You can add any text or html markup here.

Example Slide

This is dummy text. You can add any text or html markup here.

Example Slide

This is dummy text. You can add any text or html markup here.

Example Slide

This is dummy text. You can add any text or html markup here.

Example Slide

This is dummy text. You can add any text or html markup here.

Example Slide

This is dummy text. You can add any text or html markup here.

Example Slide

This is dummy text. You can add any text or html markup here.

I like what I see! I want to JOIN TODAY.

IE7 and 8 CSS3 Support

This template includes limited support of CSS3 for IE7 and IE8. With the power of css3, websites can now be built much faster and with far less code. Design features such as gradients or shadows that used to be created and then called as images on the page are now simply called by css code. Transition effects that used to require full javascript libraries can now be called with less than 1kb of text. Rounded corners that used to require upwards of eight wrapping div elements can now be done with a single element. What does this mean for you? Simple, a lightning fast website, that becomes even more search engine friendly.

Many modern browsers such as Firefox4 of IE9 already support CSS3 natively, but where does that leave IE7 and IE8? Thankfully a great solution called CSS PIE (Progressive Internet Explorer) has been introduced and is integrated into this template. Simply put, CSS PIE a script that upgrades IE7 and 8 to support most CSS3 formatting. There are slight variations and some CSS3 formatting isn't supported, but overall it does a great job and allows us to extend CSS3 support to IE7 and 8.

How To Setup the Search Box and Menus


1. Search Setup

  • Simply publish the default Joomla search module to the search position.

2. Column Menu Setup

  • Publish any menu module to the main body module positions on your site.
  • There should be no menu style suffixes applied under advanced parameters.
  • The menu style should be set to list.

3. Bottom and Custom_1 Menu Setup


  • Publish any menu to the 'bottom_menu' or 'custom_1' positions.
  • There are no menu style suffixes applied under advanced parameters.
  • The menu style should be set to list

Hide Divs, Content, and Modules

One of the biggest obstacles to overcome when designing a responsive layout site is that not all content, images and extensions were designed to work with responsive layouts. That means that sometimes you need the ability to hide a specific element on only certain sized screens, so that something doesn't break the site's layout and everything looks proportionate. We've made that all possible and very easy to do for you with hiding classes! There are three main ways to hide content on different size screens, and they are documented below. Please note that these classes are only enabled when the responsive layout is enabled.



Hide Sections of the Template via the Template Configuration

This is the simplest way to hide an area of the template is to use the template interface to easily select areas of the template that you want to hide on tablet sized screens (970px and less) or mobile screens (580px or less). Simply select the area that you want to hide and the Vertex framework takes care of the rest! These fields do work independent of each other, so if you want to hide something on both tablet and mobile sized screens you must select the same area on both fields.



IMPORTANT - If you turn off a column position such as right or right_inset something else must be in the same column or the layout will not work. For example you can turn off right_inset and keep right, but you cannot turn off both unless something is publihsed to right_top or right_bottom as well.

Hide Specific Modules via the Hide Classes

If you have only a specific module that you would like to hide at certain screen sizes, and not an entire section of the template, this is the best approach. A hide class is a class that can be applied to any element on the page and hides that particular element at certain screen sizes. Classes range in 100px increments for large screens and 50px increments for small screens. Below are some examples, and at the very bottom of this page there is a list of all the available hide classes. Use these sparingly if you can. As a recommendation, the primary target of these classes should focus on tablet and mobile sized screens. Wide screen monitors vary in size so it's much harder to use these classes correctly for large monitors. Tablet and mobile devices are much more consistent in size so it is much easier to apply the smaller hide classes.

For example, say you want to hide a specific module when the screen sizes reaches 900px wide, and remain hidden for any screen below 900px. Simply add class=hide_900 to the title of the module like this:



The class is simply put into the title of the module. There must be a space just before class= , and don't worry, the class area of the title won't actually show on the live site, it's only shown in the backend. It must be entered exactly as shown above. The title can be published or unpublished, it does not matter which. Simply adding the classes to the title will apply the classes to the entire module.

What if you want it to hide the module only for a certain range? That's easy just add _only to the end of the class name. hide_900_only will only hide that element from 900px to the next increment in the hide classes, which is 850px. So it will only be hidden from 850px to 900px. You can also add multiple classes to the title like this class=hide_900_only hide_850_only which will apply both classes to the module.

What if you want to hide the module and then show it again later? That's simple, use show_ in the class instead of hide_. This will make the module show for the specified size no matter what other settings are on the module. So if you want to hide the module from 1000px and below, but you want to show it again later then do something like the following class=hide_1000 show_600. This will hide the module from 600px to 1000px.

Is there a more simple way? Yes, of course, the above directions are for experienced users who want to tweak their content for every available screen size. If you don't want to mess around with specific window sizes simply use the following classes instead, which have preset screen sizes applied to them:

hide_all
hide_wide_screen
hide_standard_screen
hide_large_tablet
hide_small_tablet
hide_mobile
show_wide_screen
show_standard_screen
show_large_tablet
show_small_tablet
show_mobile

Why would someone use hide_all? This is a great tool for anyone wanting to show content only on a mobile or tablet sized screen but hide it on all other devices. To do this you should use class="hide_all show_mobile". The hide_all will set the content or module to display:none on all devices, and one the screen size reaches mobile size the show_mobile will override the display:none and show the content.


Hide Specific Content via the Hide Classes

If you have only specific content or images within an article or module that you want to hide then use the same hide classes described above, but wrap that specific content inside of the class instead of applying it to the entire module. For example, in the image below, the third paragraph will hide at 900px and then show again at 700px.



Available Hide Classes

All the available hide classes are listed below. Note there is a break at 970px and 580px to accommodate tablet and mobile sized screens. At the bottom of the list you will see inline calls, these calls should only be used if the default block calls cause a layout problem with your content, which can happen with applying a display:block.

/* HIDE CLASSES
----------------------------------------------------------- */

@media screen and (max-width: 1600px){
.hide_1600 {
display:none !important;
}
}

@media screen and (min-width:1500px) and (max-width: 1600px){
.hide_1600_only {
display:none !important;
}
}

@media screen and (max-width: 1550px){
.hide_1550 {
display:none !important;
}
}

@media screen and (min-width:1450px) and (max-width: 1550px){
.hide_1550_only {
display:none !important;
}
}

@media screen and (max-width: 1500px){
.hide_1500 {
display:none !important;
}
}

@media screen and (min-width:1400px) and (max-width: 1500px){
.hide_1500_only {
display:none !important;
}
}

@media screen and (max-width: 1450px){
.hide_1450 {
display:none !important;
}
}

@media screen and (min-width:1350px) and (max-width: 1450px){
.hide_1450_only {
display:none !important;
}
}

@media screen and (max-width: 1400px){
.hide_1400 {
display:none !important;
}
}

@media screen and (min-width:1300px) and (max-width: 1400px){
.hide_1400_only {
display:none !important;
}
}

@media screen and (max-width: 1350px){
.hide_1350 {
display:none !important;
}
}

@media screen and (min-width:1250px) and (max-width: 1350px){
.hide_1350_only {
display:none !important;
}
}

@media screen and (max-width: 1300px){
.hide_1300 {
display:none !important;
}
}

@media screen and (min-width:1200px) and (max-width: 1300px){
.hide_1300_only {
display:none !important;
}
}

@media screen and (max-width: 1250px){
.hide_1250 {
display:none !important;
}
}

@media screen and (min-width:1150px) and (max-width: 1250px){
.hide_1250_only {
display:none !important;
}
}

@media screen and (max-width: 1200px){
.hide_1200 {
display:none !important;
}
}

@media screen and (min-width:1100px) and (max-width: 1200px){
.hide_1200_only {
display:none !important;
}
}

@media screen and (max-width: 1150px){
.hide_1150 {
display:none !important;
}
}

@media screen and (min-width:1050px) and (max-width: 1150px){
.hide_1150_only {
display:none !important;
}
}

@media screen and (max-width: 1100px){
.hide_1100 {
display:none !important;
}
}

@media screen and (min-width:1000px) and (max-width: 1100px){
.hide_1100_only {
display:none !important;
}
}

@media screen and (max-width: 1050px){
.hide_1050 {
display:none !important;
}
}

@media screen and (min-width:950px) and (max-width: 1050px){
.hide_1050_only {
display:none !important;
}
}

@media screen and (max-width: 1000px){
.hide_1000 {
display:none !important;
}
}

@media screen and (min-width:900px) and (max-width: 1000px){
.hide_1000_only {
display:none !important;
}
}

@media screen and (max-width: 970px){
.hide_970 {
display:none !important;
}
}

@media screen and (min-width:900px) and (max-width: 970px){
.hide_970_only {
display:none !important;
}
}

@media screen and (max-width: 950px){
.hide_950 {
display:none !important;
}
}

@media screen and (min-width:900px) and (max-width: 950px){
.hide_950_only {
display:none !important;
}
}

@media screen and (max-width: 900px){
.hide_900 {
display:none !important;
}
}

@media screen and (min-width:850px) and (max-width: 900px){
.hide_900_only {
display:none !important;
}
}

@media screen and (max-width: 850px){
.hide_850 {
display:none !important;
}
}

@media screen and (min-width:800px) and (max-width: 850px){
.hide_850_only {
display:none !important;
}
}

@media screen and (max-width: 800px){
.hide_800 {
display:none !important;
}
}

@media screen and (min-width:750px) and (max-width: 800px){
.hide_800_only {
display:none !important;
}
}

@media screen and (max-width: 750px){
.hide_750 {
display:none !important;
}
}

@media screen and (min-width:700px) and (max-width: 750px){
.hide_750_only {
display:none !important;
}
}

@media screen and (max-width: 700px){
.hide_700 {
display:none !important;
}
}

@media screen and (min-width:650px) and (max-width: 700px){
.hide_700_only {
display:none !important;
}
}

@media screen and (max-width: 650px){
.hide_650 {
display:none !important;
}
}

@media screen and (min-width:600px) and (max-width: 650px){
.hide_650_only {
display:none !important;
}
}

@media screen and (max-width: 600px){
.hide_600 {
display:none !important;
}
}

@media screen and (min-width:580px) and (max-width: 600px){
.hide_600_only {
display:none !important;
}
}

@media screen and (max-width: 579px){
.hide_580 {
display:none !important;
}
}

@media screen and (min-width:550px) and (max-width: 579px){
.hide_580_only {
display:none !important;
}
}

.hide_all {
display:none ! important;
}

@media screen and (min-width:1300px) and (max-width: 50000px){
.hide_wide_screen {
display:none !important;
}
}

@media screen and (min-width:971px) and (max-width: 1299px){
.hide_standard_screen {
display:none !important;
}
}

@media screen and (min-width:750px) and (max-width: 970px){
.hide_large_tablet {
display:none !important;
}
}

@media screen and (min-width:580px) and (max-width: 750px){
.hide_small_tablet {
display:none !important;
}
}

@media screen and (min-width:580px) and (max-width: 750px){
.hide_small_tablet {
display:none !important;
}
}

@media screen and (max-width: 579px){
.hide_mobile {
display:none !important;
}
}

@media screen and (max-width: 1600px){
.show_1600 {
display:block !important;
}
}

@media screen and (min-width:1500px) and (max-width: 1600px){
.show_1600_only {
display:block !important;
}
}

@media screen and (max-width: 1550px){
.show_1550 {
display:block !important;
}
}

@media screen and (min-width:1450px) and (max-width: 1550px){
.show_1550_only {
display:block !important;
}
}

@media screen and (max-width: 1500px){
.show_1500 {
display:block !important;
}
}

@media screen and (min-width:1400px) and (max-width: 1500px){
.show_1500_only {
display:block !important;
}
}

@media screen and (max-width: 1450px){
.show_1450 {
display:block !important;
}
}

@media screen and (min-width:1350px) and (max-width: 1450px){
.show_1450_only {
display:block !important;
}
}

@media screen and (max-width: 1400px){
.show_1400 {
display:block !important;
}
}

@media screen and (min-width:1300px) and (max-width: 1400px){
.show_1400_only {
display:block !important;
}
}

@media screen and (max-width: 1350px){
.show_1350 {
display:block !important;
}
}

@media screen and (min-width:1250px) and (max-width: 1350px){
.show_1350_only {
display:block !important;
}
}

@media screen and (max-width: 1300px){
.show_1300 {
display:block !important;
}
}

@media screen and (min-width:1200px) and (max-width: 1300px){
.show_1300_only {
display:block !important;
}
}

@media screen and (max-width: 1250px){
.show_1250 {
display:block !important;
}
}

@media screen and (min-width:1150px) and (max-width: 1250px){
.show_1250_only {
display:block !important;
}
}

@media screen and (max-width: 1200px){
.show_1200 {
display:block !important;
}
}

@media screen and (min-width:1100px) and (max-width: 1200px){
.show_1200_only {
display:block !important;
}
}

@media screen and (max-width: 1150px){
.show_1150 {
display:block !important;
}
}

@media screen and (min-width:1050px) and (max-width: 1150px){
.show_1150_only {
display:block !important;
}
}

@media screen and (max-width: 1100px){
.show_1100 {
display:block !important;
}
}

@media screen and (min-width:1000px) and (max-width: 1100px){
.show_1100_only {
display:block !important;
}
}

@media screen and (max-width: 1050px){
.show_1050 {
display:block !important;
}
}

@media screen and (min-width:950px) and (max-width: 1050px){
.show_1050_only {
display:block !important;
}
}

@media screen and (max-width: 1000px){
.show_1000 {
display:block !important;
}
}

@media screen and (min-width:900px) and (max-width: 1000px){
.show_1000_only {
display:block !important;
}
}

@media screen and (max-width: 970px){
.show_970 {
display:block !important;
}
}

@media screen and (min-width:900px) and (max-width: 970px){
.show_970_only {
display:block !important;
}
}

@media screen and (max-width: 950px){
.show_950 {
display:block !important;
}
}

@media screen and (min-width:900px) and (max-width: 950px){
.show_950_only {
display:block !important;
}
}

@media screen and (max-width: 900px){
.show_900 {
display:block !important;
}
}

@media screen and (min-width:850px) and (max-width: 900px){
.show_900_only {
display:block !important;
}
}

@media screen and (max-width: 850px){
.show_850 {
display:block !important;
}
}

@media screen and (min-width:800px) and (max-width: 850px){
.show_850_only {
display:block !important;
}
}

@media screen and (max-width: 800px){
.show_800 {
display:block !important;
}
}

@media screen and (min-width:750px) and (max-width: 800px){
.show_800_only {
display:block !important;
}
}

@media screen and (max-width: 750px){
.show_750 {
display:block !important;
}
}

@media screen and (min-width:700px) and (max-width: 750px){
.show_750_only {
display:block !important;
}
}

@media screen and (max-width: 700px){
.show_700 {
display:block !important;
}
}

@media screen and (min-width:650px) and (max-width: 700px){
.show_700_only {
display:block !important;
}
}

@media screen and (max-width: 650px){
.show_650 {
display:block !important;
}
}

@media screen and (min-width:600px) and (max-width: 650px){
.show_650_only {
display:block !important;
}
}

@media screen and (max-width: 600px){
.show_600 {
display:block !important;
}
}

@media screen and (min-width:580px) and (max-width: 600px){
.show_600_only {
display:block !important;
}
}

@media screen and (max-width: 579px){
.show_580 {
display:block !important;
}
}

@media screen and (min-width:550px) and (max-width: 579px){
.show_580_only {
display:block !important;
}
}

@media screen and (min-width:1300px) and (max-width: 50000px){
.show_wide_screen {
display:block !important;
}
}

@media screen and (min-width:971px) and (max-width: 1299px){
.show_standard_screen {
display:block !important;
}
}

@media screen and (min-width:750px) and (max-width: 970px){
.show_large_tablet {
display:block !important;
}
}

@media screen and (min-width:580px) and (max-width: 750px){
.show_small_tablet {
display:block !important;
}
}

@media screen and (max-width: 579px){
.show_mobile {
display:block !important;
}
}


/* THE INLINE SHOW CALLS BELOW SHOULD BE USED SELDOMLY. THEY SHOULD ONLY BE USED IF THE BLOCK SHOW CALLS ABOVE CAUSE A LAYOUT ISSUE WHEN TRIGGERED.
----------------------------------------------------------- */

@media screen and (max-width: 1600px){
.show_1600_inline {
display:inline !important;
}
}

@media screen and (min-width:1500px) and (max-width: 1600px){
.show_1600_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1550px){
.show_1550_inline {
display:inline !important;
}
}

@media screen and (min-width:1450px) and (max-width: 1550px){
.show_1550_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1500px){
.show_1500_inline {
display:inline !important;
}
}

@media screen and (min-width:1400px) and (max-width: 1500px){
.show_1500_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1450px){
.show_1450_inline {
display:inline !important;
}
}

@media screen and (min-width:1350px) and (max-width: 1450px){
.show_1450_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1400px){
.show_1400_inline {
display:inline !important;
}
}

@media screen and (min-width:1300px) and (max-width: 1400px){
.show_1400_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1350px){
.show_1350_inline {
display:inline !important;
}
}

@media screen and (min-width:1250px) and (max-width: 1350px){
.show_1350_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1300px){
.show_1300_inline {
display:inline !important;
}
}

@media screen and (min-width:1200px) and (max-width: 1300px){
.show_1300_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1250px){
.show_1250_inline {
display:inline !important;
}
}

@media screen and (min-width:1150px) and (max-width: 1250px){
.show_1250_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1200px){
.show_1200_inline {
display:inline !important;
}
}

@media screen and (min-width:1100px) and (max-width: 1200px){
.show_1200_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1150px){
.show_1150_inline {
display:inline !important;
}
}

@media screen and (min-width:1050px) and (max-width: 1150px){
.show_1150_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1100px){
.show_1100_inline {
display:inline !important;
}
}

@media screen and (min-width:1000px) and (max-width: 1100px){
.show_1100_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1050px){
.show_1050_inline {
display:inline !important;
}
}

@media screen and (min-width:950px) and (max-width: 1050px){
.show_1050_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 1000px){
.show_1000_inline {
display:inline !important;
}
}

@media screen and (min-width:900px) and (max-width: 1000px){
.show_1000_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 970px){
.show_970_inline {
display:inline !important;
}
}

@media screen and (min-width:900px) and (max-width: 970px){
.show_970_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 950px){
.show_950_inline {
display:inline !important;
}
}

@media screen and (min-width:900px) and (max-width: 950px){
.show_950_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 900px){
.show_900_inline {
display:inline !important;
}
}

@media screen and (min-width:850px) and (max-width: 900px){
.show_900_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 850px){
.show_850_inline {
display:inline !important;
}
}

@media screen and (min-width:800px) and (max-width: 850px){
.show_850_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 800px){
.show_800_inline {
display:inline !important;
}
}

@media screen and (min-width:750px) and (max-width: 800px){
.show_800_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 750px){
.show_750_inline {
display:inline !important;
}
}

@media screen and (min-width:700px) and (max-width: 750px){
.show_750_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 700px){
.show_700_inline {
display:inline !important;
}
}

@media screen and (min-width:650px) and (max-width: 700px){
.show_700_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 650px){
.show_650_inline {
display:inline !important;
}
}

@media screen and (min-width:600px) and (max-width: 650px){
.show_650_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 600px){
.show_600_inline {
display:inline !important;
}
}

@media screen and (min-width:580px) and (max-width: 600px){
.show_600_only_inline {
display:inline !important;
}
}

@media screen and (max-width: 579px){
.show_580_inline {
display:inline !important;
}
}

@media screen and (min-width:550px) and (max-width: 579px){
.show_580_only_inline {
display:inline !important;
}
}

@media screen and (min-width:1300px) and (max-width: 50000px){
.show_wide_screen_inline {
display:inline !important;
}
}

@media screen and (min-width:971px) and (max-width: 1299px){
.show_standard_screen_inline {
display:inline !important;
}
}

@media screen and (min-width:750px) and (max-width: 970px){
.show_large_tablet_inline {
display:inline !important;
}
}

@media screen and (min-width:580px) and (max-width: 750px){
.show_small_tablet_inline {
display:inline !important;
}
}

@media screen and (max-width: 579px){
.show_mobile_inline {
display:inline !important;
}
}




I like what I see! I want to JOIN TODAY.

Hide Article Component Area

Did you ever need to create a page where this is no article present or no component to be shown, and only load modules? This template makes it all possible! From the template configuration page you can hide the main content area on any page on the site.

Below is a screenshot of this function from the configuration page, found under the General tab:

Google Fonts Enabled

Do you want your own custom font? Not a problem, this template comes with Google Fonts enabled, allowing you to pick from over a dozen font families for your website. In the template parameters area of the template you can choose your own custom font, and preview it from the Vertex interface. Below are some examples of the fonts available.




I like what I see! I want to JOIN TODAY.

Fixed Side Tabs

This template includes a "Fixed Tab" option that you can enable and publish on your site and will show in a fixed position on either the left or right side of the screen. The great feature about the fixed tabs is that you can enter any text you desire and the text is automatically flipped vertically! This is great for search engines to read your text and also saves the hassle of creating an image with vertical text and placing it on the side of your site. The tabs are published site wide and can have the following options that can be changed via the template parameters area and can link to any URL that you desire.

The following is a quick list of features:

  • Change background to any hex color
  • Change the border to any hex color
  • Change the font to any hex color
  • Set vertical position of each tab
  • Set the height of each tab
  • Set each tab to either the left or right of the screen
  • Add a class to each fixed tab to enable s5 box or perhaps a lightbox or other 3rd party extension
  • Add a URL to each fixed tab so onclick the URL loads
  • Enter any text you desire


I like what I see! I want to JOIN TODAY.

Built In File Compression

Increase speed and performance by compressing core template CSS and Javascript files to much smaller sizes than the original! Enabling compression is a great way to boost your site's performance. It simply combines css and js into consolidated files. This reduces the downloads sizes and reduces the numbers of calls to your server, to dramatically help your site's overall performance. No data is lost during this process, just simply made smaller. Please note that this compression will only compress core template files, not third party files or files from extensions.




Note: Because this feature uses cached versions of your javascript and css this plugin should not be used while developing your site and should only be enabled after you have completed your site.

Gzip must be installed on your server and enabled in PHP in order to function.

See It In Action!

Without Compression Enabled:

With Compression nabled:

I like what I see! I want to JOIN TODAY.

3rd Party Component Compatibility

This template is compatible with all the major 3rd party components available for Joomla. The following are just some of the ones available that work great with any Shape 5 template. A template itself should in no way hinder the functionality of a component. Although we haven't tested every single Joomla component available we can say quite confidently that this template will be compatible with any Joomla extension you use with it.


And many more!

Latest

The latest news from the Joomla! Team

По чертежам заказчика

Присылайте Ваши чертежи, и мы подберём оптимальную технологию, сочетающую в себе баланс необходимых требований и приемлемой стоимости! Марка стали может быть подобрана по желанию Заказчика.

Каталог продукции

Фото производства

Наша справка

ООО «ЗМИ-УРАЛ» является многопрофильным предприятием, производящим отливки из чугуна, стали и цветных металлов, а так же не стандартизированное оборудование и металлоконструкции по чертежам заказчика. Оказывает услуги по механической обработке деталей, и является поставщиком металлопроката ведущих производителей РФ. Компания сотрудничает с большим количеством предприятий Челябинской области и других регионов страны. Нашими заказчиками являются ведущие предприятия Урала и Сибири, подразделения РЖД, предприятия металлургической отрасли, металлообрабатывающие и машиностроительные заводы России. С доступным перечнем товара можно познакомиться в нашем каталоге.

S5 Box

Login

Register

You need to enable user registration from User Manager/Options in the backend of Joomla before this module will activate.