CODEWITHSUNDEEP
phpcsscakephptwitter-bootstraptwitter-bootstrap-3
Stephen James
Stephen James

Reputation: 23

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

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.

Upvotes: 0

Views: 962

Answers (3)

XuDing
XuDing

Reputation: 2052

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

Upvotes: 0

Anil kumar
Anil kumar

Reputation: 4177

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

Upvotes: 1

Kai
Kai

Reputation: 3823

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.

Upvotes: 0

Related Questions