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
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
<div class="nav-menu nav-menu-style-<%= bulletStyle %>">
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.
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.
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