Styling Skin: SideMenu

[juliamarie611]

Hi, all.

I'm using the Balboa template which uses a Skin called SideMenu appearing on the left-side of the screen to navigate between sections/topics.

When one of these topics is selected, I would like the text to be underlined. Can anyone help me figure out edit the skin/css to underline text?

Thank you!
Julia

[Nita Beck]

Welcome to the forums!

The component skin editor doesn't offer a way to add underlining to selected menu items, so you have to add a customization to the project's main stylesheet. The easiest way is to add a bit of code by hand.

Right-click the MainStyles.css and select Open with > Internal Text Editor. Scroll to line 251 or so, which is right where the definitions for things in the default medium end and other mediums begin.

Add this bit of code and save the styelsheet. I've taken the liberty of crafting a comment explaining what this bit of code does.

Code: Select all

ul.menu._Skins_SideMenu.mc-component li > a.selected /* Adds underlining to the menu item selected in the side menu */
{
    text-decoration: underline;
}

HTH

[juliamarie611]

Nita,
Thank you for welcoming me to the forums! AND for saving me hours of work trying to find a solution to my question. Adding your code to MainStyles.css worked like a charm! I really can't thank you enough!