0

I am working on a project where I have to develop a theme in which I have to customize navigation and breadcrumb bar and many other things too. Main part is how to change the color of navigation bar. Liferay 6.2 tomcat 7 windows 7

asifaftab87
  • 1,315
  • 24
  • 28
  • 1
    You can override css responsible for navigation related css. Refer to navigation.css file for css rules. – Pankaj Kathiriya Jan 29 '14 at 12:56
  • 6.2 has included .scss files along with other theme css which can be used when you want to update colors of any portal components (background, navigation, dockbar, buttons, portlets etc.) but just color.. For other css styles you can find respective class in *.css files and update same in your theme.. – Ankit P Jan 30 '14 at 06:30

2 Answers2

1

To change the color of navigation bar I used a small image and repeat that image. In 

custom .css 
.navbar-inner {
    background: url("../images/navigation/nav_bg.gif") repeat-x;
/*added by me for navigation bar*/        
/*background: #404041;
 /*added asif ##141415 and hence this will change the background of navigation bar color */
border-width: 0;
    min-height: 36px;
    li a {
    color: #FFF;
          }
    }

either by using 

background: url("../images/navigation/nav_bg.gif") repeat-x;

we can change the color. Here nav_bg.gif is a very small image and I am using that one as background color I just repeat that one. 

background: #404041;

we can also change the color.

webdoctor is a .css file created by me and this is inside color_schemes folder. in webdoctor.css

.webdoctor    #navigation {

background: url("nav_bg.gif") repeat-x scroll 0 0 #404041;  /* change the corner color of navigation bar */
clear: both;
margin: 0 auto 5px;
min-height: 2.2em;
padding: 0 5px;
position: relative;
z-index: 1;
}
asifaftab87
  • 1,315
  • 24
  • 28
0

Include the following in navigation.css or custom.css found in your theme folder - Path : portal-liferay/tomcat/webapps/ROOT/html/themes/classic/css

 #navigation {
background: #414445 url(portal-liferay/tomcat/webapps/ROOT/html/themes/classic/images/navigation/bg.png)repeat-x 0 0;
 }

The png image 'bg.png' must be of the custom color you desire. Edit the image in paint and replace the one in the images folder. Path : /portal-liferay/tomcat/webapps/ROOT/html/themes/classic/images/navigation

KGDK
  • 25
  • 11