Inclusión de CSS en layout

ramiro_md · #1 (**permalink**) 06/04/2013, 10:27

Buenas, estoy dando mis primeros pasos con este framework. A su vez, mis primeros pasos con un framework.
Tengo un controlador llamado PublicController, el cual maneja toda la sección pública del sitio. En verdad, 3 páginas, "iniciar sesión", "solicitar cuenta" y "recuperar acceso".
Tengo el layout dentro de app/View/Public/index.ctp.
Dentro del head incluí:

Código PHP:

  <?php 

     echo $this->Html->css('blue','style');

?>

Al ejecutar el sitio en el navegador, al parecer no carga mis CSS (aunque tampoco tira errores). Al inspeccionar el código fuente con Chrome noté varias cosas:
1) CakePHP sigue agregando sus archivos CSS básicos.
2) Mis archivos son incluidos fuera de la etiqueta <head>
3) El path de mis css es app/webroot/css/blue.css y app/webroot/css/style.css, pero CakePhp solo muestra <link rel="style" type="text/css" href="/css/blue.css">

Alguna sugerencia ?

arhego · #2 (**permalink**) 08/04/2013, 10:42

Que tal compañero, en respuesta a

1) CakePHP sigue agregando sus archivos CSS básicos.
2) Mis archivos son incluidos fuera de la etiqueta <head>
3) El path de mis css es app/webroot/css/blue.css y app/webroot/css/style.css, pero CakePhp solo muestra <link rel="style" type="text/css" href="/css/blue.css">

Suponiendo que usas cakephp 2.x

1) En caso de que no quieras que agregue sus propios CSS, debes modificar el layout donde los esta cargando y simplemente borrar la linea, buscala en /appView/Layout/default.ctp,
la linea es echo $this->Html->css('cake.generic');

2) Para incluir dentro de la etiqueta <head> puedes hacerlo con la siguiente linea:

Código PHP:

  $this->Html->css(array('blue','style'), null, array('inline' => false));

mira: http://book.cakephp.org/2.0/en/core-libraries/helpers/html.html#HtmlHelper::css

3) Mientras coloques tus archivos dentro de la carpeta webroot/css y los incluyas en tu layout con el HtmlHelper no tendrás ningún problema, al cargarlos pondrá algo como:
<link rel="stylesheet" type="text/css" href="/aplicacion/css/blue.css" />
y todo estará bien, si no se ven presiona F5 para actualizar

Espero que te sirva.

Saludos