Category Blog

S5 Drop Down Panel

• 
• 

Details

Category: Latest

Published on Saturday, 13 August 2011 14:54

Hits: 2629

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:

IE7 and 8 CSS3 Support

• 
• 

Details

Category: Latest

Published on Friday, 10 June 2011 21:37

Hits: 2476

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.

Hide Article Component Area

• 
• 

Details

Category: Latest

Published on Friday, 12 August 2011 18:37

Hits: 2390

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:

Menu Scroll To Section

• 
• 

Details

Category: Latest

Published on Friday, 10 June 2011 21:35

Hits: 2520

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:

Lazy Load Images

• 
• 

Details

Category: Latest

Published on Friday, 12 August 2011 18:35

Hits: 2596

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:


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

See the script in action:

Fixed Side Tabs

• 
• 

Details

Category: Latest

Published on Monday, 13 December 2010 23:40

Hits: 2511

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