Blog


SKINS ELEGIBLES Y PERSONALIZADOS EN DRUPAL 7

22 / 07 / 2015 Drupal

Buenas drupaleros,

en algunas ocasiones los clientes nos piden cambiar tipografías, colores o tamaños constantemente. O simplemente les apetece dar un nuevo look a su web. Para ello tenemos que cambiar las CSS y subirlas al servidor. Si esta situación se produce de forma asidua, puede llegar a ser tediosa

Para ello una buena solución es hacer un selector de skin, y que sea el propio cliente el que cambie todas las veces que quiera su web, aplicando uno u otro skin. Estos skin serán ficheros CSS que se cargarán según desee el administrador.

En estos CSS podremos incluir todo lo que queramos, desde un cambio de color a las fuentes a un rediseño total de la web. Aunque el ahorro de trabajo con esta técnica no es mucho, dado que lo laborioso es el desarrollo del fichero CSS; es una técnica útil porque será el cliente el que “pase a producción” estos cambios.

En Drupal es muy sencillo. Lo primero y lo más engorroso sin duda es crear los ficheros CSS. A continuación, debemos crear un fichero theme-settings.php que contendrá algo similar a esto:


function mitema_form_system_theme_settings_alter(&$form, &$form_state) {
  $form['theme_settings']['tema'] = array(
    '#type' => 'select',
    '#title' => t('Tema'),
    '#options' => array(t(' Selecciona un tema'), t('Tema Azul'), t('Tema Rojo'), t('Tema Amarillo'), t('Tema Marrón'),t('Tema Negro')),
    '#default_value' => theme_get_setting('tema'),
  );
}

Con esto conseguimos que nuestra página de administración del tema tenga un desplegable con las distintas opciones de skin (admin/appearance/settings)

Lo siguiente será crear un CSS por cada Skin, en este caso cinco.

Seguidamente en el template.php con la función preprocess_page, cargamos el skin seleccionado desde la la administración del tema.

 


function mitema_preprocess_page(&$vars){
  $tema = theme_get_setting('tema');
  if($tema == 1){    
      drupal_add_css(drupal_get_path('theme', 'mitema') .'/css/temaazul.css', array('group' => CSS_THEME, 'type' => 'file', 'weight' => -100));
    }
  if($tema == 2){    
      drupal_add_css(drupal_get_path('theme', 'mitema') .'/css/temarojo.css', array('group' => CSS_THEME, 'type' => 'file', 'weight' => -100));
    }
}

Con esto añadimos el CSS seleccionado a nuestra web.

Es un proceso muy sencillo y que permitirá a nuestro cliente/administrador elegir un skin diferente siempre que quiera.

Espero que os haya servido de ayuda.



ARTÍCULOS RELACIONADOS