19 Oct Configurar CSS en Vivo
Es muy común, sobre todo para los desarrolladores de plantillas para wordpress, darle la oportunidad al usuario de ver las posibilidades que tiene con respecto al css, antes de comprar.
Me explico: Estoy hablando de la caja de configuración que aparece en un lateral de la página en la mayoría de temas de wordpress donde puedes cambiar colores, fondos, anchura, etc.
Échale un vistazo a la demo, para saber de que estoy hablando:
Puedes descargarte el archivo completo al final de la entreda.
Bueno, voy a explicar por partes todo el proceso, aunque la verdad que no tiene mucha complicación.
El primer paso es añadir los links de jquery, fontawesome (para el icono del botón de configuración) y el css del configurador antes del cierre de la etiqueta head:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href="css/switcher.css" rel="stylesheet" style="text/css" />
Para utilizar los iconos de fontawesome, también puedes descargarte el archivo en su página fontawesome.io y añadirlo a tu proyecto, pero como sólo utilizaremos un icono, creo que sería una tontería darle más peso a nuestra carpeta.
El siguiente paso es añadir un div (en este caso con un id #switcher) dentro del HTML donde quieres que se muestre:
<!-- switcher box --> <div id="switcher"> <div class="box"> <ul> <span>Width:</span> <li class="select"> <select> <option value="boxed">boxed</option> <option value="full">full width</option> </select> </li> <li class="cPicker"> <span>Color:</span> <div></div> </li> <li> <span>Pattern:</span> <ul> <li> <div class="pattern1"><a href="#"></a></div> </li> <li> <div class="pattern2"><a href="#"></a></div> </li> <li> <div class="pattern3"><a href="#"></a></div> </li> </ul> </li> </ul> </div> <div class="toggle"><a href="#"><i class="fa fa-cog fa-spin"></i></a></div> </div>
Da igual donde pegues el código, porque tendrá una posición fija.
El div class=»box» es la caja oculta, el panel de control:
Donde añadimos un select con 2 opciones (boxed y full) para el ancho del div contenedor, un div para el color y 3 div más para la imágen de fondo del body (pattern1, pattern2 y pattern3).
Y el div class=»toggle» es el botón para mostrar la caja:
Donde le añadimos una etiqueta i con la clase fa fa-cog fa-spin. Puedes poner el icono que más te guste, fontawesome tiene para parar un tren.
Ahora creamos nuetro switcher.css:
/*
------- switcher -------
*/
#switcher {
z-index: 9;
margin-top: 17%;
position: fixed;
overflow: auto;
padding-bottom: 2px;
width: 241px;
top: 0;
}
.box {
background-color: #fff;
margin-left: -190px;
float: left;
border: 1px solid #cecece;
padding: 20px;
transition: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
}
.box ul span {
font-size: 13px;
margin: 10px 0 10px 0;
display: block;
}
.select select {
padding: 10px;
width: 147px;
border: 1px solid #cecece;
}
.toggle {float: left;}
.toggle a {
background-color: #f5f5f5;
border-top: 1px solid #cecece;
border-right: 1px solid #cecece;
border-bottom: 1px solid #cecece;
border-radius: 0 3px 3px 0;
display: block;
padding: 15px;
text-align: center;
font-size: 24px;
color: #919191;
}
.show {margin-left: 0px;}
.cPicker div {
background-color: #68d975;
cursor: pointer;
width: 100%;
height: 20px;
border: 1px solid #cecece;
}
.boxed {
max-width: 990px;
margin: 0 auto;
}
.full {width: 100%;}
.colorpicker {z-index: 99;}
.box ul li>ul {
margin-top: 10px;
overflow: auto;
padding-bottom: 2px;
}
.box ul li>ul li {
float: left;
margin-left: 5px;
}
.box ul li>ul li a {
border: 1px solid #cecece;
width: 20px;
height: 20px;
display: block;
}
.pattern1 {background: url(../images/pattern/dark_exa.png) repeat;}
.pattern2 {background: url(../images/pattern/footer_lodyas.png) repeat;}
.pattern3 {background: url(../images/pattern/swirl_pattern.png) repeat;}
Verás que en las clases .pattern1, .pattern2 y .pattern3 añadimos unas imágenes de fondo de dentro de la carpeta images/pattern. Puedes descargarte patrones de subtlepatterns.com, que tiene para aburrir.
*Ojo, yo utilizo reset.css de Eric Meyer. Es posible que si utilizas otra oja de estilos el resultado no sea el mismo, pero te aconsejo que lo añadas a tu proyecto para tener mayor libertad en el diseño:
<link href="css/reset.css" rel="stylesheet" style="text/css" />
Entonces sólo nos falta la clave para que todo esto funcione, el jQuery.
Crea una etiqueta script antes del cierre del body e inicializa jQuery:
$(document).ready(function(){
//aquí nuestro código
});
Primero de todo añadimos la siguiente sintaxis dentro del código anterior:
//show - hide box
$('.toggle').click(function(){
$('.box').toggleClass('show');
});
Aquí le estamos diciendo que al hacer click al div .toggle muestre y oculte la caja .box utilizando la clase .show, que en este caso lo que hace es darle un margen izquierdo de 0px. Recuerda que en el css a la clase .box le hemos puesto un margin-left de -190px, que es el ancho total de la caja. Si tu caja queda más o menos ancha, tendrás que modificar esta clase.
Ahora le toca al color. Para ello he utilizado la librería ColorPicker, que (como dicen en su página) es un sencillo componenete para seleccionar el color de la misma manera que seleccionas el color en Adobe Photoshop.
Descargate el archivo y añade los respectivos links de esta libreria entre la etiqueta head:
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /> <script type="text/javascript" src="js/colorpicker.js"></script>
Justo debajo del código anterior pegamos el siguiente:
//colorPicker
$('.cPicker').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('.cPicker div').css('backgroundColor', '#' + hex);
$('header').css('backgroundColor', '#' + hex);
}
});
Básicamente he copiado el mismo código de la página de ColorPicker donde enseña cómo utilizarlo y lo único que he hecho ha sido cambiar la clase que venia por defecto por .cPicker y .cPicker div, que es la clase del li donde está el div con el color seleccionado y le he añadido $(‘header’).css(‘backgroundColor’, ‘#’ + hex); que lo que hace es cambiar el color del header. Aquí es donde tienes que añadir todos los componentes a los que les quieres cambiar el color.
Vamos con el ancho del div contenedor.
He añadido un div con un id #container a mi código html que envuelve todo el contenido de mi página y al que por defecto, en el css, le he puesto un ancho (width) de 990px y un margin: 0 auto; para centrarlo.
En nuestro código jQuery añadimos lo siguiente:
//select boxed - full width
$('select').on('change',function(){
op = $('select').val();
if(op == 'full'){
$('#container').css('max-width','100%');
}
if(op == 'boxed'){
$('#container').css('max-width','990px');
}
});
Le decimos que al cambiar el valor de la etiqueta select cree una variable var op que es el valor seleccionado. Y le añadimos un par de condiciones:
1.- Si la opción seleccionada es ‘full‘ modifica el ancho del div #container al 100%.
2.- Si la opción es boxed modifica el ancho a 990px.
Ya sólo nos queda poder cambiar la imágen de fondo del body.
Pega el siguiente código:
//body background image
$('.pattern1 a').click(function(){
$('body').css('background-image','url(images/pattern/dark_exa.png)');
});
$('.pattern2 a').click(function(){
$('body').css('background-image','url(images/pattern/footer_lodyas.png)');
});
$('.pattern3 a').click(function(){
$('body').css('background-image','url(images/pattern/swirl_pattern.png)');
});
Es bien fácil. Si hacemos click a la clase (en el primer caso) .pattern1 a cambiar el estilo al body añadiendo la imagen dark_exa.png. No tiene más misterio.
Aquí te dejo una muestra del código jQuery completo:
$(document).ready(function(){
//show - hide box
$('.toggle').click(function(){
$('.box').toggleClass('show');
});
//colorPicker
$('.cPicker').ColorPicker({
color: '#0000ff',
onShow: function (colpkr) {
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$('.cPicker div').css('backgroundColor', '#' + hex);
$('header').css('backgroundColor', '#' + hex);
}
});
//select boxed - full width
$('select').on('change',function(){
var op = $('select').val();
if(op == 'full'){
$('#container').css('max-width','100%');
}
if(op == 'boxed'){
$('#container').css('max-width','990px');
}
});
//body background image
$('.pattern1 a').click(function(){
$('body').css('background-image','url(images/pattern/dark_exa.png)');
});
$('.pattern2 a').click(function(){
$('body').css('background-image','url(images/pattern/footer_lodyas.png)');
});
$('.pattern3 a').click(function(){
$('body').css('background-image','url(images/pattern/swirl_pattern.png)');
});
});
Puedes descargarte el archivo completo en el siguiente botón:
Esto ha sido todo. Espero que puedas utilizarlo para poder mostrar las posibilidades del diseño de tus páginas a tus clientes.
Si tienes dudas o sujerencias puedes añadir un comentario o ponerte en contacto conmigo 😉
Asos Evening Dresses
Publicado el 08:23h, 17 noviembreHello my family member! I wish to say that this post is amazing, great written and come with approximately all significant infos. I would like to look more posts like this .
Santi Camp
Publicado el 12:58h, 17 noviembrethank you very much . Do not miss my last post 😉