Bonsoir, Voici mes 2 petites erreurs que j'arrive pas a réglé :
premièrement le style de la page index ('default.ctp') se charge bien
par contre dès que j'accède a une page d'une vue le style ne se charge pas mis à part pour le contenue.
et mon 2em soucis c'est que je n'arrive pas a stylisé les labels d'un formulaire sous Cakephp voici mon code, tout se stylise sauf les label :
<section class="admin">
<h2>Zone Réservé</h2>
<?php echo $this->Form->create('Users', array('class'=>'contact'));?>
<p>* Champs obligatoires requis</p><br>
<?php echo $this->Form->input('username', array('label' => 'Identifiant', 'placeholder' => "Login", 'class' => 'contact input-contact', 'required')); ?>
<?php echo $this->Form->input('password', array('label' => 'Mot de passe', 'placeholder' => "Password", 'class' => 'contact input-contact', 'required')); ?>
<?php echo $this->Form->end(array('label'=>'Se connecter', 'class' => 'submit-contact contact'));?>
</section>
6 réponses
Bonsoir.
Pour le premier point, il y a une différence entre la vue index.ctp et le layout default.ctp.
Une vue et un layout sont 2 choses différentes, car la vue sera imbriquée dans ton layout via le helper :
$this->fetch('content');Donc toutes tes vues seront imbriquées dans ton layout default.ctp , tant que tu n'indiques pas dans le controller que tu veux utiliser un layout différent.
Pour le second point, le helper Form stylise les formulaires d'une manière par défaut, si tu veux spécifiquement utiliser tes classes et non celles par défaut de CakePHP, il te faut le lui indiquer dans ton create, par exemple :
<section class="admin">
<h2>Zone Réservée</h2>
<?= $this->Form->create('User', array('inputDefaults' => array('div' => false, 'class' => 'contact input-contact'), 'class' => 'contact')); ?>
<?= $this->Form->input('username', array('label' => 'Identifiant', 'placeholder' => "Login", 'required', 'before' => '<p>* Champs obligatoires requis</p><br>')); ?>
<?= $this->Form->input('password', array('label' => 'Mot de passe', 'placeholder' => "Password", 'required')); ?>
<?= $this->Form->submit('Se connecter', array('class' => 'submit-contact contact'));?>
<?= $this->Form->end(); ?>
</section>Au passage, c'est le nom du modèle que l'on indique dans le create , il ne doit pas être au pluriel.
Problème résolue ! Tout d'abord merci à Lartak11 voici comment j'ai résolue mon problème :
<section class="admin">
<h2>Zone Réservée</h2>
<?php echo $this->Form->create('User', array('inputDefaults' => array('div' => false, 'class' => 'input-contact'), 'class' => 'contact cb')); ?>
<?php echo $this->Form->input('username', array('label' => 'Identifiant', 'placeholder' => "Login", 'required', 'before' => '<p>* Champs obligatoires requis</p><br>')); ?>
<?php echo $this->Form->input('password', array('label' => 'Mot de passe', 'placeholder' => "Password", 'required')); ?>
<?php echo $this->Form->submit('Se connecter', array('class' => 'submit-contact'));?>
<?php echo $this->Form->end(); ?>
</section>et j'ai enlevé la class label et appliqué directement mon style du form sur les labels et augmenté de 10px le margin-top pour que mon premier display block s'effectue bien
Re, Merci Lartak11 pour ta réponse effectivement j'ai bien mon style maintenant sur mes label par contre le display block ne s'applique pas.
et pour ma page default.ctp c'est normal que sur toute mes vue j'arrive pas à obtenir mon menu, mon logo et mes img ?
petit question : tes echo sont sous la form : <?= alors que moi je suis obligé de mettre <?php echo comment pourrais je obtenir se raccourci aussi ? merci
voici mon code pour login.ctp :
<section class="admin">
<h2>Zone Réservée</h2>
<?php echo $this->Form->create('User', array('inputDefaults' => array('div' => false, 'class' => 'contact input-contact'), 'class' => 'contact labelcontact cb')); ?>
<?php echo $this->Form->input('username', array('label' => 'Identifiant', 'placeholder' => "Login", 'required', 'before' => '<p>* Champs obligatoires requis</p><br>')); ?>
<?php echo $this->Form->input('password', array('label' => 'Mot de passe', 'placeholder' => "Password", 'required')); ?>
<?php echo $this->Form->submit('Se connecter', array('class' => 'submit-contact contact'));?>
<?php echo $this->Form->end(); ?>
</section>voici le css :
/*Contact*/
.contact { float: left; margin-left: 350px; display: block; }
.contact p { color: red; font-style: italic; font-weight: 600; font-size: 12px; float: left; display: block;}
.contact textarea.textarea-contact { width: 350px; }
.contact input:required, .contact textarea:required { background: url("../img/red_asterisk.png") no-repeat scroll 98% center #FFFFFF }
.contact input:required, .contact textarea:required { background: #fff url("../img/red_asterisk.png") no-repeat 98% center; }
.contact input:required:valid, .contact textarea:required:valid { background: #fff url("../img/valid.png") no-repeat 98% center; box-shadow: 0 0 5px #5cd053; border-color: #28921f; }
.contact input:focus:invalid, .contact textarea:focus:invalid { background: #fff url("../img/invalid.png") no-repeat 98% center; box-shadow: 0 0 5px #d45252; border-color: #b03535; }
.labelcontact { display: block; color: #747474; font-weight: 400; margin-top: 15px; margin-bottom: 5px; }
.contact .textarea-contact, input.input-contact { background: #FBFBFB; border: 1px solid #D9E1E7; color: #54555A; padding: 10px; width: 260px; -webkit-transition-duration: 0.25s; -moz-transition-duration: 0.25s; -o-transition-duration: 0.25s; transition-duration: 0.25s; outline: none;}
.contact input.submit-contact { border: solid 1px #cccccc; background: #FFF; padding: 7px 15px; display: block; cursor: pointer; text-align: center; color: inherit; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eaeaea)); background-image: -webkit-linear-gradient(top, #ffffff, #eaeaea); background-image: -moz-linear-gradient(top, #ffffff, #eaeaea); background-image: -o-linear-gradient(top, #ffffff, #eaeaea); background-image: linear-gradient(top, #ffffff, #eaeaea); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; margin-top: 15px;}
section.contact-img img { float: right; width: 400px; margin-top: 30px; margin-right: 250px;}
/*login*/
section.admin { float: left; margin-left: 350px; width: 1000px; margin-bottom: 25px; margin-top: 25px;}
section.admin h2 { color: #747474; font-weight: 600; }
/*le formulaire d'administration reprend le style du formulaire de contact*/Voici mon code pour le layout par default :
<!--home page-->
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>YA creative web design</title>
<!-- CSS LINK -->
<?php echo $this->Html->css('style'); ?>
<!-- font -->
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- script JS -->
</head>
<body>
<div id="structure">
<header class="header"><!-- Début de mon header qui contiendra mon logo + ma navigation -->
<a href="index.php" class="logo">
<img src="img/logo3.png" alt="logo"/>
</a>
<nav>
<a href="/index.php" class="active">Home</a>
<a href="/portfolio.php" class="">Portfolio</a>
<a href="/blog.php" class="">Blog</a>
<a href="/skills.php" class="">Skills</a>
<a href="/culture.php" class="">Culture</a>
<a href="/contact.php" class="">Contact</a>
</nav>
</header>
<div class="stripes"></div><!--stripes (rayure) de séparation-->
<?php echo $this->fetch('content'); ?>
</div><!-- fin structure -->Bonjour.
Pour le <?= au lieu de <?php echo , c'est ce qui s'appelle les short_open_tag.
Normalement avec PHP 5.4 c'est disponible par défaut sans aucune configuration préalable.
Avant PHP 5.4, les short_open_tag étaient disponible, mais il fallait écrire <? echo , donc en gros avec PHP 5.4, on peut dire que le = remplace le echo
De rien au passage, avec plaisir. :)