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 21: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
genel yetkili
genel yetkili

Kullanıcı avatarı

İleti: 215
Kayıt: 11 Nis 2007 11: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 ALEXIS 25 May 2007 21: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
kullanıcı
kullanıcı

Kullanıcı avatarı

İleti: 2866
Kayıt: 03 Arl 2006 08:57
Konum: İstanbul
İsim: Sevdin Filiz
HTML: Çok iyi
CSS: Çok iyi
PHP: İyi
phpBB3: Çok iyi
Sürüm: phpBB 3.0.3-RC1
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti ALEXIS 06 Haz 2007 04:58

Yuvarlak köşeler yapmak için bir araç: http://wigflip.com/cornershop/
ALEXIS
kullanıcı
kullanıcı

Kullanıcı avatarı

İleti: 2866
Kayıt: 03 Arl 2006 08:57
Konum: İstanbul
İsim: Sevdin Filiz
HTML: Çok iyi
CSS: Çok iyi
PHP: İyi
phpBB3: Çok iyi
Sürüm: phpBB 3.0.3-RC1
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti IcEman 06 Haz 2007 09: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.
IcEman
yetkili
yetkili

Kullanıcı avatarı

İleti: 752
Kayıt: 08 Nis 2007 13:25
HTML: Başlangıç
CSS: Başlangıç
PHP: Başlangıç
phpBB3: Başlangıç
Sürüm: phpBB 3.0.3
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti ALEXIS 06 Haz 2007 10: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
kullanıcı
kullanıcı

Kullanıcı avatarı

İleti: 2866
Kayıt: 03 Arl 2006 08:57
Konum: İstanbul
İsim: Sevdin Filiz
HTML: Çok iyi
CSS: Çok iyi
PHP: İyi
phpBB3: Çok iyi
Sürüm: phpBB 3.0.3-RC1
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti ALEXIS 08 Haz 2007 08:46

Resim
ALEXIS
kullanıcı
kullanıcı

Kullanıcı avatarı

İleti: 2866
Kayıt: 03 Arl 2006 08:57
Konum: İstanbul
İsim: Sevdin Filiz
HTML: Çok iyi
CSS: Çok iyi
PHP: İyi
phpBB3: Çok iyi
Sürüm: phpBB 3.0.3-RC1
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti IcEman 09 Haz 2007 21: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
yetkili
yetkili

Kullanıcı avatarı

İleti: 752
Kayıt: 08 Nis 2007 13:25
HTML: Başlangıç
CSS: Başlangıç
PHP: Başlangıç
phpBB3: Başlangıç
Sürüm: phpBB 3.0.3
Sayfa başı

Re: Sitenin Çevresine Border ve Arkaplan

İleti WILT 13 Haz 2007 13: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
genel yetkili
genel yetkili

Kullanıcı avatarı

İleti: 215
Kayıt: 11 Nis 2007 11: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 17: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: 11 May 2007 23: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 17: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
yetkili
yetkili

Kullanıcı avatarı

İleti: 752
Kayıt: 08 Nis 2007 13:25
HTML: Başlangıç
CSS: Başlangıç
PHP: Başlangıç
phpBB3: Başlangıç
Sürüm: phpBB 3.0.3
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

phpBB3 Portal • hava durumu • chat • Burun estetiği • plastik cerrahi •

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