CLS ButtonBar MultiColor

Started by ClickSafe, February 18, 2012, 08:14:36 AM

Previous topic - Next topic

Deaks

I appologise he has actually added a setting to change this, go to Admin - Current Theme then change  Buttons Lay-out:  to text

In all honesty you may want to play with the CSS a wee bit to improve the look of the links.
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

br360

Quote from: Bryan "Runic" Deakin on November 30, 2012, 07:07:27 PM
I appologise he has actually added a setting to change this, go to Admin - Current Theme then change  Buttons Lay-out:  to text

In all honesty you may want to play with the CSS a wee bit to improve the look of the links.

That worked. I knew there was a way to change to text, but I couldn't find it. Thank you very much.

Deaks

not a problem and please if you update the buttons to look better post the changes as others may like it.
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

br360

Quote from: Bryan "Runic" Deakin on November 30, 2012, 07:31:28 PM
not a problem and please if you update the buttons to look better post the changes as others may like it.

Well I have been messing with the css files, but can't seem to figure out how to make the menu boxes bigger. Some of my menu titles are a little long, and they are either being hidden, or jumping out of the box. Any advice on where in the css file I can make the text fit into the boxes?

Deaks

I will try and look at the themes css and update it for you and post an update :)
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

Deaks

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

Find:
#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;
}


Replace With:


#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;
}


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 :)
~~~~
Former SMF Project Manager
Former SMF Customizer

"For as lang as hunner o us is in life, in nae wey
will we thole the Soothron tae owergang us. In truth it isna for glory, or wealth, or
honours that we fecht, but for freedom alane, that nae honest cheil gies up but wi life
itsel."

br360

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

Advertisement: