bạn nào có thể cho mình cái breadcrumb này không

Thảo luận trong 'Style & Template Questions' bắt đầu bởi datkaka, 9/8/13.

1votes
5/5, 1 vote

  1. datkaka

    datkaka Member

    Bài viết:
    372
    Likes :
    51
    như tiêu đề đã ghi. anh em nào có thể cho mình cái breadcrumb như hình demo được không ạ
     

    Các file đính kèm:

    Đang tải...
  2. svlamnghiep

    svlamnghiep Member

    Bài viết:
    271
    Likes :
    84
    Mã:
    <xen:edithint template="breadcrumb.css" />
     
    <nav>
    <xen:if is="!{$quickNavSelected} AND {$navigation}">
    <xen:foreach loop="$navigation" value="$breadcrumb">
    <xen:if is="{$breadcrumb.node_id}">
    <xen:set var="$quickNavSelected">node-{$breadcrumb.node_id}</xen:set>
    </xen:if>
    </xen:foreach>
    </xen:if>
     
    <fieldset class="breadcrumb">
    <a href="{xen:link misc/quick-navigation-menu, '', 'selected={$quickNavSelected}'}" class="OverlayTrigger jumpMenuTrigger" data-cacheOverlay="true" title="{xen:Phrase open_quick_navigation}"><!--{xen:Phrase jump_to}...--></a>
     
    <div class="boardTitle"><strong>{$xenOptions.boardTitle}</strong></div>
     
    <span class="crumbs">
    <xen:if is="{$showHomeLink}">
    <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="[URL]http://data-vocabulary.org/Breadcrumb[/URL]"'}>
    <a href="{$homeLink}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{xen:Phrase home}</span></a>
    <span class="arrow"><span></span></span>
    </span>
    <xen:elseif is="{$selectedTabId} != {$homeTabId}" />
    <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="[URL]http://data-vocabulary.org/Breadcrumb[/URL]"'}>
    <a href="{$homeTab.href}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{$homeTab.title}</span></a>
    <span class="arrow"><span></span></span>
    </span>
    </xen:if>
     
    <xen:if is="{$selectedTab}">
    <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="[URL]http://data-vocabulary.org/Breadcrumb[/URL]"'}>
    <a href="{$selectedTab.href}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{$selectedTab.title}</span></a>
    <span class="arrow"><span>&gt;</span></span>
    </span>
    </xen:if>
     
    <xen:if is="{$navigation}">
    <xen:foreach loop="$navigation" value="$breadcrumb" i="$i" count="$count">
    <span class="crust"{xen:if $microdata, ' itemscope="itemscope" itemtype="[URL]http://data-vocabulary.org/Breadcrumb[/URL]"'}>
    <a href="{xen:raw $breadcrumb.href}" class="crumb"{xen:if $microdata, ' rel="up" itemprop="url"'}><span{xen:if $microdata, ' itemprop="title"'}>{xen:raw $breadcrumb.value}</span></a>
    <span class="arrow"><span>&gt;</span></span>
    </span>
    </xen:foreach>
    </xen:if>
    </span>
    </fieldset>
    </nav>
     
     
     
    css:
    .breadBoxTop,
    .breadBoxBottom
    {
    @property "breadBox";
    margin: 0 -20px;
    overflow: hidden;
    zoom: 1;
    clear: both;
    @property "/breadBox";
    }
     
    .breadBoxTop {
    background: #F1F1EC url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x top;
    border-bottom: 1px solid @lightMonochrome;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    overflow: hidden;
    }
     
    .breadBoxBottom {
    padding-top: 10px;
    margin-top: 10px;
    }
     
    .breadBoxTop .topCtrl
    {
    @property "breadBoxTopCtrl";
    margin-left: 5px;
    float: right;
    line-height: 24px;
    @property "/breadBoxTopCtrl";
    }
     
    .breadcrumb
    {
    @property "breadcrumb";
    font-size: 14px;
    font-family: Georgia, "Times New Roman", serif;
    background: #F1F1EC url('@imagePath/xenforo/gradients/navigation-tab.png') repeat-x top;
    border-bottom: 1px solid @lightMonochrome;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
    zoom: 1;
    @property "/breadcrumb";
    }
     
    .breadBoxBottom .breadcrumb {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom: none;
    border-top: 1px solid @lightMonochrome;
    margin-bottom: -1px;
    }
     
    .breadBoxTop .breadcrumb {
    margin-bottom: -2px;
    }
     
    .breadcrumb .boardTitle
    {
    @property "breadcrumbBoardTitle";
    display: none;
    @property "/breadcrumbBoardTitle";
    }
     
    .breadcrumb .crust
    {
    @property "breadcrumbItemCrust";
    display: block;
    float: left;
    position: relative;
    zoom: 1;
    @property "/breadcrumbItemCrust";
    }
     
    .breadcrumb .crust a.crumb
    {
    @property "breadcrumbItemCrumb";
    text-decoration: none;
    padding: 0 10px 0 25px;
    border-bottom: 1px solid @lightMonochrome;
    outline: 0 none;
    -moz-outline-style: 0 none;
    display: block;
    line-height: 36px;
    _border-bottom: none;
    /*background-color: @primaryLightest;*/
    @property "/breadcrumbItemCrumb";
    }
     
    .breadcrumb .crust:first-child a.crumb
    {
    @property "breadcrumbItemFirstCrumb";
    padding-left: 15px;
    border-top-left-radius: 6px;
    /*border-bottom-left-radius: 4px;*/
    @property "/breadcrumbItemFirstCrumb";
    }
     
    .breadBoxBottom .breadcrumb .crust:first-child a.crumb {
    border-bottom-left-radius: 6px;
    }
     
    .breadcrumb .crust:last-child a.crumb
    {
    @property "breadcrumbItemLastCrumb";
    font-style: italic;
    @property "/breadcrumbItemLastCrumb";
    }
     
    .breadcrumb .crust .arrow
    {
    @property "breadcrumbItemArrowOuter";
    border: 18px solid transparent;
    border-right: 1px none black;
    border-left-width: 12px;
    border-left-color: #bebebe;
    display: block;
    position: absolute;
    right: -12px;
    top: 0px;
    z-index: 50;
    width: 0px;
    height: 0px;
    @property "/breadcrumbItemArrowOuter";
    }
     
    .breadcrumb .crust .arrow span
    {
    @property "breadcrumbItemArrowInner";
    border: 18px solid transparent;
    border-right: 1px none black;
    border-left-width: 12px;
    border-left-color: #F1F1EC;
    display: block;
    position: absolute;
    left: -13px;
    top: -18px;
    z-index: 51;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 9999px;
    width: 0px;
    height: 0px;
    @property "/breadcrumbItemArrowInner";
    }
     
    .breadcrumb .crust:hover a.crumb
    {
    @property "breadcrumbItemCrumbHover";
    background-color: #f9f9f4;
    @property "/breadcrumbItemCrumbHover";
    }
     
    .breadcrumb .crust:hover .arrow span
    {
    border-left-color: @breadcrumbItemCrumbHover.background-color;
    }
     
    .breadcrumb .crust .arrow
    {
    /* hide from IE6 */
    _display: none;
    }
     
    .breadcrumb .jumpMenuTrigger
    {
    @property "breadcrumbJumpMenuTrigger";
    background: transparent url('@imagePath/xenforo/widgets/circle-arrow-down.png') no-repeat;
    margin: 11px;
    display: block;
    float: right;
    white-space: nowrap;
    text-indent: 9999px;
    overflow: hidden;
    width: 13px;
    height: 15px;
    @property "/breadcrumbJumpMenuTrigger";
    }
    .breadcrumb a:link, .breadcrumb a:visited {
    color: #777777;
    }
     
    
     
    datkaka thích bài này.
  3. babababi

    babababi Member

    Bài viết:
    322
    Likes :
    96
    Vào template breadcumb.css và edit lại toàn bộ =
    Mã:
    .breadBoxTop,
    .breadBoxBottom
    {
        @property "breadBox";
        padding: 10px 5px;
        margin: 0 -5px;
        overflow: hidden;
        zoom: 1;
        clear: both;
        position: relative;
        @property "/breadBox";
    }
     
    .breadBoxTop
    {
    }
     
    .breadBoxTop .topCtrl
    {
        @property "breadBoxTopCtrl";
        margin-left: 5px;
        float: right;
        line-height: 30px;
        @property "/breadBoxTopCtrl";
    }
     
    .breadcrumb
    {
        @property "breadcrumb";
        font-size: 14px;
    font-family: Georgia,"Times New Roman",serif;
    background: #F1F1EC url('https://s.tinhtecdn.com/styles/flexile/xenforo/gradients/navigation-tab.png') repeat-x top;
    border-bottom: 1px solid rgb(214,214,214);
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -khtml-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -khtml-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
    zoom: 1;
        @property "/breadcrumb";
    }
     
    .breadcrumb .boardTitle
    {
        @property "breadcrumbBoardTitle";
        display: none;
        @property "/breadcrumbBoardTitle";
    }
     
    .breadcrumb .crust
    {
        @property "breadcrumbItemCrust";
        display: block;
    float: left;
    position: relative;
    zoom: 1;
        @property "/breadcrumbItemCrust";
    }
     
    .breadcrumb .crust a.crumb
    {
        @property "breadcrumbItemCrumb";
        text-decoration: none;
    padding: 0 10px 0 25px;
    border-bottom: 1px solid rgb(214,214,214);
    outline: 0 none;
    -moz-outline-style: 0 none;
    display: block;
    line-height: 36px;
    _border-bottom: none;
        @property "/breadcrumbItemCrumb";
    }
     
        .breadcrumb .crust:first-child a.crumb
        {
            @property "breadcrumbItemFirstCrumb";
            padding-left: 15px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -khtml-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
            @property "/breadcrumbItemFirstCrumb";
        }
       
        .breadcrumb .crust:last-child a.crumb
        {
            @property "breadcrumbItemLastCrumb";
            font-style: italic;
            @property "/breadcrumbItemLastCrumb";
        }
     
    .breadcrumb .crust .arrow
    {
        @property "breadcrumbItemArrowOuter";
        border: 18px solid transparent;
    border-right: 1px none black;
    border-left-width: 12px;
    border-left-color: #bebebe;
    display: block;
    position: absolute;
    right: -12px;
    top: 0px;
    z-index: 50;
    width: 0px;
    height: 0px;
        @property "/breadcrumbItemArrowOuter";
    }
     
    .breadcrumb .crust .arrow span
    {
        @property "breadcrumbItemArrowInner";
        border: 18px solid transparent;
    border-right: 1px none black;
    border-left-width: 12px;
    border-left-color: #F1F1EC;
    display: block;
    position: absolute;
    left: -13px;
    top: -18px;
    z-index: 51;
    white-space: nowrap;
    overflow: hidden;
    text-indent: 9999px;
    width: 0px;
    height: 0px;
     
        @property "/breadcrumbItemArrowInner";
    }
     
    .breadcrumb .crust:hover a.crumb
    {
        @property "breadcrumbItemCrumbHover";
        background-color: rgb(250, 250, 250);
        @property "/breadcrumbItemCrumbHover";
    }
     
    .breadcrumb .crust:hover .arrow span
    {
        border-left-color: @breadcrumbItemCrumbHover.background-color;
    }
     
        .breadcrumb .crust .arrow
        {
            /* hide from IE6 */
            _display: none;
        }
     
    .breadcrumb .jumpMenuTrigger
    {
        @property "breadcrumbJumpMenuTrigger";
        background: transparent url('https://s.tinhtecdn.com/styles/flexile/xenforo/widgets/circle-arrow-down.png') no-repeat;
    margin: 11px;
    display: block;
    float: right;
    white-space: nowrap;
    text-indent: 9999px;
    overflow: hidden;
    width: 13px;
    height: 15px;
        @property "/breadcrumbJumpMenuTrigger";
    }
    P/s : Backup trước khi đổi
     
    datkaka thích bài này.
  4. datkaka

    datkaka Member

    Bài viết:
    372
    Likes :
    51
    ts bạn để thử phát
     
  5. datkaka

    datkaka Member

    Bài viết:
    372
    Likes :
    51
    babababi bạn ơi. cái hover mình sửa ở đâu
     
  6. datkaka

    datkaka Member

    Bài viết:
    372
    Likes :
    51
    tks bạn nhiều
     
  7. babababi

    babababi Member

    Bài viết:
    322
    Likes :
    96
    Hình như bác svlamnghiep đã ghi sẳn rồi nên mình ko ghi tiếp :D
     
  8. datkaka

    datkaka Member

    Bài viết:
    372
    Likes :
    51
    ý mình là nó chỉ sáng có 1/2. làm sao khi rê chuột vào nó sáng hết :D
     
  9. svlamnghiep

    svlamnghiep Member

    Bài viết:
    271
    Likes :
    84
    nếu dùng style thì sửa trong
    Style Properties: Breadcrumb

    Property Group: Breadcrumb

    Item Content, Hover State

    Nếu chỉnh trong template thì chỗ
    Mã:
    .breadcrumb .crust:hover a.crumb
    {
    @property "breadcrumbItemCrumbHover";
    background-color: #f9f9f4;
    @property "/breadcrumbItemCrumbHover";
    }
     
    datkaka and Fox Of Dark like this.
comments powered by Disqus

Chia sẻ trang này

Đang tải...