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!
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; }
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 :\
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
Hi Hassan,
Could you post your XSLT and CSS?
Tom
nb. This post is probably in the wrong section (maybe XSLT section).
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 > $minLevel">
<ul>
<xsl:for-each select="$currentPage/ancestor::* [@level > $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
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
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.
That thread was already open in XSLT forum and I've solved that issue as well...
Thanks again Tom for your help!
Hassan
Glad you got it sorted.
is working on a reply...