br3w5
br3w5

Reputation: 4583

Override liferay-ui navigation taglib

Problem

I'm implementing a css component library within a Liferay theme, adding the css to the custom.css file. I've hit an issue with implementing the changes to the navigation which is currently using a taglib liferay-ui:navigation to generate and style the navigation (using init.jsp and page.jsp in the navigation taglib). The taglib is called in a custom navigation hook as:

<liferay-ui:navigation
bulletStyle="<%= bulletStyle %>"
displayStyle="<%= displayStyle %>"
...etc
/>

This generates the following html:

<div class="nav-menu nav-menu-style-dots" id="aui_3_4_0_1_406">
  <ul class="layouts level-1" id="aui_3_4_0_1_405">
    ...list items
  </ul>
</div>

The relevant lines in the taglib page.jsp are:

<div class="nav-menu nav-menu-style-<%= bulletStyle %>">

and

sb.append("<ul class=\"layouts level-");

The component library does not use the class names that Liferay generates and the library is used across multiple applications not all built in Liferay.

Options

To solve this I think I have two options:

Question

Is it possible to override the liferay-ui navigation taglib using a hook or some other method (maybe alloy-ui) to override the lines above in page.jsp?

Upvotes: 3

Views: 1557

Answers (1)

Olaf Kock
Olaf Kock

Reputation: 48057

Yes, it's possible to override a taglib implementation with a jsp-hook (I've just tested it with the outstanding update to my custom navigation app, with exactly the jsp you mention). However, if you can solve your problem with css, I find that this is the more advisable solution. CSS is a lot less intrusive and even if you now have two distinct CSS selectors doing the same thing, the alternative is to have one JSP-hook and one CSS change to make your choices.

Leave JSP changes for required changes to the actual structure (if possible) and use CSS when possible. Your theme is the natural place for custom CSS - IMHO it's best maintainable there.

Upvotes: 2

Related Questions