Konu: Her kategori için headerde farklı logo görünsün  (Okunma sayısı 1149 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

24 Şubat 2013, 21:28
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

Bu mod her boardda farklı logo göstermeye yarar. Ayrıca bu mod sayesinde her board için farklı bir css dosyası oluşturarak forumunuzdaki bölümlere birbirinden farklı görsellik vermeniz mümkündür.

Anlatım sıfır default temaya göre olup farklı temalar için değişiklik arz edebilir.

Modifikasyon index.template.php ve index.css dosyası olmak üzere 2 dosyada değişiklik gerektirmekle beraber bölüm sayısı kadar da css dosyası ve bölüm sayısı kadar da logo oluşturulması gerektirmektedir.

Bazı bölümlerde standart logonuzu kullanmak isteyebilirsiniz. Bu bölümler için ayrıca css dosyası ve logo oluşturmanıza gerek yok.

İşlem Basamakları:

index.template.php
Bul:
Kod: [Seç]
<div id="top_section">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>';

Değiştir:
Kod: [Seç]
<div id="top_section">';
Bul:
Kod: [Seç]
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

Değiştir:
Kod: [Seç]
// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
if($GLOBALS['board'] == "1.0" || $GLOBALS['board'] == "2.0" || $GLOBALS['board'] == "3.0")
{
echo'
    <link rel="stylesheet" type="text/css" href="',$settings['theme_url'],'/css/index',$GLOBALS['board'],'.css?fin20" />';
}
else
{
echo'
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';
}

index.css

Bul:
Kod: [Seç]
#top_section
{
min-height: 65px;
overflow: hidden;
margin-bottom: 3px;
}

Değiştir:
Kod: [Seç]
#top_section
{
min-height: 148px;
overflow: hidden;
margin-bottom: 3px;
    background: url(../images/logolar/diger.png) no-repeat center center;
}

Ekteki sıkıştırılmış dosyanın içinden çıkan logolar isimli klasörü temanızın images klasörüne atın.
Ekteki main_block.png dosyasını mevcut olanla değiştirin.

Daha sonra  hangi bölümlerde farklı logo görünmesini istiyorsak index.template.php dosyasına eklediğimiz kod üzerinde değişiklik yapalım.

Kodumuzun bi parçası şu idi:
Kod: [Seç]
if($GLOBALS['board'] == "1.0" || $GLOBALS['board'] == "2.0" || $GLOBALS['board'] == "3.0")
Kod bu haliyle 1, 2 ve 3 idli boardlara girildiğinde farklı logolar göstermeye yarar. Örneğin siz 23 idli boardda da bir başka logonun görüntülenmesini istiyorsunuz. Bu durumda bu kodda şu şekilde değişiklik yapmanız lazım:
Kod: [Seç]
if($GLOBALS['board'] == "1.0" || $GLOBALS['board'] == "2.0" || $GLOBALS['board'] == "3.0" || $GLOBALS['board'] == "23.0")
Sıra geldi css dosyalarımızı oluşturmaya. Bir örnekle açıklayalım. Aşağıdaki örnekte 1 idli board için logo ataması yapalım.

index.css dosyamızda şu kodu buluyoruz:
Kod: [Seç]
#top_section
{
min-height: 148px;
overflow: hidden;
margin-bottom: 3px;
    background: url(../images/logolar/diger.png) no-repeat center center;
}

Bu kodu şu şekilde değiştirip dosyamızı index1.css olarak farklı kaydedip temamızın css klasörüne atıyoruz.
Kod: [Seç]
#top_section
{
min-height: 148px;
overflow: hidden;
margin-bottom: 3px;
    background: url(../images/logolar/bolum_1.png) no-repeat center center;
}

Koddan anlaşılacağı üzere bolum_1.png isimli resim 1 idli kategorinin logo resimi oluyor.

Artık hangi kategorilerde farklı logo göstermek istiyorsanız logolar isimli klasöre bolum_4.png, bolum_5.png isminde resimler oluşturup atarsınız.

Alternatif örnek anlatım:
Demo (geçici) sitedeki gibi yapmak için aşağıdaki işlem basamakları uygulanır.
Demo board 1: http://spinabifidaturkey.com/demo/index.php?topic=50.0
Demo board 2: http://spinabifidaturkey.com/demo/index.php?topic=52.0
Demo board 3: http://spinabifidaturkey.com/demo/index.php?topic=42.0
Demo default: http://spinabifidaturkey.com/demo/index.php?topic=51.0
Anlatım default tema içindir. Diğer temalar için değişiklik arz edebilir.

1. spina_bifida_turkey_logo.png isminde bir logo hazırlayıp Themes/default/images/theme/ içine atınız.
2. Ekteki main_block.png isimli resimi Themes/default/images/theme/ içinde olanla değiştirin.
3. Index.template.php
Bul:
Kod: [Seç]
        <div id="top_section">
            <h1 class="forumtitle">
                <a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
            </h1>';

    // the upshrink image, right-floated
    echo '
            <img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';
    echo '
            ', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="floatright">' . $settings['site_slogan'] . '</div>', '
        </div>

Değiştir:
Kod: [Seç]
<div class="spina_bifida_logo"></div>   

Bul:
Kod: [Seç]
    // The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
    echo '
    <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

Değiştir:
Kod: [Seç]
    if($GLOBALS['board'] == "1.0"
    || $GLOBALS['board'] == "2.0"
    || $GLOBALS['board'] == "3.0"   
    )
{
echo'
    <link rel="stylesheet" type="text/css" href="',$settings['theme_url'],'/css/board_',$GLOBALS['board'],'.css?fin20" />';
}
else
{
echo'
    <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';
}

Bu kodlarla hangi bölümlerde farklı css dosyası kullanacağımızı belirttik. Belirtilmeyen bölümlerde index.css dosyası devreye girecektir.


4. Index.css
En alta ekle:
Kod: [Seç]
.spina_bifida_logo
{
    width: 100%;
    height: 60px;
      background: url(../images/theme/spina_bifida_turkey_logo.png) no-repeat center center;
}

5. Bu örnekte 1, 2 ve 3 idli bölümlerdeki konulara özel css dosyası oluşturulmaktadır.

1 idli bölümdeki konular için board_1.css isimli bir css dosyası oluşturacağız. Bunun için index.css dosyamızı dosyamızı kopyalayıp board_1.css olarak kaydediyoruz ve şu kodlamayı:
Kod: [Seç]
.spina_bifida_logo
{
    width: 100%;
    height: 60px;
      background: url(../images/theme/spina_bifida_turkey_logo.png) no-repeat center center;
}

Şununla değiştiriyoruz:
Kod: [Seç]
.spina_bifida_logo
{
    width: 100%;
    height: 60px;
      background: url(../images/theme/board_1_logo.png) no-repeat center center;
}

2 idli bölümdeki konular için board_2.css isimli bir css dosyası oluşturacağız. Bunun için index.css dosyamızı dosyamızı kopyalayıp board_2.css olarak kaydediyoruz ve şu kodlamayı:
Kod: [Seç]
.spina_bifida_logo
{
    width: 100%;
    height: 60px;
      background: url(../images/theme/spina_bifida_turkey_logo.png) no-repeat center center;
}

Şununla değiştiriyoruz:
Kod: [Seç]
.spina_bifida_logo
{
    width: 100%;
    height: 60px;
      background: url(../images/theme/board_2_logo.png) no-repeat center center;
}

3 idli bölümdeki konular için board_3.css isimli bir css dosyası oluşturacağız. Bunun için index.css dosyamızı dosyamızı kopyalayıp board_3.css olarak kaydediyoruz ve şu kodlamayı:
Kod: [Seç]
.spina_bifida_logo
{
    width: 100%;
    height: 60px;
      background: url(../images/theme/spina_bifida_turkey_logo.png) no-repeat center center;
}

Şununla değiştiriyoruz:
Kod: [Seç]
.spina_bifida_logo
{
    width: 100%;
    height: 60px;
      background: url(../images/theme/board_3_logo.png) no-repeat center center;
}

Bu şekilde bölüm sayınız kadar css dosyası oluşturunuz.

6. Bölüm logoları için de bölüm sayısı kadar board_1_logo.png, board_2_logo.png ve board_3_logo.png isminde resimler oluşturup kullandığınız temanın theme isimli klasörüne atınız.

Çerçeve eklemek isterseniz tüm css dosyalarında şu değişikliği yapın:
Bul:
Kod: [Seç]
div#wrapper
{
    margin: 0 auto;
    min-width: 764px;
    max-width: 2300px;
}

Değiştir:
Kod: [Seç]
div#wrapper
{
    margin: 0 auto;
    min-width: 780px;
    max-width: 2300px;
    border:#183f69 double 5px;
    border-top-left-radius:75px;
    border-top-right-radius:0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:39px;box-shadow:0 0 10px #000;
    margin-top: 10px;
    margin-bottom: 10px;
}

Bul:
Kod: [Seç]
#header
{
    background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
    padding-left: 20px;
}

Değiştir:
Kod: [Seç]
#header
{
    background: url(../images/theme/main_block.png) #fefefe no-repeat 0 -480px;
    padding-left: 20px;
    border-top-left-radius:75px;
}

Bul:
Kod: [Seç]
#header div.frame
{
    background: url(../images/theme/main_block.png) no-repeat 100% -480px;
    display: block;
    padding: 5px 20px 1em 0;
}

Değiştir:
Kod: [Seç]
#header div.frame
{
    background: url(../images/theme/main_block.png) no-repeat 100% -480px;
    display: block;
    padding: 5px 20px 1em 0;
    border-top-left-radius:75px;
}


« Son Düzenleme: 30 Mart 2014, 23:34 Gönderen: bolubeyi »

27 Mart 2014, 16:35
Yanıtla #1
  • *
    • İleti: 273
    • Karma: 1
    • Diyabeturkey
    • Profili Görüntüle

Kod: [Seç]
if($GLOBALS['board'] == "1.0" || $GLOBALS['board'] == "2.0" || $GLOBALS['board'] == "3.0" || $GLOBALS['board'] == "23.0")
bunu uzattıkça logo sayısı da atmış mı oluyor abi. sınır varmı yoksa ?


27 Mart 2014, 16:46
Yanıtla #2
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

sınır yok istediğiniz kadar ekleyebilirsiniz.