cake php css, img

How to Manage CSS of CakePHP

remove default style

• cakeはdefaultでformをいい感じにdbから作ってくれる

• これを無効化するためには，layoutをfalseにしよう
• Controllerに書き込む

<?php
$this->layout = false;

• これで素のHTMLで表示されるようになりました

add your css

• make your css file at webroot/css/hoge.css
• そしてViewのctpにこの文章を追加すると読み込む．

<?= $this->Html->css('hoge'); ?>

change title

• layoutをfalseにしておくとtitleも変えられます

---

Hide Label

• Sometimes label are bothering. This can hide the label.

            echo $this->Form->control('done',[
                'label' => false,
            ]);

add class to ctp

www.searchlight8.com

• cake template file .ctp is different from html file
• looks difficut to add class, but it is very easy
• just add class => className like placeholder.

Add class to input

<?php
echo $this->Form->control('column_name',[
    'class' => 'hoge',
    'placeholder' => 'name',
    'label' => __('NAME'),[
        'class' => 'hoge',
    ],
]);

• this enables adding class to input

Add class to label

• to enable add class to label

<?php
'label' => __('NAME'),[
    'class' => 'BBBBB',
],

• this cause BBBBB => BBBBB, holy shit!!!

• Write both text and class

<?php
'label' => [
    'text' => 'NAME HERE',
    'class' => 'BBBBB',
],

• success !!! Different Name input and label!!!

• You can add css by class now.

img

blog.livedoor.jp

• source of image /app/webroot/img/
• $this->Html->image(hoge.png);

example

 <?= $this->Html->image('ledgers.svg',[
     'class' => 'logo',
 ]) ?>

• I made this logo from svglogomaker.com

img link

stackoverflow.com

    <?= $this->Html->image('ledgers.svg',[
            'class' => 'logo',
            'url' => [
                'controller' => 'ledgers',
                'action' => 'index',
            ],
        ]
    ) ?>

• this enable img link.