I have recently used Artisteer to create templates for my sites, but it's bugging me how much code Artisteer puts in the css.
Therefore I am going to try another approach, styling my site using the Atomic default template as a base.
Right now I am trying to add a background image to the horizontal main menu. I have added the menu items, and linked it to a module properly. Also, I found this piece of code and added it to my template.css:
Code:
.joomla-nav {
background-color:#c3d9ff;
border-top:1px solid #b3c9e4;
border-bottom:1px solid #b3c9ef;
height:1%; /* fixing IE 6 */
margin:0 0 1.5em 0;
min-height:auto;
overflow:auto;
padding:0.67em 0 0.67em 0;
}
.joomla-nav li {
float:left;
line-height:1.5;
list-style-type:none;
margin:0 0.5em 0 0.5em;
padding:0;
}
.joomla-nav li a {
color:#222;
cursor:pointer;
display:block;
float:left;
font-weight:bold;
padding:0 .33em 0 .33em;
}
.joomla-nav li a.selected {
color:#555;
cursor:default;
}
.joomla-nav li a, .joomla-nav li a:focus, .joomla-nav li a:hover {
text-decoration:none;
}
.joomla-nav li a:focus, .joomla-nav li a:hover {
color:#555;
outline:none;
}
.joomla-nav li.label {
font-weight:normal;
line-height:1.5;
margin-right:1em;
padding:.15em .33em .15em .33em;
}
Playing around with this code, I can change the appearance of my menu, but I would like to add a horizontally repeating background image to it that changes (sort of like a button) when the user hovers with the mouse over a menu item. I was thinking that adding:
Code:
background-image:url('images/menu.png');
background-repeat:repeat-x;
(and the same code but with a menu-hover.png image instead for the hover event)
somewhere would solve my problem, but I can't figure out where to put the code.
Any help with this would be greatly appreciated.
Thank you.
Edit:
The solution was to change
Code:
background:url(../images/menu.png);
to
Code:
background:url(http://www.domain/sitename/images/menu.png);
Thanks anyway
