Sample Sidebar Module

This is a sample module published to the sidebar_top position, using the -sidebar module class suffix. There is also a sidebar_bottom position below the menu.

get('tag_id');$tag_id = '';if ($tag_id != NULL) { $tag = $tag_id . ''; echo ' id="' . $tag . '"'; }?> &$item) : $class = ''; if ($item->flink == "") { $item->flink = "javascript:;"; } if (in_array($item->id, $path)) { $class .= ' s5_mobile_sidebar_active'; } if (!empty($class) && count($path)==1) { $class = ' class="'.trim($class) .'"'; } if ($item->level==1) { if ($item->deeper) { echo "

".$item->title."

"; echo "
"; } else { echo "

".$item->title."

"; continue; } } else { echo '
  • '; } // Render the menu item switch ($item->type) : case 'separator': case 'url': case 'component': if (!$item->deeper || $item->level > 1) { $sidebar_file = dirname(__FILE__) . '/sidebar_' . $item->type . '.php'; require $sidebar_file; } break; default: if (!$item->deeper || $item->level > 1) { $sidebar_url = dirname(__FILE__) . '/sidebar_url.php'; require $sidebar_url; } break; endswitch; // The next item is deeper. if ($item->deeper) { echo '
      '; } // The next item is shallower. elseif ($item->shallower) { echo ''; echo str_repeat('
    ', $item->level_diff); } // The next item is on the same level. else { echo '
    • '; } if (@$list[$i+1]->level==1 || !@$list[$i+1]->level) { echo '
    '; }endforeach;?>

    Sample Sidebar Module

    This is a sample module published to the sidebar_bottom position, using the -sidebar module class suffix. There is also a sidebar_top position below the search.
    Portfolio

    Our Amazing Projects

    Great design comes with understanding our clients needs

    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

    This is dummy text. You can add any text or html markup here.
    Zoom Image View Project
    image

    Example Slide

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


    Example of code used above. It is a combination of Info Slide CSS and Multibox, so those must be turned on in the template configuration. You can actually use any of the info slide styles below just be sure to wrap with the 2 pages DIVs which are "pages_portfolio three" and if you want padding between each image the "pages_padding" DIV. Notice on the first DIV there is a "three". You can enter one, two, three, four, five and six depending on how many portfolio items you want on one row (Be sure to keep that space before the three too):

    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb1" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image5.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image5.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>

    Code Used For This Page:

    <h1 class="s5_centerit">Our Amazing Projects</h1>
    <span class="s5_centerit ourteam_subtitle">Great design comes with understanding our clients needs</span>
    <br>
    <br>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb1" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image5.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image5.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb2" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/images2.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/images2.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb3" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image3.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image3.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div style="clear:both;"></div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb4" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image4.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image4.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb5" href="http://www.shape5.com/demo/images/general/portfolio/image1.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image1.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb6" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image6.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image6.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div style="clear:both;"></div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb1" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image7.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image7.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb2" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image8.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image8.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb3" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image9.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image9.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div style="clear:both;"></div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb1" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image5.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image5.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb2" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/images2.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/images2.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="pages_portfolio three">
    <div class="pages_padding">
    <div class="s5_is_css_7">
    <div class="s5_is_css_wrap_7">
    <div class="s5_is_css_hidden">
    <a class="button darkcolor s5mb" id="mb3" title="A4 Paper Project" href="http://www.shape5.com/demo/images/general/portfolio/image3.jpg" rel="[me]">Zoom Image</a>
    <a class="button">View Project</a>
    </div>
    </div>
    <img src="http://www.shape5.com/demo/images/general/portfolio/image3.jpg" alt="image"/>
    <div class="s5_is_slide_css"></div>
    <div class="s5_is_slide_7_css">
    <div class="s5_is_slide_padding">
    <h3>Example Slide</h3>
    This is dummy text. You can add any text or html markup here.
    </div>
    </div>
    </div>
    </div>
    </div>
    <div style="clear:both;"></div>