Estilos css en CodeIgniter

31Mar10

Un problema que parece que se presenta al trabajar con codeigniter, es la asignación de estilos css a las vistas. Lo que sigue es una opción que me ha dado resultado:

Si nuestro sitio se llama, por ejemplo,  misitio, en nuestro servidor tendremos http://localhost/misitio. Será algo común colocar allí mismo una carpeta con nuestros estilos (http://localhost/misitio/css). Deberíamos colocar en éste lugar los archivos de estilos, en particular podríamos tener uno llamado estilos.css, por ejemplo.

Sabemos que las vistas serán las responsables de “mostrar” en el navegador lo que se trató en los controladores y los modelos, según corresponda. Serán entonces las vistas en donde tendríamos que hacer la referencia a el/los archivos de estilos, por ejemplo:

<link href=”http://localhost/misitio/css/estilos.css&#8221; rel=”stylesheet” type=”text/css” /> (no se porqué, pero sólo funciona colocando toda la ruta completa)

Obviamente, un sitio cualquiera contendrá varias vistas, todas ellas referenciadas a este/estos archivo/s de estilos. No tendíamos problemas al correrlo en nuestro servidor local, pero al subirlo al servidor remoto, la referencia al archivo obviamente cambiará y esto producirá que no se muestren las vistas con los estilos correspondientes. ¿Cómo solucionamos el problema? algo muy simple que a mi me funciona es crear un archivo que contenga una variable con la ruta al archivo de estilos. En una vista hago un llamado a ese archivo y en el enlace al estilo en ese mismo archivo vista, coloco la variable mencionada. ¿Se entiende? De esta manera, sólo tengo que modificar la ruta una sóla vez en un sólo archivo y por referencia, todas las vistas tomarán el cambio. Veamos un ejemplo:


1. Creo un archivo con todos los estilos que necesite (misitio/css/estilos.css)

2. Creo un archivo de configuración de ruta a los estilos  (misitio/system/application/views/rutas_config.php)

3. En el archivo rutas_config.php, escribimos

<?php
$ruta_estilos = “http://localhost/misitio/css/&#8221;;
?>

4. En un archivo vista, por ejemplo, bienvenido.php, hacemos

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>mititulo</title>
<?php include(‘rutas_config.php’)?>
<link href=”<?php echo $ruta_estilos ?>estilos.css” rel=”stylesheet” type=”text/css” />

</head>

<body>

</body>
</html>

y listo. De ésta manera deberíamos poder ver nuestras vistas con estilos, incluso podríamos trabajar con el framework css 960grid que les mencioné en otro post.



16 Responses to “Estilos css en CodeIgniter”

  1. 1 mark m

    tmb c podria obviar el archivo y solo colocar en la vista <link rel="stylesheet" href="css/estilo.css” type=”text/css” /> evitando el include. el metodo base_url() nos devuelve el valor de $config[‘base_url’] declarado en config.php

  2. 2 miguelon

    Mucho código y muchas vueltas.
    Me funcionó así:
    load->view(‘views/componentes/css/menu_portal.css’);
    ?>

  3. 3 migueleon

    Mucho código y muchas vueltas.
    Me funcionó así:
    load->view(‘componentes/css/menu_portal.css’);
    ?>

  4. 4 migueleon

    Correción -NO- se exhibe todo el código!!!!
    Mucho código y muchas vueltas.
    Me funcionó así:
    load->view(‘componentes/css/menu_portal.css’);
    ?>

  5. 5 migueleon

    No se exhive todo el código:
    $this->load->view(‘componentes/css/menu_portal.css’);

  6. 6 Oziel

    Tengo un inconveniente
    Yo llamo a la hoja de css así:
    <link href="css/estilo.css” rel=”stylesheet” type=”text/css” media=”screen” />

    Y me funciona, siempre y cuando tenga en helper.php activado ‘url’

    Ahora el detalle es q no he podido pegar el margen superior a la pantalla del navegador y me deja un espacio de aproximadamente 28px, le he dado vueltas al asunto y no me está funcionando… quisiera saber si me pueden ayudar…

    saludos.

  7. 7 cahvez

    Pienso que la opcion de MARK M es la mas acertada

  8. 8 cahvez

    Seria algo como esto

    <link href='css/estilos.css’ rel=’stylesheet’ type=’text/css’ />

    asi nos evitamos complicaciones

  9. 9 Carlos

    Es tema de configuración del .htaccess, que no permite acceso a los directorios específicos de css e imag. A algunos usuarios les ha pasado y lo han resuelto, yo me estoy peleando con ello.

  10. 10 Pedro

    Mil gracias de verdad llevaba algunas horas buscando el error y porque no me cargaba mis librerias como jquery o css hasta que encontre la solucion aqui poner-> http:// antes de localhost

  11. 11 Milton

    Ok, muchas gracias a todos, problema resuelto, la manera de Mark es la que mejor me parece y no hay que cambiar nada al subir el sitio al servidor. Gracias.

  12. Muy buena solucion y aporte amigo…(Y)

  13. buena respuesta mi estimado, ahor asi puedo continuar

  14. Bueno, este hilo ya tiene un tiempo pero pongo otras solucción por si alguien llega buscando respuestas…

    Codeigniter trae un helper llamado ‘url’ que podemos cargar desde un controlador con “$this->load->helper(‘url’);” o que podemos incluir directamente en el archivo de configuración autoload.php

    Una de las funciones de este helper, nos devulve la dirección base de la web: “base_url();” … Lo que yo suelo hacer es crear una carpeta “static” a la que le aplico permisos con .htaccess para ser publica y en la vista ya solo tenemos que hacer “<link rel="stylesheet" href="” type=”text/css” />”

    Por si acaso no sabeis como hacer una carpeta pública con .htaccess, simplemente debeis crear un archivo de texto con ese nombre y dentro escribir la linea “allow from all”

    Un saludo desde España!!

    PD: Ya se que es más o menos lo que dice Mark pero es que yo al menos no entendí muy bien su explicación…

  15. Ah, vale, ya se porque no entendía a Mark y porque no me van a entender a mi… WordPress debe detectar el codigo php como que estamos intentando inyectar codigo en la web y lo borra…

  16. 16 nol

    bueno creo que es un poco tarde pero para que funcione como dice Migueleon es necesario poner la etiqueta


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: