Theme multicolor [styleswitch]

Started by Pipee, February 13, 2014, 10:40:18 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Pipee

Muy buenas!

Bueno viendo el post de Arnau sobre hacer un theme multicolor, haré un tutorial de la forma que uso, frecuentemente, esta forma la implemente en el theme "FlanK".

Buscamos en nuestro index.template lo siguiente:

$settings['require_theme_strings'] = false;

y lo remplazamos por:
$settings['require_theme_strings'] = true;



// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';


Lo remplazamos por:
// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
    if (!empty($settings['style_switcher']) OR ($settings['style_switcher'])== 1)
{
            echo '
<link rel="stylesheet" type="text/css" title="default" href="', $settings['theme_url'], '/css/index.css" />';
    }
    else
{
if (($settings['style_switcher'])== 0)
{
            echo '
<link rel="stylesheet" type="text/css"title="default" href="', $settings['theme_url'], '/css/index.css" />';
}
    }


Eso hará que se pueda activar desde la administración cierta función.

Para añadir colores ponen lo siguiente debajo de
Quote// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
    if (!empty($settings['style_switcher']) OR ($settings['style_switcher'])== 1)
   {
            echo '
            <link rel="stylesheet" type="text/css" title="default" href="', $settings['theme_url'], '/css/index.css" />

Lo siguiente:
<link rel="alternate stylesheet" type="text/css" title="Nombre del color" href="', $settings['theme_url'], '/css/variants/Css del color.css" />

En el css del color, no es necesario que se llame igual que el nombre.

Buscamos en el index.template:
// Here comes the JavaScript bits!
echo '

Agregamos abajo:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/styleswitch.js"></script>


Ahora, para cambiar el color por medio de un "Link", pondríamos lo siguiente:

<ul class="colores">
<li>Colores:
  <a id="css del boton" onclick="javascript:chooseStyle(\'nombre del nuevo color\', 60)">Nombre del color</a>
</ul>


Un ejemplo:
Añadi este color:
<link rel="alternate stylesheet" type="text/css" title="rojo" href="', $settings['theme_url'], '/css/variants/rojo.css" />

El link debería quedar así:
<a id="css del boton" onclick="javascript:chooseStyle(\'rojo\', 60)">Color Rojo</a>

Ahora buscamos en tu settings.template:
array(
'id' => 'enable_news',
'label' => $txt['enable_random_news'],
),
'',


Agregamos abajo:
array(
'id' => 'style_switcher',
'label' => $txt['style_switcher'],
),
'',






Añades el archivo styleswitch.js, en la carpeta scripts de tu theme.

Añades el archivo ThemeStrings.english.php en la carpeta languages, no es necesario que sea english, lo puedes remplazar por el idioma que tienes en default.
Last Edit: August 20, 2019, 09:21:59 PM by Diego Andrés

Aboul

Buenas...
No entendí ciertas cosas como por ejemplo:

Donde colocamos lo siguiente:




<ul class="colores">
<li>Colores:
        <a id="css del boton" onclick="javascript:chooseStyle(\'nombre del nuevo color\', 60)">Nombre del color</a>
</ul>




Y todo el final no lo entendi.

Pipee

Quote from: Aboul on February 13, 2014, 01:57:41 PM
Buenas...
No entendí ciertas cosas como por ejemplo:

Donde colocamos lo siguiente:




<ul class="colores">
<li>Colores:
        <a id="css del boton" onclick="javascript:chooseStyle(\'nombre del nuevo color\', 60)">Nombre del color</a>
</ul>




Y todo el final no lo entendi.

Ese es el "menu" por así decirlo, de cambiar el color, eso lo puedes poner en tu header... etc..

KaoX00

 ;D Gracias, Pipee.

Más tarde lo probare, lo único que puedo hacer es darte las gracias.
Se agradece este gran tutorial.