Smf Destek

Menu Stilleri Index


Bölüm 1 - Bold CSS Buttons


Bölüm 2 - CSS Indent Menu


Bölüm 3 - Inverted Shift Down Menu II


Bölüm 4 - Inverted Shift Down Menu


Bölüm 5 - Modern Bricks Menu


Bölüm 6  - Solid Block Menu


Bölüm 7  - Overlapping horizontal tabs


Bölüm 8  - CSS Thick Tabs


Bölüm 9  - Sleek Pointer Menu 2


Bölüm 10 - Inverted Modern Bricks Menu


Bölüm 11 - Glowing Tabs Menu


Bölüm 12 - 3D CSS buttons

---

Her menü stilinde index.template.php'te bulunacak kod:

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
    global $context, $settings, $options, $scripturl, $txt;

    // Are we using right-to-left orientation?
    if ($context['right_to_left'])
    {
        $first = 'last';
        $last = 'first';
    }
    else
    {
        $first = 'first';
        $last = 'last';
    }

    // Show the start of the tab section.
    echo '
            <table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
                <tr>
                    <td class="maintab_' , $first , '">&nbsp;</td>';

    foreach ($context['menu_buttons'] as $act => $button)
        echo ($button['active_button'] || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '                <td valign="top" class="maintab_', $button['active_button'] ? 'active_back' : 'back', '">
                    <a href="', $button['href'], '">', $button['title'], '</a>
                </td>', $button['active_button'] ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

    // The end of tab section.
    echo '
                <td class="maintab_' , $last , '">&nbsp;</td>
            </tr>
        </table>';

}

---

Bölüm 1 - Bold CSS Buttons



Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
    global $context, $settings, $options, $scripturl, $txt;


    foreach ($context['menu_buttons'] as $act => $button)
        echo '
            <a href="', $button['href'], '"class="boldbuttons" style="margin-left: 2px"><span>', $button['title'], '</span></a>';

}
Temanızın style.css dosyasını açın ve en sone ekleyin..

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

a.boldbuttons{
background: transparent url('images/roundedge-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;

}

a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}

a.boldbuttons span{
background: transparent url('images/roundedge-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}

a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}


.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

Ve son olarak temanızın images klasörüne aşağıdaki linkten beğendiğiniz renkleri atın (left-right olarak)
http://www.dynamicdrive.com/style/csslibrary/item/bold_css_buttons/

---

Bölüm 2 -  CSS Indent Menu



Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;


   echo '
   <div class="indentmenu">
      <ul>';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
      </ul>
   </div>
   <br style="clear: left" />';

}
Style.css'de en alta ekle..

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
border-left:0px solid #000000; border-right:0px solid #000000; border-top:1px solid #000000; border-bottom:1px solid #000000; margin:0; padding:0; float: left;
width: 100%; /*width of menu*/
/*dark purple border*/
background: black url('images/indentbg.gif') repeat-x center;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 10px;
text-decoration: none;
border-right: 1px solid #000000; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url('images/indentbg2.gif') repeat-x center;
}

Ve son olarak aşağıdaki linkteki resimleri temanızın images klasörüne atıyorsunuz..
Sizde kendi titlebg'nizi ekteki resimleri örnek alarak editleyin. (boyutu ve tersi-düzü)

http://www.dynamicdrive.com/style/csslibrary/item/css_indent_menu/

---

Bölüm 3 -  Inverted Shift Down Menu II



Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;


   echo '
   <div class="invertedshiftdown2">
           <ul>';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
      </ul>
   </div>
   <br style="clear: left" />';

}
Style.css'de en alta ekle..

.invertedshiftdown2{
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Highlight red color theme*/
background: transparent;
voice-family: ""}"";
voice-family: inherit;
}

.invertedshiftdown2 ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.invertedshiftdown2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown2 a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 5px 10px; /*Padding within each menu item*/
background-color: lightblue; /*Default menu color*/
border-bottom: 8px solid white;
}

.invertedshiftdown2 a:hover{
background-color: #D10000; /*Highlight red color theme*/
padding-top: 10px; /*Set padding-top value to default's padding-top + padding-bottom */
padding-bottom: 0; /*Set padding-bottom value to 0 */
border-bottom-color: #D10000; /*Highlight red color theme*/
color: white;
}

.invertedshiftdown2 .current a{ /** currently selected menu item **/
background-color: #D10000; /*Highlight red color theme*/
padding-top: 10px; /*Set padding-top value to default's padding-top + padding-bottom */
padding-bottom: 0; /*Set padding-bottom value to 0 */
border-bottom-color: #D10000; /*Highlight red color theme*/
color: white;
}

#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}


---

Bölüm 4 -  Inverted Shift Down Menu



Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;


   echo '
   <div class="invertedshiftdown">
           <ul>';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
      </ul>
   </div>
   <br style="clear: both" />';

}
Style.css'de en alta ekle..

.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #D10000; /*Red color theme*/
background: transparent;
voice-family: ""}"";
voice-family: inherit;
}

.invertedshiftdown ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/

/*BELOW 4 LINES add rounded bottom corners to each menu item.
  ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
  REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}

.invertedshiftdown a:hover{
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}

.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #D10000; /*Red color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}

#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 2px;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid #D10000;
background-color: black;
color: white;
}


---

Bölüm 5 -  Modern Bricks Menu



Bulunacak kodu bulun  ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;


   echo '
   <div id="modernbricksmenu">
           <ul>';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
      </ul>
   </div>
   <div id="modernbricksmenuline">&nbsp;</div>';

}
Style.css'de en alta ekle..

.ddoverlap{
border-bottom: 1px solid #bbb8a9;
}

.ddoverlap ul{
padding: 0;
margin: 0;
font: bold 90% default;
list-style-type: none;
}

.ddoverlap li{
display: inline;
margin: 0;
}

.ddoverlap li a{
text-decoration: none;
padding-right: 32px; /*extra right padding to account for curved right edge of tab image*/
color: blue;
background: url('images/righttabdefault.gif') no-repeat 100% 1px; /*give illusion of shifting 1px down vertically*/
border-left: 1px solid #dbdbd5;
position: relative;
display: block;
float: left;
margin-left: -20px; /*shift tabs 20px to the left so they overlap*/
left: 20px; padding-left:7px; padding-top:3px; padding-bottom:3px
}

.ddoverlap li a:visited{
color: blue;
}

.ddoverlap li a:hover{
text-decoration: underline;
}

.ddoverlap li.selected a{ /*selected tab style*/
color: black;
z-index: 100; /*higher z-index so selected tab is topmost*/
top: 1px; /*Shift tab 1px down so the border beneath it is covered*/
background: url('images/righttabselected.gif') no-repeat 100% 0;
}

.ddoverlap li.selected a:hover{
text-decoration: none;
}

---

Bölüm 6  -  Solid Block Menu



Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;


   echo '
   <ul class="solidblockmenu">';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
   </ul>';

}
Style.css'de en alta ekle..

.ddoverlap{
border-bottom: 1px solid #bbb8a9;
}

.ddoverlap ul{
padding: 0;
margin: 0;
font: bold 90% default;
list-style-type: none;
}

.ddoverlap li{
display: inline;
margin: 0;
}

.ddoverlap li a{
text-decoration: none;
padding-right: 32px; /*extra right padding to account for curved right edge of tab image*/
color: blue;
background: url('images/righttabdefault.gif') no-repeat 100% 1px; /*give illusion of shifting 1px down vertically*/
border-left: 1px solid #dbdbd5;
position: relative;
display: block;
float: left;
margin-left: -20px; /*shift tabs 20px to the left so they overlap*/
left: 20px; padding-left:7px; padding-top:3px; padding-bottom:3px
}

.ddoverlap li a:visited{
color: blue;
}

.ddoverlap li a:hover{
text-decoration: underline;
}

.ddoverlap li.selected a{ /*selected tab style*/
color: black;
z-index: 100; /*higher z-index so selected tab is topmost*/
top: 1px; /*Shift tab 1px down so the border beneath it is covered*/
background: url('images/righttabselected.gif') no-repeat 100% 0;
}

.ddoverlap li.selected a:hover{
text-decoration: none;
}
ve de aşağıdaki linkteki blockactive ve blockdefault resimlerini temanızın images klasörüne atın!
http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/

---

Bölüm 7  -  Overlapping horizontal tabs



Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '
   <div class="ddoverlap">
      <ul>';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
      </ul>
   </div>';

}
Style.css'de en alta ekle..

.ddoverlap{
border-bottom: 1px solid #bbb8a9;
}

.ddoverlap ul{
padding: 0;
margin: 0;
font: bold 90% default;
list-style-type: none;
}

.ddoverlap li{
display: inline;
margin: 0;
}

.ddoverlap li a{
text-decoration: none;
padding-right: 32px; /*extra right padding to account for curved right edge of tab image*/
color: blue;
background: url('images/righttabdefault.gif') no-repeat 100% 1px; /*give illusion of shifting 1px down vertically*/
border-left: 1px solid #dbdbd5;
position: relative;
display: block;
float: left;
margin-left: -20px; /*shift tabs 20px to the left so they overlap*/
left: 20px; padding-left:7px; padding-top:3px; padding-bottom:3px
}

.ddoverlap li a:visited{
color: blue;
}

.ddoverlap li a:hover{
text-decoration: underline;
}

.ddoverlap li.selected a{ /*selected tab style*/
color: black;
z-index: 100; /*higher z-index so selected tab is topmost*/
top: 1px; /*Shift tab 1px down so the border beneath it is covered*/
background: url('images/righttabselected.gif') no-repeat 100% 0;
}

.ddoverlap li.selected a:hover{
text-decoration: none;
}
ve de aşağıdaki linkteki righttabdefault ve righttabselected resimlerini temanızın images klasörüne atın!
http://www.dynamicdrive.com/style/csslibrary/item/overlapping-horizontal-tabs/

---

Bölüm 8  -  CSS Thick Tabs



Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '
   <ul id="thicktabs">';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
   </ul>';

}
Style.css'de en alta ekle..

#thicktabs{
margin: 0;
padding: 0;
float: left;
font: bold 13px Tahoma;
}

#thicktabs li{
display: inline;
}

#thicktabs li a{
float: left;
color: black;
/*padding of tabs*/
text-decoration: none;
background: url('images/pinkbg.gif') no-repeat top right;
border-top: 1px solid #d3bdbe; /*top border style*/
border-bottom: 3px solid #ffa1a3; padding-left:11px; padding-right:11px; padding-top:8px; padding-bottom:8px
}

#thicktabs li a#leftmostitem{ /*Extra CSS for left most menu item*/
border-left: 1px solid #d3bdbe; /*left border style*/
}

#thicktabs li a#rightmostitem{ /*Extra CSS for right most menu item*/
border-right: 1px solid #d3bdbe; /*right border style*/
background-position: top left; /*Position background image to the left instead of default right, to hide indented underline for this link*/
}

#thicktabs li a:visited{
color: black;
}

#thicktabs li a:hover{
color: black;
background-image: url('images/pinkbgover.gif'); /*background image swap on hover*/
}
ve de aşağıdaki linkteki pinkbg ve pinkbgover resimlerini temanızın images klasörüne atın!
http://www.dynamicdrive.com/style/csslibrary/item/thick-padding-tabs/

---

Bölüm 9  -  Sleek Pointer Menu 2




Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '
   <div id="pointermenu2">
      <ul>';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
      </ul>
   </div>';

}
Style.css'de en alta ekle..

#pointermenu2{
margin: 0;
padding: 0;
}

#pointermenu2 ul{
margin-left: 15px; /*menu offset from left edge of window*/
float: left;
padding-left: 8px;
background: #c00000 url('images/leftround2.gif') no-repeat bottom left; /*optional left round corner*/; font-style:normal; font-variant:normal; font-weight:bold; font-size:13px; font-family:Verdana; margin-right:0; margin-top:0; margin-bottom:0
}

* html #pointermenu2 ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/
margin-bottom: 1em;
margin-left: 7px; /*menu offset from left edge of window in IE*/
}

#pointermenu2 ul li{
display: inline;
}


#pointermenu2 ul li a{
float: left;
color: white;
font-weight: bold;
padding: 7px 9px 7px 5px;
text-decoration: none;
}

#pointermenu2 ul li a:visited{
color: white;
}


#pointermenu2 ul li a:hover, #pointermenu2 ul li a#selected{ /*hover and selected link*/
color: lightyellow;
background: url('images/pointer.gif') no-repeat bottom center;
}

#pointermenu2 ul li a#rightcorner{
padding-right: 0;
padding-left: 2px;
background: url('images/rightround2.gif') no-repeat bottom right; /*optional right round corner*/
}
ve de aşağıdaki linkteki pointer, leftround2 ve rightround2 resimlerini temanızın images klasörüne atın.
http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/

---

Bölüm 10 -  Inverted Modern Bricks Menu




Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '
   <div id="modernbricksmenu2">
      <ul>';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
      </ul>
   </div>
   <br style="clear: left" />';

}
Style.css'de en alta ekle..

#modernbricksmenu2{
padding: 0;
width: 100%;
border-top: 5px solid #D25A0B; /*Brown color theme*/
background: transparent;
voice-family: ""}"";
voice-family: inherit;
}

#modernbricksmenu2 ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
}

#modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/
color: white;
}

#modernbricksmenu2 #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}

#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
margin-top: 3px;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: normal 12px Verdana;
height: 22px;
border: 1px solid black;
background-color: lightyellow;
}


---

Bölüm 11 - Glowing Tabs Menu




Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '
   <div id="glowingtabs">
      <ul>';

   foreach ($context['menu_buttons'] as $act => $button)
      echo '
         <li><a href="', $button['href'], '">', $button['title'], '</a></li>';
   echo '
      </ul>
   </div>
   <br style="clear: left" />';

}
Style.css'de en alta ekle..

#glowingtabs{
float:left;
width:100%;
font-size:90%;
line-height:normal;
border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/
}

#glowingtabs ul{
list-style-type: none;
margin:0;
margin-left: 5px; /*Left offset of entire tab menu relative to page*/
padding:0;
}

#glowingtabs li{
display:inline;
margin:0;
padding:0;
}

#glowingtabs a{
float:left;
background:url(images/glowtab-left.gif) no-repeat left top;
margin:0;
margin-right: 5px; /*spacing between each tab*/
padding:0 0 0 9px;
text-decoration:none;
}

#glowingtabs a span{
float:left;
display:block;
background:url(images/glowtab.gif) no-repeat right top;
padding: 4px 12px 2px 3px;
font-weight:bold;
color:#3B3B3B;
}

/* Commented Backslash h.a.c.k hides rule from IE5-Mac */
#glowingtabs a span {float:none;}
/* End IE5-Mac h.a.c.k */

#glowingtabs a:hover span {
color: black;
}

#glowingtabs #current a{ /*Selected Tab style*/
background-position:0 -82px; /*Shift background image up to start of 2nd tab image*/
}

#glowingtabs #current a span{ /*Selected Tab style*/
background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
color: black;
}

#glowingtabs a:hover{ /*onMouseover style*/
background-position:0% -82px; /*Shift background image up to start of 2nd tab image*/
}

#glowingtabs a:hover span{ /*onMouseover style*/
background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/
}


<!--[if IE]>
<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}
</style>
<![endif]-->
Son olarak aşağıdaki linkteki resimleri temanızın images klasörüne atın!
http://www.dynamicdrive.com/style/csslibrary/item/glowing-tabs-menu/

---

Bölüm 12 -  3D CSS buttons



Bulunacak kodu bulun ve değiştirin:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
    global $context, $settings, $options, $scripturl, $txt;

    foreach ($context['menu_buttons'] as $act => $button)
        echo '
            <a href="', $button['href'], '" class="cssbutton">', $button['title'], '</a>';
}
Style.css'de en alta ekle..

.rssbutton{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}

.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: white;
}

.cssbutton{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}

.cssbutton:visited{
color: black;
}

.cssbutton:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}

.cssbutton:active{
color: black;
}



---

Unutmadan söyleyeyim. Resimleri temanızın images klasörüne atıcaksınız.

Linkback: http://destek.smfmod.com/menu-stilleri-temanizin-menu-butonlarindan-sikildiniz-mi-olaya-renk-katalim-t862.0.html

saoL usTa

arıza unutmusum ya ekLedım bıLdırı ıcıN saoL
index.template.php

teşekkürler emeklerine sağlık +

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
    global $context, $settings, $options, $scripturl, $txt;

    // Are we using right-to-left orientation?
    if ($context['right_to_left'])
    {
        $first = 'last';
        $last = 'first';
    }
    else
    {
        $first = 'first';
        $last = 'last';
    }

    // Show the start of the tab section.
    echo '
            <table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
                <tr>
                    <td class="maintab_' , $first , '">&nbsp;</td>';

    foreach ($context['menu_buttons'] as $act => $button)
        echo ($button['active_button'] || $context['browser']['is_ie4']) ? '<td class="maintab_active_' . $first . '">&nbsp;</td>' : '' , '                <td valign="top" class="maintab_', $button['active_button'] ? 'active_back' : 'back', '">
                    <a href="', $button['href'], '">', $button['title'], '</a>
                </td>', $button['active_button'] ? '<td class="maintab_active_' . $last . '">&nbsp;</td>' : '';

    // The end of tab section.
    echo '
                <td class="maintab_' , $last , '">&nbsp;</td>
            </tr>
        </table>';

}
 
 
USTAD bu kodlar bende yok bende anlamadım ama index.yemaplete  ekde veriyorum baramsıınız

paylaşım güzel ama kodların devamını ben bulamıyorum sonra bakarım ben bunlara

ya cahiligime verde verdigin linkte butonları nasıl indirecegiz ben bir turlu anlamadım da yapamadım da menulari indiremedim daha dogrusu

ya cahiligime verde verdigin linkte butonları nasıl indirecegiz ben bir turlu anlamadım da yapamadım da menulari indiremedim daha dogrusu

sag tıkla resmi kaydet de

Üstad ben kodlari ve resimleri sorunsuz ekledim ama Menü simdi görünmüyor kayboldu Resimleri de attim :S

bazılarında resimlerle atılan resimlerin adları aynı degil sanırım hangisini uyguladınız