Themeforest

Creating a custom skin for the wordpress jQuery vertical accordion menu plugin

The CSS involved in creating the styles for the accordion menu is relatively easy. There are a few additional class names, which the jQuery plugin adds to the menu in order to help with styling. Make sure that any custom CSS is added to your theme’s style sheet – do not edit the plugin CSS files as these will be overwritten whenever WordPress updates the plugin.

The blank template below lists all of the main CSS classes required to create a custom style and can be used as a starting point for your menu:

jQuery Vertical Accordion Menu CSS

/* Accordion menu container */
.dcjq-accordion {}

/* Main menu and sub-menus */
.dcjq-accordion ul {}

/* Menu list items */
.dcjq-accordion ul li {}

/* Menu list links */
.dcjq-accordion ul a {}

/* Menu list links on hover */
.dcjq-accordion ul a:hover {}

/* Sub-menus */
.dcjq-accordion ul li ul {}

/* Sub-menu list items */
.dcjq-accordion ul li ul li {}

/* Sub-menu links */
.dcjq-accordion ul li ul li a {}

/* Parent links only */
.dcjq-accordion ul a.dcjq-parent {}

/* Active parent links - when sub-menu is open */
.dcjq-accordion ul a.dcjq-parent.active {}

/* Icon tag for active parent links */
.dcjq-accordion ul a.dcjq-parent.active.dcjq-icon {}

Note: The above CSS classes are in addition to those added by WordPress when creating the menu.

29 Comments

  • I am having trouble with the accordion plugin wordpress. I have the menu set out but how can i add a small icon to certain menu items like for instance WEB DESIGN and HOSTING only?…..the icon i have says “NEW” and i want that icon to stay fixed when active and on hover and not disappear when rollover or anything like that……can someone please produce me a example?

    • Hi,

      If you can contact us via the online contact form we can provide a quotation for the custom css

  • There´s a simple solution to solve this problem comrades:

    1. Make your own skin in /skins folder by creating new css there ( you can copy any css what is there – demo.css graphite.css for example )

    2. Put to your name.css your modified code

    3. Simply activate your skin in settings of your vertical accordion menu

    4. Ou yea it´s works ;)

    PS: back up your skin.css when you will update menu or something else….

  • Hi,

    You can either use the WordPress built-in CSS classes, where “current-menu-item” is applied to the li tag:

    .dcjq-accordion ul li ul li.current-menu-item {}
    

    Or if using save state option the current page a tag is given the class active:

    .dcjq-accordion ul li ul li a.active {}
    
    • Ah nice thankyou! champion mate!

  • Hi!

    I am trying to change the skin and an the colour of subpages, subsubpages and the links.

    For ex: I tried this: /* Accordion menu container */
    .dcjq-accordion #menu-produkter-och-information {color: #D6FCA9 !important;}

    But nothing is changing!

    I would be greatful for help

    • I really can’t make the changes for the custom skins. I am trying to change the colour of the parents, subparents, subpages and the links?

      Really need help!
      My site: http://passionforhalsa.se/

      • Hi Mikaela,

        Lee kind of worked it out for me, here is the code i used for mine just paste over your .css inside to suite

        (located at /www/wordpress/wp-content/plugins/jquery-vertical-accordion-menu/skins):

        #dc_jqaccordion_widget-%ID%-item{font: bold 10px Arial, sans-serif;
        }
        
        #dc_jqaccordion_widget-%ID%-item ul, #dc_jqaccordion_widget-%ID%-item ul li {margin: 0; padding: 0 0 0 0px; border: none; list-style: none;
        }
        
        #dc_jqaccordion_widget-%ID%-item ul a {padding: 2px 2px 2px 5px; text-decoration:underline; display: block; color: #d2d2d2; font-weight: normal;
        }
        
        #dc_jqaccordion_widget-%ID%-item ul ul a {
        	background-color: #000000;
        }
        #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent {
        	text-decoration:underline;
        }
        #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent:hover {
        	font-weight: bold; color: #fff;
        	background-color: #f21414;
        }
        #dc_jqaccordion_widget-%ID%-item ul a.dcjq-parent.active {
        color: #ffffff;
        background-color: #ed0202;
        }
        #dc_jqaccordion_widget-%ID%-item ul li ul li a.active {
        	color: #ffffff;
        	background-color: #242424;
        	font-weight: bold;
        	font-size: 10px;
        	text-decoration: underline;
        
        }
        #dc_jqaccordion_widget-%ID%-item ul a:hover {
        	background-color: #f21414;
        }
        
        • Thanks for your response azz!

          So what do I have to change in the code. The ID of the item? And where do I place it? Sorry I am new at all this :)

  • Lee -

    found it by going on to the server and editing the plugin file directly. All’s good now, thanks.

    • Hi,

      Remember though that any changes made to the plugin files will be automatically overwritten when WordPress updates the plugin

  • tried variations like this also:
    .dcjq-accordion ul li ul {menu=”Events + Tickets Menu” skin=”#996699;”}

    • Hi,

      if you are wanting to change the link text colour and you are using this in conjunction with one of the supplied skins you need to use the following:

      .dcjq-accordion ul a {color: #996699!important;}
      
  • Lee -

    I was trying to follow your directions to change the color of the menu items. We have your plug-in as a sidebar. It picks up the main color theme of green, and we want the menu choices to pick up the secondary accent color of purple. I tried to do this with the following css code put into the style sheet:

    [jaccordion menu="Events + Tickets Menu" text-color="#996699;"]

    I tried many variations:
    .dcjq-accordion{menu=”Events + Tickets Menu” skin=”#996699;”}

    [jaccordion menu="Events + Tickets Menu" skin="#996699;"]

    well lots of permutations but it does not seem to have effect. Can you give me any advice? Thanks.

  • Hi!
    I have trouble getting JQuery Accordion VERTICAL MENU to work in the theme thesis, I install and activated the plugin and put in my custom menus. The menu appears on the page but the accordion does not work. And also the design looks nothing like it should! I really need help what I should do!

  • I have been trying to edit CSS and its letting me do it. May be i dont know what class or id to use.

    Can you please guide me a bit on it…

    I did even tried using code you are giving to edit menu look:

    Please let me know.

    I am adding this all codes to style.css

    /* Accordion menu container */
    .dcjq-accordion {}

    /* Main menu and sub-menus */
    .dcjq-accordion ul {}

    /* Menu list items */
    .dcjq-accordion ul li {}

    /* Menu list links */
    .dcjq-accordion ul a {}

    /* Menu list links on hover */
    .dcjq-accordion ul a:hover {}

    /* Sub-menus */
    .dcjq-accordion ul li ul {}

    /* Sub-menu list items */
    .dcjq-accordion ul li ul li {}

    /* Sub-menu links */
    .dcjq-accordion ul li ul li a {}

    /* Parent links only */
    .dcjq-accordion ul a.dcjq-parent {}

    /* Active parent links – when sub-menu is open */
    .dcjq-accordion ul a.dcjq-parent.active {}

    /* Icon tag for active parent links */
    .dcjq-accordion ul a.dcjq-parent.active.dcjq-icon {}

    i will wait for your reply.. please.. thanks

    • damm there are CSS files in folder.. Thanks I got it.. :)

  • Hi, I’m wanting just to chang the colours on one of the existing skins. I’, using Weaver pro in WordPress, which has a specific area for entering custom CSS. Can anyone tell me if that’ where I put the code, and if so, what code? Or, do I need to cearte a whole new CSS file for the amended skin?

    Thanks
    Jon

    • You can add the custom code to any CSS file that is being loaded into the page

  • Are you able to leap me with customization so it will match my theme? Thank you

    • Hi,

      The sample CSS provided in the above post contains all of the CSS selectors required to create a custom style sheet

  • There may be some dodgy characters due to the text editor. Do you know what the problem was?

  • Hi Lee,

    It works like a charm only when I edit the plugin CSS file otherwise but quiet not properly on the CSS theme template.
    I tried with Firebug to identify the ID and customize it from there but it doesn’t work.

    Thank you for your time and help!

  • Thanks a lot for your answer.

    Suppose the ID menu is “menu-item-77″ if I follow you and I want to modify the style .dcjq-accordion {}

    where should I add the ID, can you write me an example of the code with the ID?

    • The ID for the list item is on the li tag:

      .dcjq-accordion li#menu-item-77 {}

      Although if using the list item ID you dont need to have the .dcjq-accordion at the start

      • I tried again and again without success.
        I would like to customize it like this (see menu on the left)
        http://www.apple.com/jobs/us/corporate.html
        Do you have a guideline step by step where to add the CSS style, I have been trying first to suppress the list style so here was my code, I added as suggested on the theme style template, but it doesn’t work..

        #menu-item-77 {
        list-style: none!important;
        }
        I tried also:
        .dcjq-accordion li#menu-item-77 {list-style: none!important;}

        Thx

  • Hello,

    I have been adding the plugin on a widget sidebar, but when I apply any of the CSS classes above it doesn’t work.
    I don’t understand why? On firebug I can’t identify the exact CSS.
    I have been adding the classes on my theme’s style sheet without success.

    Please if you could help.
    Kindly,

    • Hi,

      In firebug check the ID of the menu’s parent tags and make sure these are the same as the ones used in the CSS. The plugin skins use the menu’s ID to identify the correct menu – if you add additional CSS rules without the ID and these rules are to overide the skin CSS they wont work due to the prioritisation of CSS

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags