Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Barra lateral en estilo prosilverTema Solucionado

Dudas sobre estilos phpBB 3.0.x
Colaboraciones gráficas paquetes de rangos aquí y botones aquí.
Cerrado
Avatar de Usuario
ThE KuKa
Administrador
Mensajes: 10374
Registrado: 04 Ene 2004, 19:27
Género:
Edad: 49

Barra lateral en estilo prosilver  Tema Solucionado

#1

Mensaje por ThE KuKa »

Barra lateral en estilo prosilver

Escrito por: Christian Bullock
Traducción: ThE KuKa (Raul) - https://www.phpbb-es.com
Descripción: Tutorial completo para poner una barra lateral en estilo prosilver, se puede poner la barra en el lado izquierdo, derecho y/o ambos lados.

Siguiendo este tutorial se instalará 6 variaciones laterales diferentes a su foro, fácilmente intercambiable con una línea de código. Todas las barras laterales son sin tablas y validan como XHTML 1.0 Strict.
Imagen ImagenImagen

PASO 1: Crear los archivos de barras laterales.

Para mantener nuestros archivos de plantilla "limpios" y libres de desorden, vamos a crear nuestros propios archivos de plantilla.
  1. Abrir Notepad++ y crear dos archivos nuevos llamados sidebar_left.html y otro sidebar_right.html
  2. Ahora subimos los archivos creados a la carpeta /styles/prosilver/template/ usando nuestro cliente FTP.
Imagen

PASO 2: Edición HTML

En primer lugar, vamos a introducir las variables que se van a utilizar para el control de las barras laterales. Hablaremos de esto con más detalle más adelante.
Abrir archivo /styles/prosilver/template/overall_header.html Buscar - Nota: Esto puede ser una búsqueda parcial, y no una línea entera.

Código: Seleccionar todo

<head>
Añadir después - Nota: Añadir las siguientes líneas en una nueva línea, después de la línea encontrada.

Código: Seleccionar todo

<!-- DEFINE $SIDEBARS = 'both' --> <!-- Options: Left | Right | Both | Off -->
<!-- DEFINE $SIDEBAR_ON_PAGES = 'global' --> <!-- Options: Global | Index -->
Ahora tenemos que quitar el div #page-header En realidad, no hace nada y su presencia causa problemas con las etiquetas de cierre de la barra lateral.

Así que en el mismo archivo.
Buscar - Nota: Esto puede ser una búsqueda parcial, y no una línea entera.

Código: Seleccionar todo

<div id="page-header">
Borrar - Nota: Quitar la(s) línea(s) encontradas en la búsqueda. Buscar - Nota: Esto puede ser una búsqueda parcial, y no una línea entera.

Código: Seleccionar todo

    </div>

    <a name="start_here"></a>
Reemplazar por - Nota: Reemplazar las líneas a encontrar por las siguientes líneas.

Código: Seleccionar todo

<a name="start_here"></a>
Ahora vamos a añadir nuestro código estructural de la barra lateral, y por supuesto seguimos en el mismo archivo.
Buscar - Nota: Esto puede ser una búsqueda parcial, y no una línea entera.

Código: Seleccionar todo

<div class="navbar">
Añadir antes - Nota: Añadir las siguientes líneas en una nueva línea, antes de la línea encontrada.

Código: Seleccionar todo

<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index') -->
<!-- IF $SIDEBARS != 'off' -->
    <div class="sidebarwrapper">
<!-- ENDIF -->
    <!-- IF $SIDEBARS == 'left' -->
        <div class="fixedfluid-sidebar">
            <!-- INCLUDE sidebar_left.html -->
        </div>
       
        <div class="fixedfluid-content">
    <!-- ELSEIF $SIDEBARS == 'right' -->
        <div class="fluidfixed-sidebar">
            <!-- INCLUDE sidebar_right.html -->
        </div>
       
        <div class="fluidfixed-content">
    <!-- ELSEIF $SIDEBARS == 'both' -->
        <div class="fixedfluidfixed-left">
            <!-- INCLUDE sidebar_left.html -->
        </div>
       
        <div class="fixedfluidfixed-content">
    <!-- ENDIF -->
<!-- ENDIF -->
Y por supuesto, para cada etiqueta que abrimos, después debemos cerrarlas, y eso vamos a hacer ahora.
Abrir archivo /styles/prosilver/template/overall_footer.html Buscar - Nota: Esto puede ser una búsqueda parcial, y no una línea entera.

Código: Seleccionar todo

<div class="copyright">{CREDIT_LINE}
Añadir antes - Nota: Añadir las siguientes líneas en una nueva línea, antes de la línea encontrada.

Código: Seleccionar todo

<!-- IF $SIDEBAR_ON_PAGES == 'global' or ($SIDEBAR_ON_PAGES == 'index' and SCRIPT_NAME == 'index')-->
    <!-- IF $SIDEBARS == 'left' or $SIDEBARS == 'right' -->
        </div><!-- /.fixedfluidcontent -->
        </div><!-- /.sidebarwrapper -->
    <!-- ELSEIF $SIDEBARS == 'both' -->
        </div>
        <div class="fixedfluidfixed-right">
            <!-- INCLUDE sidebar_right.html -->
        </div>
        </div>
    <!-- ENDIF -->
<!-- ENDIF -->

PASO 3: Edición CSS

Por suerte, no estamos realmente con una edición completa de CSS. Simplemente estamos añadiendo algunas líneas nuevas para definir la estructura y ayudar con el estilo.
Abrir archivo /styles/prosilver/theme/common.css Buscar - Nota: Esto puede ser una búsqueda parcial, y no una línea entera.

Código: Seleccionar todo

Ir al final del archivo...
Añadir antes - Nota: Añadir las siguientes líneas en una nueva línea, antes de la línea encontrada.

Código: Seleccionar todo

/* Sidebars */
.sidebarwrapper {
    position: relative;
}

/* left sidebar, right section */
.fixedfluid-content {
    padding: 0 0 0 170px;
    background: white;
}

/* left sidebar */
.fixedfluid-sidebar, .fixedfluidfixed-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 160px;
    bottom: 0;
    padding: 0;
}

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 270px;
    background: white;
}

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 260px;
    bottom: 0;
    padding: 0;
}

/* Both sidebars, middle section */
.fixedfluidfixed-content {
    padding: 0 270px 0 170px;
    background: white;
}

/* Sidebar Styling */

.ad1, .ad2 {
    display: block;
    float: left;
}

.ad1 {
    margin: 0 10px 10px 0; 
}

.fixedfluid-sidebar ul.sidebar li, .fluidfixed-sidebar ul.sidebar li, .fixedfluidfixed-left ul.sidebar li, .fixedfluidfixed-right ul.sidebar li {
    padding: 5px 10px; 
}

PASO 4: Instrucciones de Uso.

Los Administradores tienen varias opciones una vez instaladas las barras laterales. Estas se pueden establecer mediante la modificación de las siguientes líneas de código en el archivo overall_header.html

Código: Seleccionar todo

<!-- DEFINE $SIDEBARS = 'both' -->
Opciones:
  • Left: La barra lateral solamente se mostrará en el lado izquierdo.
  • Right: La barra lateral solamente se mostrará en el lado derecho.
  • Both: Las barras laterales se mostraran simultáneamente en el foro, en el lado izquierdo y derecho.
  • Off: No se mostrará ninguna de las barras laterales.
Hay otras opciones disponibles para los Administradores que deseen restringir las páginas donde se mostraran las barras laterales.

Código: Seleccionar todo

<!-- DEFINE $SIDEBAR_ON_PAGES = 'global' -->
Opciones:
  • Global: Las barras laterales se mostrarán en todas las páginas del foro, incluido el Panel de control de usuario y páginas de inicio de sesión.
  • Index: Las barras laterales sólo aparecerán en el índice del foro.

Ajustando el ancho de la barra lateral.

Es muy probable que usted desee ajustar el ancho de la barra lateral para acomodar sus necesidades de publicidad. Debido a la naturaleza sin tablas de las barras laterales, el ajuste de anchos es delicado y difícil. Esencialmente, es importante recordar que cuando la anchura lateral se edita, el propio contenido de la anchura del foro también debe ser ajustado. Así que si se aumenta el ancho de la barra lateral derecha en 10px, la anchura de la parte izquierda debe reducirse 10px.

Por poner un ejemplo, vamos a ajustar el ancho de la barra lateral izquierda. El código está aquí, en el archivo common.css

Código: Seleccionar todo

/* right sidebar */
.fluidfixed-sidebar, .fixedfluidfixed-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 260px;
    bottom: 0;
    padding: 0;
}
Para aumentar la anchura, simplemente reemplazamos 260px con un valor más grande, como 300px
Tenga en cuenta que ahora hemos aumentado el ancho en 40px y para evitar la superposición de la barra lateral con el contenido del foro, ahora tenemos que reducir el ancho del panel izquierdo 40px.

Esto también lo hacemos desde el archivo common.css

Código: Seleccionar todo

/* right sidebar, left section */
.fluidfixed-content {
    padding-right: 270px;
    background: white;
}
Aquí es donde las cosas se ponen un poco confuso. Para reducir el ancho de la parte izquierda, que realmente se necesita para aumentar el valor de relleno adecuado. El valor de relleno derecha aumenta la distancia entre el lado derecho del foro y el navegador. La barra lateral flota sobre el espacio en blanco esto deja. Así que nos gustaría reemplazar 270px por 310px
(270px + 40px). Si está parte te confunde en algo, consulta en el foro de Soporte Estilos por favor.

PASO 5: Añadiendo contenido a las barras.

Recordando de nuevo el Paso 1, el contenido de la barra lateral se extrae de los archivos de plantilla. sidebar_left.html llena la barra lateral izquierda, mientras que sidebar_right.html llena la barra lateral derecha.

Estos son algunos códigos de ejemplo que usted puede copiar/pegar/modificar en sus archivos la barra lateral:
Imagen

Código: Seleccionar todo

<div class="forabg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Block 1</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist sidebar">
            <li class="bg1">Row</li>
            <li class="bg2">Row</li>
            <li class="bg1">Row</li>
            <li class="bg2">Row</li>
            <li class="bg1">Row</li>                      
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>
Imagen

Código: Seleccionar todo

<div class="forumbg">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="topiclist">
            <li class="header">
                <dl class="icon">
                    <dt>Block 2</dt>
                </dl>
            </li>
        </ul>
        <ul class="topiclist sidebar">
            <li class="bg1">Row</li>
            <li class="bg2">Row</li>
            <li class="bg1">Row</li>
            <li class="bg2">Row</li>
            <li class="bg1">Row</li>                      
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>
Imagen

Código: Seleccionar todo

<div class="panel bg1">
    <div class="inner"><span class="corners-top"><span></span></span>
        Panel 1
    <span class="corners-bottom"><span></span></span></div>
</div>

<br />

<div class="panel bg2">
    <div class="inner"><span class="corners-top"><span></span></span>
        Panel 2
    <span class="corners-bottom"><span></span></span></div>
</div>

<br />
Imagen

Código: Seleccionar todo

<a class="ad1" href="#"><img src="{T_THEME_PATH}/images/1.gif" width="125" height="125" alt="" /></a>
<a class="ad2" href="#"><img src="{T_THEME_PATH}/images/2.gif" width="125" height="125" alt="" /></a>
<a class="ad1" href="#"><img src="{T_THEME_PATH}/images/3.gif" width="125" height="125" alt="" /></a>
<a class="ad2" href="#"><img src="{T_THEME_PATH}/images/4.gif" width="125" height="125" alt="" /></a>

Finalizando.

Esta no es una traducción "literal" del artículo de Christian Bullock, reitero lo dicho antes, si hay algún tipo de duda, formular la pregunta en el foro oportuno por favor.

📌 Raul [ThE KuKa] en phpBB 📌
✅ Jr. Extension Validator - Jr. Styles Validator - Style Customisations - Translator - International Support Team
✅

Si te gustan mis estilos, traducciones, etc. y quieres mostrar algo de aprecio, no dudes en hacer una donación Imagen
:flag_es: phpBB España - En línea desde 2003 :heart:



Cerrado

Volver a “Soporte para Estilos phpBB 3.0.x”