Hey forum - I'm way new to this stuff. Only know HTML coding and some minor CSS. MINOR.

Adding Drupal modules has been slick and the sub theme for Zen makes sense. Here is where I'm really stuck at the moment (have been reading posts but the coding recommendations are a little deep for me):

I created a menu called "writersnav" and I created a new region at the top of my page. Edited the appropriate files and put it in my theme's copy of page.tpl.php. It shows up - all is good!

Cannot for the life of me figure out how to add images instead of the text. I want two images - a main and mouseover for each button.

If anyone can help that would be AWESOME!!!! Below is my code:

PAGE.TPL.PHP

if ($writernav):

print theme('links', $writernav);

endif;

print $writernav;

MY .INFO FILE

regions[writernav] = buttons bar writer

LAYOUT.CSS

#writernav
{
float: left;
width: 375px;
margin-left: 0;
margin-right: -100%; /* Negative value of #writernav's width + left margin. */
padding: 0; /* DO NOT CHANGE. Add padding or margin to #writernav-inner. */
height: 56px; /* The writernav can have any arbritrary height. We picked one
that is twice the line-height pluse 1em: 2 x 1.3 + 1 = 3.6
Set this to the same value as the margin-top below. */
}

.with-writernav #content,
.with-writernav #sidebar-left,
.with-writernav #sidebar-right
{
margin-top: 56px; /* Set this to the same value as the writernav height above. */
}

#writernav-inner
{
}

#writer
{
margin-left: 200px; /* Width of search-box */
}

#secondary
{
margin-left: 200px; /* Width of search-box */
}

#writernav ul /* Primary and secondary links */
{
margin: 0;
padding: 0;
text-align: left;
}

#writernav li /* A simple method to get writernav links to appear in one line. */
{
float: left;
padding: 0 0px 0 0;
}

/* There are many methods to get writernav links to appear in one line.
* Here's an alternate method: */
/*
#writernav li
{
display: inline;
padding: 0 0px 0 0;
}
*/

All of that works to show the text links horizontally, but I don't know how to change from text links to images. =(

Comments

Enno’s picture

Hi,

your question is a pure CSS question and not related to Drupal. I am not saying that to diminish your question but to encourage you the next time to look outside the Drupal forums of that kind of theming questions as you will find tons of resources for menus with grafic buttons based on css/javascript.

There are several different ways of solving your problem. I like to use the following:

Assign a background image to your li element (this is your hover picture):

#writernav li {
background-image: url(
) no-repeat;
width: px;
height: px;
}

Assign a background image to your li a element (this is your normal picture) and get rid of the link text:

#writernav li a {
background-image: url(
) no-repeat;
display: block;
width: pz;
height: px;
text-indent: -9999px;
}

Whenever someone hovers over the a element, turn off the first background picture, so the second background picture from the li element is shown instead:

#writernav li a:hover {
background: none;
}

and should be the size of the image. The image itself should be in the theme directory or in a image subdirectory ideally, eg: (images/picture_button1.png)

Hope that helps and I didnt leave out anything. Let me know if you have trouble with that solution.

commonmind’s picture

Hey theatereleven, I won't guide you step-by-step through this process, but here is an example of the code I used to add sprite-based rollovers to a navigation menu in Drupal.

I created a .png file that's 960px in width, 240px in height -- that's 60px high for each particular state of the menu (normal, hover, click and active -- as I tend to refer to them); 960px divided by 6 menu items (in my case) was equal to 160px, so I made sure to space out the images/text equally within 160px areas in my png. The easiest way to do this is to create guides at 0, 160, 320, 480, 640, 800, 960, etc. Add that png to the respective theme directory's image folder you're using. The CSS looks like this:

#navigation {
width:960px;
height:60px;
margin:0;
padding:0;
float:none;
}

#navigation #main-menu {
width:960px;
height:60px;
margin:0;
padding:0;
background:url('../images/navigation.png') 0 0 no-repeat;
}

#navigation #main-menu li {
display:inline;
padding:0 !important;
}

#navigation #main-menu li a {
float:left;
outline:none;
width:160px;
height:0;
padding-top:60px;
overflow:hidden;
}

#navigation #main-menu li a {
background-image:url('../images/navigation.png');
background-repeat:no-repeat;
}

#navigation #main-menu li.menu-927 a {
background-position: 0 0;
}
#navigation #main-menu li.menu-929 a {
background-position: -160px 0;
}
#navigation #main-menu li.menu-930 a {
background-position: -320px 0;
}
#navigation #main-menu li.menu-928 a {
background-position: -480px 0;
}
#navigation #main-menu li.menu-931 a {
background-position: -640px 0;
}
#navigation #main-menu li.menu-932 a {
background-position: -800px 0;
}

#navigation #main-menu li.menu-927 a:hover {
background-position: 0 -60px;
}
#navigation #main-menu li.menu-929 a:hover {
background-position: -160px -60px;
}
#navigation #main-menu li.menu-930 a:hover {
background-position: -320px -60px;
}
#navigation #main-menu li.menu-928 a:hover {
background-position: -480px -60px;
}
#navigation #main-menu li.menu-931 a:hover {
background-position: -640px -60px;
}
#navigation #main-menu li.menu-932 a:hover {
background-position: -800px -60px;
}

#navigation #main-menu li.menu-927 a:active {
background-position: 0 -120px;
}
#navigation #main-menu li.menu-929 a:active {
background-position: -160px -120px;
}
#navigation #main-menu li.menu-930 a:active {
background-position: -320px -120px;
}
#navigation #main-menu li.menu-928 a:active {
background-position: -480px -120px;
}
#navigation #main-menu li.menu-931 a:active {
background-position: -640px -120px;
}
#navigation #main-menu li.menu-932 a:active {
background-position: -800px -120px;
}

#navigation #main-menu li.menu-927 a.active {
background-position: 0 -180px;
}
#navigation #main-menu li.menu-929 a.active {
background-position: -160px -180px;
}
#navigation #main-menu li.menu-930 a.active {
background-position: -320px -180px;
}
#navigation #main-menu li.menu-928 a.active {
background-position: -480px -180px;
}
#navigation #main-menu li.menu-931 a.active {
background-position: -640px -180px;
}
#navigation #main-menu li.menu-932 a.active {
background-position: -800px -180px;
}

If I typed out my description correctly, this should make sense to you. There are some quirks in here, which were added for my particular build (such as the float:none property on the navigation div, which I added so I wouldn't have to apply a vertical margin to one of the elements on the page to move it below the navigation menu). The names of the menu items (menu-*) will also differ for you; use whatever method you normally employ to find the correct names for your menu items.

Hope this helps.