CakePHP: Apply bootstrap.css only to content of certain views, not layout

Question

I am developing a site with a designer, and he already coded the entire static webpage with HTML/CSS.

We needed an admin backend and an Auth component, so I figured a simple CakePHP app would work well, instead of hacking together a custom PHP/MySQL solution. I converted all of his static pages to CakePHP syntax, creating simple views using the PagesController. I created a completely separate layout for the admin backend using Bootstrap 3.0.

On a few of the frontend pages, like our "Sign Up" and "Login Page", I want to utilize Bootstrap 3.0's nice CSS and Javascript components (especially its clean form styles).

However, when I include Bootstrap in the <head> of the layout, it conflicts with the CSS classes that the designer created, totally messing up the layout of the page.

I basically was wondering if there was a way I could apply a CSS stylesheet ONLY to the content of a view (i.e. signup.ctp), and not its layout (default.ctp)? This would save me a lot of time and headaches.

Anil kumar · Accepted Answer · 2013-12-05 03:48:00Z

1

In your view file i.e. signup.ctp just include the css using Html helper as like this

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

and make sure you've the line $this->fetch('css') in your layout file. so it'll include the above css in the section where you've defined $this->fetch('css').

For example:

<head>
    <?php $this->fetch('css') ?>
</head>

Will include the css in head section which you've defined in view

edited Dec 5, 2013 at 3:48

answered Dec 5, 2013 at 3:39

Anil kumar

4,1874 gold badges25 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kai · Accepted Answer · 2013-12-05 01:15:22Z

0

What you can do is enclose your content in a div with a specific id like <div id="bootstrap"></div>, and then prepend all your css selectors in bootstrap with #bootstrap.

answered Dec 5, 2013 at 1:15

Kai

3,8231 gold badge20 silver badges33 bronze badges

Comments

XuDing · Accepted Answer · 2013-12-05 06:23:03Z

0

Include the Bootstrap 3 css in the required view files only using HTML helper:

$this->Html->css();

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

answered Dec 5, 2013 at 6:23

XuDing

2,07219 silver badges27 bronze badges

Collectives™ on Stack Overflow

CakePHP: Apply bootstrap.css only to content of certain views, not layout

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related