CMS Made Simple Forums

Posted: **Sat Mar 25, 2006 10:44 am**

I dont know who did it again (this is the second time), but I had posted a thread about a custom template I wanted but It was deleted, and I dont know why. Could the person who keeps deleting it send me a valid reason as to why, Im getting annoyed, and I dont think Im doing anything wrong.

I want to use the horizontal drop-down menu that is provided with CMSMS and i want to make the buttons a set width and height and I want an image as a background and a hover image.
An example is found here: http://whats-up.uni.cc/ercwebsite

How do I do this, preferably detailed instructions would be nice, or a link to something specific.
Thanks, - Bobby.

Posted: **Sat Mar 25, 2006 11:25 am**

you left irc few minutes before I had a solution for you

you remember we started with identifiying the li:s with id number?

now you can style each menuitem seperately and this might work with straight copy paste..

my first link has id="i15" second i="i30"

first image for the link and some size settings

Code: Select all

li#i15 {
background: url('http://themes.cmsmadesimple.org/uploads/images/tsw/image_replacement_menu.png');
position: absolute; 
height:50px;
width:100px;
left:0;
}

li#i30 {
background: url('http://themes.cmsmadesimple.org/uploads/images/tsw/image_replacement_menu.png') -100px 0px no-repeat;;
position: absolute; 
height:50px;
width:150px;
left:100px;
}

then set a to fill the height also (this will push the dropdown under the link)

Code: Select all

li#i15 a , li#i30 a {
height:40px;
}

then hover states

Code: Select all

li#i15:hover {
background: transparent url('http://themes.cmsmadesimple.org/uploads/images/tsw/image_replacement_menu.png') 0 -50px no-repeat;
}

li#i30:hover {
background: transparent url('http://themes.cmsmadesimple.org/uploads/images/tsw/image_replacement_menu.png') -100px -50px no-repeat;
}

repeat these for every link you want to have an image as a bg

(didnt test with IE though)

and there's still problem trying to hide link text..

Code: Select all

li#i30:hover a {
text-indent:-9999px; 
}

affects dropdown links also (afaik it shouldnt)

Ill try to dig into it with better time

Posted: **Sat Mar 25, 2006 2:45 pm**

that sounds the same maybe easier than what I did here
and discussed here http://forum.cmsmadesimple.org/index.ph ... 699.0.html

mark

Posted: **Mon Mar 27, 2006 9:47 pm**

that doesnt work, in ie the dropdowns dont work and they dont show the hover image, in firefox they just overlap each other.... its pretty much just a whole mess.

Posted: **Mon Mar 27, 2006 11:06 pm**

Do you have a link so we can look at what you do have?
there is a hidden link on that page, can you find it?

mark

Posted: **Mon Mar 27, 2006 11:18 pm**

no, im doing it on my localhost

I found the link, Site Design, its where the frill is at the end of the bookmark thingo.

Posted: **Mon Mar 27, 2006 11:50 pm**

Thats too bad,, we can't see it to help you,, it makes it easier to check. any screenshots?

mark

Posted: **Tue Mar 28, 2006 8:57 am**

I totally forgot about scrren capture:

[attachment deleted by admin]

Posted: **Tue Mar 28, 2006 10:30 am**

Thanks
that looks just like the standard menu it has a style sheet called Default CSSMenu Horizontal.
if you look at your page source you will see,,

Home
Content Types
Products

Pricing

Templates

Rounded w/o Images

1colRound no images
2colRound no images
3colRound no images

Then none

Philosophy
Image Map Menu
Simple Site?
Blue Oak Ayurveda
MulTi BoX
MulTiBox no bottom

niftyCubes
stefman

those and are what you are going to style it will show up in the CSS like so,,

#primary-nav li a {
border-right: 1px solid #C0C0C0;
border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
background: url(uploads/images/grey.jpg);
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
background: url(uploads/images/grey.jpg);
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
background-image: url(modules/CSSMenu/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
background: url(uploads/images/grey.jpg);
}

/* Styling the apperance of menu items on hover */

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background: url(uploads/images/grey.jpg);
}

the,, li a{ and the,, li li a{ are the "tree" as it goes down if you just style the first one and not the second it will take the style of its "parent" see if you can id the very top level and give it img.'s and all else below, colors with,,
border-left:{ 5px solid #'some numbers for color of border'}
something like that,,

HTH mark

Posted: **Tue Mar 28, 2006 10:33 am**

I followed this tutorial: http://themes.cmsmadesimple.org/Image_menu.html
and then did what that other dude said to do in the second post.

Posted: **Tue Mar 28, 2006 10:54 am**

Well that should get it then hope it works out,,, fun aint it!

mark

Posted: **Tue Mar 28, 2006 3:57 pm**

Code: Select all

li#i30:hover a {
text-indent:-9999px;
}

This is the line thats cousing the trouble.

It makes link text move -9999px left of view area for top links (so that the image wont be affected) BUT it seems to cascade down to other links also.

you could try this:

first tell every li a element to have text by default

Code: Select all

li a {
text-indent:0px !important;
}

then force selected texts to move out to the left

Code: Select all

li#30 a {
text-indent:-9999px;
}

Posted: **Tue Mar 28, 2006 9:21 pm**

Ok now I get the following:
- the text appears in the drop-down menus now
- the text also appears on top of the button
- if the button has a drop-down it will not hover (like in the image)
- they are still overlapping each other

[attachment deleted by admin]

Posted: **Thu Mar 30, 2006 10:43 am**

you lookin for something like this http://www.multiintech.com/cmsite/index ... =imap_menu

mark

Posted: **Thu Mar 30, 2006 11:53 pm**

OMG, YES! HOW DID YOU DO IT!?

CMS Made Simple Forums

Drop-Down Menu Customisation

Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation

Re: Drop-Down Menu Customisation