Selector de colores para estilos phpBBTema Solucionado

[nextgen]

Alguna vez has deseado que tus usuarios puedan elegir entre una de las múltiples combinaciones de colores o fondos? Este tutorial te enseña cómo agregar un selector de colores identico al de phpBB-Es y el del estilo Supernova.

Que es lo que se trata de lograr?

El usuario cada ves más busca personalizar su foro. Cosas como las categorías desplegables, barras laterales desplegables, fondos personalizables, opciones de combinación de colores son todas las cosas que nadie podía imaginar que habría existido en los estilos de hace 5 años. Ahora tienen un papel importante. Este tutorial te enseña como agregar un selector de color.

Preparación

Primero necesitas un editor de código decente para completar este tutorial, el más recomendable es el notepad++ también tienes que descargar este archivo ya que sera necesario para completar el tutorial.

stylesheet-switcher.zip

Copia: /stylesheet-switcher/jquery.cookie.js al /styles/prosilver/template/
Copia: /stylesheet-switcher/blank.css al /styles/prosilver/theme/
Copia: /stylesheet-switcher/colours al /styles/prosilver/theme/

En primer lugar tenemos que hacer la conexión con la JQuery y el plugin "cookie".
Ahora vamos a enlazar con la hoja de estilos en blanco (se usa para reemplazar la información de estilo al estilo predeterminado). Por último, todo lo que tenemos que hacer es añadir los enlaces que el usuario al final utilizara para cambiar entre las hojas de estilo.

Paso 1) Edición del HTML

Abrir:

Código: Seleccionar todo

raíz/styles/prosilver/template/overall_header.html

Buscar:

Código: Seleccionar todo

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>

Debajo, agregar:
Aquí es donde esta toda la magia. Debe ser sencillo de entender la lectura a través del código.

Código: Seleccionar todo

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- If the above line is already present, don't add it again -->
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/jquery.cookie.js"></script>

Buscar:

Código: Seleccionar todo

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
    <link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

Debajo, agregar:

Código: Seleccionar todo

<!-- Blank stylesheet connection ** Do not delete ** //-->
<link rel="stylesheet" href="{T_THEME_PATH}/blank.css" type="text/css" class="colour-switcher" />
<!-- End of blank stylesheet //-->
<!-- This javascript needs to be after the blank stylesheet for it to work properly -->
<script type="text/javascript">
      if($.cookie("colour-choice")) {
         $("link.colour-switcher").attr("href",$.cookie("colour-choice"));
      }
   $(document).ready(function() {
      $("a.switch").click(function() {
         $("link.colour-switcher").attr("href",$(this).attr('rel'));
         $.cookie("colour-choice",$(this).attr('rel'), {expires: 365, path: '/'});
         return false;
      });
   });
</script>

Buscar:

Código: Seleccionar todo

<a name="start_here"></a>

Debajo, agregar:

Código: Seleccionar todo

<br /><br />
<div class="navbar">
    <div class="inner"><span class="corners-top"><span></span></span>
        <ul class="linklist rightside">
            <li><strong>Colour:</strong></li>
            <li><a href="#" rel="{T_THEME_PATH}/colours/red.css" class="switch">Red</a> &bull; </li>
            <li><a href="#" rel="{T_THEME_PATH}/colours/green.css" class="switch">Green</a> &bull; </li>
            <li><a href="#" rel="{T_THEME_PATH}/colours/yellow.css" class="switch">Yellow</a> &bull; </li>
            <li><a href="#" rel="{T_STYLESHEET_LINK}" class="switch">Default</a></li>
        </ul>
    <span class="corners-bottom"><span></span></span></div>
</div>

Presta atención a los rel = "" ya que ahí estamos haciendo la llamada a cada una de las hojas de estilo. También vamos a añadir un vínculo que enlaza con el estilo predeterminado del estilo. En esencia, se define la hoja de estilos dos veces el mismo, pero es mucho más graciosa que escribir un "cookie" en blanco sobre la elección del color del usuario y luego por la fuerza a actualizar la página.

Paso 2) Edición CSS

Este paso necesita un gran involucramiento del usuario. Aquellos que sepan de CSS se les hará fácil el incluir las funciones necesarias para el estilo, pero si no tienen un conocimiento decente, definitivamente no es para ustedes.

Aqui esta una parte del green.css:

Código: Seleccionar todo

/* Green stylesheet. Override everything here.
This is called after phpBB's stylesheet, so !important shouldn't be required in most cases */
html, body {
    background-color: #009900;
}

Cuando se activa el background del green.css. el color #009900 anulará el del prosilver que por defecto es blanco. En lugar de utilizar colores es posible añadir cualquier otra información del estilo para cambiar elementos. Por ejemplo, podría reemplazar el forabg, forumbg y cambiar el color de la categoría/los borders del foro. Se puede reemplazar. el headerbar cambiar el encabezado azul, o simplemente dar a sus usuarios una selección de imágenes de fondo en lugar de colores diferentes.

Suponiendo que has hecho todo correctamente, ahora debería ser capaz de cambiar los colores de tu estilo, haga clic en los enlaces de diferentes colores.

Terminado!

Tutorial sacado de: Christian Bullock