Joomla Templates Club 406,261 posts

[scano001 Friend scano001Join date: March 2009Posts: 10Downloads:0Uploads:0 Thanks: 3]

#148595

I have searched the postings and cannot find a solution to this. How can I change the width of the buttons on the top menu. I need to spread the buttons across the width of the menu bar?

Template Ja_nickle

I also need to change the background color of the menu on the left of the screen.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#332645

Hello guy

please open the file: /htdocs/templates/ja_nickel/ja_menus/ja_cssmenu/ja.cssmenu.css and try to find codes at line 80:

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

Please adjust value of second paramter in this padding: 10px 20px;

1 user says Thank You to Saguaros for this useful post

1. scano001

[scano001 Friend scano001Join date: March 2009Posts: 10Downloads:0Uploads:0 Thanks: 3]

#332676

Thank you very much for your help.. That worked very well.

would you have asolution to my second question. How to change the background colour of my left menu.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#332677

Please open the file: /templates/ja_nickel/css/template.css

1) Style without mouse over: and find codes at line :997
ul.menu li a {
display: block;
outline: none;
padding: 5px 5px 5px 20px;
text-decoration: none;
border-top: 1px solid #E5E5E5;
background: url(../images/arrow.png) no-repeat 12px center;
color: #666666;
}

replace:

ul.menu li a {
display: block;
outline: none;
padding: 5px 5px 5px 20px;
text-decoration: none;
border-top: 1px solid #E5E5E5;
background: url(../images/arrow.png) no-repeat 12px center red;
color: #666666;
}

2) Style when mouse over: and find codes at line :1007

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
color: #666666;
background: #F6F6F6 url(../images/arrow.png) no-repeat 12px center;
text-decoration: none;
}

Please adust color inside background attributes of those styles

[scano001 Friend scano001Join date: March 2009Posts: 10Downloads:0Uploads:0 Thanks: 3]

#332700

Thank you, those solutions work, but I am not happy how they look. Where can I change the font color of the menu?… regards

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#332863

You ‘ll adjust a color of the color attribute inside two above styles.

Good luck

[scano001 Friend scano001Join date: March 2009Posts: 10Downloads:0Uploads:0 Thanks: 3]

#332892

Thank you for your response.

I have tried this, but in the attribute

ul.menu li a {
display: block;
outline: none;
padding: 5px 5px 5px 20px;
text-decoration: none;
border-top: 1px solid #E5E5E5;
background: url(../images/arrow.png) no-repeat 12px center red;
color: #666666;.

I cannot change to the color I want. The color I want is a brown color. This change gives me a red color.?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#333558

Here is codes

ul.menu li a {
display: block;
outline: none;
padding: 5px 5px 5px 20px;
text-decoration: none;
border-top: 1px solid #E5E5E5;
background: url(../images/arrow.png) no-repeat 12px center red;
color: #a52a2a;
}

[scano001 Friend scano001Join date: March 2009Posts: 10Downloads:0Uploads:0 Thanks: 3]

#333738

Thank you for your help. This code seems to change the color of the text – not the menu background as needed. Any further help would be appreciated.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#334085

hello guy

you make some changes in these blocks

1) Style without mouse over: and find codes at line :997
HTML Code:

ul.menu li a {
display: block;
outline: none;
padding: 5px 5px 5px 20px;
text-decoration: none;
border-top: 1px solid #E5E5E5;
background: url(../images/arrow.png) no-repeat 12px center;
color: #666666;
}

replace:
HTML Code:

ul.menu li a {
display: block;
outline: none;
padding: 5px 5px 5px 20px;
text-decoration: none;
border-top: 1px solid #E5E5E5;
background: url(../images/arrow.png) no-repeat 12px center red;
color: #666666;
}

2) Style when mouse over: and find codes at line :1007
HTML Code:

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
color: #666666;
background: #F6F6F6 url(../images/arrow.png) no-repeat 12px center;
text-decoration: none;
}

Please adust color inside background attributes of those styles

pls use the firebug addon of firefox to complete this task:
http://www.kristarella.com/2009/02/how-to-use-firebug-for-css/

[Author]

Posts