Simple questions regarding themes

Simple questions regarding themes

Hello all,


I have a couple of questions regarding theming with jQueryUI. I used the Themeroller and dowloaded an already existing theme, Blitzer. I dropped it into my project and linked to the jquery.ui.all.css file and it works fine. My problem is making some tweaks to the look of it. I read that you can make changes to the various widgets by editing their css files but I am not sure what to do for the two problems I have. The issue is with an accordion. I am using it for a menu, the layout uses divs with unordered lists. The layout is like this :

  1. <div id = "menu">
  2.       <div class = 'sub'>
  3.             <ul>
  4.                   <li>item </li>
  5.                   <li>item </li>
  6.             </ul>
  7.       </div>
  8.       <div class = 'sub'>
  9.             <ul>
  10.                   <li>item </li>

  11.                   <li>item </li>
  12.             </ul>
  13.       </div>
  14. </div>

  16. <script type = "text/javascript">
  17.       $("#menu").accordion(){
  18.       //options here
  19. </script>
This works fine but there are two visual changes I want to make. First I want to remove the arrow items that are attached to menu, the ones that change depending on if a part of the accordion is open. And I want to give the ul's in the accordion 0px padding and margin so they are not indented. I have, of course, tried to standard  way of styling the lists, even going so far as to imbed the styles inline into the ul tag but it has not worked, which leads me to believe that has to be done within the jqueryUI css files. I've looked at the jquery.ui.accordion.css file and can't see where I would make either of those changes. In fact the file is only 10 lines of code :
  1. /* Accordion
    ----------------------------------*/
    .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
    .ui-accordion .ui-accordion-li-fix { display: inline; }
    .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
    .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
    /* IE7-/Win - Fix extra vertical space in lists */
    .ui-accordion a { zoom: 1; }
    .ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
    .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
    .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
    .ui-accordion .ui-accordion-content-active { display: block; }










Could anyone tell me where I would have to look to make these simple changes? I feel kinda dumb asking this since they seem like such  simple css questions. I would really appreciate some help in this regard. Thanks much!


Jstall