PortedThemes: Content / Theming Basics / Sublinks

on Friday 20 April 2007
by Serenity

in Theming Basics
hits: 2104

Added to theme.php

function theme_head(
) {

    return "
<link rel='
stylesheet' href='"
.THEME_ABS."
nav_menu.css' />\n";

}

create a file called nav_menu.css copy and paste this and place it in the css file:

div.menuBar,

div.menuBar a.menuBu
tton, div.menuButton
, div.menuButton_ove
r,

div.menu,

div.menu a.menuItem 
{

font:
 10pt Tahoma, Verdan
a, Arial, Helvetica,
 sans-serif;

font-style: normal;

font-weight: normal;

color: #000;

}



div.menuBar {



padding:
 3px 0px 3px 0px;

text-align: left;

border-top:
 0px solid #c0c0c0;

border-bottom:
 0px solid #fff;



}



div.emenuBar {



background-color:
 transparent;

border-top:
 0px solid #ffffff;

border-bottom:
 0px solid #000;

text-align: left;



}



div.menuBar a.menuBu
tton, div.menuButton
, div.menuButton_ove
r {



background-color:
 transparent;

border-right:
 1px solid #d8d2bd;

color: #000;

cursor: default;

left: 0px;

margin: 0px;

padding:
 3px 14px 3px 14px;

/*

if using a link icon
 replace line above 
with this one

padding:
 2px 4px 2px 22px;

*/



text-decoration:
 none;



z-index: 100;

}



div.menuBar a.menuBu
tton:
hover, div.menuButto
n:
 hover, div.menuButt
on_over {

background-color:
 #fff;

border-color:
 #ffffff #a5a5a5 #a5
a5a5 #ffffff;

color: #000;

}



div.menuBar a.menuBu
ttonActive, div.menu
ButtonActive , div.m
enuButtonActive :
hover,

div.menuBar a.menuBu
ttonActive: hover {

background-color:
 #fff;

border-color:
 #a5a5a5 #ffffff #ff
ffff #a5a5a5;

color: #000;

left: 1px;

top: 1px;

}



div.menu {

background-color:
 #fff;

border: 1px solid;

border-color:
 #ffffff #a5a5a5 #a5
a5a5 #ffffff;

left: 0px;

padding:
 1px 1px 1px 1px;

position: absolute;

top: 0px;

visibility: hidden;

z-index: 101;

}



div.menu a.menuItem 
{

color: #000;

cursor: default;

display: block;

padding:
 2px 11px 2px 0px;

text-decoration:
 none;

white-space: nowrap;

}



div.menu a.menuItem:
hover, div.menu a.me
nuItemHighlight {

background-color:
 #fff;

color: #000;

text-decoration:
 underline;

}



div.menu a.menuItem 
span.menuItemBuffer 
{

padding:
 0px 2px 0px 2px;

color: #000;

}



div.menu a.menuItem:
hover span.menuItemB
uffer {

padding:
 0px 2px 0px 2px;

color: #000000;

}



div.menu a.menuItem 
span.menuItemText {

padding:
 0px 0px 0px 3px;

}



div.menu a.menuItem 
span.menuItemArrow {

margin-right: -
.75em;

}



div.menu div.menuIte
mSep {

border-top:
 1px solid #a5a5a5;

border-bottom:
 1px solid #ffffff;

margin: 4px 2px;

}



a.menuItem.header {

border-bottom:
 1px solid #b3b3b3;

}

The file will have to be edited to meet the needs of your theme links.

Save the file and place it in your e107_themes/theme folder