Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Ranen Das
Page Navigation Bar:: Background color change
April 19, 2011 7:13 AM
Answer

Ranen Das

Rank: Regular Member

Posts: 137

Join Date: April 6, 2011

Recent Posts

Hello Guys,

I need a help.

I want to change the background color of Page Navigation bar, how can I do it?

I was able to change different colors like background color, text color of different parts of my page, but I am unable to change the back ground color of the Page Navigation bar.

Page Navigation bar is- the bar which is inbetween bread crumbs and the Life logo.

I was using ==> Manage-->Page-->Look and Feel--> css-->Insert custom CSS that will be loaded after the theme.

But I could not find css which can be used to overwrite the Page Navigation bar's back ground color.

Can anybody plz help me.

Regards,
Ranendra
Bavithra Rajendran
RE: Page Navigation Bar:: Background color change
April 18, 2011 10:31 PM
Answer

Bavithra Rajendran

LIFERAY STAFF

Rank: Regular Member

Posts: 123

Join Date: October 7, 2009

Recent Posts

Hi !

I want to change the background color of Page Navigation bar, how can I do it?

You can achieve this by editing the custom.css of your theme. This is where you would put all of your new styles and all of your overrides. It is available under [Your custom theme]/docroot/_diffs/css.
Hope this link might be helpful for your reference.


Thanks,
Bavithra Rajendran
Ranen Das
RE: Page Navigation Bar:: Background color change
April 19, 2011 7:14 AM
Answer

Ranen Das

Rank: Regular Member

Posts: 137

Join Date: April 6, 2011

Recent Posts

Thanks for the reply.

But I am still unable to change the background color of the Page Navigation Bar. The one you told me, I override that one and it changes the background color of the main Navigation bar where we have Add/Manage/Toggle Edit controls are avaiable.


I want to change th back ground color of the PAGE NAVIGATION bar, I created few pages like Home, Product Info, EMployee Info and now I want to change the back ground color. Life ray provides a good tool which is available in Look and Feel Button with a link called css where user can change the back ground color, I am able to change the back ground color of Bread crumbs and others but not Page Navigation bar(remember its not the 1st navigation bar with ADD/Manage/Toggle buttons).

Can anyone plz tell me how to do it?

Regards,
Ranendra

This is my Navigation bar for Pages
Attachment

Attachments: Page Navigation Bar Image.gif (12.9k)
Bavithra Rajendran
RE: Page Navigation Bar:: Background color change
April 19, 2011 10:12 PM
Answer

Bavithra Rajendran

LIFERAY STAFF

Rank: Regular Member

Posts: 123

Join Date: October 7, 2009

Recent Posts

The one you told me, I override that one and it changes the background color of the main Navigation bar where we have Add/Manage/Toggle Edit controls are avaiable.

It is called Dockbar. It was introduced in Liferay 6 as a way to make the most common administration operations readily accessible.

I want to change th back ground color of the PAGE NAVIGATION bar, I created few pages like Home, Product Info, EMployee Info and now I want to change the back ground color.

This is the sample piece of code from classic theme for your reference.

#navigation {
background: url("../images/navigation/bg.png") repeat-x scroll 0 0 #414445;
clear: both;
margin: 0 auto 5px;
min-height: 2.2em;
padding: 0 5px;
position: relative;
z-index: 1;
}

You can use firebug tool. It allows you to explore the DOM, change css on the fly and also you can see the results immediately.

Thanks,
Bavithra Rajendran
Ranen Das
RE: Page Navigation Bar:: Background color change
April 21, 2011 10:21 AM
Answer

Ranen Das

Rank: Regular Member

Posts: 137

Join Date: April 6, 2011

Recent Posts

Hey thanks for your reply, it helps me in changing the bg color of the navigation bar, thanks,

Ranendra
Ranen Das
RE: Page Navigation Bar:: Background color change
May 6, 2011 9:21 AM
Answer

Ranen Das

Rank: Regular Member

Posts: 137

Join Date: April 6, 2011

Recent Posts

Hi,

I have a new req- I need to display the Current Date and Day in the Navigation bar, how can I add Java script code to display the date/day in the Navigation bar.

Let me know if anyone knows how to do it.

Regards,
RD
Maarten van Heiningen
RE: Page Navigation Bar:: Background color change
May 6, 2011 11:29 AM
Answer

Maarten van Heiningen

Rank: Regular Member

Posts: 172

Join Date: February 5, 2009

Recent Posts

Hi Ranendra

You can do it like this:
 1
 2<script>
 3var day = new Date().getDate();
 4var month = new Date().getMonth()+1;
 5var year = new Date().getFullYear();
 6var fullyear = day+"-"+month+"-"+year;
 7</script>
 8<script>
 9document.write(fullyear);
10</script>

Note: The getMonth() has an extra +1 added. This is because the moth counting is done from 0-11. So January has the number 0 and December has the number 11. To compensate this you add the +1 to get the actual current month number correctly displayed.

You can past this code in yuor javascript file main.js and just do a "<script>document.write(fullyear);</script>" in you navigation.vm
w3schools Date formating

Maarten
Maarten van Heiningen
RE: Page Navigation Bar:: Background color change
May 6, 2011 11:30 AM
Answer

Maarten van Heiningen

Rank: Regular Member

Posts: 172

Join Date: February 5, 2009

Recent Posts

Ranendra Das:
Hi,

I have a new req- I need to display the Current Date and Day in the Navigation bar, how can I add Java script code to display the date/day in the Navigation bar.

Let me know if anyone knows how to do it.

Regards,
RD


Just a quick note. If you post this as a new topic threat, it might get picked up faster as this is not directly related to the title of this threat.

Maarten