CodeIgniter CSS

02/01/13 Estilos css en CodeIgniter « :: walter.lannot | blog

:: walter.lannot | blog

Estilos css en CodeIgniter

31mar10

(http://wlannot.files.wordpress.com/2010/03/codeigniter.gif)

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 (http://localhost/misitio). Será algo común colocar allí mismo una carpeta con
nuestros estilos (http://localhost/misitio/css (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
(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)

wlannot.wordpress.com/2010/03/31/estilos-css-en-codeigniter/ 1/5


3. En el archivo rutas_config.php, escribimos

<?php
$ruta_estilos = “http://localhost/misitio/css/&#8221 (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
(http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt);
<html xmlns=”http://www.w3.org/1999/xhtml”&gt (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.

About these ads (http://en.wordpress.com/about-these-ads/)

Archivado en: Uncategorized | 15 Comentarios

15 respuestas a “Estilos css en CodeIgniter”

Feed para esta Entrada Trackback Address
1. 1 mark m on abril 2, 2010 said:


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

Responder
2. 2 miguelon on julio 2, 2010 said:
Mucho código y muchas vueltas.
Me funcionó así:
load->view(‘views/componentes/css/menu_portal.css’);
?>

Responder
3. 3 migueleon on julio 2, 2010 said:
Me funcionó así:
load->view(‘componentes/css/menu_portal.css’);
?>

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

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

Responder
6. 6 Oziel on septiembre 27, 2010 said:
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.

Responder
7. 7 cahvez on enero 8, 2011 said:
Pienso que la opcion de MARK M es la mas acertada

Responder


8. 8 cahvez on enero 8, 2011 said:
Seria algo como esto

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

asi nos evitamos complicaciones

Responder
9. 9 Carlos on enero 24, 2011 said:
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.

Responder
10. 10 Pedro on marzo 18, 2011 said:
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

Responder
11. 11 Milton on abril 13, 2011 said:
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.

Responder
12. 12 AcademicosPeru on septiembre 7, 2011 said:
Muy buena solucion y aporte amigo…(Y)

Responder
13. 13 AcademicosPeru on septiembre 7, 2011 said:
buena respuesta mi estimado, ahor asi puedo continuar

Responder
14. 14 jlebnikov on junio 4, 2012 said:
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…
wlannot.wordpress.com/2010/03/31/estilos-css-en-codeigniter/


Responder
15. 15 jlebnikov on junio 4, 2012 said:
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…

Responder

Blog de WordPress.com. • Tema: Unsleepable por Ben Gray.


CodeIgniter CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a CodeIgniter CSS

Similar a CodeIgniter CSS (20)

CodeIgniter CSS