3

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:

  • Change the css classes in the components library to match the classes generated by Liferay. I don't like this option because it will mean that there will be different css classes in different applications each doing the same thing. Also, it removes the benefit of having a components library.
  • Find some way of overriding the taglib e.g. creating a custom hook or modifying my existing navigation hook. I prefer this option because it keeps the components library intact and is more maintainable.

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?

Community
  • 1
  • 1
br3w5
  • 4,403
  • 5
  • 33
  • 42

1 Answers1

2

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.

Olaf Kock
  • 46,930
  • 8
  • 59
  • 90
  • I think my intention by overriding taglib is to change it's behaviour when it writes out a
    and includes css classes that I do not want - i think my concern is that I have to choose between poorly structured css or going against Liferay design principles?
     – br3w5 Mar 11 '15 at 09:44
  • I went with overriding with a jsp-hook because that will be more maintainable than muddying css across multiple applications...issue now is handling all the dynamic aui ids, (another question!) :/ – br3w5 Mar 11 '15 at 17:03
  • 1
    ok if that eases maintenance for you - after all you'll have to maintain your system, not me :) As of the dynamic ids - you can also give your own fixed ids or utilize the hierarchy. But again, "it depends" on what you actually want to achieve. – Olaf Kock Mar 12 '15 at 09:17
  • @OlafKock : I like to override view_message_thread.jsp present in comment-taglib. which fragment host should I mention for overriding this jsp ? – Harsh Kanakhara Sep 29 '17 at 10:27