menu manager--different color links?

RyanC · Post by **RyanC** » Fri Nov 09, 2012 9:53 pm

Hi, I would like to know if there is a way I can create a body id or div on a page, and have its link be a different color from all the rest. This style sheet I have is good but I want the first two links in one of the drop down menus to be a different color so it pops out visually. I tried giving a body id to one of my templates but I wasn't successful. Appreciate any help.

Code: Select all

#menu_vert {
	margin: 0;
	padding: 0;
	color: white;
}

.clearb {
/* needed for some browsers */
	clear: both;
}

#menuwrapper {
 
/* IE6 Hack */
	height: 1%;
	width: auto;
	margin: 0;
	padding: 0;
        z-Index:+1;
}



#primary-nav li li {
	float: left;
	clear: both;
	width: 220px;
	margin-left: 0px;
	margin-top: -1px;
	position: relative;
}


#primary-nav li li a.menuparent span {
	/*sub current font color*/
	/*color: black;*/
	display: block;
	
}
 

ul#primary-nav li a {
	font-size: 10px;
	font-weight: normal;
        padding: 0;
        padding-right: 15px;
	display: block;
	text-decoration: none;

}

ul#primary-nav li a:hover {
      background-color: gray;
      margin: 0;
      color: white;
      display: block;
        
      padding-right: 15px;
}


ul#primary-nav li ul {
	/*dropdown color*/

	background: #ed8d1c;
	margin: 0px;
	padding: 0px;
     
      padding-right: 15px;
     
	position: absolute;
	width: auto;
	height: auto;
	display: none;
	position: absolute;
	z-index: 999;
	/*opacity: 0.95;*/
	
 
-moz-box-shadow: 6px 6px 5px #888;
-webkit-box-shadow: 6px 6px 6px #888;
box-shadow: 6px 6px 5px #888;
 

}

 
 
ul#primary-nav ul ul {
	
	margin-top: 0px; 
	margin-left: 0px;
	left: 100%;
	top: 0px;
background: black;

background: #e37024;
background: #c25708;


}

 
   
 
/*hover state*/

/*fix*/

ul#primary-nav li ul a {
	text-align: left;
	margin: 0px;
	position: relative;
	padding-left: 6px;
	padding-top:3px;
	padding-bottom: 3px;
	font-weight: normal;
	 border-top: 0 none;
	border-right: 0 none;
	border-left: 0 none; 
 border-top: 1px solid #c25708;
 
 }




/*hover state 2nd level*/
ul#primary-nav li ul ul a {
border-top: 1px solid #ed8d1c;

}

/*test for active link color change*/

/*
 ul#primary-nav li ul a:hover, ul#primary-nav li ul a:active {
	color: green;
}
*/


 
#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,
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
{
	display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#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 ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
	display: block;
}

Post by **velden** » Sat Nov 10, 2012 8:40 pm

It's not clear to me what you want to accomplish exactly;

- always the first two items of every submenu must have a different color?
- OR do you want to be able to specify it by page?

Both seem to be possible but of course need a different approach.

RyanC · Post by **RyanC** » Mon Nov 12, 2012 4:18 pm

Hi velden,

I think would like to specify it by page. As an example, at this link

http://aifawards.com/

Under the second menu item on the left "Awards Catalog" ...I want to make the first two links under that menu (Listed Alphabetically, Listed By Page Number) pop-out visually so that you know they are separate from the other links within that sub-menu. Maybe make the white text a different color, or just change the background color.

Thanks for taking a look.

Jean le Chauve · Post by **Jean le Chauve** » Wed Nov 14, 2012 2:37 pm

You add {$node->alias} next your class declaration :
Eg :<li class="currentpage {$node->alias}"><a...
So you can stylise page per page in your css.

RyanC · Post by **RyanC** » Wed Nov 14, 2012 6:16 pm

Thanks for the reply Jean,

Unfortunately I don't know php or smarty tags yet... so I'm not sure where to put that tag or what it does. Could you elaborate?

Thanks

Post by **velden** » Thu Nov 15, 2012 12:49 pm

Jean's reply is a possibility, but it might be too much because it means that you have to create a style declaration for every (future?) page alias that you want to give a color.

I'll show an example I created myself recently below.

First change your menu template: layout -> menu manager

Example:

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}{if $node->extra1} {$node->extra1}{/if}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent{if $node->extra1} {$node->extra1}{/if}"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="currentpage{if $node->extra1} {$node->extra1}{/if}"><h3><span>{$node->menutext}</span></h3>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader{if $node->extra1} {$node->extra1}{/if}"><span>{$node->menutext}</span>

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />

{else}
<li{if $node->extra1} class="{$node->extra1}"{/if}><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

It's all about the

Code: Select all

{if $node->extra1} {$node->extra1}{/if}

and

Code: Select all

{if $node->extra1} class="{$node->extra1}"{/if}

The $node->extra1 'variable' contains - if set - the value of the 'Extra Page Attribute 1' attribute which is located on the 'Options' tab of every page (you can move it to the main tab via Site Admin -> Global Settings -> tab: Content Editing Settings -> Basic properties = Multiselect field!)

Well, in my stylesheet I've defined three classes: 'purple', 'red' and 'blue'.

Example:

Code: Select all

.purple a {color : #ff00ff;}
.blue a {color : #0000ff;}
.red a {color : #ff0000;}

When a user creates/edits a page, and types one of those styles in the 'Extra Page Attribute 1' field, the links to that page become purple, red or blue (at least in the menu).

There might be better ways to accomplish this (maybe custom content) but this works fine for me.

RyanC · Post by **RyanC** » Thu Nov 15, 2012 5:11 pm

Thanks for that velden, looks pretty intense. As soon as I get a chance I'll give it a try.

Post by **velden** » Thu Nov 15, 2012 5:21 pm

Ryan, it might look intense but actually it's not.

The menu-code is based on one of the standard menu templates with some minor additions.

CSS must be done anyway.

Extra page attributes are present already.

Shouldn't take more than half an hour to implement this I guess.

RyanC · Post by **RyanC** » Fri Nov 16, 2012 5:10 pm

Hi Velden, tried your example but I'm probably missing something. I replaced my menu manger template with what you provided, added your classes to my style sheet, and in the page that I want to appear a different color I put the ".purple a {color : #ff00ff;}" in the Extra Page Attribute 1: field of the particular page, no change though.

Do I need to add some more coding somewhere else?

Post by **velden** » Fri Nov 16, 2012 5:58 pm

Hou should type One of the class names in the extra page attribute. So: 'purple' For example without quotes.

Can you post a link if the above won't work?

RyanC · Post by **RyanC** » Fri Nov 16, 2012 7:38 pm

typed it in there, not seeing the change though.

http://aifawards.com/

trying to change the first two items under the "awards catalog" menu item, "listed alphabetically" "listed by page number"

Post by **velden** » Fri Nov 16, 2012 8:08 pm

In the source code the classes don't show.
So, there are a few possibilities I guess:

1. you're using another menu template than the one you've edited
2. the menu tag in your PAGE template is called with parameter loadprops=0 {menu loadprops=0} which explicitly tells menu manager NOT to load extra page attributes
3. there's a error in your menu template
4. ...?

Could you post your template?

Furthermore, you should also change your CSS because else in your case the colors won't show because they will be overruled by other rules:

Code: Select all

.purple a {
    color: #FF00FF !important;
}
.blue a {
    color: #0000FF !important;
}
.red a {
    color: #FF0000 !important;
}

RyanC · Post by **RyanC** » Fri Nov 16, 2012 9:41 pm

Yeah something is off, when I went to layout/menu manager this is all that was there originally:

Code: Select all

{foreach from=$nodelist item=node}
<a href="{$node->url}">{$node->menutext}</a> | 
{/foreach}

And there are several menu templates but I don't remember how I put this together. I pasted your code into each one of the templates though and nothing happened.

I wonder if it could be my style sheet

Code: Select all

/* Last Updated 11-16-12--9:51 am */


/*==LINK COLORS==*/

.purple a {
    color: #FF00FF !important;
}
.blue a {
    color: #0000FF !important;
}
.red a {
    color: #FF0000 !important;
}

/*==LINK COLORS==*/



#searchNavBar {
	 color:white;
}

#searchNavBar a:link, #searchNavBar a:visited {
	color: white;
}

#searchNavBar a:hover, #searchNavBar a:active {
	color: white;
}

#searchNavBar li {
	color:white;
}


#searchNavBar ul {
	color:white;
}


#searchNavBar ul li a {
	color:white;
}

#menu_vert {
	margin: 0;
	padding: 0;
	color: white;
}

.clearb {
/* needed for some browsers */
	clear: both;
}

#menuwrapper {
 
/* IE6 Hack */
	height: 1%;
	width: auto;
	margin: 0;
	padding: 0;
        z-Index:+1;
}



#primary-nav li li {
	float: left;
	clear: both;
	width: 220px;
	margin-left: 0px;
	margin-top: -1px;
	position: relative;
}


#primary-nav li li a.menuparent span {
	/*sub current font color*/
	/*color: black;*/
	display: block;
	
}
 

ul#primary-nav li a {
	font-size: 10px;
	font-weight: normal;
        padding: 0;
        padding-right: 15px;
	display: block;
	text-decoration: none;

}

ul#primary-nav li a:hover {
      background-color: gray;
      margin: 0;
      color: white;
      display: block;
        
      padding-right: 15px;
}


ul#primary-nav li ul {
	/*dropdown color*/

	background: #ed8d1c;
	margin: 0px;
	padding: 0px;
     
      padding-right: 15px;
     
	position: absolute;
	width: auto;
	height: auto;
	display: none;
	position: absolute;
	z-index: 999;
	/*opacity: 0.95;*/
	
 
-moz-box-shadow: 6px 6px 5px #888;
-webkit-box-shadow: 6px 6px 6px #888;
box-shadow: 6px 6px 5px #888;
 

}

 
 
ul#primary-nav ul ul {
	
	margin-top: 0px; 
	margin-left: 0px;
	left: 100%;
	top: 0px;
background: black;

background: #e37024;
background: #c25708;


}

 
   
 
/*hover state*/

/*fix*/

ul#primary-nav li ul a {
	text-align: left;
	margin: 0px;
	position: relative;
	padding-left: 6px;
	padding-top:3px;
	padding-bottom: 3px;
	font-weight: normal;
	 border-top: 0 none;
	border-right: 0 none;
	border-left: 0 none; 
 border-top: 1px solid #c25708;
 
 }




/*hover state 2nd level*/
ul#primary-nav li ul ul a {
border-top: 1px solid #ed8d1c;

}

/*test for active link color change*/

/*
 ul#primary-nav li ul a:hover, ul#primary-nav li ul a:active {
	color: green;
}
*/


 
#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,
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul,
{
	display: none;
}
/* for fourth level add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
*/
#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 ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
	display: block;
}

Post by **velden** » Sat Nov 17, 2012 8:04 am

It's definitely not (yet) in your stylesheet(s).

The menu template you showed is also NOT the menu template used for your main menu.

You should now which menu template is used by your page template(s). Either by the 'template' parameter in the {menu} tag or if no 'template' is explicitly provided the default menu template is used.

As far as I know you cannot change the standard templates (they are saved as files). However, you can import them (into database), give them a unique name and change those imported templates.

Of course, you should then call that altered menu template from the template parameter within the {menu} tag, or make it the default menu template.

Just out of curiosity: did you create the website or do you just have to modify it?

RyanC · Post by **RyanC** » Mon Nov 19, 2012 4:23 pm

thanks velden, I created the site traditionally and then built the CMS around it. But this menu was long enough ago that I can't remember exactly how I did it, I'll have to revisit some of my old posts as I got a lot of help on this site.

My main site template has this:

Code: Select all

{menu template="cssmenu.tpl" number_of_levels='4'}

It could be this template:

Code: Select all

{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

{* note: anything inside these are smarty comments, they will not show up in the page source *}

  <head>
    <title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

 {metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

 {cms_stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}

 {cms_selflink dir="start" rellink=1}
 {cms_selflink dir="prev" rellink=1}
 {cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}

{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
 {literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
    <!--[if lte IE 6]>
    <style type="text/css">
    #pagewrapper {width:expression(P7_MinMaxW(720,950));}
    #container {height: 1%;}
    </style>
    <![endif]-->
    {/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}

    <!--[if lte IE 6]>
    <__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
    <![endif]--> 
{* The above JavaScript is required for CSSMenu to work in IE *}

  </head>
  </__body>
    <div id="pagewrapper">

{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
      <ul class="accessibility">
        <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>
{* end accessibility skip links *}

      <hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}

{* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "Layout: Left sidebar + 1 column" *}
      <div id="header">

{* this holds the name of the site on the right side *}
        <h2 class="headright">{sitename}</h2>

{* this holds a link back to home page and the header left image/logo, text is hidden using CSS *}
        <h1>{cms_selflink dir="start" text="$sitename"}</h1>        
        <hr class="accessibility" />
      </div>
{* End Header *}

{* Start Search, the input "Submit" is using an image, CSS: input.search-button *}
      <div id="search">
      {search}
      </div>
{* End Search *}

{* Start Breadcrumbs *}
      <div class="crbk">
{* holds the right image, we need 2 divs to be able to make this site fluid, if it was fixed width we could use one div, one image  *}

        <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='&raquo;'}
          <hr class="accessibility" />
        </div>
      </div>
{* End Breadcrumbs *}

{* Start Content (Navigation and Content columns) *}
      <div id="content">

{* Start Sidebar, 2 divs one for top image one for bottom image *}
        <div id="sidebar">
          <div id="sidebara">

{* Start Navigation, stylesheet  "Navigation: ShadowMenu - Vertical" *}
            <h2 class="accessibility">Navigation</h2>
            {menu loadprops=0 template='cssmenu_ulshadow.tpl'}
            <hr class="accessibility" />

{* Start News, stylesheet  "Module: News" *}
            <div id="news">
              <h2>News</h2>
              {news number='3' detailpage='news'}
            </div>
{* End News *}

          </div>
        </div>
{* End Sidebar *}

{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
        <div class="back1">
          <div class="back2">
            <div class="back3">
              <div id="main">
                <div style="float: right;">{print showbutton=true script=true}</div>
                <h2>{title}</h2>
                {content}
                <br />{* to insure space below content *}

{* Start relational links *}
{* note this is the right side, when you float: divs you need to have float: right; divs first *}
            <div class="right49">
              <p>{anchor anchor='main' text='^ Top'}</p>
            </div>
            <div class="left49">
              <p> {cms_selflink dir="previous" label="Previous page: "}
{* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}

              <br />
              {cms_selflink dir="next"}
              </p>
            </div>
{* End relational links *}

                <hr class="accessibility" />
                <div class="clear"></div>
              </div>
            </div>
          </div>
        </div>
{* End Content Area *}

      </div>
{* End Content *}

{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
      <div class="footback">
        <div id="footer">
{* stylesheet  "Navigation: FatFootMenu" *}
          <div id="fooleft">
          {menu loadprops=0}
          </div>
          <div id="footrt">
          {global_content name='footer'}
          </div>
          <div class="clear"></div>
        </div>
      </div>
{* End Footer *}

    </div>
{* end pagewrapper *}

  <__body>
</__html>

CMS Made Simple Forums

menu manager--different color links?

menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?

Re: menu manager--different color links?