Guía para revendedores

Usted puede personalizar el diseño de su sitio web agregando imágenes y logotipos, o personalizar determinados elementos del sitio mediante FTP.

Nota: Un cliente de FTP es un programa instalado en su computadora que permite administrar archivos en uno o varios servidores remotos.

Puede tener acceso a su sitio web mediante FTP utilizando software especializado de administración de archivos como FileZilla (http://filezilla-project.org) o Total Commander (http://www.ghisler.com).

Busque un correo electrónico de confirmación de iBuildApp en la dirección de correo electrónico que proporcionó; allí encontrará credenciales para su FTP (de lo contrario, comuníquese con [email protected]). Configure su conexión de FTP.

Si no sabe cómo configurar su cliente de FTP, consulte la documentación oficial:

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

Básicamente, el proceso de trabajo con su cliente de FTP en su sitio web se reduce a los siguientes requisitos previos:

• Abrir el cliente,
• Ingresar el nombre de host de su sitio web, su nombre de usuario y su contraseña.
• Hacer clic en el botón "Connect" (Conectar) para tener acceso a los contenidos de los directorios de su servidor.

Hay dos carpetas accesibles en su cuenta:

• "design" (diseño), donde puede almacenar sus archivos de CSS y sus archivos multimedia, p. ej., fotografías. La carpeta contiene 2 archivos: logo.png y style.css
  
  
  Al editar el archivo style.css, usted puede cambiar la manera en que se visualiza el sitio, incluidos los tamaños de fuente, los colores de fondo, las imágenes, y demás. Puede cargar más archivos multimedia y cambiar el archivo logo.png para personalizar el logotipo en su sitio.
• templates" (plantillas), que contiene plantillas para su sitio web:
  
  

El archivo "header.tpl" se encarga del encabezado de las páginas internas:

El archivo "footer.tpl" se encarga del pie de página de las páginas internas:

El archivo "index.tpl" se encarga de la página principal en general, incluidas las secciones de encabezado y pie de página.

El archivo "meta.tpl" es un archivo de servicio para palabras clave meta y archivos .css.

Para cambiar el aspecto de su sitio web, usted necesita realizar cambios en los siguientes archivos:

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

OBSERVE que el encabezado y el pie de página están incrustados en la página de índice. Para obtener todas las páginas del sitio web que tengan el mismo encabezado y pie de página, necesita cambiar los 3 archivos:

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

Para conservar la capacidad de editar el menú desde su panel de administración, necesita incluir a los siguientes archivos:

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

las siguientes etiquetas:

• {$M_MENU} - menú principal (en la parte superior de la página)
• {$B_MENU} - menú del pie de página (en la parte inferior de la página)

Coloque esas etiquetas donde le gustaría ver la salida del menú.

Una forma rápida de cambiar el logotipo de su sitio web es crear una imagen .png (de 200 píxeles de ancho y 70 píxeles de alto) y reemplazar la existente:

• Abra su cliente de FTP, ingrese los detalles de acceso a FTP y conéctese al servidor donde está instalado su sitio web.
• Ubique el archivo con el logotipo en la carpeta apropiada. Luego abra el directorio en su computadora donde está ubicado su logotipo personalizado y renómbrelo a logo.png para evitar cambiar la referencia al archivo del logotipo en las plantillas.
• Cargue su logotipo personalizado al servidor.

Si necesita más personalización de lo que el panel de administración le brinda, le recomendamos utilizar las facilidades de las CSS. Los siguientes consejos lo ayudarán a personalizar su sitio web mediante CSS.

Los estilos enumerados a continuación están ubicados en new_style.css que se encuentra disponible por FTP. Puede agregar los estilos adicionales que necesite. También puede utilizar el archivo style.css para crear sus propios estilos.

Logotipo

Una forma rápida de cambiar el logotipo de su sitio web es crear una imagen .png (200 píxeles de ancho y 40 píxeles de alto) y reemplazar la existente:

• Abra su cliente de FTP, ingrese los detalles de acceso a FTP y conéctese al servidor donde está ubicado su sitio web.
• Ubique el archivo del logotipo en el servidor, luego ubique una imagen en su computadora y renómbrela a logo.png (para evitar cambiar la referencia al archivo del logotipo en las plantillas).
• Cargue su logotipo personalizado al servidor.

Si prefiere utilizar una imagen ubicada en un servidor remoto, cambie el estilo tal como se muestra a continuación:

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

El ejemplo a continuación muestra cómo cambiar el ancho y el alto del logotipo:

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

NOTA: Recomendamos utilizar imágenes .png con fondo transparente.

Encabezado

Una forma rápida de cambiar el fondo del encabezado en su sitio web es crear una imagen .png (como mínimo, 1 píxel de ancho y 67 píxeles de alto) y reemplazar la existente:

• Abra su cliente de FTP, ingrese los detalles de acceso a FTP y conéctese al servidor donde está ubicado su sitio web.
• Ubique el archivo de fondo en el servidor. Luego ubique la imagen de fondo en su computadora, renómbrela a top_bar_bg.png (para evitar cambiar la referencia al archivo de logotipo en las plantillas).
• Cargue su imagen al servidor.

Si prefiere utilizar una imagen ubicada en un servidor remoto, cambie el estilo tal como se muestra a continuación:

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

NOTA: puede utilizar cualquier tipo de imagen: .jpg, .png, .gif

El ejemplo a continuación muestra cómo cambiar el ancho y el alto del encabezado:

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

Si prefiere que el encabezado esté ajustado al ancho de página, incluya este código:

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

Menú del encabezado

Para personalizar el aspecto del menú del encabezado, utilice los siguientes estilos:

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

Para deshacerse de los bordes en el menú:

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

Menú del encabezado de segundo nivel

El siguiente ejemplo describe cómo personalizar el cuadro de menú de segundo nivel:

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

Para editar un elemento del menú de segundo nivel, utilice el siguiente código:

#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

Alternancia de idioma

Cambiar la posición del control de alternancia de idioma:

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

Personalizar el aspecto del cuadro de idioma actual:

#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

Para personalizar los íconos de redes sociales que se presentan en su sitio web, cree 3 imágenes (56 píxeles de ancho y 58 píxeles de alto cada uno) y cárguelas al servidor a través de FTP. Luego modifique los estilos como se muestra a continuación:

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

Para ocultar el bloque de las redes sociales, modifique el estilo como se muestra a continuación:

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

Pie de página

Para cambiar el color de fondo del área de pie de página, cree una imagen .png y reemplace la existente:

• Abra su cliente de FTP, ingrese los detalles de acceso a FTP y conéctese al servidor donde está ubicado su sitio web.
• Ubique el archivo de fondo en el servidor. Luego, ubique la imagen de fondo en su computadora, renómbrela a footer_pattern.png (para evitar cambiar la referencia al archivo del logotipo en las plantillas).
• Cargue su imagen al servidor.

Si desea utilizar una imagen de un servidor remoto, cambie el estilo como se muestra a continuación:

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

NOTA: Para su fondo, puede usar cualquier tipo de imagen: .jpg, .png, .gif

El siguiente ejemplo muestra cómo cambiar el ancho y el alto del área de pie de página:

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

Menú al pie de página

El código CSS, como se muestra a continuación, describe el área del menú al pie de página:

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

Regla de CSS para el elemento de menú al pie de página:

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

Crear botón de la aplicación

Personalizar el botón "Create New App" (Crear nueva aplicación):

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

Crear una plantilla para el sitio de cero

Puede crear una plantilla para su sitio web de cero. Para asegurarse de que toda la funcionalidad esté trabajando con su plantilla personalizada, siga las reglas que figuran a continuación:

1. Utilizamos SMARTY para trabajar con las plantillas; por lo tanto, su plantilla debe crearse con el estilo SMARTY.
2. Para hacer que su plantilla sea funcional, debe cargar 4 archivos obligatorios en la carpeta “Templates” (Plantillas):
   • Index.tpl - la página principal
   • Header.tpl - el encabezado del sitio
   • Footer.tpl - el pie de página del sitio
   • Meta.tpl
   Todos los demás archivos son opcionales. Pero recomendamos conservar la estructura de la plantilla, como se mencionó anteriormente.
3. Para conservar la capacidad de editar el menú desde su Panel de administración, debe incluir las siguientes etiquetas:
   • {$M_MENU} - menú principal (en la parte superior de la página)
   • {$B_MENU} - menú del pie de página (en la parte inferior de la página)
   to these files:
   • Header.tpl
   • Footer.tpl
   • Index.tpl
   Coloque esas etiquetas donde desea ver la salida del menú.
4. Para conservar la capacidad de cambiar de idioma, incluya este código en los archivos index.tpl y header.tpl:
   
   {include file="common/reseller/lang_switch.tpl.php"}
   
   Localizations created in your Admin Panel will be used for your site.
5. Para conservar la capacidad de editar la configuración de Facebook y Twitter desde su Panel de administración, utilice las siguientes claves en sus enlaces:
   • #facebook#
   • #twitter#

Ahora usted sabe cómo personalizar su portada de revendedor, administrar su base de clientes, publicar aplicaciones para sus clientes, administrar plantillas.

A medida que construye una base sólida de clientes y continúa atendiendo a sus clientes, usted construye una base fuerte y duradera para tener éxito constante como revendedor de los servicios de iBuildApp.