Foros de discusión

Changing the Navigation Bar Colour (Classic Theme)

thumbnail
Alvin Arulselvan, modificado hace 12 años.

Changing the Navigation Bar Colour (Classic Theme)

New Member Mensajes: 13 Fecha de incorporación: 2/06/11 Mensajes recientes
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, modificado hace 12 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Mensajes: 78 Fecha de incorporación: 7/01/10 Mensajes recientes
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, modificado hace 12 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Mensajes: 82 Fecha de incorporación: 23/03/11 Mensajes recientes
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, modificado hace 12 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Mensajes: 13 Fecha de incorporación: 2/06/11 Mensajes recientes
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, modificado hace 12 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Liferay Legend Mensajes: 7942 Fecha de incorporación: 24/03/10 Mensajes recientes
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, modificado hace 12 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Mensajes: 13 Fecha de incorporación: 2/06/11 Mensajes recientes
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, modificado hace 12 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Liferay Legend Mensajes: 7942 Fecha de incorporación: 24/03/10 Mensajes recientes
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, modificado hace 12 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Regular Member Mensajes: 123 Fecha de incorporación: 8/10/09 Mensajes recientes
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, modificado hace 12 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Mensajes: 13 Fecha de incorporación: 2/06/11 Mensajes recientes
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, modificado hace 12 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Liferay Legend Mensajes: 7942 Fecha de incorporación: 24/03/10 Mensajes recientes
If you want to keep the url, just create a new png file and enter that file name in the url.
asif aftab, modificado hace 10 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Regular Member Mensajes: 123 Fecha de incorporación: 2/09/13 Mensajes recientes
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, modificado hace 10 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Mensajes: 4 Fecha de incorporación: 30/12/13 Mensajes recientes
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

Archivos adjuntos:

thumbnail
Ryan Schuhler, modificado hace 10 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Mensajes: 77 Fecha de incorporación: 6/07/12 Mensajes recientes
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, modificado hace 10 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Mensajes: 4 Fecha de incorporación: 30/12/13 Mensajes recientes
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, modificado hace 10 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Mensajes: 77 Fecha de incorporación: 6/07/12 Mensajes recientes
What do the logs say? What kind of errors are you getting?
Amin Chhipa, modificado hace 10 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Mensajes: 4 Fecha de incorporación: 30/12/13 Mensajes recientes
"Site Pages are temperorily unavailable ". this error is coming
Ahmed yousrey, modificado hace 10 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Mensajes: 58 Fecha de incorporación: 2/10/13 Mensajes recientes
when u translate the page
u should also write the friendllyURL in arabic version
hope this solution work for u
Amin Chhipa, modificado hace 10 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

New Member Mensajes: 4 Fecha de incorporación: 30/12/13 Mensajes recientes
Thanks Ahmedemoticon

what do you mean by freindlyurl ????? Moreover how can i implement this ?emoticonemoticon
Ahmed yousrey, modificado hace 10 años.

RE: Changing the Navigation Bar Colour (Classic Theme)

Junior Member Mensajes: 58 Fecha de incorporación: 2/10/13 Mensajes recientes
Amin Chhipa:
Thanks Ahmedemoticon

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


frindlyURL like /web/gust/welcome

Archivos adjuntos: