Hacer tu theme multicolor (Una manera)

Started by Arnau, December 19, 2013, 02:13:18 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

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:
// 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:
// 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:
<div class="user">';

Agregar antes:
<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:
/* 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:
/*Theme changer*/
   $settings['theme_variants'] = array('default', 'green', 'red');


Abrimos el index.css y agregamos al final:
#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):
#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:

Last Edit: August 20, 2019, 09:22:12 PM by Diego Andrés

Pipee


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

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

Hacia este directorio "variants"
<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

Quote from: Arnau on January 09, 2014, 09:10:10 AM
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  :P)

Arnau

Quote from: KaoX00 on February 12, 2014, 09:55:18 PM
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  :P)
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

Quote from: KaoX00 on February 12, 2014, 09:55:18 PM
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  :P)

Probablemente ahora, publique un tutorial sobre ello.