change color of one menu button only?

[SafeInSanity]

Is it possible to make a certain button in your top navigation menu a different color than all of the other buttons so that it will stand out more?
Thanks

[elli]

Yes, you need to target the name of the menu item within the menu loop. Like this:

<ul>
{foreach $[navigation.menu]}
{if $[navigation.menu.name] == "Link"}
<li>
<a class="unique{if $[navigation.menu.active]} state-active{/if}" href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{else}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/if}
{/foreach}
</ul>

Note the unique class on the <a>, specifically for a menu item named "Link". The class name can be whatever you like, but the comparison check needs to match the name of the menu item in your Forum Settings. You can then use CSS to add unique styles to this list item:

#navigation-menu > ul li a.unique { background-color: white; color: red; }

[Lynx]

elli,

Just curious - wouldn't the closing quote be after unique instead of after the {/if} in Line 5? I'm not real good with the template stuff, hence why I ask.

[elli]

Lynx In this case, state-active is another class, and we only want it to be applied if that condition is met (the menu item is the current page). So, we want the closing quotation mark to complete the attribute after the closing {/if}.

When the condition is met, this is the final HTML:

<a class="unique state-active">...</a>
And when it's not:

<a class="unique">...</a>

Now that I think about it, this could probably be simplified since it's only a class being added:

<ul>
{foreach $[navigation.menu]}
<li>
<a class="{if $[navigation.menu.name] == 'Link'}unique{/if}{if $[navigation.menu.active]} state-active{/if}" href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>

Note the space before state-active in the class attribute. If there is no space, this will render as a single class name that doesn't exist: "uniquestate-active".

EDIT: I forgot to mention that the CSS for this should be placed after the line #navigation-menu > ul li a.state-active, otherwise the styles for state-active will overwrite these styles (unless you want that to happen).

[SafeInSanity]

I can't believe that we would have to hack the code to perform an action that should be available to us in the theme editor. I mean this must be a fairly popular request. I don't even understand all that mumbo-jumbo code!

[elli]

This is why ProBoards gives us access to edit the HTML directly, so that we can make customizations. They can't reasonably be expected to cover everything with the Visual Editor. This wouldn't be possible with the Visual Editor regardless, because all menu links have the same HTML structure. That's why we need to add a unique class.

Here are more detailed instructions.

1. Go to Admin > Themes > Layout Templates > Forum Wrapper
2. Find these lines:
   
   

   {foreach $[navigation.menu]}
   <li>
     <a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
     ...

   
   
3. Add the following, highlighted in red, to the <a /> element. Delete the text that has been crossed out:
   
   
   {foreach $[navigation.menu]}
   <li>
   <a class="{if $[navigation.menu.name] == 'Link'}unique{/if}{if $[navigation.menu.active]} state-active{/if}" {if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
   ...
   
   
4. Make sure that Link matches the name of the menu item you're trying to customize
5. Click "Save Theme" or "Save Changes" to save your changes
6. Now go to Admin > Themes > Advanced Styles & CSS > "Style Sheet"
7. Click inside the code area, and press ctrl (OSX: cmd) + F on your keyboard to search for the following:
   
   #navigation-menu > ul li a.state-active
   
8. Place your cursor after the closing curly brace (}) on this line and press enter on your keyboard to create a new line
9. Add the following:
   
   #navigation-menu > ul li a.unique { background-color: white; color: red; }
   
10. You can replace these color values with the colors you prefer
11. Click "Save Theme" or "Save Changes" to save your changes

Let me know if you're still having trouble with this.

[SafeInSanity]

elli Thank you!