smf 2.1 deki iconları smf 2.0 uygulama

bildiğiniz gibi smf 2.1 de iconlar css sprite şeklinde geliyor bunu smf 2.0 kısaca uygulama mantığını anlatmaya çalışacam
öncelikle ekteki resimi temamızın images klasörüne atalım yani bu resimi
[attach name=generic_icons.png type=image/png]1118[/attach]

sonra temamızın index.css dosyasında en alta şu kısımı ekleyelim

Kod Seç Genişlet

/* Some lovely generic icons.
------------------------------------------------- */
.generic_icons {
width: 16px;
height: 16px;
display: inline-block;
background: url(../images/generic_icons.png) no-repeat -5px -5px;
vertical-align: middle;
}
/* Small fix for topics */
.quickbuttons span.generic_icons {
margin: -3px 3px 0 1px;
}
.quickbuttons span.generic_icons.quote,
.quickbuttons span.generic_icons.quote_selected {
margin: -8px 3px 0 0;
}

.generic_icons.gender_None {
background: none;
}
/* This is a small fix for dropmenu icons */
.dropmenu .generic_icons, #profile_menu .generic_icons, .dropmenu img {
margin: -3px 8px 0 0;
vertical-align: middle;
}

/* Top row */
.generic_icons.help {
background-position: -5px -5px;
}
.generic_icons.search, .generic_icons.engines {
background-position: -31px -5px;
}
.generic_icons.quick_edit_button, .generic_icons.modify_button {
background-position: -57px -5px;
}
.generic_icons.check {
background-position: -83px -5px;
}
.generic_icons.invalid {
background-position: -109px -5px;
}
.generic_icons.gender_Female {
background-position: -135px -5px;
}
.generic_icons.watch {
background-position: -239px -5px;
}
/* 2nd row */
.generic_icons.move, .generic_icons.next_page {
background-position: -5px -31px;
}
.generic_icons.general, .generic_icons.boards, .generic_icons.topics_views {
background-position: -31px -31px;
}
.generic_icons.gender_Male {
background-position: -57px -31px;
}
.generic_icons.features {
background-position: -83px -31px;
}
.generic_icons.posters {
background-position: -109px -31px;
}
.generic_icons.replies, .generic_icons.topics_replies {
background-position: -135px -31px;
}
.generic_icons.history, .generic_icons.time_online, .generic_icons.scheduled {
background-position: -161px -31px;
}
.generic_icons.views {
background-position: -187px -31px;
}
.generic_icons.last_post {
background-position: -213px -31px;
}
.generic_icons.starters, .generic_icons.people, .generic_icons.membergroups, .generic_icons.mlist {
background-position: -239px -31px;
}
/* 3rd Street Saints */
.generic_icons.poll {
background-position: -5px -57px;
}
.generic_icons.previous_page {
background-position: -31px -57px;
}
.generic_icons.inbox {
background-position: -57px -57px;
}
.generic_icons.www {
background-position: -83px -57px;
}
.generic_icons.exit, .generic_icons.logout {
background-position: -109px -57px;
}
.generic_icons.switch {
background-position: -135px -57px;
}
.generic_icons.replied, .generic_icons.send {
background-position: -161px -57px;
}
.generic_icons.im_on {
background-position: -187px -57px;
}
.generic_icons.im_off {
background-position: -213px -57px;
}
.generic_icons.split_desel {
background-position: -239px -57px;
}
/* 4th Row */
.generic_icons.split_sel {
background-position: -5px -83px;
}
.generic_icons.mail {
background-position: -31px -83px;
}
.generic_icons.warning_mute {
background-position: -57px -83px;
}
.generic_icons.alerts, .generic_icons.warn_button,
.generic_icons.warning_moderate {
background-position: -83px -83px;
}
.generic_icons.mail_new {
background-position: -109px -83px;
}
.generic_icons.drafts,
.generic_icons.reply_button,
.generic_icons.reply_all_button {
background-position: -135px -83px;
}
.generic_icons.warning_watch {
background-position: -161px -83px;
}
.generic_icons.calendar_export {
background-position: -187px -83px;
}
.generic_icons.calendar {
background-position: -213px -83px;
}
.generic_icons.calendar_modify {
background-position: -239px -83px;
}
/* 5th Row */
.generic_icons.plus {
background-position: -5px -109px;
}
.generic_icons.warning, .generic_icons.moderate {
background-position: -31px -109px;
}
.generic_icons.themes {
background-position: -57px -109px;
}
.generic_icons.support {
background-position: -83px -109px;
}
.generic_icons.liked_users, .generic_icons.liked_messages, .generic_icons.like {
background-position: -109px -109px;
}
.generic_icons.unlike {
background-position: -135px -109px;
}
.generic_icons.current_theme {
background-position: -161px -109px;
}
.generic_icons.stats {
background-position: -187px -109px;
}
.generic_icons.right_arrow {
background-position: -213px -109px;
}
.generic_icons.left_arrow {
background-position: -239px -109px;
}
/* 6th Row */
.generic_icons.smiley {
background-position: -5px -135px;
}
.generic_icons.server {
background-position: -31px -135px;
}
.generic_icons.ban, .generic_icons.ignore {
background-position: -57px -135px;
}
.generic_icons.boards  {
background-position: -83px -135px;
}
.generic_icons.regcenter {
background-position: -109px -135px;
}
.generic_icons.posts {
background-position: -135px -135px;
}
.generic_icons.sort_down {
background-position: -161px -135px;
}
.generic_icons.change_menu2, .generic_icons.sent {
background-position: -187px -135px;
}
.generic_icons.post_moderation_moderate {
background-position: -213px -135px;
}
.generic_icons.sort_up {
background-position: -239px -135px;
}
/* 7th Row */
.generic_icons.post_moderation_deny {
background-position: -5px -161px;
}
.generic_icons.post_moderation_attach {
background-position: -31px -161px;
}
.generic_icons.post_moderation_allow {
background-position: -57px -161px;
}
.generic_icons.personal_message {
background-position: -83px -161px;
}
.generic_icons.permissions, .generic_icons.register {
background-position: -109px -161px;
}
.generic_icons.paid {
background-position: -135px -161px;
}
.generic_icons.packages {
background-position: -161px -161px;
}
.generic_icons.filter {
background-position: -187px -161px;
margin: 0 5px 0 0;
}
.generic_icons.change_menu {
background-position: -213px -161px;
}
.generic_icons.package_ops {
background-position: -239px -161px;
}
/* 8th Row */
.generic_icons.reports {
background-position: -5px -187px;
}
.generic_icons.news {
background-position: -31px -187px;
}
.generic_icons.delete, .generic_icons.hide_popup, .generic_icons.prune, .generic_icons.remove_button {
background-position: -57px -187px;
}
.generic_icons.modifications {
background-position: -83px -187px;
}
.generic_icons.maintain, .generic_icons.admin {
background-position: -109px -187px;
}
.generic_icons.administration, .generic_icons.home {
background-position: -135px -187px;
}
.generic_icons.frenemy {
background-position: -161px -187px;
}
.generic_icons.attachment {
background-position: -187px -187px;
}
.generic_icons.lock,.generic_icons.login, .generic_icons.security {
background-position: -213px -187px;
}
.generic_icons.error, .generic_icons.disable {
background-position: -239px -187px;
}
/* 9th Row */
.generic_icons.languages {
background-position: -5px -213px;
}
.generic_icons.members_request {
background-position: -31px -213px;
}
.generic_icons.members_delete {
background-position: -57px -213px;
}
.generic_icons.members {
background-position: -83px -213px;
}
.generic_icons.members_watched {
background-position: -109px -213px;
}
.generic_icons.sticky {
background-position: -135px -213px;
}
.generic_icons.corefeatures, .generic_icons.settings, .generic_icons.manrules, .generic_icons.manlabels {
background-position: -161px -213px;
}
.generic_icons.calendar {
background-position: -187px -213px;
}
.generic_icons.logs {
background-position: -213px -213px;
}
.generic_icons.valid {
background-position: -239px -213px;
}
/* 10th Row */
.generic_icons.approve, .generic_icons.enable,
.generic_icons.approve_button,
.generic_icons.read_button {
background-position: -5px -239px;
}
.generic_icons.close {
background-position: -31px -239px;
}
.generic_icons.details {
background-position: -57px -239px;
}
.generic_icons.merge {
background-position: -83px -239px;
}
.generic_icons.folder {
background-position: -109px -239px;
}
.generic_icons.restore_button {
background-position: -135px -239px;
}
.generic_icons.split_button {
background-position: -161px -239px;
}
.generic_icons.unapprove_button,
.generic_icons.unread_button {
background-position: -187px -239px;
}
.generic_icons.quote, .generic_icons.quote_selected {
background-position: -213px -239px;
}
.generic_icons.notify_button {
background-position: -239px -239px;
}
/* Styles for (fatal) errors.
------------------------------------------------- */

şimdi html kodlarını bu http://smf.konusal.com/index.php?topic=655.0
 konumuzda daha önce vermiştim artık siteni istedğiniz kısmında o şekilde kullanılabilir ben menüye eklemeyi örnek olarak vereyim
index.template.php de bul

Kod Seç Genişlet

<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>değiştir

Kod Seç Genişlet

<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel"><span class="generic_icons ', $act, '"></span> ', $button['title'], '</span>tabi bu değişklikten osnra ufak bir css ayarı gerekecek index.css de bul

Kod Seç Genişlet

.dropmenu a span
{
display: block;
padding: 0 0 0 5px;
font-size: 0.9em;
}değiştir

Kod Seç Genişlet

.dropmenu a span
{
display: inline-block;
padding: 0 0 0 5px;
font-size: 0.9em;
}