Editing Accordion Menu Appearance

Two level, smoothly expanding, search engine friendly accordion menu.
Post Reply
nanodac
Posts: 4
Joined: Tue Feb 22, 2011 4:04 pm

Editing Accordion Menu Appearance

Post by nanodac »

Hi everyone!

I am currently trying to incorporate the accordion menu into my site using the Hotshot theme. I want to edit the appearance of the accordion menu so that it matches pretty closely in colour and style to the example below. I have no diea where to start re: achieving this, so if anyone could give me an idiots guide that would be fantastic!

Thanks!
Attachments
iss_sidebar.JPG
iss_sidebar.JPG (30.29 KiB) Viewed 14463 times
Last edited by nanodac on Wed Feb 23, 2011 2:38 pm, edited 1 time in total.
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Editing Accordion Menua Appearance

Post by norman »

See AccordionMenuReadMe.txt / CUSTOMISATION / COLOUR.

Then for further tuning you can use Notepad to edit file accordion-glossy.css (in your Site folder). You'll need a little CSS knowledge and there are hundreds of CSS tutorials available if you google for them.

Change one thing at a time, save the file and click Preview in Actinic to see what's changed. Keep a copy of the original file safe so you can revert if you break it.
Norman
nanodac
Posts: 4
Joined: Tue Feb 22, 2011 4:04 pm

Re: Editing Accordion Menua Appearance

Post by nanodac »

Brilliant thank you Norman, I will have a fiddle and report back with my results!
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Editing Accordion Menu Appearance

Post by norman »

Hi Norman,

I have been looking at this and I have a couple of questions (sorry if they are glaringly obvious).

Firstly, you say:

'Colourise accordion-glossyback-gray.gif and accordion-glossyback2-gray.gif'

How do I go about doing this? as you can see from the screen shot provided, my background is grey (#eeeeee). I use Coral Draw and Photo-Paint for editing images, would I do this in there?

Secondly you state:

'First choose a valid HTML/CSS colourname that will be used for the divider between expanded items'

Just want to check what is 'divider' referring to here?

Thanks,

Peter
The ADVANCED CUSTOMISATION and CREATING OWN COLOURSETS part of the ReadMe are intended for skilled web-designers. Best leave these alone unless you are one of these.

Note that in my earlier post I did not recommend doing it that way.

The simplest way to do what you want is to choose an existing MenuBackground that is closest to your requirements. Then tinker with the settings, images and CSS files that are involved with that setting.

I'm not a web-designer - I'm a software developer - so if you need to hire design help you'd be much better with someone who works in web-design.
Norman
norman
Site Admin
Posts: 1252
Joined: Sat Feb 07, 2004 9:55 pm

Re: Editing Accordion Menu Appearance

Post by norman »

The Hotshot Theme is a very tricky one to add a menu to. I've posted viewtopic.php?f=18&t=529&p=1829 for guidance.
Norman
Post Reply