1. Home
  2. Development
  3. RE: Styling Breadcrumbs

RE: Styling Breadcrumbs

Jan Kadlec, modified 6 Years ago.
Styling Breadcrumbs
New Member Posts: 14 Join Date: 7/22/14 Recent Posts
I am trying to change the appearance of the Breadcrumbs portlet via Liferay theme (7.1).

I changed values of the breadcrumbs related variables in _clay_variables.scss file (such as $breadcrumb-bg, $breadcrumb-font-size etc.) but the changes do not propagate.
Anyone knows where could be the problem? Changing values of global variables (like $body-bg) in this file takes effect.
One thing about breadcrumbs I noticed is that Liferay is using bootstrap breadcrumbs rather than Clay breadcrumbs, am I right? 
If anyone has good resources how to get oriented in theme development (especially about scss variables) please share, it's all very confusing - hard to say what comes from Clay, what comes from Bootstap etc.
Thanks!
Patrick Yeo, modified 6 Years ago.
RE: Styling Breadcrumbs
Junior Member Posts: 61 Join Date: 2/8/13 Recent Posts
Hey Jan,

You are right, the Breadcrumbs Widget is using Bootstrap 3 markup. I've tested this on 7.1.3 GA4 and it looks like the Breadcrumb Widget markup was never updated to Bootstrap 4. This was a oversight or might have been left alone for people upgrading from 7.0 to 7.1. What you need to do is create a new Breadcrumb Display Template.

Go to: Configuration > Manage Templates > Blue Plus Button

Copy/Paste:
<#if entries?has_content>
    
    
        <#assign cssClass = "breadcrumb-item" />
        <#list entries as entry>
            <#if entry?is_last>
                <#assign cssClass = "active breadcrumb-item" />
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<!--#if-->
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li class="${cssClass}" <#if entry?is_last>aria-current="page"<!--#if-->&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;#if entry?has_next&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<a class="breadcrumb-link" < code></a></li>
<a class="breadcrumb-link" < code><code>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;#if entry.isBrowsable()&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;href="${entry.getURL()!""}"
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<!--#if--></code></a>
<a class="breadcrumb-link" < code><code>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<!--#if--></code></a>
<a class="breadcrumb-link" < code><code>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;${htmlUtil.escape(entry.getTitle())}</code></a>
<a class="breadcrumb-link" < code><code>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;#if entry?has_next&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</code></a><code>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<!--#if-->
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<!--#list-->
&nbsp;&nbsp; &nbsp;
<!--#if--></code>
Save &gt; Select New Template &gt; Save<br><br>The variables should apply now.<br><br>As for official documentation for theme development we have <a href="https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/themes-and-layout-templates">https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/themes-and-layout-templates</a>&nbsp;and <a href="https://clayui.com/docs/get-started/clay.html">https://clayui.com/docs/get-started/clay.html</a><br><br>Unofficial (I do all my testing here) <a href="http://pat270.github.io/lexicon/">http://pat270.github.io/lexicon/</a><br><br><a href="https://pat270.github.io/clay-paver-2/">https://pat270.github.io/clay-paver-2</a>&nbsp;is an experimental site where you can customize variables and get immediate feedback. This is still in development so expect things to break and be buggy.<br><br>You can see a demo of the changes you can make with the site by going to Options &gt; Import and copy/paste the url <a href="https://gist.githubusercontent.com/pat270/5960f679af01d2eee62861c43df38161/raw/17d552a875703fe1438cfb7dfeeec3f8afff1cb7/_claycss-ms-fabric.scss">https://gist.githubusercontent.com/pat270/5960f679af01d2eee62861c43df38161/raw/17d552a875703fe1438cfb7dfeeec3f8afff1cb7/_claycss-ms-fabric.scss</a>&nbsp;to the input provided. This demo was based on Classic Theme so the results will vary if you use Clay Base/Styled Theme.<br><br>Hopefully this provides some clarity. We definitely want to make things easier for our devs.
Jan Kadlec, modified 6 Years ago.
RE: Styling Breadcrumbs
New Member Posts: 14 Join Date: 7/22/14 Recent Posts
Hi Patrick,thank you so much for your quick reply.
I can't find the way you specified – Configuration -> Manage Templates -> Blue Plus Button. There is no 'Manage Templates' item in the Configuration menu.Did you mean 'Control Panel | Configuration' or '<Site Name> | Configuration'? Anyway, 'Manage Templates' link is in neither of them.
I found some templates under Site Name | Build | Application Display Templates', where I added new 'Breadcrumb Template' and saved it. But it seems that the template is not applied automatically, do I need to enable it somewhere after it is created?
And one more question - is it possible to embed my own breadcrumb template into the Theme? And if yes, what should be the ftl file name?
I am sorry if my questions sound dumb, but it is really confusing to be thrown straight into LF7 from early LF6.
Patrick Yeo, modified 6 Years ago.
RE: Styling Breadcrumbs
Junior Member Posts: 61 Join Date: 2/8/13 Recent Posts

I was talking about the menu on the Breadcrumb Widget itself, but the way you did it works also. You need to select your new template in the Breadcrumb Widget Configuration through the Display Template Select Input.


You can embed the Breadcrumb Widget in your 
portal_normal.ftl
 with the 
liferay_portlet["runtime"]
 macro.
&lt;@liferay_portlet["runtime"]
&nbsp;&nbsp; &nbsp;instanceId="my_breadcrumb0"
&nbsp;&nbsp; &nbsp;defaultPreferences=freeMarkerPortletPreferences.getPreferences({
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"displayStyle": "ddmTemplate_33536", <!-- 33536 is the Template Key in your ADT -->
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;"portletSetupPortletDecoratorId": "barebone"
&nbsp;&nbsp; &nbsp;})
&nbsp;&nbsp; &nbsp;portletProviderAction=portletProviderAction.VIEW
&nbsp;&nbsp; &nbsp;portletProviderClassName="com.liferay.portal.kernel.servlet.taglib.ui.BreadcrumbEntry"
/&gt;

There's a really annoying bug/feature developing this way. We store the preferences directly in the database based on 
instanceId
and any updates to the attributes won't apply when you redeploy. The only way to get it to update is to change the 
instanceId&nbsp;
or delete the specific preference in the DB. We also have an alias 
&lt;@liferay.breadcrumbs default_preferences='' /&gt;&nbsp;
that does something similar to the code above but I wouldn't waste my time with it.As for your custom Breadcrumb ADT, I think you can make it deploy with your theme using the Resources Importer but I'm not sure how to do that.

Attachments:

Jan Kadlec, modified 6 Years ago.
RE: Styling Breadcrumbs
New Member Posts: 14 Join Date: 7/22/14 Recent Posts
OK got it, both ways work, thank you so much!
Regarding ClayPaver - I've been using local nodejs instance of https://github.com/pat270/clay-paver, which seems to be much older version - didn't know you had a newer one on your github, that's perfect! 
Patrick Yeo, modified 6 Years ago.
RE: Styling Breadcrumbs
Junior Member Posts: 61 Join Date: 2/8/13 Recent Posts
Glad it's working. Sorry about Clay Paver going down, we had to update it to a static site with Wedeploy shutting down. I'm going to open source the site soon. You should be able to report issues and feature requests at https://github.com/pat270/clay-paver-2.