0
Welcome Guest! Login
0 items Join Now

SOLVED Changing Margins Side Menu (mod_mainmenu or roknav)

Last Post
Search Topic

  • SOLVED Changing Margins Side Menu (mod_mainmenu or roknav)

    Posted 13 years 4 months ago
    • Hi,

      I have the Panacea template and am using a main and a side menu. Although there is plenty of space on the side menu, I don't manage to find x offset setting. See attachment.

      The whole menu should stay much more in the middle of the sidemenu, if you know what I mean.
      I tested roknavmenu and that gives the same results as mod_mainmenu.

      The only setting I could find and adapted are in the template.css. Here are the settings:

      /* Side Menus */
      .module-content ul.menu {margin-left: 0;}
      .module-content ul.menu li {list-style: none;margin-bottom: 5px;}
      .module-content ul.menu a, .module-content ul.menu .separator, .module-content ul.menu .item {padding: 0 0 0 10px;background-position: 0 5px;background-repeat: no-repeat;line-height: 130%;font-size: 10px;}
      .module-content ul.menu li.active > a, .module-content ul.menu li.active > .separator, .module-content ul.menu li.active > .item {font-weight: bold;font-size: 12px}
      .module-content ul.menu ul {padding-top: 0px;padding-bottom: 0px;}
      .module-content ul.menu ul ul {padding-bottom: 0;}
      .module-content ul.menu .subtext em {line-height: 10px;padding-left: 10px;}
      .module-content ul.menu em {display: block;font-size: 80%;font-style: normal;font-weight: normal;}
      .module-content ul.menu .image img {float: left;margin-left: -4px;}
      .module-content ul.menu .item.image {background: none;padding-left: 8px;}

      so are there 'general' settings somewhere to be found for how many pixels a subcategory shifts to the right when there is a listing of subcategories (x offset)?

      Thanks
    • Last Edit: 13 years 4 months ago by eropuitinbrabant.
    #745025

  • Re: SOLVED Changing Margins Side Menu (mod_mainmenu or roknav)

    Posted 13 years 4 months ago
    #745510

  • Re: SOLVED Changing Margins Side Menu (mod_mainmenu or roknav)

    Posted 13 years 4 months ago
    • ok, finally got it figured out, so let's share it with you:

      in components/com_gantry/gantry.css you find this:

      /* Lists */
      ul,ol {padding-left:15px;}
      ul li {padding: 0;margin: 0;}
      ul li a {font-size: 1.2em;line-height: 1.8em;}
      ul ul {margin-left: 25px;padding: 5px 0;}
      ul li.author {margin: 0;letter-spacing: 1px;list-style: none;font-weight: bold;text-align: right;}
      ul li.date {margin: 0;letter-spacing: 1px;list-style: none;text-align: right;font-weight: bold;}
      ul li.comments {list-style: none;text-align: right;font-weight: bold;}
      ul li.author span, ul li.date span, ul li.comments span {display: block;font-weight: normal;margin-bottom: 10px;line-height: 1em;}

      in line 4 you find: margin-left. This is set on 25 pixels by default. This causes the sidemenu to shift to the right every single sublevel. Don't know the exact difference between x-offset, left-margin or any other terms to define this, but I hope everybody who reads this understands.

      I changed the 25 to 0 so I can use full width of the menu. This does it make harder to tell in what level/sublevel you are currently though. I try to overcome this by making the current active mainlevel/sublevel bold with a larger font (see attachments above).

      This can be found in templates/rt panacea/css/template.css:

      /* Side Menus */
      .module-content ul.menu {margin-left: 0;}
      .module-content ul.menu li {list-style: none;margin-bottom: 5px;}
      .module-content ul.menu a, .module-content ul.menu .separator, .module-content ul.menu .item {padding: 0 0 0 10px;background-position: 0 5px;background-repeat: no-repeat;line-height: 130%;font-size: 9px;}
      .module-content ul.menu li.active > a, .module-content ul.menu li.active > .separator, .module-content ul.menu li.active > .item {font-weight: bold;font-size: 14px}
      .module-content ul.menu ul {padding-top: 0px;padding-bottom: 0px;}
      .module-content ul.menu ul ul {padding-bottom: 0;}
      .module-content ul.menu .subtext em {line-height: 10px;padding-left: 10px;}
      .module-content ul.menu em {display: block;font-size: 80%;font-style: normal;font-weight: normal;}
      .module-content ul.menu .image img {float: left;margin-left: -4px;}
      .module-content ul.menu .item.image {background: none;padding-left: 8px;}

      where it says: active > .item {font-weight: bold;font-size: 14px}
      so in this case the font in the rt-sidebar-a menu is 9 px and the active font is 14 px.

      hope this helps.
    #745620

Time to create page: 0.062 seconds