Joomla Templates Club 406,261 posts

[prince of sun Friend prince of sunJoin date: April 2009Posts: 11Downloads:0Uploads:8 Thanks: 2]

#147272

Hi.. I want to make the left side main menu become like tree menu style
– We can identify which menu have a submenu and add a diff background (maybe folder)
– The menu icon (folder icon) will change after we click on it and the submenu appear
– Menu which don’t have any submenu will have a different background

For example please visit this link
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

I know where to change the css menu : <joomla root> / templates/ja_nickel/ja_menus/ja_cssmenu/ja.cssmenu

Just don’t know how to write the css. Thanks

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#328106

Hi prince of sun

As you are requesting heavy customization, I am afraid that you have to handle the changes at your end.
Alternatively, please take into consideration to post your requirements on Joomlancers.com to find a talent freelancer for your project.

I am sorry for not being of much help in this case.

[prakash Friend prakashJoin date: October 2008Posts: 439Downloads:0Uploads:1 Thanks: 2 Thanked: 146 times in 115 posts]

#328111

Hi… to change the main menu appearing on the left… you need to open this file

/templates/ja_nickel/css/template.css

around line 990 the menu css definitions start

for example > take this section

ul.menu li li a {
background: #FFFFFF url(../images/bullet.gif) no-repeat 20px center !important;
border: none;
font-weight: normal !important;
padding-left: 30px !important;
width: 75%; /*need for ie6*/
}

This defines the sub menus > where in the padding left is set to 30 and the background is set to white(FFFFFF) and the bullet image is defined by bullet.gif > this could be changed to say folder.gif and palce the folder gif in the images folder in the template.

rest of the changes like customizing it exactly like dynamic drive menu…you will need to make changes to css / the php file and add js file separately. This post is just to give you a direction from where you could begin

1 user says Thank You to prakash for this useful post

1. JA Developer

[Felipe Santos Friend Felipe SantosJoin date: September 2014Posts: 92Downloads:7Uploads:13 Thanks: 18 Thanked: 1 times in 1 posts]

#344825

Hi fellas, i already look in forum, in all css, images and dont find where i can change this grey collor of main menu,

could you help me in this issue please?

printscreen:
http://www.next4.com.br/extra/color.gif

thanks in advanced

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#344836

nextideas;180111Hi fellas, i already look in forum, in all css, images and dont find where i can change this grey collor of main menu,

could you help me in this issue please?

printscreen:
http://www.next4.com.br/extra/color.gif

thanks in advanced

The grey you show in the screenshot is the background to the search area only
Go to the template.css file ( /templates/ja nickel/css/) around line 941 and find this code

#mod_search_searchword {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-originadding;
background:#666666 none repeat scroll 0 0;
border:1px solid #666666;
color:#CCCCCC;

Change the background value to whatever colour you wish

Hope I have helped today
Cheers Shannon

[Felipe Santos Friend Felipe SantosJoin date: September 2014Posts: 92Downloads:7Uploads:13 Thanks: 18 Thanked: 1 times in 1 posts]

#344956

Hi Unique, this value change only the bg of search box. the menu continues in grey.

anyone know where i change this basicaly thing?

thanks

[uniquebiz Friend uniquebizJoin date: February 2010Posts: 596Downloads:0Uploads:40 Thanks: 33 Thanked: 156 times in 119 posts]

#344974

nextideas;180277Hi Unique, this value change only the bg of search box. the menu continues in grey.

anyone know where i change this basicaly thing?

thanks

Sorry about the error I only saw the grey on the search box in the screenshot never read the description properly

The gray for the standard menu like the demo has is kept at around line 80 in ja.cssmenu.css which you’ll find in templates/ja nickel/ja menus/ja cssmenu

here’s the tag and code

#ja-cssmenu li a
{
border-right:1px solid #666666;
color:#999999;
display:block;
font-size:100%;
padding:10px 20px;
text-decoration:none;
text-transform:uppercase;

Change the highlighted colour to what you want, note this is the base colour not the really dark gray of the rollover.

Cheers Shannon

1 user says Thank You to uniquebiz for this useful post

1. Felipe Santos

[Author]

Posts