# DOCUMENTACIÓN Rev 2.0.6

"Cómo" establecer su nuevo foro correctamente.

¿BUSCA UN DESARROLLADOR? Estoy disponible para trabajos Freelance, quiero oír hablar de sus proyectos. - Dave

# Empezando

Gracias por la compra de FLATBBOOTS, el primer y el único estilo completamente Responsive phpBB 3.2 que realmente integra plenamente Bootstrap Framework. Decenas de componentes reutilizables se construyen para proporcionar navegación, alertas, botones, y mucho más.

#### Freelance

Si usted tiene alguna pregunta que está más allá del alcance de este archivo de ayuda, por favor, siéntase libre de enviar un correo electrónico a través de mi página de usuario en ThemeForest, o envíe un correo electrónico a: info@sitesplat.com. Estoy disponible para el trabajo de personalizar sus MODs phpBB3 favoritos, Extensiones, extender BBOOTS, o FLATBOOTS de acuerdo a sus necesidades. Envíeme un correo electrónico para solicitar un presupuesto.

### Herramientas

El software sugerido necesario para llevar a cabo las ediciones manuales de los archivos de plantilla, y/o cargar extensiones phpBB mencionados en esta guía son dos:

- Por favor, visite el FAQ de Soporte (hay muchas dudas solucionadas).
- Notepad++ (notepad-plus-plus.org).
- Upload Extensions (Upload extensions).

* "Notepad++": le permitirá guardar los archivos sin BOM por defecto. (Servidores antiguos, o servidores específicos del proveedor tienen un problema de interpretación de ellos, y lanzan errores porque los guiones producen salida antes de lo debido). También puede hacer referencia a esta lista de editores de texto: Editores de Texto.
** "Upload extension": es una extensión de phpBB que le permitirá cargar cómodamente extensiones directamente desde su Panel de Control de Administración (PCA).

#### BOM

La Marca de Orden de Bytes (BOM, por el inglés Byte Order Mark) es un carácter Unicode que se utiliza para indicar el orden de los bytes (endianness) de un fichero de texto. Su código es U+FEFF. Además de usarse para indicar el orden de los bytes en cada palabra, también se puede utilizar como marca para indicar qué codificación Unicode se está utilizando (UTF-8, UTF-16 o UTF-32).

### Instalación

Para instalar correctamente FLATBOOTS y añadir la funcionalidad adecuada a su foro phpBB 3.2, hay dos pasos principales necesarios que deben ejecutarse.

1. Instalar FLATBOOTS.
2. Instalar el BBCore™ (Disponible en la carpeta documentation).

Cómo instalar el estilo: (4 Pasos)

1. Subir la carpeta entera de "FLATBOOTS" a la carpeta `root/styles/` de su servidor.
2. Iniciar sesión en su foro phpBB 3.2 y acceder a su Panel de Control de Administración (también conocido como PCA).
3. Haga clic en "Personalizar" esta en la pestaña superior de la barra, a continuación haga clic en "Instalar estilos", lo verá en la lista de la izquierda.
4. Localice el estilo FLATBOOTS (previamente subido a la carpeta oportuna, explicado en el paso #1) y haga clic en "Instalar estilo" para proceder a su instalación.

¡Enhorabuena!
¡Suponiendo que todo ha ido bien con lo anterior, se encuentra ahora a medio camino! Ahora esta listo para la fase dos. :-)
Siga leyendo la documentación siguiente por favor.
Cómo instalar el BBCore: (4 Pasos)

1. En la carpeta de documentación localizar el BBCore y descomprimir el contenido (carpeta sitesplat) directamente en la carpeta `root/ext/` (root = raíz de su foro) en su servidor.
   La ruta debería ser la siguiente: `/root/ext/sitesplat/BBCore/`
2. Haga clic en la pestaña "Personalizar" esta en la pestaña superior de la barra.
3. Ahora, haga clic en "Habilitar" en la lista de Extensiones.
4. Debería aparecer un mensaje confirmando que la extensión BBCore se ha activado correctamente. ¡Bien hecho, ahora a disfrutar!

#### Error en BBCore

Si aparece un error después de habilitar el BBCore, por favor, compruebe los registros de Administrador, y/o puede publicar en el foro de soporte de la comunidad en busca de ayuda.

# Personalización

#### Ediciones personalizadas - ¡ La hoja de estilo Custom.css SOLAMENTE !

Todas las modificaciones en el estilo deben agregarse a la hoja de estilos custom.css incluido en dicho archivo `custom.css`. Esto dejará el código original intacto, y será más fácil para una futura actualización del estilo, y de llevar su personalización.

#### ¿Añadido Mini CMS?

¿Ha instalado Mini CMS? ¿Está pensando en instalar Mini CMS? (Mini CMS) Si la respuesta es sí, entonces no necesita editar el archivo custom.css. Mini CMS le permite editar directamente este archivo a través del Panel de Control de Administración.

Para activar su hoja de estilo custom.css debe abrir el archivo `FLATBOOTS/template/overall_header.html` y buscar las siguientes líneas comentadas:

    <!-- Remove the conditional below to use the custom CSS without FLATBOOTS Mini CMS Extension -->
    <!-- IF S_ALLOW_CUSTOMCSS -->
    	<link href="{T_THEME_PATH}/custom.css" rel="stylesheet">
    <!-- ENDIF -->

Elimine el comentario de las dos líneas por encima y por debajo de `<link href="{T_THEME_PATH}/custom.css" rel="stylesheet">` de manera que todo el bloque se verá así:

    <link href="{T_THEME_PATH}/custom.css" rel="stylesheet">

### Iconos Sociales

Para añadir o eliminar iconos sociales, debe abrir el siguiente archivo de plantilla `FLATBOOTS/template/overall_footer.html` y buscar:

    <ul class="social-network">

Controle sus enlaces sociales añadiendo o eliminando esta línea de código:

    <a title="Google+" href="#1"><i class="fa fa-google-plus google-plus-color"></i></a>

Puede cambiar los iconos mediante el uso de cualquiera de las clases de iconos de la Fuente Awesome disponibles (puede ver dicha lista aquí: FontAwesome).

    fa fa-google-plus

### FUENTE DEL FORO

Usted puede cambiar la fuente, añadiendo y quitando el a través de un simple enlace generado con Google Free Font Library

Elija su fuente desde aquí: Google Free Font a continuación, en el archivo `FLATBOOTS/template/overall_header.html` y buscar:

    <!-- Google free font here -->

A continuación, deberá añadir el enlace de la fuente debajo de esa línea:

    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'>

Ahora tiene que llamar a la familia de fuentes para los diferentes elementos. Digamos que desea reemplazar el cuerpo de letra con el tipo de fuente Roboto. En este caso deberá añadir esto a su `custom.css` ubicado en la carpeta `FLATBOOTS/theme/`. Su código debería tener este aspecto:

    body {
      color: #8d9aa5;
      margin: 0;
      font-family: 'Roboto','Arial','Helvetica',sans-serif;
      background-color: #ECF0F1;
    }

### Fondo

Para la imagen principal del fondo del foro, y/o color, deberá añadir el siguiente ejemplo: `FLATBOOTS/theme/custom.css`

    body {
        background: url("./images/tile-bg-head.png") repeat fixed 0 0 #26bcb5;
    }

#### No se olvide de su imagen

Asegúrese de subir la imagen en la carpeta `FLATBOOTS/theme/images/` y limpiar el caché de su foro, y el caché de su navegador para poder ver los cambios realizados.

### Twitter

Con el fin de obtener el feed de Twitter desde su propia página de Twitter, se necesita tener un ID de widget generado desde su cuenta de Twitter, y luego añadir el ID para el pie de página del foro.

Este vídeo muestra como generar un ID Twitter desde la herramienta de widget: Ver Vídeo (en Ingles).

Abrir el archivo `FLATBOOTS/template/overall_footer.html` y buscar está línea:

    391407906655965184

Reemplace esto, por su ID Widget generado desde su cuenta de Twitter, tal y como se ha mostrado en el vídeo.

También puede configurar su Twitter, para que sea visible y se pueda hacer clic. Abrir el archivo `FLATBOOTS/template/overall_footer.html` y buscar está línea:

    <a href="https://twitter.com/SiteSplat">{L_JOIN_US_TWITTER}&nbsp;<small>@SiteSplat</small></a>

Reemplazar este enlace: `https://twitter.com/SiteSplat` con el enlace de su página de Twitter

Reemplazar este texto de Twitter: `@SiteSplat` con su nombre en Twitter

### Logo

Abrir el archivo de plantilla `FLATBOOTS/template/overall_header.html` y buscar:

    <a class="navbar-brand" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->">{L_FLATBOOTS}</a>

Reemplazar el código `{L_FLATBOOTS}` por su etiqueta IMG, vea atentamente el ejemplo:

    <img style="max-width:100px; margin-top: -8px;" src="{T_THEME_PATH}/images/logo.png" class="img-responsive" alt="Forum Logo">

#### Subir su Logo

Su logo debe ser subido en la siguiente carpeta: `FLATBOOTS/theme/images/`

Con el fin de mostrar los cambios, también necesita actualizar el caché de su foro, y caché del navegador como se muestra a continuación:

    A) Limpiar el caché:

    		1) Ir a la pestaña General del PCA.
    		2) Mirar en "Limpiar la caché".
    		3) Haga clic en el botón de la derecha "Ejecutar".
    		4) En la siguiente pantalla, haga clic en "Si" para confirmar.

    		B) Limpiar el caché del navegador:

    		1) Presione F5 en su navegador, o pulse simultáneamente CTRL+F5 en su navegador.

### Colores

Cambiar los colores con un clic con el servicio COLORIZE:

Puede encontrar el servicio COLORIZE en www.sitesplat.com/phpBB3/themer.php para generar su propio color personalizado.

Una vez que haya generado su propio color, abra la siguiente hoja de estilo CSS que se encuentra en: `FLATBOOTS/theme/custom.css` y pegue su código después del siguiente comentario de bloque en esa hoja de estilo:

#### ¡ Habilitar la hoja de estilo custom.css !

Asegúrese de habilitar la hoja de estilos custom.css en el archivo `FLATBOOTS/template/overall_header.html` como se describe aquí: Personalización

    /*****************************************************************
     * Custom CSS Stylesheet. You can add any custom CSS selectors here after the comment line.
     * They will be given the highest priority on any elements on the forum
     * Personilize your forum color scheme in one click here: www.sitesplat.com/phpBB3/
     * **************************************************************
     *
     * FLATBOOTS @SiteSplat.com - Custom CSS STYLESHEET -
     *
     * **************************************************************
     *****************************************************************/

Si desea cambiar colores manualmente se pueden encontrar algunos lugares comunes en el código CSS generado a través del servicio COLORIZE.

Por ejemplo, si quiere cambiar el color de fondo del encabezado, o el color de fondo de la barra de "Call To Action", puede encontrar las referencias comentadas en el CSS personalizado generado con COLORIZE:

    /* FLATBOOTS Teaser Header Background color */
    .masthead:before {
    	background-color: #50a846;
    }
    /* FLATBOOTS Footer Call to Action Background Color */
    .mastbottom {
    	background-color: #50a846;
    }

#### Limpiar el caché

¡ Asegúrese de limpiar el caché del foro, y caché del navegador cada vez que se agrega un nuevo color !

    A) Limpiar el caché:

    		1) Ir a la pestaña General del PCA.
    		2) Mirar en "Limpiar la caché".
    		3) Haga clic en el botón de la derecha "Ejecutar".
    		4) En la siguiente pantalla, haga clic en "Si" para confirmar.

    		B) Limpiar el caché del navegador:

    		1) Presione F5 en su navegador, o pulse simultáneamente CTRL+F5 en su navegador.

### Checkbox y Radio

¡ Botones checkbox y radio super personalizados para su estilo !

##### Características del Plugin

- Entradas idénticas a través de diferentes navegadores y dispositivos — ambos de escritorio y móviles.
- Soporte para dispositivos táctiles — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle.
- Entradas de teclado accesibles — Tab, Barra de Espacio, Flecha arriba/abajo y otros accesos directos.
- Entradas de pantalla accesibles — ARIA atributos para VoiceOver y otros.
- Libertad en la personalización — use cualquier HTML y CSS para entradas del estilo (pruebe 6 skins Retina preparados).
- 32 opciones para personalizar los botones checkbox y radio.
- 11 devoluciones de llamada para manejar los cambios.
- 9 métodos para realizar cambios mediante programación.
- Guarda los cambios de las entradas originales, trabaja con cuidado con cualquier selector.

Los colores de los checkbox y radio pueden ser cambiados fácilmente.

1. Abra la carpeta de documentación y copie el contenido de la hoja de estilo del archivo custom.css (Incluye 10 colores diferentes como se muestra en la imagen de arriba) y pégelo en: `FLATBOOTS/theme/custom.css`.

Para diferentes esquemas de colores por defecto use este código (por ejemplo para el color rojo, red).
Abrir el archivo `FLATBOOTS/template/overall_footer.html` y buscar:

    "icheckbox_flat-aero"

Reemplazar por (para el checkbox):

    "icheckbox_flat-red"

Buscar:

    "iradio_flat-aero"

Reemplazar por (para el radio):

    "iradio_flat-red"

Las definiciones de los códigos de colores listos para ser utilizados son los siguientes:

##### Checkbox

1. `"icheckbox_flat-red"`
2. `"icheckbox_flat-green"`
3. `"icheckbox_flat-blue"`
4. `"icheckbox_flat-grey"`
5. `"icheckbox_flat-orange"`
6. `"icheckbox_flat-yellow"`
7. `"icheckbox_flat-pink"`
8. `"icheckbox_flat-purple"`

##### Radio

1. `"iradio_flat-red"`
2. `"iradio_flat-green"`
3. `"iradio_flat-blue"`
4. `"iradio_flat-grey"`
5. `"iradio_flat-orange"`
6. `"iradio_flat-yellow"`
7. `"iradio_flat-pink"`
8. `"iradio_flat-purple"`

### Navegación

La barra de navegación puede ser ajustada de diferentes maneras.

Las opciones actuales son:

- Estándar - Standard (Por defecto)
- Superior Fija - Fixed Top (conocido aquí como Sticky)
- Inferior Fija - Fixed Bottom
- Cambiar/Editar enlaces

#### Superior Fija - Fixed Top

La opción de Superior Fija - Fixed Top le permitirá tener una barra de navegación Fija (Sticky), que mantendrá la posición independientemente del desplazamiento de la página principal. Esto es especialmente útil para dispositivos móviles.

Para activar la barra de navegación superior fija sólo hay que añadir dos clases a la barra de navegación, y el banner principal de cabecera.

Abrir el archivo `FLATBOOTS/template/overall_header.html` y buscar:

    <header id="top" class="navbar navbar-inverse navbar-static-top flat-nav">

Reemplazar por:

    <header id="top" class="navbar navbar-inverse navbar-static-top flat-nav navbar-fixed-top">

Abrir el archivo `FLATBOOTS/template/addons/header_teaser_body.html` y buscar:

    <div class="flat-header">

Reemplazar por:

    <div class="flat-header flat-header-fixed-top">

Hay un problema conocido con la navegación fija. Para obtener información adicional, consulte: https://github.com/twbs/bootstrap/issues/1768 y también: https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header. Sin embargo, se puede aplicar una solución. Abrir el archivo `FLATBOOTS/template/viewtopic_body.html` y buscar:

    <!-- INCLUDE overall_footer.html -->

Antes, en una nueva línea añadir:

    <script>
    head.ready(function () {
     !function(o,n){var t=function(){var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({scrollTop:n.offset().top-t},200)};o(n).on("hashchange load",function(){t()})}(jQuery,window);
    });
    </script>

#### Inferior Fija - Fixed Bottom

La opción de Inferior Fija - Fixed Bottom le permitirá tener una barra de navegación Fija (Sticky), como la opción anterior, pero la posición estará en la parte inferior del foro.

Abrir el archivo `FLATBOOTS/template/overall_header.html` y buscar:

    <header id="top" class="navbar navbar-inverse navbar-static-top flat-nav">

Reemplazar por:

    <header id="top" class="navbar navbar-inverse navbar-static-top flat-nav navbar-fixed-bottom">

#### Cambiar/Editar enlaces

Los enlaces por defecto pueden ser cambiados, editados o añadidos editando el archivo de navegación. Abrir el archivo: `FLATBOOTS/template/addons/navigation.html` con el fin de cambiar, modificar o añadir enlaces.

### Encabezado

El archivo del encabezado está almacenado en la carpeta `addons` dentro de la carpeta template (plantilla) de FLATBOOTS.

Este bloque puede ser modificado fácilmente para mostrar su lemo del foro y/o favoritas imágenes.

Las opciones actuales son:

- Estándar - Standard (Por defecto)
- Cambiar imagen y color
- Poner Animación en ON/OFF

Abrir el archivo `FLATBOOTS/template/addons/header_teaser_body.html` y buscar:

    <h1>{L_FLATBOOTS_INTRO}&nbsp;<a class="label label-call" href="http://getbootstrap.com/">{L_BOOTSTRAP_VERSION}</a></h1>
    	 <p>{L_FLATBOOTS_EXPLAIN}</p>

Las variables de idioma `{L_FLATBOOTS_INTRO}` y `{L_FLATBOOTS_EXPLAIN}` son parte del BBCore, y una vez instalado se puede encontrar, y editar para mostrar su propio texto en el siguiente archivo:`root/ext/sitesplat/BBCore/language/es/BBCore.php`

#### Cambiar la imagen y el color

La imagen de iconos por defecto puede ser cambiada desde el CSS. Asegúrese de subir la imagen en:`FLATBOOTS/theme/images/`

Añadir lo siguiente en el archivo `FLATBOOTS/theme/custom.css`:

    .masthead:before {
        background: url("./images/tile-bg-head.png");
    	background-color: #26bcb5;
    }

Reemplazar `tile-bg-head.png` por el nombre de su imagen y guardar.

Si tiene una imagen transparente también puede establecer el color de fondo a la misma. En el ejemplo por defecto se establece en: `#26bcb5` Utilice el valor hexadecimal para establecer su color.

#### Poner en ON/OFF la Animación

La animación puede ponerse facilmente en On/Off

Abrir `FLATBOOTS/theme/custom.css` y añadir los siguiente para apagar la animación:

    .masthead {
        animation-name: sideupscroll-off;
    }

### Píe de Página

El píe de página esta dividido en tres partes. Dos secciones y el bloque actual de píe de página.

- Sección 1 - Call To Action
- Sección 2 Contiene:

- About us
- Twitter

- Bloque de Píe de Pagina contiene:

- Enlaces de Navegación
- Enlaces Sociales

La plantilla de píe de página se encuentra en: `FLATBOOTS/tempalte/overall_footer.html`

#### Sección 1 - Call To Action

Está barra llamada Call To Action (Llamada de Acción) se puede encontrar en la carpeta addons. Abrir: `FLATBOOTS/template/addons/call_to_action_body.html`

Las variables de idioma `{L_CALL_TO_ACTION_FOOTER}` y `{L_PURCHASE_NOW_BTN}` son parte del BBcore, y una vez instalados se pueden encontrar, y editar para poner su propio texto en el siguiente archivo:`raíz_de_su_foro/ext/sitesplat/BBCore/language/es/BBCore.php`

#### Sección 2 - About us y Twitter

El texto de about us (Sobre Nosotros) es accesible desde el archivo de idioma. Las variables son: `{L_FLATBOOTS_ABOUT_TITLE}` y `{L_FLATBOOTS_ABOUT_PART_ONE}`

El bloque y función de Twitter se explica Aquí

Los enlaces de navegación pueden ser editados dentro del mismo archivo `FLATBOOTS/template/overall_footer.html`. Buscar:

    <ul class="list-inline footer-nav">
    	 <li><a href="{U_ADVERTISE}" title="">{L_ADVERTISE}</a></li>
    	 <li><a href="{U_PRIVACY}" title="">{L_PRIVACY}</a></li>
    	 <li><a href="{U_DMCA}" title="">{L_DMCA}</a></li>
    	 <li><a href="{U_TERMS_USE}" title="">{L_TERMS}</a></li>
    	 <li><a href="{U_CONTACT}" title="">{L_CONTACT}</a></li>
    	 </ul>

Y ahora simplemente cambie, edite, o añada enlaces contenidos en el bloque.

Los enlaces sociales, e iconos está explicado aquí: Enlaces Sociales

# Temas Recientes "Extensiones Personalizadas"

El Ajax Fancy Lazy Topics Loader puede ser descargado gratuitamente desde: SiteSplat - Fancy Lazy Topic Loader

#### ¡ Fancy Lazy Topics Loader $250+ de valor !

Puede ser instalado desde "Upload extension" o copiando el contenido en la carpeta `root/ext/` directamente.

##### Las opciones de Fancy Lazy Topics Loader (Desde PCA > General: Configuración del Sitio):

1. Mensajes a mostrar
2. Límite del días del tema
3. Clase de orden
4. Foros a excluir

# TRADUCCIONES

Puede añadir su propio paquete de idioma en su foro descargando, e instalando los paquetes oficiales de idiomas phpBB3 desde aquí: Paquetes de Idioma

Una vez instalado el paquete de idioma, necesita traducir su propio archivo de idioma de FLATBOOTS. Este archivo se instala automáticamente con el paquete BBCore.

La ubicación es la siguiente: `ext/sitesplat/BBCore/language/es/BBcore.php` (ya se encuentra traducido). Abrir el archivo BBCore.php con notepad++, traduzca el contenido y guarde el archivo de nuevo. Ahora necesita incluir el archivo BBCore.php a la carpeta de idioma dentro del directorio del BBCore `ext/sitesplat/BBCore/language/` (previamente instalado). Por ejemplo, si ha instalado el idioma Francés, la ubicación de su copia del archivo BBCore.php file es está: `root/ext/sitesplat/BBCore/language/fr/`

#### Paquetes de idioma ya disponibles

Mire en el foro oficial de soporte: Paquetes de Idiomas FLATBOOTS y vea si ya existe un archivo de su idioma traducido.

# EXTENSIONES

La extensión es el nuevo sistema de phpBB 3.2 que permite al Administrador del foro "extender" la funcionalidad básica del foro phpBB. Si conoce WordPress y su sistema de plugins, se encontrará cómodo con las extensiones también.

Una vez subido al directorio `/ext/` de su servidor, raíz de su foro, será capaz de activar directamente desde el Panel de Control de la Administración con un clic de botón.

#### Toneladas de extensiones gratuitas

Visite el sitio oficial, cada vez un mayor foro de soporte a la comunidad en:http://sitesplat.com para buscar todas las extensiones disponibles. ¡ También puede crear sus solicitudes de nuevas extensiones, y/o desarrollos a medida con el fin de dar forma a su comunidad según sus necesidades !

AYUDEN A OTROS ADMIN Y FLATBOOTS, DANDO 5 ESTRELLAS!

VALORAR AQUÍ