smf 2.1 deki iconları smf 2.0 uygulama

Başlatan snrj, 01 Oca 2017 01:41

« önceki - sonraki »

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

snrj

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
You cannot see attachments on this board.

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

Kod [Seç]
/* 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ç]
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>değiştir
Kod [Seç]
<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ç]
.dropmenu a span
{
display: block;
padding: 0 0 0 5px;
font-size: 0.9em;
}
değiştir
Kod [Seç]
.dropmenu a span
{
display: inline-block;
padding: 0 0 0 5px;
font-size: 0.9em;
}