31-07-2013, 11:36 PM
Đầu tiên bạn vào template/style chọn themes bạn đang sử dụng.
Bấm vào Adstylesheet .
Mục File Name: diền vào: spotlightmenu.css
Bấm vào: Write my own content, chép cái này vào:
<style type="text/css">
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:20px; /* horizontal diameter of spotlight */
height:20px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: #0055A8; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
</style>
SAVE LẠI
Tiếp tục phần 2
Vào header chép cái này vào theo chổ bạn muốn nó hiển thị:
<div class="spotlightmenu">
<ul>
<li><a href="{$mybb->settings['bburl']}/index.php">Index</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php">Member List</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php">Calender</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Help</a></li>
<li><a href="{$mybb->settings['bburl']}/showteam.php">Forum Team</a></li>
</ul>
</div>
SAVE LẠI
NÊU BẠN MUỐN THAY ĐƯỜNG DẪN THÌ THAY ĐỊA CHỈ TẠI:
href="{$mybb->settings['bburl']}/memberlist.php"> THEO Ý CỦA BẠN.
NẾU MUỐN THAY ĐỖI CÁCH HIỂN THỊ TRÒN HAY ELIP THÌ THAY THÔNG SỐ TẠI:
min-width:20px; /* horizontal diameter of spotlight */
height:20px; /* vertical diameter of spotlight */
Mặc định là 50px
Thay màu khi rê chuột là;
background: #0055A8;
Thay màu chử khi áp dụng:
color: white
Chú ý;
Các code nên chép qua notepad rồi copy vào mới không bị lổi.
Chúc các bạn thành công
PCNDL
Bấm vào Adstylesheet .
Mục File Name: diền vào: spotlightmenu.css
Bấm vào: Write my own content, chép cái này vào:
<style type="text/css">
.spotlightmenu{
width: 100%;
overflow:hidden;
}
.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}
.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:20px; /* horizontal diameter of spotlight */
height:20px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.spotlightmenu li:hover a{
color: white;
background: #0055A8; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}
.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}
</style>
SAVE LẠI
Tiếp tục phần 2
Vào header chép cái này vào theo chổ bạn muốn nó hiển thị:
<div class="spotlightmenu">
<ul>
<li><a href="{$mybb->settings['bburl']}/index.php">Index</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php">Member List</a></li>
<li><a href="{$mybb->settings['bburl']}/calendar.php">Calender</a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">Help</a></li>
<li><a href="{$mybb->settings['bburl']}/showteam.php">Forum Team</a></li>
</ul>
</div>
SAVE LẠI
NÊU BẠN MUỐN THAY ĐƯỜNG DẪN THÌ THAY ĐỊA CHỈ TẠI:
href="{$mybb->settings['bburl']}/memberlist.php"> THEO Ý CỦA BẠN.
NẾU MUỐN THAY ĐỖI CÁCH HIỂN THỊ TRÒN HAY ELIP THÌ THAY THÔNG SỐ TẠI:
min-width:20px; /* horizontal diameter of spotlight */
height:20px; /* vertical diameter of spotlight */
Mặc định là 50px
Thay màu khi rê chuột là;
background: #0055A8;
Thay màu chử khi áp dụng:
color: white
Chú ý;
Các code nên chép qua notepad rồi copy vào mới không bị lổi.
Chúc các bạn thành công
PCNDL
