#prestashop 1.5 como modificar el ancho de los resultados en el #modulo de #productos destacados

Buenas, este post no intenta deslumbrar a nadie … simplemente es una nota mental de como consegui llegar hasta este punto porque vaya telita con el prestashop

Para ponernos en situacion, instale prestashop, y le quite al diseño basico las columnas derecha e izquierda. Modifique el tamaño de la columna central al 100% para que se ajustase

Problema al hacer esto: el modulo de productos destacados sigue a su bola, responsive design? pa que … es decir, el ancho de la web es mas grande … pero los tumns de productos siguen en el mismo tamaño con lo cual queda un diseño ortopedico muy rico

Para ello solo tenemos que modificar en archivo homefeatured.tpl que esta en la ruta “themes/como-sea-que-has-llamado-tu-template/modules/homefeatured/homefeatured.tpl”

no pongo numero de linea porque esto como lo cambian cada dos dias es una perdida de tiempo … donde se crea el objeto <li> añadiremos el width a pinrel … <li style=”width:18%;”

lo he puesto al 18% porque tengo 5 tumns

espero que a alguien mas que a mi este post le sirva de ayuda … voy escribiendo segun lo pienso (y aparte soy un poco monguer) asi que pido disculpas por no optar a ser nobel de literatura. Como decia al principio, no intento ser un santuario de sabiduria, solo quiero dejar reseñas de mi trabajo para mis futuros proyectos y si puedo ayudar a alguien pues mejor que mejor

un saludo a todos

 

#html5 #Responsive #Design para novatos. Tutorial básico by @bocabit

Fuente: bocabit.elcomercio.es

Responsive Design en seesparkbox

Responsive Design en ##http://seesparkbox.com/##seesparkbox##
Desde la llegada de HTML5 y CSS3, el Responsive Design o “Diseño Sensible” es una nueva técnica que se está empezando a utilizar cada vez más. Consiste básicamente en adaptar los diseños de las páginas web en función del tamaño de la ventana del navegador, cambiando según esta aumenta o disminuye y sin necesidad de disponer varias versiones de CSS o HTML.

 

Podéis ver un pequeño ejemplo si redimensionáis el blog o si lo véis en un iPad; o podéis flipar si comprobáis hasta que punto se puede utilizar esta técnica entrando a Smashing Magazine o en mi página personal.

El ejemplo que os voy a proponer es muy simple y solo cuenta con 3 pasos: Añadir un meta tag al header, añadir compatibilidad con navegadores antiguos y realizar modificaciones en el CSS.

 

1. Añadir el meta tag para la escala

En primer lugar debemos añadir el siguiente código entre las etiquetas “<head>” de nuestra página.
[html]<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>[/html]

Básicamente lo que hace esta etiqueta es ajustar el ancho al ancho del dispositivo (sea un navegador o un dispositivo móvil) e indicar que no se debe hacer zoom inicialmente.

2. Añadir compatibilidad con navegadores antiguos

Como las versiones antiguas de Internet Explorer no soportan el meta “viewport”, debemos añadir un javascript que realice su función.

[html]<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script&gt;
<![endif]–>[/html]

3. Aplicar modificaciones al CSS

Ahora tendremos que escribir el código CSS necesario que deseamos modificar el función de la resolución. Voy a utilizar como ejemplo el CSS que yo he utilizado para desplazar la barra lateral a debajo del contenido cuando la resolución del dispositivo está entre 700px y 1000px (es decir, para que funcione en un iPad).

El funcionamiento es el mismo que si utilizásemos un condicional.
[css]
@media screen and (min-width: 700px) and (max-width: 1000px) {
/*Todo lo que añadamos aquí se utilizará solo en resoluciones X, donde 700px<=X<=1000px*/
}[/css]

Ya con el nuevo código CSS para desplazar la barra lateral para que no permita elementos flotantes a los lados y ajustar toda la maquetación a 700px tendríamos algo como lo siguiente:
[css]
@media screen and (min-width: 700px) and (max-width: 1000px) {
#container{
width: 700px;
}

#sidebar-content{
clear: both;
width: 100%;
float:none;
}
}[/css]

Tened en cuenta que todo el código se encuentra dentro del condicional y que podríamos jugar con los valores de este de tal manera que mostremos un código a anchuras menores, mayores o entre otros dos valores. Las posibilidades son bastante extensas.

También puede interesar…

Más Información | Web Designer Wall
Inspiración | DesignModo