In this Section
- 5.1: Howto Install Themes
- 5.2: Howto Share a Theme
Current page is 5.3: Menu Manager styling
- 5.4: Image menu
- 5.5: Variations with Menu Manager
- 5.6: Accessibility - Tables
Warning Notice:
If you have a fresh install of CMSMS 1.10.x or greater, not an upgrade, some of these themes will give a smarty error related to {stylesheet}, this plugin has been removed from CMSMS distributions. use {cms_stylesheet} instead.
a) Open the template of the theme;
b) Search for {stylesheet};
c) Replace {stylesheet} with {cms_stylesheet};
d) Save template;
e) Open style sheets and change image calls:
old url(uploads/folder/image.jpg)
new url([[root_url]]/uploads/folder/image.jpg)
Make a Donation
Merchandise
Support CMSMS by purchasing some of our branded products. We have items for home, office and leisure.
view all productsMenu Manager styling part one, basics
Styling menus with css is fun and productive. Menu is one of the most important aspects of your site, it will quide your visitors through your pages on either easy or difficult way
We'll first need a sample html for these tests:
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</div>
This menu will render like this by default
Now that doesnt look nice at all
Lets stylize a bit
We'll create a block like menu with "3D" hover states
some width for the menu
#menutest2 ‹border:1px solid black;
width:10em;
›
ul has padding and margin by default, we dont want em nor do we want list bullet
#menutest2 ul ‹list-style:none;
padding:0;
margin:0;
›
Make a block level to fill all the area and style with some borders
#menutest2 ul li a, #menutest2 ul li a:visited, #menutest2 ul li a:active ‹display:block;
background-color:#aaa;
color:black;
padding:.2em .2em .2em .5em;
margin:.2em;
text-decoration:none;
border-top:2px solid #eee;
border-right:2px solid #eee;
border-bottom:2px solid #555;
border-left:2px solid #555;
›
For hover we just change the borders a bit this will create button like behaviour
#menutest2 ul li a:hover ‹color:white;
border-top:2px solid #eee;
border-right:2px solid #eee;
border-bottom:2px solid #aaa;
border-left:2px solid #aaa;
›
This ends part one
