Left Navigation Menus can now have Custom CSS Styles

[Top Menu - Red Menu]

Left Top and Left Center menus can now have custom CSS styles. In order to use this feature you need to know what CSS is, and you need to be able to develop your own custom templates.

When developing your own template, adjust your CSS stylesheet and add in the following classes

Top Menu - Red Menu

The Top Menu is constructed from a table. You may use the following classes to override the way the table is rendered.

table level - leftmenutop
table row level - leftmenutop
table cell level - leftmenutop

Hyperlink URL - leftmenutoplink


Left Center Main - Main Menu

The sub menus are the menus that appear at the top of the left area when you go into a main choice such as Books, Bibles etc.

There are div classes and text span classes that you can use.

The submenu title div - leftmenucentersubheading
the submenu text span class - leftmenucentersubheadingtext
The level 1 menu items - leftmenucentersublevel1
The level 2 menu items - leftmenucentersublevel2
The level 3 menu items - leftmenucentersublevel3
The level 4 menu items - leftmenucentersublevel4


As well as the sub menu there is the main menu, which is the way most submenus are invoked. For example the main menu lists items such as books, bibles, music, etc.

The divs for the main menu and the span classes are as follows:

the main menu heading - leftmenucenterheading
the main menu heading text - leftmenucenterheadingtext

The main menu main body div - leftmenucenterbody
The main menu level 0 headings - leftmenucenterbodylevel0
The main menu level 1 headings - leftmenucenterbodylevel1

Simply create class names for all of these elements in your CSS, and you will be able to override the presentation to customize fonts, colors, backgrounds, padding and other visual attributes.


How To Activate These Custom Styles?

Once you have created your custom styles, you will need to activate them. Simply defining these classes in your CSS is not going to be enough. The menus are normally generated with a number of STYLE= attributes. These will override by default anything you setup in your CSS file. You will need to tell your store to switch off the insertion of the default STYLE elements into your menus. This is done by going to the SET ACTIVE THEME option within the STORE SETTINGS area, and choosing the option to turn off the default menu CSS options.  Your menus will then be generated without any STYLE tags in the HTML, allowing the CLASS= tags to take precidence and giving you your customized menu layout.



Example CSS to Embed In Your Style Sheet

Here is some sample CSS that you can embed in your style sheet to start tinkering with your menu:

Code:

/* LEFT TOP MENU (DEFAULT IS RED)  */

.leftmenutop td, th {
cursor:pointer;
background:#CC3333;
color:#FFFFFF;
padding:1px;
margin:0px;
text-align:center;
}

.leftmenutoplink a {
color:#FFFFFF;
font-weight:bold;
text-align:center;
}



/* LEFT CENTER MENU (THIS IS THE MAIN LEFT MENU WITH ACCESS TO ALL THE CONTENT PAGES)  */

.leftmenucentersubheading{
background: #306090;
padding:3px;
font-weight:bold;
color:#FFF;
text-align:center;

}

.leftmenucentersubbody{
padding:4px;
text-align:left;
}

.leftmenucentersublevel1{
font-weight:bold;
font-size:1em;
text-align:left;
margin-bottom:2px;
}

.leftmenucentersublevel2{
font-size:1em;
text-align:left;
margin-bottom:2px;
margin-left:15px;
}

.leftmenucentersublevel3{
font-size:1em;
text-align:left;
margin-bottom:2px;
margin-left:30px;
}

.leftmenucentersublevel4{
font-size:1em;
text-align:left;
margin-bottom:2px;
margin-left:45px;
}




.leftmenucenterheading{
background: #306090;
padding:3px;
font-weight:bold;
color:#FFF;
text-align:center;

}

.leftmenucenterbody{
padding:4px;
text-align:left;
}

.leftmenucenterbodylevel0{
font-size:1em;
color:#222;
text-align:left;
margin-top:2px;
margin-bottom:2px;
font-weight:bold;
}

.leftmenucenterbodylevel1{
font-size:1em;
text-align:left;
margin-bottom:2px;
margin-left:15px;
}

Enjoy,

The deeperShopping Team.

 

What Top "Red" Menu?  Up until now, it was "Red" for a couple years when I got my store. I was just on my store a few hours ago and it was "Red". But now it has changed. 

Since the "Red" Menu was already there, I strongly think it should remain the same and make "it" the Default. Why substitute the previous Default for this imposed "new" Default, thereby, making it more complicated for the user?   

If store owners want something different, then they would have the option of changing it. But store owners who desire to keep it as it was, should be able to.

Blessings to all,

I agree, sister! 

Bring back the "Red"! Better yet, make it yellow!

Aaron
www.MyLocalBookstore.com

Due to a coding bug the red background temporarily disapeared from the default top left navigation menu. That coding bug has been fixed and by default, the top left menu is now back to its original red.

If you want to change the color of the menu, you can update your theme and customize the CSS. We may be able to work on a shorter hack to let you just enter in your own custom style sheet modifications without having to create a custom theme, but that will be something we look into in the next few weeks.

Thank you   

Blessings to all,

In looking at the work required to support Inline CSS - it turned out to be relatively easy.

So there is now an option where you can embed your own

<STYLE type='text/css'>
.myheader {
    font-weight:bold;
}
</STYLE>

blocks in your own store pages. These inline styles can then be referenced in your html to do whatever you want. I've tested it on the demo store, using the inline style to override the default colors and fonts for the default left navigation menu - and it works great. So have fun with this. You no longer need to be able to create a theme to use custom CSS styles for your menus - you can now just add your CSS code inline to your pages. Your embedded or inline CSS will be incorporated onto every page in your website automatically. So you dont have to go back and change your pages.

For those who have developed their own theme, you need to add a

{insert name="deeperInlineStyle"}

Insert tag command into your index.tpl file. All active templates in production were automatically modified this morning to support these new directive.

Have Fun!

Sounds cool... where do I put these commands? 

I'm just not geek enough to grasp this intuitively.

Aaron
www.MyLocalBookstore.com