Forums

Home » Liferay Portal » English » 2. Using Liferay » General

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Sreeranj S
How to change the color of the Welcome/Add page button on the banner.
April 6, 2009 6:58 AM
Answer

Sreeranj S

Rank: Junior Member

Posts: 78

Join Date: March 17, 2009

Recent Posts

Hi,

I managed to change the banner in Liferay 5.2.2, can any one suggest me to changethe color of the Welcome/Add button at the top right hand side corner of the Liferay page.

This is what I have done for the classic theme.

I have changed the banner image by changing the banner file (bg.png)from
/liferay-portal-5.2.1/tomcat-5.5.27/webapps/ROOT/html/themes/classic/images/common.
I have also replaced the file from the diffs folder located in
/liferay-portal-5.2.1/tomcat-5.5.27/webapps/ROOT/html/themes/classic/_diffs/images/color_schemes/green/common


I have to also made changes for the background color of the banner by editing the custom .css file located in
/liferay-portal-5.2.1/tomcat-5.5.27/webapps/ROOT/html/themes/classic/css


#banner {
background-color: selected color;
}
Madhu Yadav
RE: How to change the color of the Welcome/Add page button on the banner.
April 7, 2009 4:26 AM
Answer

Madhu Yadav

Rank: Regular Member

Posts: 118

Join Date: January 23, 2009

Recent Posts

try playing around with the velocity templates of your theme
eg: dock.vm and navigation.vm for your requirement
Sreeranj S
RE: How to change the color of the Welcome/Add page button on the banner.
April 7, 2009 10:45 PM
Answer

Sreeranj S

Rank: Junior Member

Posts: 78

Join Date: March 17, 2009

Recent Posts

Thank you Madhu,

I have checked the dock.vm and the navigation.vm, but unfortunately I am unable to find something which can be used to alter the color of Welcome/Add page button.
Could you please let me know the entry which I need to modify to change the color of the buttons?
Oliver Bayer
RE: How to change the color of the Welcome/Add page button on the banner.
April 8, 2009 1:20 AM
Answer

Oliver Bayer

Rank: Liferay Master

Posts: 881

Join Date: February 18, 2009

Recent Posts

Hi,

the "color" of the welcome button is set in navigation.css via background images. The following code snippet sets the background image for the text "welcome":
1.js .interactive-mode h2 span{
2background:transparent url(../images/dock/left_bg.png) no-repeat scroll 0 0;
3...

The next code snippet sets the down arrow on the right site of the welcome message:
1.js .interactive-mode h2{
2background:transparent url(../images/dock/right_bg.png) no-repeat scroll 100% 0;
3...

The background color of the add-page div is set with the following code:
1.js #add-page {
2background: #020509 none repeat scroll 0 0;

You can override these settings with the custom.css file.
Greetings Oli
Sachin Pathare
RE: How to change the color of the Welcome/Add page button on the banner.
April 8, 2009 2:22 AM
Answer

Sachin Pathare

Rank: New Member

Posts: 10

Join Date: December 4, 2008

Recent Posts

you can also change it in everything_packed .css in css folder
Oliver Bayer
RE: How to change the color of the Welcome/Add page button on the banner.
April 8, 2009 2:36 AM
Answer

Oliver Bayer

Rank: Liferay Master

Posts: 881

Join Date: February 18, 2009

Recent Posts

You can but it's not really comfortable to edit the css rules in one single line emoticon
Sreeranj S
RE: How to change the color of the Welcome/Add page button on the banner.
April 10, 2009 10:24 PM
Answer

Sreeranj S

Rank: Junior Member

Posts: 78

Join Date: March 17, 2009

Recent Posts

Thanks Oliver,


Let me check it.
Sachin Pathare
RE: How to change the color of the Welcome/Add page button on the banner.
April 13, 2009 1:31 AM
Answer

Sachin Pathare

Rank: New Member

Posts: 10

Join Date: December 4, 2008

Recent Posts

Oliver Bayer:
You can but it's not really comfortable to edit the css rules in one single line emoticon


In any case you gonna use eclipse u can format it in it once, and its quite easy to make changes in everything_packed.css.