21 Jun

convertir #vtem_skitter #joomla 3.x #slide superior en #responsive

Hace un tiempo me hice del club vtem tanto de plantillas como extensiones. La verdad que creo que ha sido la mejor inversión que he hecho nunca. Y me dispongo a hacerme de otro club y aumentar así las funcionalidades. Pero esto también tiene algunos inconvenientes.

Una de las cosas que dicen que hacen pero no hacen bien es poner las plantillas adaptables ( responsive template). Son adaptables hasta que le pones una extensión… por lo cual no son tan adaptables.

Me he visto con el problema para un cliente que necesitaba poner la cabecera y quería que se viera como no puede ser de otra forma, de la misma manera en todos los exploradores y tamaños. Así que he modificado un par de cosas para que funcione y realmente sea responsive. Recuerda que si necesitas ayuda profesional puedes contratarme en diseñowebensevilla.org

Vamos a trabajar con archivos que están en la carpeta modules / mod_vtem_skitter

IMPORTANTE: EL IMAGESHOW DE VTEM PERMITE LOS PORCENTAJES DESDE EL PRINCIPIO.

Primero editamos el mod_vtem_skitter.php que está en la raiz de la carpeta que pusimos antes y vamos sustituir 3 cosas.

1º Sustituimos

$width =$params->get(‘modwidth’, 630);
lo cambiamos por
$width =100%

2º  Vamos a quitarle el px al width 

 $customstyle=’#vtemskitter’.$module_id.'{background-color:’.$backgroundcolor.’ !important; color:’.$textcolor.’ !important; border:1px solid ‘.$bordercolor.’ !important; padding:8px !important; width:’.$width.’;height:’.$height.’px;}

Quedaría así:

$customstyle=’#vtemskitter’.$module_id.'{background-color:’.$backgroundcolor.’ !important; color:’.$textcolor.’ !important; border:1px solid ‘.$bordercolor.’ !important; padding:8px !important; width:’.$width.’;height:’.$height.’px;}

3º  Vamos a quitarle el px al width 

#vtemskitter’.$module_id.’ .box_clone img, #vtemskitter’.$module_id.’ div.image img.image_main{width:’.$width.’px;height:’.$height.’px;}’;

Quedaría así:

#vtemskitter’.$module_id.’ .box_clone img, #vtemskitter’.$module_id.’ div.image img.image_main{width:’.$width.’;height:’.$height.’px;}’;

Segundo, vamos a la carpeta styles y dejamos las dos primeras lineas así:

.vtem_skitter {position:relative;width:100%;background:#000;}
.vtem_skitter img { max-width:none; border:0; margin:0; padding:0; width:100%;} /* Tip for stildv */

Share this

Leave a reply