Newshttps://mlross.ru/table/news/latest/feed/atom.html2026-06-17T07:24:01+03:00Joomla! - Open Source Content ManagementStock Photography2012-06-30T12:33:15+04:002012-06-30T12:33:15+04:00https://mlross.ru/stock-photography.htmlSuper Userakkreditacion@mlross.ru<div class="feed-description">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 <a href="http://www.shutterstock.com" target="_blank">shutterstock.com</a> 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. </div><div class="feed-description">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 <a href="http://www.shutterstock.com" target="_blank">shutterstock.com</a> 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. </div>Built In File Compression2012-06-11T21:26:24+04:002012-06-11T21:26:24+04:00https://mlross.ru/built-in-file-compression.htmlSuper Userakkreditacion@mlross.ru<div class="feed-description"><p>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.</p>
<p><br /> <img class="padded" src="http://www.shape5.com/demo/images/general/file_compression.jpg" border="0" alt="" /></p>
<div style="clear: both;"> </div>
<p><br /><br /></p>
<div class="red_box"><span class="alert">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. <br /><br /> Gzip must be installed on your server and enabled in PHP in order to function.</span></div>
<p> </p>
<p><strong><span style="font-size: large;">See It In Action!</span></strong></p>
<p>Without Compression Enabled:</p>
<p><img class="padded" src="http://www.shape5.com/demo/images/general/compression_without.png" border="0" /></p>
<p>With Compression nabled:</p>
<p><img class="padded" src="http://www.shape5.com/demo/images/general/compression_with.png" border="0" /></p>
<p> </p>
<div class="blue_box"><strong>I like what I see! I want to <a href="http://www.shape5.com/join-now.html" target="_top">JOIN TODAY</a>.</strong></div>
<p> </p></div><div class="feed-description"><p>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.</p>
<p><br /> <img class="padded" src="http://www.shape5.com/demo/images/general/file_compression.jpg" border="0" alt="" /></p>
<div style="clear: both;"> </div>
<p><br /><br /></p>
<div class="red_box"><span class="alert">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. <br /><br /> Gzip must be installed on your server and enabled in PHP in order to function.</span></div>
<p> </p>
<p><strong><span style="font-size: large;">See It In Action!</span></strong></p>
<p>Without Compression Enabled:</p>
<p><img class="padded" src="http://www.shape5.com/demo/images/general/compression_without.png" border="0" /></p>
<p>With Compression nabled:</p>
<p><img class="padded" src="http://www.shape5.com/demo/images/general/compression_with.png" border="0" /></p>
<p> </p>
<div class="blue_box"><strong>I like what I see! I want to <a href="http://www.shape5.com/join-now.html" target="_top">JOIN TODAY</a>.</strong></div>
<p> </p></div>Info Slide2012-06-11T21:25:29+04:002012-06-11T21:25:29+04:00https://mlross.ru/info-slide.htmlSuper Userakkreditacion@mlross.ru<div class="feed-description">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.
<br /><br />
<div class="blue_box">
<a style="text-decoration:underline" target="_blank" href="http://www.shape5.com/joomla_tutorials.html">
For a tutorial on how to setup this script be sure to view the Vertex Guide on our Tutorials page.</a>
</div>
<br />
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load1.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load2.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load3.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load4.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load5.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load6.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load7.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load8.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load9.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div style="clear:both"></div>
<br/>
<div class="blue_box">
I like what I see! I want to <a href="http://www.shape5.com/join-now.html" target="_top"><strong>JOIN TODAY</strong></a>. </div>
</div><div class="feed-description">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.
<br /><br />
<div class="blue_box">
<a style="text-decoration:underline" target="_blank" href="http://www.shape5.com/joomla_tutorials.html">
For a tutorial on how to setup this script be sure to view the Vertex Guide on our Tutorials page.</a>
</div>
<br />
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load1.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load2.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load3.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load4.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load5.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load6.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load7.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load8.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div class="s5_is" style="float:left; width:31%; margin-right:15px; margin-bottom:15px">
<img alt="" src="http://www.shape5.com/demo/images/general/lazyload/lazy_load9.jpg"></img>
<div class="s5_is_slide">
<h3>Example Slide</h3>
This is dummy text. You can add any text or html markup here.
</div>
</div>
<div style="clear:both"></div>
<br/>
<div class="blue_box">
I like what I see! I want to <a href="http://www.shape5.com/join-now.html" target="_top"><strong>JOIN TODAY</strong></a>. </div>
</div>Responsive Layout2012-06-11T21:25:00+04:002012-06-11T21:25:00+04:00https://mlross.ru/responsive-layout.htmlSuper Userakkreditacion@mlross.ru<div class="feed-description">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!
<br /><br />
<div class="blue_box">
<a style="text-decoration:underline" target="_blank" href="http://www.shape5.com/joomla_tutorials.html">
Be sure to visit our Tutorials page and download our Responsive Best Practices guide for useful responsive layout tips.</a>
</div>
<br />
<h3>See It Live On Responsinator.com</h3>
<a target="_blank" href="http://responsinator.com/?url=http%3A%2F%2Fwww.shape5.com%2Fdemo%2Fprestige_academy">Open this website on responsinator.com to see its layout on multiple devices.</a>
<br /><br />
<h3>What Makes The Vertex Responsive Layout The Best and Most Flexible?</h3>
<ul>
<li>The responsive layout is completely optional, don't use it if you don't want it!</li>
<li>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.</li>
<li>Start with a fixed or fluid layout.</li>
<li>Every area of the template, ie: columns, row, and body; can be set to a fluid layout.</li>
<li>Automatic onclick menu functionality for small touch screens.</li>
<li>Optional IE7/8 responsive layout.</li>
<li>Very easy to understand layout, which allows you to setup your site with very little effort.</li>
<li>Fully customizable mobile bar styling.</li>
<li>Optional row re-distribution at smaller screens.</li>
<li>Hide divs, modules and content easily with hide classes at specified screen sizes.</li>
<li>Wide screen support options.</li>
<li>Multiple options for fluid width images.</li>
<li>And much more!</li>
</ul>
<br />
<h3>Easy To Understand Layout</h3>
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!
<br /><br />
The best way to see this approach, is simply resize your browser to see it all take effect.
<br /><br />
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.
<br /><br />
Our approach is much easier to understand. The site will always keep its core layout shown <a href="index.php/features-mainmenu-47/template-features/95-module-positions">here</a>. 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!<br /><br />
<ul>
<li>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.</li>
<li>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.
<li>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.</li>
<li>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.
</ul>
<br />
Below are illustrations of the center columns only in the scenarios described above.
<br /><br />
<img class="padded" alt="" src="http://www.shape5.com/demo/images/general/responsive_columns.png"></img>
<br /><br />
<h3>Row Re-Distribution</h3>
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!
<br /><br />
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.
<br /><br />
<img class="padded" alt="" src="http://www.shape5.com/demo/images/general/responsive1.png"></img>
<br /><br />
<h3>General Layout</h3>
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.
<br /><br />
<h3>Enable The Responsive Layout</h3>
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.
<br /><br />
<h3>Hide Tablet and Mobile Divs</h3>
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 <a href="index.php/features-mainmenu-47/template-features/hide-content-and-modules">here</a>.
<br /><br />
<h3>Column Settings</h3>
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.
<br /><br />
<h3>Mobile Bars</h3>
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.
<br /><br />
<img class="padded" alt="" src="http://www.shape5.com/demo/images/general/responsive2.jpg"></img>
<br /><br />
<img class="padded" alt="" src="http://www.shape5.com/demo/images/general/responsive3.jpg"></img>
<br /><br />
<h3>Mobile Links</h3>
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.
<br /><br />
<div class="blue_box">
I like what I see! I want to <a href="http://www.shape5.com/join-now.html" target="_top"><strong>JOIN TODAY</strong></a>. </div></div><div class="feed-description">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!
<br /><br />
<div class="blue_box">
<a style="text-decoration:underline" target="_blank" href="http://www.shape5.com/joomla_tutorials.html">
Be sure to visit our Tutorials page and download our Responsive Best Practices guide for useful responsive layout tips.</a>
</div>
<br />
<h3>See It Live On Responsinator.com</h3>
<a target="_blank" href="http://responsinator.com/?url=http%3A%2F%2Fwww.shape5.com%2Fdemo%2Fprestige_academy">Open this website on responsinator.com to see its layout on multiple devices.</a>
<br /><br />
<h3>What Makes The Vertex Responsive Layout The Best and Most Flexible?</h3>
<ul>
<li>The responsive layout is completely optional, don't use it if you don't want it!</li>
<li>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.</li>
<li>Start with a fixed or fluid layout.</li>
<li>Every area of the template, ie: columns, row, and body; can be set to a fluid layout.</li>
<li>Automatic onclick menu functionality for small touch screens.</li>
<li>Optional IE7/8 responsive layout.</li>
<li>Very easy to understand layout, which allows you to setup your site with very little effort.</li>
<li>Fully customizable mobile bar styling.</li>
<li>Optional row re-distribution at smaller screens.</li>
<li>Hide divs, modules and content easily with hide classes at specified screen sizes.</li>
<li>Wide screen support options.</li>
<li>Multiple options for fluid width images.</li>
<li>And much more!</li>
</ul>
<br />
<h3>Easy To Understand Layout</h3>
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!
<br /><br />
The best way to see this approach, is simply resize your browser to see it all take effect.
<br /><br />
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.
<br /><br />
Our approach is much easier to understand. The site will always keep its core layout shown <a href="index.php/features-mainmenu-47/template-features/95-module-positions">here</a>. 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!<br /><br />
<ul>
<li>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.</li>
<li>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.
<li>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.</li>
<li>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.
</ul>
<br />
Below are illustrations of the center columns only in the scenarios described above.
<br /><br />
<img class="padded" alt="" src="http://www.shape5.com/demo/images/general/responsive_columns.png"></img>
<br /><br />
<h3>Row Re-Distribution</h3>
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!
<br /><br />
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.
<br /><br />
<img class="padded" alt="" src="http://www.shape5.com/demo/images/general/responsive1.png"></img>
<br /><br />
<h3>General Layout</h3>
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.
<br /><br />
<h3>Enable The Responsive Layout</h3>
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.
<br /><br />
<h3>Hide Tablet and Mobile Divs</h3>
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 <a href="index.php/features-mainmenu-47/template-features/hide-content-and-modules">here</a>.
<br /><br />
<h3>Column Settings</h3>
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.
<br /><br />
<h3>Mobile Bars</h3>
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.
<br /><br />
<img class="padded" alt="" src="http://www.shape5.com/demo/images/general/responsive2.jpg"></img>
<br /><br />
<img class="padded" alt="" src="http://www.shape5.com/demo/images/general/responsive3.jpg"></img>
<br /><br />
<h3>Mobile Links</h3>
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.
<br /><br />
<div class="blue_box">
I like what I see! I want to <a href="http://www.shape5.com/join-now.html" target="_top"><strong>JOIN TODAY</strong></a>. </div></div>3rd Party Component Compatibility2012-02-09T19:24:02+04:002012-02-09T19:24:02+04:00https://mlross.ru/3rd-party-component-compatibility.html<div class="feed-description">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.</p>
<p> </p>
<p><img src="http://www.shape5.com/demo/images/general/3rdparty.png" border="0" /><br />And many more!</div><div class="feed-description">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.</p>
<p> </p>
<p><img src="http://www.shape5.com/demo/images/general/3rdparty.png" border="0" /><br />And many more!</div>S5 Drop Down Panel2011-08-13T14:54:51+04:002011-08-13T14:54:51+04:00https://mlross.ru/s5-drop-down-panel.html<div class="feed-description">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.
<br />
<br />
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
<br />
<br />
<img alt="" style="border:1px solid #CCCCCC" class="padded" src="http://www.shape5.com/demo/images/general/dropdown_tab.png" />
<div style="clear:both"></div>
<br />
<ul class="ul_star">
<li>Customize almost everything! Shadows, borders, gradient, opacity</li>
<li>Contains 6 module positions drop_down_1, drop_down_2, drop_down_3, drop_down_4, drop_down_5 and drop_down_6</li>
<li>Auto adjust to the height of your content</li>
<li>Set your own open and close text</li>
<li>Auto collapse if no modules are published to it</li>
<li>And many more features!</li>
</ul>
<br />
<br />
<h3>Screenshot of Drop Down admin in template configuration area:</h3><br />
<img alt="" style="border:1px solid #CCCCCC" class="padded" src="http://www.shape5.com/demo/images/general/dropdown.png" />
<div style="clear:both; height:0px"></div></div><div class="feed-description">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.
<br />
<br />
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
<br />
<br />
<img alt="" style="border:1px solid #CCCCCC" class="padded" src="http://www.shape5.com/demo/images/general/dropdown_tab.png" />
<div style="clear:both"></div>
<br />
<ul class="ul_star">
<li>Customize almost everything! Shadows, borders, gradient, opacity</li>
<li>Contains 6 module positions drop_down_1, drop_down_2, drop_down_3, drop_down_4, drop_down_5 and drop_down_6</li>
<li>Auto adjust to the height of your content</li>
<li>Set your own open and close text</li>
<li>Auto collapse if no modules are published to it</li>
<li>And many more features!</li>
</ul>
<br />
<br />
<h3>Screenshot of Drop Down admin in template configuration area:</h3><br />
<img alt="" style="border:1px solid #CCCCCC" class="padded" src="http://www.shape5.com/demo/images/general/dropdown.png" />
<div style="clear:both; height:0px"></div></div>Hide Article Component Area2011-08-12T18:37:35+04:002011-08-12T18:37:35+04:00https://mlross.ru/hide-article-component-area.html<div class="feed-description">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.
<br /><br />
Below is a screenshot of this function from the configuration page, found under the General tab:
<br /><br />
<img class="padded" src="http://www.shape5.com/demo/images/general/hide_articles.png" alt=""></img>
<div style="clear:both; height:0px"></div></div><div class="feed-description">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.
<br /><br />
Below is a screenshot of this function from the configuration page, found under the General tab:
<br /><br />
<img class="padded" src="http://www.shape5.com/demo/images/general/hide_articles.png" alt=""></img>
<div style="clear:both; height:0px"></div></div>Lazy Load Images2011-08-12T18:35:45+04:002011-08-12T18:35:45+04:00https://mlross.ru/lazy-load-images.html<div class="feed-description">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.
<br /><br />
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.
<br /><br />
<img class="padded" src="http://www.shape5.com/demo/images/general/lazy_load.png" alt=""></img>
<br /><br />
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:
<br />
<div class="code">
<img class="s5_lazyload" src="http://www.yoursite.com/image.jpg"></img>
</div>
<br /><br />
This script is compatible with Firefox3+, IE8+, Chrome14+, Safari5.05+, Opera 11.11+
<br /><br />
<h3>See the script in action:</h3>
<br />
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load1.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load2.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load3.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load4.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load5.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load6.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load7.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load8.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load9.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load10.jpg" alt="" class="s5_lazyload padded"></img></div><div class="feed-description">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.
<br /><br />
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.
<br /><br />
<img class="padded" src="http://www.shape5.com/demo/images/general/lazy_load.png" alt=""></img>
<br /><br />
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:
<br />
<div class="code">
<img class="s5_lazyload" src="http://www.yoursite.com/image.jpg"></img>
</div>
<br /><br />
This script is compatible with Firefox3+, IE8+, Chrome14+, Safari5.05+, Opera 11.11+
<br /><br />
<h3>See the script in action:</h3>
<br />
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load1.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load2.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load3.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load4.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load5.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load6.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load7.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load8.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load9.jpg" alt="" class="s5_lazyload padded"></img>
<img src="http://www.shape5.com/demo/images/general/lazyload/lazy_load10.jpg" alt="" class="s5_lazyload padded"></img></div>IE7 and 8 CSS3 Support2011-06-10T21:37:19+04:002011-06-10T21:37:19+04:00https://mlross.ru/ie7-and-8-css3-support.html<div class="feed-description">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.
<br /><br />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.</div><div class="feed-description">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.
<br /><br />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.</div>Menu Scroll To Section2011-06-10T21:35:45+04:002011-06-10T21:35:45+04:00https://mlross.ru/menu-scroll-to-section.html<div class="feed-description">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:<br /><br />
<ul class="ul_bullet_small">
<li>#s5_header_area1</li>
<li>#s5_top_row1_area1</li>
<li>#s5_top_row2_area1</li>
<li>#s5_top_row3_area1</li>
<li>#s5_center_area1</li>
<li>#s5_bottom_row1_area1</li>
<li>#s5_bottom_row2_area1</li>
<li>#s5_bottom_row3_area1</li>
<li>#s5_footer_area1</li>
</ul>
<br />
Screenshot of admin area of an external menu item with DIV reference entered:<br /><br />
<img border="0" src="http://www.shape5.com/demo/images/general/scrollto.jpg" style=""></div><div class="feed-description">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:<br /><br />
<ul class="ul_bullet_small">
<li>#s5_header_area1</li>
<li>#s5_top_row1_area1</li>
<li>#s5_top_row2_area1</li>
<li>#s5_top_row3_area1</li>
<li>#s5_center_area1</li>
<li>#s5_bottom_row1_area1</li>
<li>#s5_bottom_row2_area1</li>
<li>#s5_bottom_row3_area1</li>
<li>#s5_footer_area1</li>
</ul>
<br />
Screenshot of admin area of an external menu item with DIV reference entered:<br /><br />
<img border="0" src="http://www.shape5.com/demo/images/general/scrollto.jpg" style=""></div>