Foren

Changing the Navigation Bar Colour (Classic Theme)

thumbnail
Alvin Arulselvan, geändert vor 12 Jahren.

Changing the Navigation Bar Colour (Classic Theme)

New Member Beiträge: 13 Beitrittsdatum: 02.06.11 Neueste Beiträge
Hi everyone,

Totally new to Liferay and this forum.I want to do something really "Simple" but have no idea how to go about doing it.I have randomly changed my CSS codes to show the different colours for the menu bar attached below



How do I go about doing this,step-by-step?
thumbnail
tinu c p, geändert vor 12 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Beiträge: 78 Beitrittsdatum: 07.01.10 Neueste Beiträge
Hi Alvin,

could not see attached image in your post. But you can go through below link for creating theme in liferay.

http://www.liferay.com/documentation/liferay-portal/6.0/development/-/ai/creating-a-theme

In link where you find the _diffs folder where your changes goes and you add your .css class in custom.css file. And deploy the theme to and apply theme to your page by going to control panel -> manage pages & select the deployed theme for your desired page. So your css is applied.

Hope it helps you to get started.

Thanks,
AP
thumbnail
Rob Chan, geändert vor 12 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Beiträge: 82 Beitrittsdatum: 23.03.11 Neueste Beiträge
If you only want to change the CSS for a specific portlet without creating a theme. You can click the toolbar icon on the top of a portlet and choose "Look and Feel." From there, go to "Advanced Styling" and enter your custom CSS there.
thumbnail
Alvin Arulselvan, geändert vor 12 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Beiträge: 13 Beitrittsdatum: 02.06.11 Neueste Beiträge
My apologies,some issues with PhotoBucket.Here's what I wanna change.It's the main menu bar or something. (I have no idea what it's called)





Do I still follow the same steps as above then?
thumbnail
Hitoshi Ozawa, geändert vor 12 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Liferay Legend Beiträge: 7942 Beitrittsdatum: 24.03.10 Neueste Beiträge
You mean the Main navigation bar with properties defined in the ROOT\html\themes\classic\css\custom.css.

#navigation {
background: #414445 url(../images/navigation/bg.png) repeat-x 0 0; <= change this like background: #00FF00;
clear: both;
margin: 0 auto 5px;
min-height: 2.2em;
padding: 0 5px;
position: relative;
z-index: 1;
thumbnail
Alvin Arulselvan, geändert vor 12 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Beiträge: 13 Beitrittsdatum: 02.06.11 Neueste Beiträge
Hi Hitoshi,

I have tried that as well



It doesn't seem to work.It still shows me the damn black bar. (This colour is maroon-ish)

What do you think is the problem?
thumbnail
Hitoshi Ozawa, geändert vor 12 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Liferay Legend Beiträge: 7942 Beitrittsdatum: 24.03.10 Neueste Beiträge
It's because you're overwriting the background color with the image!
As in the example I wrote above, delete the url(.....)
thumbnail
Bavithra Rajendran, geändert vor 12 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Regular Member Beiträge: 123 Beitrittsdatum: 08.10.09 Neueste Beiträge
Hi Alvin !

Don't modify the classic theme directly. I suggest you to create a new theme and modify the changes to the new theme. If you want your theme to be same as classic, just modify the build.xml file to change the parent attribute from _styled to classic like this :

<property name="theme.parent" value="_styled" />
to
<property name="theme.parent" value="classic" />

and deploy your theme. Changes should be done under the _diffs directory of your theme.

Hope the following links might be helpful :
creating liferay theme
theme wiki

Thanks
Bavithra Rajendran
thumbnail
Alvin Arulselvan, geändert vor 12 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Beiträge: 13 Beitrittsdatum: 02.06.11 Neueste Beiträge
Thanks Hitoshi and Bavithra!

I've done all you guys have said.Edited without the url and I'm about to create a new theme profile which call upons the "classic" parent profile.

Thank you all so much!
thumbnail
Hitoshi Ozawa, geändert vor 12 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Liferay Legend Beiträge: 7942 Beitrittsdatum: 24.03.10 Neueste Beiträge
If you want to keep the url, just create a new png file and enter that file name in the url.
asif aftab, geändert vor 10 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Regular Member Beiträge: 123 Beitrittsdatum: 02.09.13 Neueste Beiträge
How to change the color of navigation bar
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;
}
in custom .css
on mouse over
&.open {
> a {
background-color: #a3a3A3; /* this color visible when we put our mouse means on hover */
color: #FFF;
}
}
Amin Chhipa, geändert vor 10 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Beiträge: 4 Beitrittsdatum: 30.12.13 Neueste Beiträge
I have converted the liferay project into Arabic language .... The whole project has succesfuully converted into Arabic language ,
But I am not able to convert the navigation bar



I want to change this Home Wiki Calendar into Arabic language so for this which file i have to use to modify this navigation bar

Can you please suggest me the solution for this ???????????emoticon
thumbnail
Ryan Schuhler, geändert vor 10 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Beiträge: 77 Beitrittsdatum: 06.07.12 Neueste Beiträge
In order to translate the navigation bar you need to go to manage pages and click on the page you want to translate. You will be able to translate it there in the same place where you input the page name.
Amin Chhipa, geändert vor 10 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Beiträge: 4 Beitrittsdatum: 30.12.13 Neueste Beiträge
Thanks for the reply Sir,
I have already tried this out but it gives me the error that " Site Pages are temperorily unavailable ".
All the languages accept Arabic gives it's effect on pagfe but it doesnot work for Arabic language


Please reply with suggestion if any
Thanks
thumbnail
Ryan Schuhler, geändert vor 10 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Beiträge: 77 Beitrittsdatum: 06.07.12 Neueste Beiträge
What do the logs say? What kind of errors are you getting?
Amin Chhipa, geändert vor 10 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Beiträge: 4 Beitrittsdatum: 30.12.13 Neueste Beiträge
"Site Pages are temperorily unavailable ". this error is coming
Ahmed yousrey, geändert vor 10 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Beiträge: 58 Beitrittsdatum: 02.10.13 Neueste Beiträge
when u translate the page
u should also write the friendllyURL in arabic version
hope this solution work for u
Amin Chhipa, geändert vor 10 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Beiträge: 4 Beitrittsdatum: 30.12.13 Neueste Beiträge
Thanks Ahmedemoticon

what do you mean by freindlyurl ????? Moreover how can i implement this ?emoticonemoticon
Ahmed yousrey, geändert vor 10 Jahren.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Beiträge: 58 Beitrittsdatum: 02.10.13 Neueste Beiträge
Amin Chhipa:
Thanks Ahmedemoticon

what do you mean by freindlyurl ????? Moreover how can i implement this ?emoticonemoticon


frindlyURL like /web/gust/welcome

Anhänge: