Konu: default tema header sorunu  (Okunma sayısı 1408 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

29 Mart 2014, 23:38
  • *
    • İleti: 273
    • Karma: 1
    • Diyabeturkey
    • Profili Görüntüle

o kadar tema editledik bir türlü düzen tutmadı ve hatalarıda yanında getirdi. diğer temalara yaptığım gibi default temada çerçeve ekledim oldu.

sonra logoyu halledeyim dedim. şuradaki gibi..

http://www.smfdestek.com/index.php?topic=218.0

bunu yaparsam bu seferde

http://www.smfdestek.com/index.php?topic=346.msg3713#msg3713

burada sorun oluyor kodlar gidiyor.

hocam acaba mümkünse sizin sitenizdeki gibi header bölümünü yapabilirmiyiz. logo menünun üstüne gelsin. çerçeve aşağı insin.



29 Mart 2014, 23:51
Yanıtla #1
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

çerçeve hiç yakışmamış ama. başka alternatifler düşünüp yapın derim. içimin sinmediği bir şeye uğraşmak istemem. tema editleme uzun zaman alan bir çalışma. bu nedenle vakit ayırıp yapamam.


30 Mart 2014, 11:53
Yanıtla #2
  • *
    • İleti: 273
    • Karma: 1
    • Diyabeturkey
    • Profili Görüntüle

yok abi çerçeve kalsın :-) ben sadece üst header yapabilsem sorun yok zaten. bir kaç bölümde farklı logo olacak ve logo bölümü sizin site gibi çerçevenin üstünde olsun istedim.


30 Mart 2014, 13:30
Yanıtla #3
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

Beklerseniz yapınca eklerim.


30 Mart 2014, 17:42
Yanıtla #4
  • *
    • İleti: 273
    • Karma: 1
    • Diyabeturkey
    • Profili Görüntüle

tamam abi beklemedeyim Allah razı olsun.


30 Mart 2014, 19:25
Yanıtla #5
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

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:25 Gönderen: bolubeyi »

30 Mart 2014, 23:05
Yanıtla #6
  • *
    • İleti: 273
    • Karma: 1
    • Diyabeturkey
    • Profili Görüntüle

şimdi abi yapmaya çalıştım şimdi burada

Kod: [Seç]
if($GLOBALS['board'] == "1.0"
    || $GLOBALS['board'] == "2.0"
    || $GLOBALS['board'] == "3.0"

var ben bunları 26, 60, 30, 40 diye değiştim.

bölüm numaralarına göre. css dosyalarınıda board_26.css, board_40.css

diye yapmam gerek doğrumu abi...


30 Mart 2014, 23:10
Yanıtla #7
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

index.templatede şunları yaptıysanız
Kod: [Seç]
if($GLOBALS['board'] == "26.0"
    || $GLOBALS['board'] == "30.0"
    || $GLOBALS['board'] == "40.0"
    || $GLOBALS['board'] == "60.0"

Bu bölümler için kullandığınız temanın css klasörü içine board_26.css,  board_30.css,  board_40.css ve  board_60.css isimli css dosyalarını oluşturup atmalısınız ve oluştıurduğunuz css dosyalarında görüntülenecek olan resim dosyasının adresini düzeltmelisiniz. Benden bu kadar. Gerekli açıklama konuda mevcut.


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

30 Mart 2014, 23:15
Yanıtla #8
  • *
    • İleti: 273
    • Karma: 1
    • Diyabeturkey
    • Profili Görüntüle

Çok saol abi dosyaları düzenledim attım şimdi oldu. son oalrak çerçeve ekledim ya abi sağ köşe yuvarlak ama logo dan mı yoksa main_block.png den mi düz gözüküyor. onu logodan mı ayarlayacağım. bunu grafik le alakalı ise grafiker bir arkadaş fikir verirse onunla ilgili de bir çalışma yapayım.

ve hatta grafik ten anlayan arkadaşlar söylerlerse logolarımı nasıl bir şey yapmalaıyım ki arka planla uyumlu olsun ? örnek verirse sevinirim.


30 Mart 2014, 23:26
Yanıtla #9
  • *
    • İleti: 2018
    • Karma: 41
    • Spina Bifida
    • Profili Görüntüle

anlatıma eklemeyi unutmuşum:
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;
}