Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Hassan Gilani 9 posts 29 karma points
    Mar 14, 2011 @ 12:36
    Hassan Gilani
    0

    How to style Breadcrumb macro with CSS

    Hello,

    I'm using umbraco v4.5.2 and I've added built in Breadcrumb umbraco to my html code. It works perfectly well, but I'm not able to style it with CSS. I'm trying to change the list-style-type: none but however I try, its still showing bullets. Some of the styles I can change with inline style e.g. font-size etc. but not list items. 

    I assumed that since <ul> and <li> items are being used inside the xslt file, there'd be some other way to apply css on those items... any ideas? I've searched forum before this post but still can't get it done! 

    Thanks in anticipation.

    Regards,

    Hassan

  • Tom Hare 49 posts 81 karma points
    Mar 14, 2011 @ 12:50
    Tom Hare
    0

    Hi Hassan,

    Could you post your XSLT and CSS?

    Tom

    nb. This post is probably in the wrong section (maybe XSLT section).

  • Hassan Gilani 9 posts 29 karma points
    Mar 14, 2011 @ 12:56
    Hassan Gilani
    0

    Hi Tom,

    I thought about XSLT section, but its more about css styles than actual xslt code so i put it here. 

    Here is my html and css code. and also xslt macro code in the end: 

    <div id="navigation-path" class="span-26 last alt" style="list-style-type: none; font-size:12px">
                <umbraco:Macro Alias="Breadcrumb" runat="server"></umbraco:Macro>
     </div>

    /////////////// CSS //////////////////////////////////////////

    #navigation-path {
      padding-top: 0px;
      padding-bottom: 5px;
      font-size:20px;
      background-color:inherit;
    }
    #navigation-path p {
      margin-left: 15px;
    }
    #navigation-path ul li {
      list-style-type: none;
    }

    /////////// XSLT code ///////////////////////////////////////

    <xsl:template match="/">

        <xsl:if test="$currentPage/@level &gt; $minLevel">
          <ul>
            <xsl:for-each select="$currentPage/ancestor::* [@level &gt; $minLevel and string(umbracoNaviHide) != '1']">
              <li>
                <a href="{umbraco.library:NiceUrl(@id)}">
                  <xsl:value-of select="@nodeName"/>
                </a>
              </li>
            </xsl:for-each>
            <!-- print currentpage -->
            <li>
              <xsl:value-of select="$currentPage/@nodeName"/>
            </li>
          </ul>
        </xsl:if>
      </xsl:template>

     

    Regards,

    Hassan

  • Tom Hare 49 posts 81 karma points
    Mar 15, 2011 @ 16:26
    Tom Hare
    0

    First things first, try moving the inline list-style-type from the #navigation <div> to the <li> elements themselves (<li style="list-style-type: none;">).

    My immediate thought is that it is inheriting the list-style-type from higher up in the CSS. I would try Firebug or the element inspector (in Chrome/Safari) to see exactly what styles are being applied to it. Right-click on the li > Inspect element should do the trick. If this still doesn't provide any answers (which would be surprising) then adding !important to your CSS way work but it's not fully cross-browser compatible.

    #navigation-path ul li {
      list-style-type: none !important;
    }

    Tom

  • Hassan Gilani 9 posts 29 karma points
    Mar 16, 2011 @ 12:21
    Hassan Gilani
    0

    Thanks Tom,

    It worked! However now I have another question, but perhaps that I should put in XSLT forum. In case you have some idea, do comment.

    The normal behaviour of breadcrum macro is that it puts each level on a new line... how can I style that and make it look like a normal breadcrumb like this: 

    page 1 > page2 > page3

    currently it takes 3 lines, which is useless really! I guess I'm quite hopeless with xslt generally :\

    Thanks again for your help! 

    Regards, 

    Hassan. 

  • Hassan Gilani 9 posts 29 karma points
    Mar 16, 2011 @ 12:57
    Hassan Gilani
    0

    That thread was already open in XSLT forum and I've solved that issue as well...

    Thanks again Tom for your help!

    Hassan

  • Tom Hare 49 posts 81 karma points
    Mar 16, 2011 @ 15:41
    Tom Hare
    0

    Glad you got it sorted.

Please Sign in or register to post replies

Write your reply to:

Draft