CMS Made Simple Forums

Try a space betweev the li and the class... I've seen this work before...

#primary-nav li. menuactiveh

Hi Mark,

Thanks for the tip, thankfully made some progress as a result!

I messed around with the code, placing spaces in different areas etc to see if it would resolve my issue. If you look at the site (http://www.naomhmearnog.ie/index.php) in either firefox or IE, it looks alot better.

I placed a space into the following section of my code:

#primary-nav li. menuparent.menuactive,
#primary-nav li. menuparenth.menuactiveh {
  background-color: #F6B30A; /* changed the active colour from C7C7C7 to F6B30A*/
  background-image: url(uploads/images/sub_menu.gif); /* Main Active Sub Menu Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}

However unfortunately despite my best efforts I still have two outstanding issues

1. When you select a sub menu option (i.e. Teams Section), the link bkg image doesn't display the active bkg image (amber arrow one - sub_menu.gif) but instead displays the normal default bkg image (black arrow one - sub_menu2.gif)? It is not picking

2. When you hover on a sub menu option (i.e. Teams Section), the link hover bkg image doesn't display the sub menu hover bkg image (sub_menu1.gif) but instead displays the normal main menu hover bkg image (hover_bkg.gif)?

You have been a great help so far Mark, I feel I'm really close to fixing this issue completely. Can you think of any other tricks I could try?  How exact does this space trick work? It seems IE skips any section that has a space in it?

Any suggestions would be great.

Tks
Aidan

There is no class #primary-nav li. menuparenth.menuactiveh you will have to change the menu template to make a new class for it...

And I would suggest you make the menu a set width, when the page gets small enough the arrow disappears then you will have to adjust the left margin of main to reflect the size add about 10px to help it clear the menu...

try it... http://multiintech.com/noam/ only click on the team link and home or you will go to your site....

Hi Mark,

Thanks again for the feeback.

So I think I understand but just to be clear are you suggesting that the stylesheet itself is fine code wise and that I need to edit the menu template itself so that it includes a class for menuparenth.menuactiveh?

If so I am using one of the standard templates - "CSSMenu left + 1 column" template. Inside of this template it has the following code for the navigation:


     
        Navigation
        {menu template='cssmenu.tpl'}
     
     
     

From the link you provided I see in your source code you have the following class around the sub menu

4: Teams


4.1: Sen Football




My code has:

4: Teams


4.1: Sen Football




So I am just a little confused on how to edit the template to add it to have the new "menuactive menuparent" class. Do I need to edit the "CSSMenu left + 1 column" template or the "cssmenu.tpl" or another template within the system? Similarly do I need classes for "menuparenth.menuactiveh" and "menuparent.menuactive"?

Sorry for dragging this one out, new to the system!

Tks
Aidan

Go to Layout » Menu Manager and click the File Templates tab and click the copy icon, on the right, name it, submit, then open it and you will see a line like the one below and edit it to have another class for menuactive menuparent like menuactiveparent then in your template call that template {menu template='yourmenutemplate'} then in the CSS create a style for the new class...

{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}

Lets say you call it menuactiveparent then in your CSS it would be...

#primary-nav li .menuactiveparent,
#primary-nav li .menuactiveparenth {
  background-color: #F6B30A; /* changed the active colour from C7C7C7 to F6B30A*/
  background-image: url(http://www.naomhmearnog.ie/uploads/images/sub_menu.gif); /* Main Active Sub Menu Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}

And you need to add another call to the display:block call...

#primary-nav li.menuactiveparenth ul,

for IE...

on another note I would name my images with a more descriptive name so I know what they are for.....
did you notice the arrows going away when you shrink the browser down and the menu gets smaller/narrower?

Hi Mark,

I copied the "cssmenu.tpl" file and named and submitted. However when I opened the file, it already had the code you suggested present in it, here is the relevant extract:

-----------------------------------------------------------------------------------------------------
{* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}

{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
type == 'sectionheader'}
{$node->menutext}
{elseif $node->type == 'separator'}

{else}

-----------------------------------------------------------------------------------------------------
So in light of this can you think of anything else we can try?

If you wanted I could email you directly my site login details incase it helps you to see the site setup yourself?

I have seen the arrows disappear when the menu gets smaller. I was hoping to resolve this bkg image issue first before fixing the menu one. I will also rename the image files as you have suggested.

Thanks
Aidan

OK so you see the line that says, <a class="menuactiveparent"
and make the changes in your CSS as per my last post...

Hi Mark,

I'm sure you will be happy to hear I have made a small bit of progress!

Take a look at the site - http://www.naomhmearnog.ie/index.php. If you click or hover on the teams section you will see it is acting like any other link in the navigation. However it appears the navigation is not picking up on the sub menu parts of the stylesheet. Hopefully it maybe a case of changing/adding some code to enable it?

I have attached my code at the bottom for both the stylesheet, template and the .tpl file.

Few points of interest from testing the stylesheet

1. When I take away the space from:

#primary-nav li. menuparent,
#primary-nav li. menuparenth

The look and feel reverts back to the default sub menu image been displayed the whole time (http://www.naomhmearnog.ie/uploads/images/sub_menu2.gif)

2. Adding a space to

#primary-nav li. menuactiveparent,
#primary-nav li. menuactiveparenth {

Makes no difference

3. I added

#primary-nav li.menuactiveparent ul,
#primary-nav li.menuactiveparenth ul

But it doesn't seem to make a difference

Here is the code anyway
------------------------------
Stylesheet
------------------------------

/* ++++++++++++++start of left nav++++++++++++++*/

#primary-nav li,
#primary-nav li.menuparent,
#primary-nav li.menuparenth {
  background-color: #000000; /* Default Bkg colour for the link blocks*/
  min-height:1em; /* Fixes IE7 bug*/
  background-image: url(uploads/images/static_bkg.gif); /* Main Default Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}

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

displayed) */
#primary-nav li.menuactive,
#primary-nav li.menuactiveh {
  background-color: #F6B30A; /* changed the active colour from (C7C7C7) F6B30A to 480FED*/
  background-image: url(uploads/images/active_bkg2.gif); /* Main Default Active Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li. menuparent,
#primary-nav li. menuparenth
{
  background-image: url(uploads/images/sub_menu2.gif); /* Main Default Sub Menu Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}

/* Fix here

#primary-nav li. menuactiveparent,
#primary-nav li. menuactiveparenth {
  background-color: #F6B30A; /* changed the active colour from C7C7C7 to F6B30A*/
  background-image: url(uploads/images/sub_menu.gif); /* Main Active Sub Menu Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}

#primary-nav li.menuactiveparent ul,
#primary-nav li.menuactiveparenth ul {
  background-color: #C7C7C7; /* changed the active colour from C7C7C7 to F6B30A*/
 
  background-position: left;
  background-repeat: no-repeat;
}

#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth{ /*I removed the :hover from the code*/
  background-image: url(uploads/images/sub_menu1.gif); /* Main Default Hover Sub Menu Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}


/* Styling the apperance of all the menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #645B5B; /* changed the hover link colour from E7AB0B to 645B5B*/
  background-image: url(uploads/images/hover_bkg.gif); /* Main Hover Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}

/* ++++++++++++++End of left nav++++++++++++++ */

------------------------------
Template file
------------------------------
   
     
        Navigation
            {menu template='cssmenu.tpl'} /* I tried changing this to cssmenu1.tpl and got an error message on the left nav*/
     
     
     


-------------------------------
cssmenu1.tpl file
-------------------------------
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
<a class="menuparent"

----------------------------------------------------------------------------------------------------------------------------
At this stage I may have to just settle for this compromise look wise as it is taking up alot of mine and more importantly your time. What do you reckon?

Thanks
Aidan

I think your tag is not correct... is it this?... {menu template='cssmenu1'}
From the menu manager Help...
Now you can easily modify the template to your needs for this site. Put in classes, id's and other tags so that the formatting is exactly what you want. Now, you can insert it into your site with {menu template='Test Template'}. Note that the .tpl extension must be included only if a file template is used. I added the only...

This is not reflected in the rendered page source...

-------------------------------
cssmenu1.tpl file
-------------------------------
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
  4: Teams

Hi Mark,

I did notice yesterday that my template "CSSMenu left + 1 column" still had the following reference
{menu template='cssmenu.tpl'}

When I copied down the "cssmenu.tpl" file on Monday, it was saved as 'cssmenu1.tpl' in the database templates tab of the menu manager. I am able to go in and edit this "cssmenu1.tpl" file. However when I tried to change the template code to the following
   
     
        Navigation
            {menu template='cssmenu1.tpl'}
     
     
     

I got an error message in the left nav stating:
string(81) "Smarty error: unable to read resource: "module_file_tpl:MenuManager;cssmenu1.tpl""

When I tried changing it to just

{menu template='cssmenu1'}

The "Sen Football" link disappears however when I click on the team link the source code states

4: Teams


4.1: Sen Football



When I select one of the other links the source code is as follows:

4: Teams


4.1: Sen Football


Can you advise what I need to do here? How come the sen football link has gone missing?

I am a little confused as to what you mean by "Put in classes, id's and other tags so that the formatting is exactly what you want." I have menuparent and menuactiveparent classes and IDs in place already? They aren't been picked up by the browser. Can you give me an example of the additional classes I will need to add?

Tks again for the help and patience shown thus far!

Aidan

OK try this, and you have to be careful about commenting out something, you have /* Fix here  and it has no closing */ so it may void anything from there down... also your calls had li. menu**** the dot which means class needs to be in front of the class named as in li .menu***** if you go here you will see my CSS, note all the images are linked to your site so if you copy it change them back to just (uploads/images/)...
http://www.multiintech.com/noam/styles/menu.css

#primary-nav li .menuactiveparent,    these were li. menu***
#primary-nav li .menuactiveparenth {
  background-color: #F6B30A; /* changed the active colour from C7C7C7 to F6B30A*/
  background-image: url(uploads/images/sub_menu.gif); /* Main Active Sub Menu Bkg Image  */
  background-position: left;
  background-repeat: no-repeat;
}

#primary-nav li .menuactiveparent ul,
#primary-nav li .menuactiveparenth ul {
  background-color: #C7C7C7; /* changed the active colour from C7C7C7 to F6B30A*/ 
  background-position: left;
  background-repeat: no-repeat;
}

#primary-nav li.menuparent:hover,
#primary-nav li.menuparenth{ /*I removed the :hover from the code*/
  background-image: url(uploads/images/sub_menu1.gif); /* Main Default Hover Sub Menu Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}


/* Styling the apperance of all the menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
  background-color: #645B5B; /* changed the hover link colour from E7AB0B to 645B5B*/
  background-image: url(uploads/images/hover_bkg.gif); /* Main Hover Bkg Image */
  background-position: left;
  background-repeat: no-repeat;
}

/* ++++++++++++++End of left nav++++++++++++++ */


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuatictiveparent ul, < add this here
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
  display: block;
}

Hey Mark,

It finally works!! Check it out http://www.naomhmearnog.ie/index.php. I just had to make one final adjustment to the hover class and it works as expected. I'm delighted and cannot state how thankful I am for you spending so much time and effort helping me, you have the patience of a saint!! Unbelieveable support shown and a great help throughout this.

I will look at the left nav width issue now and the other points you made over the next few days.

Is there any tutorial or books you could suggest I could read up on to improve the css and cms made simple skills and knowledge you have shown during our conversations as I hope to continue using CMS for the foreseable future?

Thanks again
Aidan

For CSS and more I've always used...

http://www.w3schools.com/default.asp

OK, will do, only the first few times posting to the site so do I just mark it as solved?

Once again Mark, thanks for the help

This issue has been resolved