Hacer tu theme multicolor (Una manera)

[Arnau]

·Antes de empezar el tutorial aclare unos aspectos, tutorial realizado y comprovado por mi.
·El titulo del tema dice una manera entre parentesis porque también existe la opción de cambiar de color al theme como lo tiene el Bluez Color. (Si también deseasen hacerlo de esa manera comentarlo y explico encantado).

Empezamos:
Abrimos el index.template.php y buscamos:

Code Select Expand

// 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" />';

Reemplazar por:

Code Select Expand

// 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.css?fin20" />
   <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';


Buscar:

Code Select Expand

<div class="user">';

Agregar antes:

Code Select Expand

<div id="colores">
          <a href="'.$scripturl.'?variant=default"><span class="default"></span></a>
         <a href="'.$scripturl.'?variant=red"><span class="red"></span></a>
         <a href="'.$scripturl.'?variant=green"><span class="green"></span></a>
      </div>

Buscar algo asi, puede que alguna parte no la tengan igual no pasa nada:

Code Select Expand

/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
   $settings['require_theme_strings'] = false;

Agregar despues:

Code Select Expand

/*Theme changer*/
   $settings['theme_variants'] = array('default', 'green', 'red');

Abrimos el index.css y agregamos al final:

Code Select Expand

#colores {
    background: -moz-linear-gradient(top, hsla(0,0%,100%,1) 0%, hsla(0,0%,90%,1) 100%);
   border: 1px solid #999;
    border-radius: 4px;
    height: 20px;
   float: right;
    margin: 4px 0 -1px 82px;
    padding: 3px 0 3px 12px;
    width: 164px;
}
#colores span.red {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DA4F49;
    background-image: -moz-linear-gradient(center top , #EE5F5B, #BD362F);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-image: none;
    border-style: solid;
    border-width: 1px;
    display: inline;
    float: left;
    height: 18px;
    margin-right: 2px;
    width: 18px;
}
#colores span.green {
    background-image: linear-gradient(to bottom, #7EE594, #2DB54A);
    border: 1px solid #1EA13A;
    display: inline;
    float: left;
    height: 18px;
    margin-right: 2px;
    width: 18px;
}
#colores span.default {
    background-image: url(../images/theme/main_block.png);
    border: 1px solid #c6c6c6;
    display: inline;
    float: left;
    height: 18px;
    margin-right: 2px;
    width: 18px;
}

La siguiente parte solo la explicare una vez, vosotros en la segunda vez copian el codigo y cambian los codigos hexadecimales:
Creamos un nuevo archivo y pegamos el siguiente codigo (es el archivo que cambiara el theme en rojo):

Code Select Expand

#header, div.cat_bar, h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg, #footer,tr.catbg th.first_th, tr.catbg th.last_th,
tr.titlebg th.first_th,tr.titlebg th.last_th, .titlebg, .titlebg2, tr.titlebg th, tr.titlebg td, tr.titlebg2 td, .catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
   background: #e50505;
   background: -moz-linear-gradient(top,  #e50505 0%, #cf0404 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e50505), color-stop(100%,#cf0404));
   background: -webkit-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: -o-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: -ms-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: linear-gradient(to bottom,  #e50505 0%,#cf0404 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e50505', endColorstr='#cf0404',GradientType=0 );
}
#header div.frame{
background: #e50505;
   background: -moz-linear-gradient(top,  #e50505 0%, #cf0404 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e50505), color-stop(100%,#cf0404));
   background: -webkit-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: -o-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: -ms-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: linear-gradient(to bottom,  #e50505 0%,#cf0404 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e50505', endColorstr='#cf0404',GradientType=0 );
}
Lo guardamos en la carpeta css con el siguiente nombre index_red.css
Creamos las siguientes carpetas en Themes/tutheme/images:
_default :
_red 

Copiamos y pegamos dentro de ellas las imagenes on on2 y off.

Para agregar nuevos colores seria lo mismo, el proceso es repetitivo, si no saben preguntad, estamos para ayudar.

PD: Basado en el theme default.

Imagenes:

[Pipee]

Muy buen aporte Arnau.

1+

[KaoX00]

Muy buen tuto, pero oye tengo una duda, para tener un poco mas organizado cambie donde van los index_red.css, index_blue.css

Code Select Expand

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

Hacia este directorio "variants"

Code Select Expand

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/variants/index', $context['theme_variant'], '.css?fin20" />';

Si quiero cambiar algunas imágenes, las carpetas "_red,  _blue, etc" las debo colocar en Themes/tutheme/images o debo crear un carpeta variants, y meterlas alli? Themes/tutheme/images/variants

Saludos.

[Arnau]

Deberias colocarlas como dice el propio tutorial,  en Themes/tutheme/images.
Lo unico que ha cambiado por el cambio que has hecho, que los archivos css los deberas colocar en la carpeta variants, solo eso.

[KaoX00]

Deberias colocarlas como dice el propio tutorial,  en Themes/tutheme/images.
Lo unico que ha cambiado por el cambio que has hecho, que los archivos css los deberas colocar en la carpeta variants, solo eso.

Oh!, Ok gracias por responder.

[KaoX00]

Hola de nuevo, lamento molestar  , pero me ha surgido una duda...
Como se tendría que hacer para que al cambiar de color, no tenga que recargar la página de nuevo?

Saludos.
(creo que se usa un script, pero no tengo idea de cual, ni como se usa  )

[Arnau]

Hola de nuevo, lamento molestar  , pero me ha surgido una duda...
Como se tendría que hacer para que al cambiar de color, no tenga que recargar la página de nuevo?

Saludos.
(creo que se usa un script, pero no tengo idea de cual, ni como se usa  )

Lamento decirte que desconozco la manera de cambiar de color sin recargar la página, supongo que seria con jquery, si descubro la manera de cambiar de color de theme sin recargar página crearia un tutorial para ello, sientendolo mucho te tendrás que conformar con esta manera, que al menos cumple la función que tu quieres.

Cuando tenga tiempo ya investigare haber si encuentro la manera.

[Pipee]

Hola de nuevo, lamento molestar  , pero me ha surgido una duda...
Como se tendría que hacer para que al cambiar de color, no tenga que recargar la página de nuevo?

Saludos.
(creo que se usa un script, pero no tengo idea de cual, ni como se usa  )

Probablemente ahora, publique un tutorial sobre ello.