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
Código: Seleccionar todo
<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/forum_fn.js"></script>
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>
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 -->
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>
Código: Seleccionar todo
<a name="start_here"></a>
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> • </li>
<li><a href="#" rel="{T_THEME_PATH}/colours/green.css" class="switch">Green</a> • </li>
<li><a href="#" rel="{T_THEME_PATH}/colours/yellow.css" class="switch">Yellow</a> • </li>
<li><a href="#" rel="{T_STYLESHEET_LINK}" class="switch">Default</a></li>
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
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;
}
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