Guida Rivenditori

Puoi personalizzare il design del tuo sito aggiungendo immagini e loghi, o personalizzare elementi del sito via FTP.

NOTA: Un client FTP è un programma installato sul tuo computer che che permette la gestione dei file su server remoto.

Puoi accedere al tuo sito tramite FTP utilizzando un file manager specifico come (https://filezilla-project.org) o Total Commander (https://www.ghisler.com).

Cerca una email di conferma da iBuildApp all\'indirizzo che ci hai fornito - Troverai le credenziali per il tuo FTP (se non c\'è, contatta [email protected]). Imposta la tua connessione FTP.

Se non sai come impostare il tuo client FTP ti preghiamo di controllare la documentazione ufficiale:

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

In pratica, il processo della lavorazione con il tuo client FTP si riduce a questi prerequisiti:

• Apri il client,
• Inserisci l\'host del tuo sito, nome e password,
• Clicca sul pulsante "Connettiti" e accedi ai contenuti nelle directory del tuo server.

Ci sono due cartelle accessibili sotto il tuo account:

• "design" dove puoi conservare i tuoi file CSS e media es. immagini. La cartella contiene 2 file: logo.png and style.css
  
  
  Modificando il tuo style.css puoi apportare modifiche all\'aspetto del sito, comprese dimensioni del font, colori di sfondo, immagini e così via. Puoi caricare più file media e modificare li logo.png per personalizzare il logo sul tuo sito.
• templates" che contentono template per il tuo sito:
  
  

Il file "header.tpl" è responsabile dell\'intestazione delle pagine interne

"footer.tpl" è responsabile del piè di pagina delle pagine interne:

"index.tpl" è responsabile della pagina principale, incluse le sezioni intestazione e piè di pagina.

"meta.tpl" è un file di servizio per parole chiave e .css.

Per modificare l\'aspetto del tuo sito devi modificare i seguenti file:

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

Notare che l\'intestazione e il piè di pagina sono integrati nella pagina index. Per avere tutte le pagine del sito con la stessa intestazione header e piè di pagina devi modificare tutti e 3 i file:

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

Per mantenere l\'abilità di modificare il menu dal tuo pannello di amministrazione devi includere i seguenti file:

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

Tag seguenti:

• {$M_MENU} - menu principale (in alto alla pagina)
• {$B_MENU} - menu piè di pagina (sotto alla pagina)

Metti questi tag dove vuoi vedere l\'output del menu.

Un modo veloce per modificare il logo del tuo sito è quello di creare un\'immagine .png (200px in larghezza e 70px in altezza) e rimpiazzare quella esistente.

• Apri il tuo client FTP, inserisci i dettagli di accesso FTP, e connettiti al server dove hai installato il tuo sito.
• Localizza il file con il logo nella cartella specifica. Poi apri la directory sul tuo computer dove c\'è il logo personalizzato, rinominalo in logo.png per evitare il riferimento al file logo che è nei template.
• Carica il tuo logo personalizzato sul server.

Se hai bisogno di più personalizzazione, ti raccomandiamo di usare gli strumenti CSS. Con i seguenti suggerimenti ti aiuteremo a personalizzare il tuo sito attraverso CSS.

Gli stili, elencati qua sotto si trovano in new_style.css che è disponibile attraverso l\'FTP. Puoi aggiungere stili extra a piacimento. Puoi anche usare il file style.css per creare i tuoi stili.

Logo

Un modo veloce di modificare il logo del sito è creare un\'immagine .png (200px in larghezza e 40px in altezza) e rimpiazzare quella esistente:

• Apri il tuo client FTP, inserisci i dettagli di accesso FTP, e connettiti al server dove hai installato il tuo sito.
• Localizza il file con il logo nella cartella specifica. Poi apri la directory sul tuo computer dove c\'è il logo personalizzato, rinominalo in logo.png per evitare il riferimento al file logo che è nei template.
• Carica il tuo logo personalizzato sul server.

se vuoi usare un\'immagine che si trova su un server remoto, modifica lo stile come mostrato qua sotto:

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

L\'esempio sotto mostra come modificare l\'altezza del logo e la larghezza:

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

NOTA: Raccomandiamo l\'uso di immagini .png con sfondo trasparente.

Intestazione

Un modo veloce di modificare lo sfondo dell\'intestazione è creare un\'immagine .png (min 1px in larghezza e 67px in altezza) e rimpiazzare quella esistente:

• Apri il tuo client FTP, inserisci i dettagli di accesso FTP, e connettiti al server dove hai installato il tuo sito.
• Localizza il file sfondo sul server. Poi trova l\'immagine di sfondo sul tuo computer e rinominala top_bar_bg.png (per evitare il riferimento al file logo che è nei template).
• Carica la tua immagine nel server.

se vuoi usare un\'immagine che si trova su un server remoto, modifica lo stile come mostrato qua sotto:

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

NOTA: puoi usare qualcunque tipo di immagine .jpg, .png, .gif

L\'esempio sotto mostra come modificare intestazione e altezza:

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

Se vuoi che l\'intestazione si adatti alla larghezza della pagina, includi questo codice:

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

Menu intestazione

Per personalizzare l\'aspetto del menu intestazione usa questi stili:

#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;
}

Per rimuovere i bordi nel menu:

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

Menu intestazione di secondo livello

Il seguente esempio descrive come personalizzare il menu box del secondo livello:

.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;
}

Per modificare un oggetto del menu di secondo livello, usa il codice:

#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

Toggle lingua

Modifica la posizione del controllo linguaggio:

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

Personalizza l\'aspetto del box lingua attuale:

#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

Per personalizzare le icone social presenti sul sito, crea 3 immagini 56 px in larghezza & 58 px in altezza ognuno) e caricale sul server via FTP. Poi modifica gli stili come mostrato sotto:

#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);
}

Per nascondere un blocco social, modifica lo stile come mostrato sotto:

#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;
}

Piè di pagina

Per modificare il colore di sfondo del piè di pagina, crea un\'immagine .png e rimpiazza quella esistente:

• Apri il tuo client FTP, inserisci i dettagli di accesso FTP, e connettiti al server dove hai installato il tuo sito.
• Localizza il file di sfondo sul server. Poi localizza l\'immagine di sfondo sul tuo computer, rinominala in footer_pattern.png (per evitare di modificare il riferimento al file logo nei template).
• Carica la tua immagine nel server.

Se vuoi usare un\'immagine su un server remoto, modifica lo stile come mostrato sotto:

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

NOTA: per il tuo sfondo, puoi usare qualsiasi tipo di immagine: .jpg, .png,.gif

Gli esempi qui di seguito mostrano come modificare altezza e larghezza nella zona del piè di pagina:

#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
}

Menu piè di pagina

Il codice CSS mostrato sotto descrive l\'area del piè di pagina:

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

Regole CSS per oggetto menu piè di pagina:

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

Crea pulsante app

Personalizza pulsante "Crea nuova app":

.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
}

Crezione template sito da zero

Puoi creare un template per il tuo sito da zero. Per assicurarti che tutto sia funzionante con il tuo template personalizzato, segui le regole qua sotto:

1. Usiamo SMARTY per lavorare con i template, così il tuo template sarà creato in uno stile SMARTY
2. Per far sì che il template funzioni, devi caricare 4 file obbligatori nella cartella template:
   • Index.tpl - la pagina principale
   • Header.tpl - l\'intestazione del sito
   • Footer.tpl - il piè di pagina del sito
   • Meta.tpl
   Tutti gli altri file sono opzionali. Ma raccomandiamo di tenere la struttura del template, come spiegato sopra.
3. Per tenere l\'abilità di modificare il menu dal pannello admin devi includere i tag:
   • {$M_MENU} - menu principale (in alto alla pagina)
   • {$B_MENU} - menu piè di pagina (sotto alla pagina)
   to these files:
   • Header.tpl
   • Footer.tpl
   • Index.tpl
   Metti i tag dove vuoi vedere l\'output del menu.
4. Per tenere l\'abilità di modificare la lingua, includi questo codice nei file index.tpl & header.tpl
   
   {include file="common/reseller/lang_switch.tpl.php"}
   
   Localizations created in your Admin Panel will be used for your site.
5. Per tenere l\'abilità di modificare le impostazioni di Facebook & Twitter dal pannello admin usa le seguenti chiavi nei link:
   • #facebook#
   • #twitter#

Ora sai come personalizzare il tuo frontale del rivenditore, gestire i clienti, pubbicare le app per i tuoi clienti, gestire template

Costruendo una solida base di cliente e continuando ad andare incontro ai tuoi clienti, stai costruento delle fondamenta solide per un successo continuativo come rivenditore di servizi iBuildApp