Jesse Cortez

Simple Retail Menus Custom Class Example

If you want to do some custom styling for your menus, here is an example of acustom CSS class that can be applied to a SRM menu. To use this, add it to your WordPress template stylesheet.

You also need to set the class option in your Shortcode to include class=”custom-menu”.

Of course, you can edit and rename these style to suit your application.

/*CUSTOM RETAIL MENU STYLE*/

.custom-menu{width: 100%; margin-bottom: 1em;}
.custom-menu h2{color: #666;}
.custom-menu table, .custom-menu ol, .custom-menu ul,
 .custom-menu dl, .custom-menu>div{
	color: #2a68b5;
	border: 1px solid #727775;
	border-radius: 4px 4px 4px 4px;
	border-spacing: 0;
	background-color: #f4f4f4;
	}
.custom-menu .desc{
	display: block;
	clear: left;
	font-size: 0.825em;
	font-size: 0.825em;
	margin: 0 1em;
	}
.custom-menu .value{
	color: #222;
	width: 50px;
	text-align: right;
	}
.custom-menu .desc, .custom-menu dd{
	color: #777;
	font-size: 0.825em;
	font-style: italic;
	}
.custom-menu .odd{
	background-color: #dff2ff;
	}

/********* Table Layout *********/
.custom-menu table{
	width: 100%;
	}
.custom-menu td{
	padding: 0.5em;
	vertical-align: top;
	color: inherit;
	}

/********* LIST Layout *********/
.custom-menu ol, .custom-menu ul, .custom-menu dl{padding:4px;}
.custom-menu li, .custom-menu dt, .custom-menu dd{
	margin: -3px;
	}
.custom-menu ol li{
	padding: 10px;
	vertical-align: top;
	list-style-position: inside;
	}
.custom-menu ul li{
	padding: 0.5em;
	vertical-align: top;
	list-style-type: none;
	}
.custom-menu li .value{
	margin-top: -3.5em;
	}
.custom-menu dt{
	padding: 0.5em 0.5em 0;
	vertical-align: top;
	}
.custom-menu dt .value{
	padding-left: 1em;
	}
.custom-menu dd{
	padding: 0 1em 0.5em;
	vertical-align: top;
	margin-left: -3px;
	}

/********* DIVs Layout *********/
.custom-menu div{
	overflow: hidden;
	color: inherit;
	}
.custom-menu div div{
	clear: both;
	}
.custom-menu div div div{
	float: left;
	clear: none;
	padding: 0.5em;
	}
.custom-menu .menu-item{
	color: #2a68b5;
	}
.custom-menu .value{
	float: right;
	}
Tags: , , ,