Bayi Kılavuzu

Resimler ve logolar ekleyerek ya da FTP üzerinden sitenin bazı öğelerini özelleştirerek web sitenizin tasarımını kişiselleştirebilirsiniz.

NOT: FTP istemcisi uzak sunucu/sunuculardaki dosyaları yönetmenize izin veren bilgisayarınıza kurulan bir programdır.

FTP üzerinden web sitenize FileZilla (https://filezilla-project.org) ya da Total Commander (https://www.ghisler.com) gibi özel bir dosya yönetim yazılımı kullanarak erişebilirsiniz.

Verdiğiniz e-posta adresinde iBuildApp tarafından gönderilen onay e-postasına bakın - FTP için kimlik bilgilerini bulacaksınız (bulamazsanız, [email protected] adresinden iletişime geçin). FTP bağlantınızı ayarlayın.

FTP istemcinizi nasıl ayarlayacağınızı bilmiyorsanız, lütfen resmi belgelere başvurun:

• FileZilla: http://wiki.filezilla-project.org/Documentation
• Total Commander: http://www.ghisler.com/faq.htm

Temelde, web sitenizde FTP istemcinizin çalışması aşağıdaki ön koşulları gerektirir:

• İstemciyi başlatın,
• Web sitenizin sunucu adı, kullanıcı adı ve şifreyi girin,
• Sunucunuzun klasörlerindeki içeriklere ulaşmak için "Bağlan" düğmesine tıklayın.

Hesabınız altında erişilebilir iki klasör vardır:

• CSS dosyaları ve örneğin resimler gibi medya dosyalarınızı saklayabileceğiniz "tasarım". Klasörde 2 dosya bulunur: logo.png ve style.css
  
  
  style.cssdosyanızın düzenlenmesi; yazı tipi boyutları, arkaplan renkleri, resimler, vb. de dahil olmak üzere sitenizin görünümünü değiştirebilirsiniz. Daha fazla medya dosyası yükleyebilir ve sitenizi özelleştirmek için logo.png dosyasını değiştirebilirsiniz.
• Web sitenizin şablonlarının bulunduğu şablonlar":
  
  

"header.tpl" dosyası iç sayfaların üst bilgisinden sorumludur:

"footer.tpl" iç sayfaların alt bilgisinden sorumludur:

"index.tpl" dosyası üstbilgi ve altbilgi de dahil olmak üzere, genel olarak ana sayfadan sorumludur.

"meta.tpl" meta anahtar kelimeleri ve .css dosyaları için servis dosyasıdır.

Web sitenizin görünümünü değiştirmek için, aşağıdaki dosyalarda değişiklik yapmanız gerekir:

• Header.tpl
• Footer.tpl
• Index.tpl
• Styles.css
• Style_new.css

Üstbilgi ve altbilginin indeks sayfasına gömülü olduğuna DİKKAT EDİN. Tüm sayfalarda aynı üstbilgi ve altbilginn olması için 3 dosyanın tümünü değiştirmeniz gerekir:

• header.tpl,
• footer.tpl, and
• index.tpl.

Yönetini Panelinizden menüyü düzenlemeye devam etmek için, aşağıdaki dosyaları dahil etmeniz gerekir:

• header.tpl,
• footer.tpl, and
• index.tpl.

Aşağıdaki etiketler:

• {$M_MENU} - ana menü (sayfanın üstünde)
• {$B_MENU} - altbilgi menüsü (sayfanın altında)

Bu etiketleri menü çıktısını görmek istediğiniz yere yerleştirin.

Web sitenizdeki logoyu hızlıca değiştirmenin yolu bir .png resmi oluşturmak (200 piksel genişliğinde ve 70 piksel yüksekliğinde) ve eskisinin yerine koymaktır:

• FTP istemcinizi açın, FTP erişim detaylarını girin ve web sitenizin yüklü olduğu sunucuya bağlanın.
• Uygun klasörde logonun bulunduğu dosyayı bulun. Ardından bilgisayarınızda özel logo dosyasının bulunduğu dizini açın, şablonlardaki logo dosyasının referansını değiştirmeyi önlemek için logo.png olarak dosyanın adını değiştirin.
• Özel logonuzu sunucuya yükleyin.

Yönetici Paneli’nin sunduğundan daha fazla özelleştirmeye ihtiyacınız varsa, CSS becerilerini kullanmayı öneririz. Aşağıdaki ipuçları CSS ile web sitenizi özelleştirmede size yardımcı olacaktır.

Aşağıda listelenen stiller yerine FTP üzerinden ulaşılabilen yeni_stil.css koyulacaktır. İhtiyacınız olduğu kadar ilave stil ekleyebilirsiniz. Aynı zamanda kendi stillerinizi yaratmak için style.css dosyasını kullanabilirsiniz.

Logo

Web sitenizdeki logoyu hızlıca değiştirmenin yolu bir .png resmi oluşturmak (200 piksel genişliğinde ve 40 piksel yüksekliğinde) ve eskisinin yerine koymaktır:

• FTP istemcinizi açın, FTP erişim detaylarını girin ve web sitenizin yüklü olduğu sunucuya bağlanın.
• Sunucudaki logo dosyasını bulun, ardından bilgisayarınıza bir resim bulun, bunun adını logo.png olarak değiştirin (şablonlardaki logo dosyasının referansını değiştirmeyi önlemek için).
• Özel logonuzu sunucuya yükleyin.

Uzak sunucuda bulunan bir resmi kullanmak istiyorsanız, stili aşağıda gösterildiği şekilde değiştirin:

#logo, #main_nav li #logo {
   background: url(REMOTE_SERVER/logo.png) no-repeat scroll 0 0 transparent;
}

Aşağıdaki örnek logo genişlik ve yüksekliğinin nasıl değiştirileceğini göstermektedir:

#logo, #main_nav li #logo {
   height: 100px; //change logoheight
   width: 250px; //change logo width
}

NOT: şeffaf arkaplana sahip .png resimler kullanmanızı öneririz.

Üstbilgi

Web sitenizde üstbilgi arkaplanını değiştirmenin hızlı yolu bir .png resim oluşturmak (en az 1 piksel genişlik ve 67 piksel yükseklikte) ve eskisinin yerine koymaktır:

• FTP istemcinizi açın, FTP erişim detaylarını girin ve web sitenizin yüklü olduğu sunucuya bağlanın.
• Sunucu üzerinde arka plan dosyasını bulun. Ardından bilgisayarınızdaki arkaplan resmini bulun, bunu top_bar_png olarak yeniden adlandırın (şablonlardaki logo dosyasının referansını değiştirmeyi önlemek için).
• Resminizi sunucuya yükleyin.

Uzak sunucuda bulunan bir resmi kullanmak istiyorsanız, stili aşağıda gösterildiği şekilde değiştirin:

#header .top_bar {
   background: url(REMOTE_SERVER /top_bar_bg.png) repeat-x;
}

NOT: herhangi bir resim tipi kullanabilirsiniz: .jpg, .png, .gif

Aşağıdaki örnek üstbilgi genişlik ve yüksekliğinin nasıl değiştirildiğini göstermektedir:

#header .top_bar {
height: 100px; //change header height
}
.wrap {
   width: 1004px; //change header width
   margin: 0 auto;
   position: relative;
}

Üstbilginizin sayfa genişliğine sığmasını istiyorsanız, bu kodu dahil edin:

#header .top_bar {
   margin: 0 auto;
   width: 1004px; //change header width
}

Üstbilgi menüsü

Üstbilgi menünüzün görünümünü özelleştirmek istiyorsanız, aşağıdaki stilleri kullanın:

#main_nav li a {
   height: 40px;
   padding: 0px; //no indent between the items
   font: 10px/40px Arial, Helvetica, sans-serif; //set font size
   color: red; //red color of the menu items
   text-shadow: 0 1px 0 rgba(255,255,255,0.6);
   display: block;
}

Menüdeki kenarlıklardan kurtulmak için:

#main_nav li {
   height: 40px;
   border-right: none; //no borders In menu line
   float: left;
}

İkinci seviye üstbilgi menüsü

Aşağıdaki örnek ikinci seviye menü kutusunun nasıl özelleştirildiğini anlatmaktadır:

.sub-menu {
   background: #EFEFEF !important; //box beckground
   border: 1px solid #fff; //box border
   -webkit-border-radius: 8px; //box border radius
   -moz-border-radius: 8px; // box border radius
   border-radius: 8px; // box border radius
   position: relative;
   padding: 6px 0 !important;
}
.sub-menu: after {
   background: url(/media/img/submenu_ugol.png) no-repeat 0 0; //upper arrow
   position: absolute;
   width: 24px; //arrow width
   height: 13px; //arrow height
   top: -13px; //arrow top position
   left: 20px; //arrow left position
   margin-left: -12px;
}

İkinci seviye menü öğesini düzenlemek için, aşağıdaki kodu kullanın:

#main_nav li a {
   height: 40px; //height od the ongle item
   padding: 0 28px;
   font: 16px/40px Arial, Helvetica, sans-serif;
   color: #000; //font colour
   text-shadow: 0 1px 0 rgba(255,255,255,0.6); //text-shadow
   display: block;
} Language toggle

Dil değişikliği

Dil değiştirme kontrolünün konumunu değiştirme:

#header .lang_switch {
   float: right; //the box floats to the right
   margin: 5px 30px;
   padding-right: 175px; //shift on the right
}

Mevcut dil kutusunun görünümünü özelleştirme:

#header .lang_switch li {
   background-color: #A0B0B6;
   background-image: -o-linear-gradient(top, #A0B0B6, #637881);
   background-repeat: repeat-x;
   border-radius: 4px;
   box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.298);
   display: block;
   position: relative;
}
#header .lang_switch a {
   background: url("/images/lang_arrow2.png") 95% 55% no-repeat transparent; //change    this image to change default arrows
   color: #FFFFFF;
   display: block;
   font-size: 12px;
   line-height: 1.8;
   margin: 3px 0px 0px;
   padding-left: 5px;
   padding-right: 20px;
   text-decoration: none;
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.298);
}

Social icons

Web sitenizdeki sosyal simgeleri özelleştirmek için, 3 resim oluşturun (her biri 56 piksek genişliğinde ve 58 piksel yüksekliğinde) ve bunları FTP üzerinden sunucuya yükleyin. Ardından aşağıda gösterildiği gibi stilleri değiştirin:

#header .social_icons_new .facebook {
   background: url(images/facebook.png);
}
#header .social_icons_new .twitter {
   background: url(images/twitter.png);
}
#header .social_icons_new .rss {
   background: url(images/rss.png);
}

Sosyal bloğu gizlemek için, stili aşağıda gösterildiği gibi değiştirin:

#header .social_icons_new a {
   display:none; //hides the the social block
   float: left;
   width: 56px;
   height: 58px;
   background: url(images/sprite.png);
   margin: 0 5px;
}

Altbilgi

Altbilgi alanının arkaplan rengini değiştirmek için, bir .png resmi oluşturun ve eskisinin yerine koyun:

• FTP istemcinizi açın, FTP erişim detaylarını girin ve web sitenizin yüklü olduğu sunucuya bağlanın.
• Sunucu üzerinde arka plan dosyasını bulun. Ardından bilgisayarınızdaki arkaplan resmini bulun, bunu footer_pattern.png olarak yeniden adlandırın (şablonlardaki logo dosyasının referansını değiştirmeyi önlemek için).
• Resminizi sunucuya yükleyin.

Uzak sunucuda bulunan bir resmi kullanmak istiyorsanız, stili aşağıda gösterildiği şekilde değiştirin:

#footer _int {
   background: url(REMOTE_SERVER / footer_pattern.png) repeat-x;
}

NOT: arkaplanınız için, herhangi bir resim tipi kullanabilirsiniz: .jpg, .png, .gif

Aşağıdaki örnek altbilgi alanının genişliğini ve yüksekliğinin nasıl değiştirileceğini gösterir:

#footer_int .wrap {
   background: url(images/footer_shadow.png) no-repeat center top; //upper footer shadow
   padding: 22px 0;
}
.wrap {
   width: 1004px; //footer width
   margin: 0 auto;
   position: relative;
}

{t}If you want the footer area to fit the page width, include the following code:{/t} {literal}#header .top_bar {
   margin: 0 auto;
   width: 1004px; //change header width
}

Altbilgi menüsü

CSS kodu aşağıda gösterildiği gibi altbilgi menüsü bölgesini tanımlar:

#footer_int #footer_nav li {
   float: left;
   height: 12px;
   border-left: 1px solid #6f657d; //devider on the left
   padding: 0 12px;
}

Altbilgi menü öğesi için CSS kuralı:

#footer_int #footer_nav li a {
   color: #75727a; //item color
}

Uygulama düğmesi oluşturma

"Yeni Uygulama Oluştur" düğmesini özelleştirin:

.border-gradient-title .border-center {
   display: inline-block;
   z-index: 10;
   position: relative;
   margin: 0 auto;
   width: auto;
   background-color: #fff; //background image
   padding: 0 10px;
}
.btn_border {
   padding: 9px;
   padding-bottom: 12px;
   border: 1px solid #DFDFDF; //background image
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
.btn_create_orange {
   font-size: 18px; //text color
   text-transform: uppercase;
   padding: 8px 20px 6px 13px;
   box-shadow: 0px 3px 0px #DB430D; //box shadow
   border: 0px;
   baclground: red; //box background
   -webkit-box-shadow: 0px 3px 0px #DB430D; //text shadow
}

Sıfırdan site şablonu oluşturma

Web siteniz için sıfırdan bir şablon oluşturabilirsiniz. Tüm fonksiyonların özel şablonunuzla çalıştığından emin olun, aşağıdaki kuralları izleyin:

1. Şablonlarla çalışmak için SMARTY kullanıyoruz, bunun için şablonunuz SMARTY stilinde yaratılmış olmalıdır.
2. Şablonunuzu çalışır hale getirmek için, Şablonlar klasörüne 4 zorunlu dosyayı yüklemeniz gerekir:
   • Index.tpl - ana sayfa
   • Header.tpl - site üstbilgisi
   • Footer.tpl - site altbilgisi
   • Meta.tpl
   Diğer tüm dosyalar opsiyoneldir. Ancak yukarıda bahsedildiği gibi şablon yapısını korumanızı öneririz.
3. Yönetici Panelinizden menü düzenleme becerisini sürdürmek için, şu etiketleri dahil etmeniz gerekir:
   • {$M_MENU} - ana menü (sayfanın üstünde)
   • {$B_MENU} - altbilgi menüsü (sayfanın altında)
   to these files:
   • Header.tpl
   • Footer.tpl
   • Index.tpl
   Bu etiketleri menü çıktısını görmek istediğiniz yere yerleştirin.
4. Dil değiştirme becerisini korumak için, bu kodu index.tpl & header.tpl dosyalarınıza dahil edin:
   
   {include file="common/reseller/lang_switch.tpl.php"}
   
   Localizations created in your Admin Panel will be used for your site.
5. Yönetim Panelinizden Facebook & Twitter ayarlarını düzenleme becerisini korumak için, bağlantılarınızda aşağıdaki anahtarları kullanın:
   • #facebook#
   • #twitter#

Şimdi bayi ön yüzünüzü nasıl kişiselleştirebileceğinizi, müşteri veritabanınızı nasıl yöneteceğinizi, müşterileriniz için uygulamaları nasıl yayınlayacağınızı, şablonları nasıl yöneteceğinizi biliyorsunuz

Sağlam bir müşteri veritabanı oluşturup, müşterilerinizin ihtiyaçlarını karşılamaya devam ettiğiniz sürece, iBuildApp hizmetlerinin bayisi olarak sürekli başarılı için güçlü, süreklilik sağlayan bir kurum yaratmış olursunuz.