nav bar class names

[Chris Dailey, modifié il y a 9 années.]

Hi,

I'm trying to create a new theme based on _styled from within the IDE. The goal is to make the theme for our intranet look a lot like our public web site, which was designed and is hosted by a 3rd party company. I've taken the CSS and JS and graphics from the public web site, and was hoping to incorporate those with as few changes as possible but with all of the necessary Liferay changes.

The problem I'm coming up with is that our public site uses a style class called "navbar". A style class of that name is used by the nav bar in navigation.vm, which is good. However, it's also used by the dockbar, which is apparently a portlet included from portal_normal.vm with a call to "#dockbar()". While I want the styles to apply to the nav bar defined in navigation.vm, I do not want them applied to the dockbar. Is there a way of making the dockbar not include "navbar" as one of its css classes?

I found where the dockbar portlet is defined:
webapps\ROOT\html\portlet\dockbar\view.jsp:
<aui:nav-bar cssClass="navbar-static-top dockbar" data-namespace="<%= renderResponse.getNamespace() %>" id="dockbar">

Part of the generated HTML for this tag looks like this:
<div id="_145_dockbar" class="navbar navbar-static-top dockbar" data-namespace="_145_">

As far as I can tell, there's not a way of getting rid of the "navbar" class from the dockbar, but hopefully someone can confirm or deny this.

Edit: If that's true, then I believe my options are to override all "navbar" classes with more specific "dockbar" class selectors in custom.css (which seems probably very error prone), or resort to having similar but different and incompatible CSS definitions for the public and intranet sites.

Thanks in advance!

[Byrån Zaugg, modifié il y a 9 années.]

Chris Dailey:

...
I've taken the CSS and JS and graphics from the public web site, and was hoping to incorporate those with as few changes as possible but with all of the necessary Liferay changes.

The problem I'm coming up with is that our public site uses a style class called "navbar". A style class of that name is used by the nav bar in navigation.vm, which is good. However, it's also used by the dockbar, which is apparently a portlet included from portal_normal.vm with a call to "#dockbar()". While I want the styles to apply to the nav bar defined in navigation.vm, I do not want them applied to the dockbar. Is there a way of making the dockbar not include "navbar" as one of its css classes?

As the markup for your existing site and Portal's likely differ significantly, I'd assume you'd need to rewrite most of your CSS selectors anyway.

Can you not just rename the existing class in HTML to something Portal doesn't use, like 'navbar-foo'?

Chris Dailey:

...
If that's true, then I believe my options are to override all "navbar" classes with more specific "dockbar" class selectors in custom.css (which seems probably very error prone), or resort to having similar but different and incompatible CSS definitions for the public and intranet sites.

I'd not recommend overriding with a more specific selector unless it's necessary.

In the end the CSS declarations are going to be significantly different between the two sites.

[Chris Dailey, modifié il y a 9 années.]

Thanks so much for your feedback, Byrån!

Byrån Zaugg:

As the markup for your existing site and Portal's likely differ significantly, I'd assume you'd need to rewrite most of your CSS selectors anyway.

Can you not just rename the existing class in HTML to something Portal doesn't use, like 'navbar-foo'?

I'm trying out your recommendation, and there seems to be some success in this approach.

Byrån Zaugg:

I'd not recommend overriding with a more specific selector unless it's necessary.

In the end the CSS declarations are going to be significantly different between the two sites.

I think you're right that I'll have to update the original CSS and use different names where there are clashes in the CSS class names. I think I'll also have to make a lot of changes to HTML templates to get it to look the same.

It seems that Liferay has made it relatively easy to add in additional CSS classes, but once they're there you can't remove them.

[Ahmed bouchriha, modifié il y a 9 années.]

Hi Chris,

If i understand you well you want to apply a style only to the navbar under navigation.vm if this is the case you can do it easily by wrapping it by the #navigation selector.

probably your navigation.vm code will look something like :

<nav class="$nav_css_class navbar site-navigation" id="navigation" role="navigation">
	<div class="navbar-inner">
             .
             .
             .
       </div>
</nav>

So in your css you have to style the navbar like this :

#navigation.navbar{
             .
             .
             .
}

And the style will be limited to the navbar with navigation id.

For the other css rules you have to wrap them on the .aui so they have the selector priority as the default liferay styles and override them.
You can also wrap the default liferay styles on classes like .yui3-widget, .lfr-admin-panel... to get them only applied to liferay native components and out of the box portlets.

I wish this help you and please feel free to send me a mail if you need more help on this
My mail is [e-mail]

Best Regards

Best Regards