phpBB Türkiye - phpBB3 Türkçe destek ve geliştirme

İçeriği atla

profesyonel phpBB3 hizmetleri

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

Sitenin Çevresine Border ve Arkaplan

Cevap gönder

Sitenin Çevresine Border ve Arkaplan

İleti WILT 25 May 2007 22:31

angelside'ın yardımları ile tema editleme problemimi çözdüm. Şimdi önümde yapmak istediğim başka bir şey var. Siteyi buradaki gibi çerçevelemek ve logoyu buna dahil etmek istiyorum. Biraz denedim ama hep bozdum, acaba nasıl yapabilirim?
WILT
yönetici
yönetici

Kullanıcı avatarı

İleti: 217
Kayıt: 11 Nis 2007 12:24
Konum: İstanbul
HTML: Çok iyi
CSS: Orta
PHP: Orta
phpBB3: Orta
Sürüm: phpBB3 RC1
Sayfa başı
  profesyonel phpBB3 çözümleri ve web hizmetleri

Re: Sitenin Çevresine Border ve Arkaplan

İleti ALEXIS 25 May 2007 22:57

Tarif veya anlatım ile olacağını sanmıyorum, ya benzer bir şablon bulup düzenleyeceksin ya da:

Web Organizasyonu ve Tasarımı
http://www.belgeler.org/howto/web-organizasyonu.html
ALEXIS
site yöneticisi
site yöneticisi

Kullanıcı avatarı

İleti: 2737
Kayıt: 03 Arl 2006 09:57
Konum: İstanbul
İsim: Sevdin Filiz
HTML: İyi
CSS: İyi
PHP: Orta
phpBB3: İyi
Sürüm: phpBB 3.0.2
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti ALEXIS 06 Haz 2007 05:58

Yuvarlak köşeler yapmak için bir araç: http://wigflip.com/cornershop/
ALEXIS
site yöneticisi
site yöneticisi

Kullanıcı avatarı

İleti: 2737
Kayıt: 03 Arl 2006 09:57
Konum: İstanbul
İsim: Sevdin Filiz
HTML: İyi
CSS: İyi
PHP: Orta
phpBB3: İyi
Sürüm: phpBB 3.0.2
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti IcEman 06 Haz 2007 10:17

overall_header.html

Kod: Tümünü seç
<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}">

<div class="outside">
   <div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
      <div class="inside">
         <div class="notopgap">



overall_footer.html

Kod: Tümünü seç
                </div>
             <div class="nobottomgap"></div>
          </div>
       <div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
    </div>

    </body>



common.css

Kod: Tümünü seç
    /* additional proSilver Markup Styles outside rouded
    ----------------------------------------------------------- */
    .top-left, .top-right, .bottom-left, .bottom-right {
       height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
       }
       
    .top-left {
       background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
       background-position: 0 -20px; /* CHANGE: replace second number by negative height of one of your corners */
       margin-left: 1px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: 0px;  /* CHANGE: replace by the height of one of your corners */
       margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
       }
    .top-right {
       background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
       background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
       margin-left: 0px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
       margin-right: 1px; /* CHANGE: replace by the width of one of your corners */   
       }
    .top-center {
       background-image: url("{T_THEME_PATH}/images/bg_headers.gif"); /* CHANGE: path and name of your image */
       background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
       height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
       margin-left: 20px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
       margin-right: 20px; /* CHANGE: replace by the width of one of your corners */
       margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */
       }
       
    .bottom-left  {
       background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
       background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
       margin-right: 0px; /* CHANGE: replace by the width of one of your corners */
       margin-left: 1px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: 0px;  /* CHANGE: replace by the height of one of your corners */
       }
    .bottom-right {
       background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
       background-position: 100% -20px; /* CHANGE: replace second number by negative height of one of your corners */
       margin-right: 1px; /* CHANGE: replace by the width of one of your corners */
       margin-left: 0px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
       }
    .bottom-center {
       background-image: url("{T_THEME_PATH}/images/bg_footers.gif"); /* CHANGE: path and name of your image */
       background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
       height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
       font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
       margin-left: 20px;  /* CHANGE: replace by the width of one of your corners */
       margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
       margin-right: 20px; /* CHANGE: replace by the width of one of your corners */
       margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */
       }

    .inside {
       border-left: 0px solid #000000; /* YCC: color & properties of the left-borderline */
       border-right: 0px solid #000000;/* YCC: color & properties of the right-borderline */
       background: #FFFFFF;            /* YCC: background-color of the inside */
       color: #000000;                 /* YCC: default text-color of the inside */
       padding-left: 0px;              /* YCC: all texts at some distance of the left border */
       padding-right: 0px;             /* YCC: all texts at some distance of the right border */
       background-image: url("{T_THEME_PATH}/images/bg_body.gif"); /* CHANGE: path and name of your image */
       }
       
    .notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
    .nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

    .outside {
       margin: 0 auto;
       width : 950px;
       }



Kod: Tümünü seç
#wrap {
   padding: 0 20px;
   min-width: 650px;
   width: 900px;
   margin: 0 auto;
}



----------

http://www.easytutorials.org/prosilver_fixed_width.html

yukarıdaki verilen width: 900px; değerini değiştirmeden easytutorials.org daki değerleri karıştırmak gerekiyor bir de tweaks.css deki kodları sildik mi şablon oturuyor.common.css de ki değerleri sayfanın en alttına attım ben .. belki yanlışlarım da vardır buraya yazarsanız ...

Bu şablon hem localhostta hem de test sitemde kurulu çalışıyor sadece biraz kurcalamk gerekiyor.
Eklentiler
wrapper_prosilver.zip
grafikler
(3.78 KB) 78 defa indirildi
IcEman
genel yetkili
genel yetkili

İleti: 646
Kayıt: 08 Nis 2007 14:25
HTML: Başlangıç
CSS: Başlangıç
PHP: Başlangıç
phpBB3: Başlangıç
Sürüm: phpbb 3.0.2
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti ALEXIS 06 Haz 2007 11:27

Düzgün bir cache ve SQL cache ayarı veya boşaltmak gerekiyor, gördüğüm kadarı ile RC1 de SQL cache sorunu var.
ALEXIS
site yöneticisi
site yöneticisi

Kullanıcı avatarı

İleti: 2737
Kayıt: 03 Arl 2006 09:57
Konum: İstanbul
İsim: Sevdin Filiz
HTML: İyi
CSS: İyi
PHP: Orta
phpBB3: İyi
Sürüm: phpBB 3.0.2
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti ALEXIS 08 Haz 2007 09:46

Resim
ALEXIS
site yöneticisi
site yöneticisi

Kullanıcı avatarı

İleti: 2737
Kayıt: 03 Arl 2006 09:57
Konum: İstanbul
İsim: Sevdin Filiz
HTML: İyi
CSS: İyi
PHP: Orta
phpBB3: İyi
Sürüm: phpBB 3.0.2
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti IcEman 09 Haz 2007 22:23

güzel tema peki yayınlanacak mı ? yoksa geliştirme aşamasında mı ?


hala bir kıyafet giydiremedim temaya oturmuyor benden terzi olmayacak galiba :)
IcEman
genel yetkili
genel yetkili

İleti: 646
Kayıt: 08 Nis 2007 14:25
HTML: Başlangıç
CSS: Başlangıç
PHP: Başlangıç
phpBB3: Başlangıç
Sürüm: phpbb 3.0.2
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti WILT 13 Haz 2007 14:41

Iceman'in verdiği kodlar ile sitemin çevresine çerçeve görünümü kazandırdım. Verdiği kodlardaki 950 px'i 850'ye çevirip, mevcut resmi de daraltınca işlem gerçekleşti.

Teşekkür ederim.
WILT
yönetici
yönetici

Kullanıcı avatarı

İleti: 217
Kayıt: 11 Nis 2007 12:24
Konum: İstanbul
HTML: Çok iyi
CSS: Orta
PHP: Orta
phpBB3: Orta
Sürüm: phpBB3 RC1
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti rhtgltkn 14 Haz 2007 18:03

IceMan arkadaşın verdiği kodlar sayesinde bende yaptım güzel oldu. Ama arkaplan rengini değiştirince bir kayma olduğunu fark ettim. ekteki resimde görülüyor. bunu nasıl düzeltebilirim
rsm.jpg


düzeltme...
Kod: Tümünü seç
#wrap {
   padding: 0 20px;
   min-width: 650px;
   width: 900px;
   margin: 0 auto;
}

burda padding: 0 20px de 20 yerine 0 yapınca düzeldi... :P

düzeltme2...
arkadaşlar ben firefox kullanıyorum bu yüzden bu kayma olayını ilk başta almışım. şimdi sorun şu eğer padding: 0 20px; olduğu gibi bırakırsam İ.E da tam olarak düzgün çalışyor fakat Firefox da kayma oluyor
padding: 0 20px; da 20 yerine 0 yazsam bu kez FireFox da düzgün çalışıyor ama İ.E da kayma oluyor... 8O
bunu için nasıl bir çözüm bulunabilir. Mesela tarayıcı İ.E ise A kodunu FireFox İse B kodunu kullan gibi bişey mi yapılmalı...
Bu sorunun çözümünü paylaşırsanız sevinirim...
rhtgltkn
kullanıcı
kullanıcı

İleti: 84
Kayıt: 12 May 2007 00:52
HTML: İyi
CSS: Başlangıç
PHP: Başlangıç
phpBB3: Başlangıç
Sürüm: PHBB3
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti IcEman 15 Haz 2007 18:19

"temanın genişliği ile alt zemin resmi" birbirine orantılı değil galiba .. ben böyle bir şey yaşamadım hem IE de hem de FF 'da bence ilk başta standart bir şablon kurulumu yap daha sonra resimleri düzenle ..
IcEman
genel yetkili
genel yetkili

İleti: 646
Kayıt: 08 Nis 2007 14:25
HTML: Başlangıç
CSS: Başlangıç
PHP: Başlangıç
phpBB3: Başlangıç
Sürüm: phpbb 3.0.2
Sayfa başı
Sonraki
Cevap gönder

Tema Sorunlar & Yardım


Kimler çevrimiçi

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

evden eve nakliyat • Oyun • Burun estetiği • plastik cerrahi • chat • dopdolu.net • Alışveriş • Web Tasarım • Bilgisayar • temizlik ürünleri •

Geliştirme ve tasarım: Canver Software • Powered by phpBB © 2007 phpBB Group • URL rewrite: phpBB SEO
cron