Customizing SMF > Theme Site Themes

CLS ButtonBar MultiColor

<< < (6/6)

Runic:
on in each of the color_text.css file located in the css folder

Find:

--- Code: ---#table_menu
{   
    width: 60px; 
  /* border: 1px solid #000; */
  float: left;
  position: fixed;
  margin-left: -88px;
  padding: 4px;
  top: 35px;
  font-size: 1em;
  text-align: center;
}

.drop_table, .drop_table ul
{
    list-style: none;
    line-height: 0.9em;
    padding: 0;
    margin: 0; 
}
.drop_table
{
    padding: 0 1em;
}
.drop_table a
{ 
    display: block;
    color: #000;
    text-decoration: none;
  margin: 0; 
}
.drop_table a span
{ 
    display: block;
    padding: 6px 0 0 5px;
    font-size: 0.9em;
}
/* the background's first level only */
.drop_table a.firstlevel
{ 
   background: url(../images/theme/menu_side_txt.png) no-repeat 100% -122px; height: 35px;
}

.drop_table li a.firstlevel
{   
    margin-right: 8px;
}
.drop_table li a.firstlevel span.firstlevel
{ background: url(../images/theme/menu_side_txt.png) no-repeat 0 -122px;   height: 35px; width: 54px;
    display: block;
    position: relative;
    left: -5px;
    padding-left: 5px;
    height: 35px;
}
.drop_table li
{
    float: left;
    padding: 0;
    position: relative;
}
.drop_table li ul
{
    z-index: 90;
    display: none;
    position: absolute;
    width: 19.2em;
    font-weight: normal;
    border-bottom: 1px solid #999;
    background: url(../images/theme/menu_side_txt.png) 0 -202px no-repeat;
    padding: 10px 0 0 0;
  margin: -50px 60px;
}
.drop_table li li
{
    width: 19em;
    margin: 0;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
}
.drop_table li li a span
{
    display: block;
    padding: 8px;
  font-size: 1.1em;
}
.drop_table li ul ul
{
    margin: -1.8em 0 0 13em;
}

/* the active button */
.drop_table li a.active
{
    background: url(../images/theme/menu_side_txt.png) no-repeat 100% 0;  height: 35px;
    color: #fff;
    font-weight: bold;
}
.drop_table li a.active span.firstlevel
{
    background: url(../images/theme/menu_side_txt.png) no-repeat 0 0;  height: 35px; width: 54px;
}
/* the hover effects */
.drop_table li a.firstlevel:hover, .drop_table li:hover a.firstlevel
{   
    background: url(../images/theme/menu_side_txt.png) no-repeat 100% -60px; height: 35px;
    color: #000;
    cursor: pointer;
    text-decoration: none;
}
.drop_table li a.firstlevel:hover span.firstlevel, .drop_table li:hover a.firstlevel span.firstlevel
{
    background: url(../images/theme/menu_side_txt.png) no-repeat 0 -60px;
}
/* the hover effects on level2 and 3 */
.drop_table li li a:hover, .drop_table li li:hover>a
{
    background: #d4dbe4;
    color: #000;
    text-decoration: none;
}
.drop_table li:hover ul ul, .drop_table li:hover ul ul ul
{
    top: -999em;
}
.drop_table li li:hover ul
{
    top: auto;
}
.drop_table li:hover ul
{
    display: block;
}
.drop_table li li.additional_items
{
    background-color: #fff;
}

--- End code ---

Replace With:


--- Code: ---#table_menu
{   
   float: left;
   margin-left: -95px;
   margin-top: -175px;
   position: fixed;
   text-align: left;
   width: 100px; 
}
.drop_table
{
   padding-left:3px;
}
.drop_table, .drop_table ul
{
   list-style: none;
   line-height: 0.9em;
   margin: 0; 
}
.drop_table a
{ 
   display: block;
   color: #000;
   text-decoration: none;
   margin: 0; 
}
.drop_table a span
{ 
   display: block;
   padding: 6px 0 0 5px;
   font-size: 0.9em;
}
/* the background's first level only */
.drop_table a.firstlevel
{ 
   background: url(../images/theme/menu_side_txt.png) no-repeat 100% -122px;
   height: 30px;
}

.drop_table li a.firstlevel
{   
   margin-right: 8px;
}
.drop_table li a.firstlevel span.firstlevel
{
   background: url(../images/theme/menu_side_txt.png) no-repeat 0 -122px;   
   width: 80px;
   padding: 5px;
   height: 35px;
}
.drop_table li
{
   float: left;
   padding: 0;
   position: relative;
}
.drop_table li ul
{
   z-index: 90;
   display: none;
   position: absolute;
   font-weight: normal;
background: url(../images/theme/menu_side_txt.png) 0 -202px no-repeat;
   padding: 10px 0 0 0;
  margin: -50px 60px;
}
.drop_table li li
{
   width: 19em;
   margin: 0;
   border-left: 1px solid #999;
   border-right: 1px solid #999;
}
.drop_table li li a span
{
   display: block;
   padding: 8px;
  font-size: 1.1em;
}
.drop_table li ul ul
{
   margin: -1.8em 0 0 13em;
}

/* the active button */
.drop_table li a.active
{
   background: url(../images/theme/menu_side_txt.png) no-repeat 100% 0; 
   height: 35px;
   color: #fff;
   font-weight: bold;
}
.drop_table li a.active span.firstlevel
{
   background: url(../images/theme/menu_side_txt.png) no-repeat 0 0;
}
/* the hover effects */
.drop_table li a.firstlevel:hover, .drop_table li:hover a.firstlevel
{   
   background: url(../images/theme/menu_side_txt.png) no-repeat 100% -60px;
height: 35px;
   color: #000;
   cursor: pointer;
   text-decoration: none;
}
.drop_table li a.firstlevel:hover span.firstlevel, .drop_table li:hover a.firstlevel span.firstlevel
{
   background: url(../images/theme/menu_side_txt.png) no-repeat 0 -60px;
   width: 80px;
   height: 35px;
}

/* the hover effects on level2 and 3 */
.drop_table li li a:hover, .drop_table li li:hover>a
{
   background: #d4dbe4;
   color: #000;
   text-decoration: none;
}
.drop_table li:hover ul ul, .drop_table li:hover ul ul ul
{
   top: -999em;
}
.drop_table li li:hover ul
{
   top: auto;
}
.drop_table li:hover ul
{
   display: block;
}
.drop_table li li.additional_items
{
   background-color: #fff;
}

--- End code ---

This will alter the layout of it slightly but lines them up better and makes it more appealing use the base code and allows longer names :)

br360:
That worked like a charm. Once again, thank you very much. :)

Navigation

[0] Message Index

[*] Previous page