Announcement

Collapse
No announcement yet.

PR 8 Update 4 CSSUI Breadcrumbs Module Template Changes

Collapse
This topic is closed.
X
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    PR 8 Update 4 CSSUI Breadcrumbs Module Template Changes

    Before You Begin:






    Requirements: CSSUI Store, PR8 Update 4

    Notes:
    1. These changes apply to the default templates. Most of you will have custom sites. This means you may have to do some digging to find where in your template the changes should go. The breadcrumbs can be placed anywhere on the page, just be sure to put them in a location that makes sense!
    The following block of code exists in the Smart Breadcrumbs* Tab in Store Admin, where you can change the look and feel of the breadcrumbs module at any time. The following block of code is for reference only.

    Code:
      <ul>
            <li><a href="&mvt:breadcrumbs:homelink;" class="breadcrumb-home">Home</a><span class="breadcrumb-border">&raquo;</span></li>
            <mvt:foreach iterator="cats" array="breadcrumbs:links">
                    <mvt:if expr="l.settings:cats:name EQ '...'">
                        <li><span class="cats-hidden">&mvt:cats:name;</span><span class="breadcrumb-border">&raquo;</span></li>
                    <mvt:elseif expr="l.settings:cats:code EQ l.settings:breadcrumbs:current_item:code">
                        <li><span class="current-item">&mvt:cats:name;</span></li>
                    <mvt:else>
                        <li><a href="&mvt:cats:link;">&mvt:cats:name;</a><span class="breadcrumb-border">&raquo;</span></li>
                    </mvt:if>
            </mvt:foreach>
        </ul>
        <div class="clear"></div>
    Enabling Breadcrumbs in Existing Stores





    STEP 1:
    Add the breadcrumbs item to any pages that will be using the Smart Breadcrumbs


    STEP 2:
    On any pages using the Smart Breadcrumbs, place the following code in bold red in the location of your choosing within the template on your page: (Note, in new stores, this is placed immediately following the page-header div)

    Code:
    ...
    <div id="page-header"><mvt:item name="hdft" param="header" /></div>
    <div id="breadcrumbs"><mvt:item name="breadcrumbs" /></div>
    <h1>About Us</h1>
    ...

    STEP 3:
    Now, in the cssui.css file, add the following code:

    Code:
    /*** Breadcrumbs ***/
    #breadcrumbs 
    {
        display: block;
        margin-left: -12px;
    }
    #breadcrumbs ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #breadcrumbs ul li
    {
        list-style: none;
        display: block;
        float: left;
        height: 20px;
    }
    #breadcrumbs .cats-hidden
    {
        color: #434343;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
        margin: 0 6px;
        text-decoration: none;
        padding-bottom: 2px;
        border-bottom: 3px solid #FFF;
    }
    #breadcrumbs a
    {
        color: #434343;
        font-weight: normal;
        font-size: 12px;
        line-height: 20px;
        margin: 0 6px;
        padding-bottom: 2px;
        border-bottom: 3px solid #FFF;
    }
    #breadcrumbs .breadcrumb-border
    {
        color: #777;
        font-weight: normal;
        font-size: 16px;
        line-height: 16px;
    }
    
    
    #breadcrumbs .current-item
    {
        color: #434343;
        font-weight: bold;
        font-size: 12px;
        margin: 0 6px;
        line-height: 20px;
    }
    #breadcrumbs .shortbreadcrumb
    {
        color: #434343;
        font-weight: normal;
        font-size: 12px;
        padding: 0px 6px;
        line-height: 20px;
    }
    Ryan Guisewite
    Lead UI Developer / Miva, Inc.
    www.miva.com
Working...
X