Web sayfamız sadece phpBB 3.0.x sürümlerine destek vermektedir. Konu açmadan, ileti yazmadan önce lütfen site kuralları sayfamıza göz atınız.

Subsilver2'de Yanar-Söner(Rollover) Butonlar

Forum kuralları
Bu forumdaki konular uygulanmak için değil, bir tema veya fikrin geliştirme aşamasında diğer geliştirici ve kullanıcılar ile fikir alışverişi içindir.

Subsilver2'de Yanar-Söner(Rollover) Butonlar

İleti Akansu 21 Nis 2009 11:40

Açıklama: Gelişme aşamasında,büyük oranda çalışıyor ama eksikliklerin tamamlanması lazım zaten o yüzden bu bölümde başlık açıldı.

Prosilverdeki yanar-söner(rollover) butonları Subsilver2'ye uyarlamak için:

1-) CSS Kodları

Kod: Tümünü seç
/* prosilver rollover css */
/* Rollover buttons
   Based on: http://wellstyled.com/css-nopreload-rollovers.html
----------------------------------------*/
.buttons {
   float: left;
   width: auto;
   height: auto;
}

/* Rollover state */
.buttons div {
   float: left;
   margin: 0 5px 0 0;
   background-position: 0 100%;
}

/* Rolloff state */
.buttons div a {
   display: block;
   width: 100%;
   height: 100%;
   background-position: 0 0;
   position: relative;
   overflow: hidden;
}

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
/*.buttons div span      { display: none; }*/
/*.buttons div a:hover   { background-image: none; }*/
.buttons div span         { position: absolute; width: 100%; height: 100%; cursor: pointer;}
.buttons div a:hover span   { background-position: 0 100%; }

/* Big button images */
.reply-icon span   { background: transparent none 0 0 no-repeat; }
.post-icon span      { background: transparent none 0 0 no-repeat; }
.locked-icon span   { background: transparent none 0 0 no-repeat; }
.pmreply-icon span   { background: none 0 0 no-repeat; }
.newpm-icon span    { background: none 0 0 no-repeat; }
.forwardpm-icon span    { background: none 0 0 no-repeat; }

/* Set big button dimensions */
.buttons div.reply-icon      { width: {IMG_BUTTON_TOPIC_REPLY_WIDTH}px; height: {IMG_BUTTON_TOPIC_REPLY_HEIGHT}px; }
.buttons div.post-icon      { width: {IMG_BUTTON_TOPIC_NEW_WIDTH}px; height: {IMG_BUTTON_TOPIC_NEW_HEIGHT}px; }
.buttons div.locked-icon   { width: {IMG_BUTTON_TOPIC_LOCKED_WIDTH}px; height: {IMG_BUTTON_TOPIC_LOCKED_HEIGHT}px; }
.buttons div.pmreply-icon   { width: {IMG_BUTTON_PM_REPLY_WIDTH}px; height: {IMG_BUTTON_PM_REPLY_HEIGHT}px; }
.buttons div.newpm-icon      { width: {IMG_BUTTON_PM_NEW_WIDTH}px; height: {IMG_BUTTON_PM_NEW_HEIGHT}px; }
.buttons div.forwardpm-icon   { width: {IMG_BUTTON_PM_FORWARD_WIDTH}px; height: {IMG_BUTTON_PM_FORWARD_HEIGHT}px; }

/* Big button images */
.reply-icon span   { background-image: url("{IMG_BUTTON_TOPIC_REPLY_SRC}"); }
.post-icon span      { background-image: url("{IMG_BUTTON_TOPIC_NEW_SRC}"); }
.locked-icon span   { background-image: url("{IMG_BUTTON_TOPIC_LOCKED_SRC}"); }
.pmreply-icon span   { background-image: url("{IMG_BUTTON_PM_REPLY_SRC}") ;}
.newpm-icon span    { background-image: url("{IMG_BUTTON_PM_NEW_SRC}") ;}
.forwardpm-icon span   { background-image: url("{IMG_BUTTON_PM_FORWARD_SRC}") ;}

/* Poster profile icons
----------------------------------------*/
ul.profile-icons {
   padding-top: 0px;
   list-style: none;
}

/* Rollover state */
ul.profile-icons li {
   float: left;
   margin: 0 6px 3px 0;
   background-position: 0 100%;
}

/* Rolloff state */
ul.profile-icons li a {
   display: block;
   width: 100%;
   height: 100%;
   background-position: 0 0;
}

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
ul.profile-icons li span { display:none; }
ul.profile-icons li a:hover { background: none; }

/* Positioning of moderator icons */
.postbody ul.profile-icons {
   float: right;
   width: auto;
   padding: 0;
}

.postbody ul.profile-icons li {
   margin: 0 3px;
}

/* Profile & navigation icons */
.email-icon, .email-icon a      { background: none top left no-repeat; }
.aim-icon, .aim-icon a         { background: none top left no-repeat; }
.yahoo-icon, .yahoo-icon a      { background: none top left no-repeat; }
.web-icon, .web-icon a         { background: none top left no-repeat; }
.msnm-icon, .msnm-icon a         { background: none top left no-repeat; }
.icq-icon, .icq-icon a         { background: none top left no-repeat; }
.jabber-icon, .jabber-icon a      { background: none top left no-repeat; }
.pm-icon, .pm-icon a            { background: none top left no-repeat; }
.quote-icon, .quote-icon a      { background: none top left no-repeat; }

/* Moderator icons */
.report-icon, .report-icon a      { background: none top left no-repeat; }
.warn-icon, .warn-icon a         { background: none top left no-repeat; }
.edit-icon, .edit-icon a         { background: none top left no-repeat; }
.delete-icon, .delete-icon a      { background: none top left no-repeat; }
.info-icon, .info-icon a         { background: none top left no-repeat; }

/* Set profile icon dimensions */
ul.profile-icons li.email-icon      { width: {IMG_ICON_CONTACT_EMAIL_WIDTH}px; height: {IMG_ICON_CONTACT_EMAIL_HEIGHT}px; }
ul.profile-icons li.aim-icon   { width: {IMG_ICON_CONTACT_AIM_WIDTH}px; height: {IMG_ICON_CONTACT_AIM_HEIGHT}px; }
ul.profile-icons li.yahoo-icon   { width: {IMG_ICON_CONTACT_YAHOO_WIDTH}px; height: {IMG_ICON_CONTACT_YAHOO_HEIGHT}px; }
ul.profile-icons li.web-icon   { width: {IMG_ICON_CONTACT_WWW_WIDTH}px; height: {IMG_ICON_CONTACT_WWW_HEIGHT}px; }
ul.profile-icons li.msnm-icon   { width: {IMG_ICON_CONTACT_MSNM_WIDTH}px; height: {IMG_ICON_CONTACT_MSNM_HEIGHT}px; }
ul.profile-icons li.icq-icon   { width: {IMG_ICON_CONTACT_ICQ_WIDTH}px; height: {IMG_ICON_CONTACT_ICQ_HEIGHT}px; }
ul.profile-icons li.jabber-icon   { width: {IMG_ICON_CONTACT_JABBER_WIDTH}px; height: {IMG_ICON_CONTACT_JABBER_HEIGHT}px; }
ul.profile-icons li.pm-icon      { width: {IMG_ICON_CONTACT_PM_WIDTH}px; height: {IMG_ICON_CONTACT_PM_HEIGHT}px; }
ul.profile-icons li.quote-icon   { width: {IMG_ICON_POST_QUOTE_WIDTH}px; height: {IMG_ICON_POST_QUOTE_HEIGHT}px; }
ul.profile-icons li.report-icon   { width: {IMG_ICON_POST_REPORT_WIDTH}px; height: {IMG_ICON_POST_REPORT_HEIGHT}px; }
ul.profile-icons li.edit-icon   { width: {IMG_ICON_POST_EDIT_WIDTH}px; height: {IMG_ICON_POST_EDIT_HEIGHT}px; }
ul.profile-icons li.delete-icon   { width: {IMG_ICON_POST_DELETE_WIDTH}px; height: {IMG_ICON_POST_DELETE_HEIGHT}px; }
ul.profile-icons li.info-icon   { width: {IMG_ICON_POST_INFO_WIDTH}px; height: {IMG_ICON_POST_INFO_HEIGHT}px; }
ul.profile-icons li.warn-icon   { width: {IMG_ICON_USER_WARN_WIDTH}px; height: {IMG_ICON_USER_WARN_HEIGHT}px; }

/* Fix profile icon default margins */
ul.profile-icons li.edit-icon   { margin: 0 0 0 3px; }
ul.profile-icons li.quote-icon   { margin: 0 0 0 10px; }
ul.profile-icons li.info-icon, ul.profile-icons li.report-icon   { margin: 0 3px 0 0; }

/* Profile & navigation icons */
.email-icon, .email-icon a      { background-image: url("{IMG_ICON_CONTACT_EMAIL_SRC}"); }
.aim-icon, .aim-icon a         { background-image: url("{IMG_ICON_CONTACT_AIM_SRC}"); }
.yahoo-icon, .yahoo-icon a      { background-image: url("{IMG_ICON_CONTACT_YAHOO_SRC}"); }
.web-icon, .web-icon a         { background-image: url("{IMG_ICON_CONTACT_WWW_SRC}"); }
.msnm-icon, .msnm-icon a         { background-image: url("{IMG_ICON_CONTACT_MSNM_SRC}"); }
.icq-icon, .icq-icon a         { background-image: url("{IMG_ICON_CONTACT_ICQ_SRC}"); }
.jabber-icon, .jabber-icon a      { background-image: url("{IMG_ICON_CONTACT_JABBER_SRC}"); }
.pm-icon, .pm-icon a            { background-image: url("{IMG_ICON_CONTACT_PM_SRC}"); }
.quote-icon, .quote-icon a      { background-image: url("{IMG_ICON_POST_QUOTE_SRC}"); }

/* Moderator icons */
.report-icon, .report-icon a      { background-image: url("{IMG_ICON_POST_REPORT_SRC}"); }
.edit-icon, .edit-icon a         { background-image: url("{IMG_ICON_POST_EDIT_SRC}"); }
.delete-icon, .delete-icon a      { background-image: url("{IMG_ICON_POST_DELETE_SRC}"); }
.info-icon, .info-icon a         { background-image: url("{IMG_ICON_POST_INFO_SRC}"); }
.warn-icon, .warn-icon a         { background-image: url("{IMG_ICON_USER_WARN_SRC}"); } /* Need updated warn icon */


Bu kodları buttons.css olarak kaydedin ardından stylesheet.css'yi açıp en sonunna şu kodu ekleyin:

Kod: Tümünü seç
@import url("buttons.css");


viewtopic_body.html dosyasında şu kodları kullanın:

:idea: Bul

Kod: Tümünü seç
<!-- IF not S_IS_BOT -->
         <!-- IF S_DISPLAY_POST_INFO --><a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a>&nbsp;<!-- ENDIF -->
         <!-- IF S_DISPLAY_REPLY_INFO --><a href="{U_POST_REPLY_TOPIC}">{REPLY_IMG}</a><!-- ENDIF -->
      <!-- ENDIF -->


:arrow: Bununla Değiştir

Kod: Tümünü seç
<!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
      <div class="buttons">
        <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED_SHORT}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF --></a></div>
      </div>
   <!-- ENDIF -->


Küçük butonlar yani ÖM, E-Posta, Web adresi, ICQ gibi eklemek için, istediğiniz yere şu kodları eklemelisiniz:

Kod: Tümünü seç
<ul class="profile-icons">
               <!-- IF postrow.U_EDIT --><li class="edit-icon"><a href="{postrow.U_EDIT}" title="{L_EDIT_POST}"><span>{L_EDIT_POST}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_DELETE --><li class="delete-icon"><a href="{postrow.U_DELETE}" title="{L_DELETE_POST}"><span>{L_DELETE_POST}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_REPORT --><li class="report-icon"><a href="{postrow.U_REPORT}" title="{L_REPORT_POST}"><span>{L_REPORT_POST}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_WARN --><li class="warn-icon"><a href="{postrow.U_WARN}" title="{L_WARN_USER}"><span>{L_WARN_USER}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_INFO --><li class="info-icon"><a href="{postrow.U_INFO}" title="{L_INFORMATION}"><span>{L_INFORMATION}</span></a></li><!-- ENDIF -->
               <!-- IF postrow.U_QUOTE --><li class="quote-icon"><a href="{postrow.U_QUOTE}" title="{L_REPLY_WITH_QUOTE}"><span>{L_REPLY_WITH_QUOTE}</span></a></li><!-- ENDIF -->
            </ul>


viewforum_body.html dosyasında ise şu kodları kullanın

:idea: Bul

Kod: Tümünü seç
   <!-- IF S_DISPLAY_POST_INFO and not S_IS_BOT -->
            <td align="{S_CONTENT_FLOW_BEGIN}" valign="middle"><a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a></td>
         <!-- ENDIF -->


:arrow: Bununla Değiştir

Kod: Tümünü seç
<td align="{S_CONTENT_FLOW_BEGIN}" valign="middle">
            <!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
      <div class="buttons">
         <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->"><a href="{U_POST_NEW_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"><span></span><!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF --></a></div>
      </div>
   <!-- ENDIF -->
            </td>


Ayrıca en önemli kısımlardan biri theme/theme.cfg dosyasında yapacağımız şu değişiklik

:idea: Bul

Kod: Tümünü seç
parse_css_file = off


:arrow: Bununla değiştir

Kod: Tümünü seç
parse_css_file = on


Şimdilik bu kadar.Denedim gayet güzel çalışıyor. Ancak bazı eksiklikler var şun. Kullanıcı Kontrol Panelinde, Moderatör Panelinde vs... Fırsatım olursa onları da ekleyip son halini yazarım, fırsatım olmazsa bu şablona göre belki diğer arkadaşlarımız gerekli tamamlamaları yaparlar.

Şuradan faydalandım : http://www.phpbb.com/community/viewtopi ... 0#p6360705
Akansu
kullanıcı
kullanıcı

Kullanıcı avatarı

İleti: 155
Kayıt: 29 May 2007 18:35
İsim: Akansu
HTML: Orta
CSS: Orta
PHP: Başlangıç
phpBB3: Orta
Sürüm: phpBB3

Tema Geliştirme


Kimler çevrimiçi

Bu forumu görüntüleyenler: Kayıtlı kullanıcı yok ve 1 misafir

cron