Auteur : P.Ghiazza

Installation de Compass et Sass sur Windows

Voici aujourd’hui un petit tuto sur l’installation de Compass et SASS. Pour ceux qui ne connaissent pas, Compass est un Framework CSS utilisant SASS, une puissante extension de CSS3 permettant
la création de variables, de mixins, d’arborescence des selecteurs, etc.

 

 

Voyons donc comment l’installer :

En premier lieu, téléchargez Ruby à cette adresse : http://rubyinstaller.org/downloads/, et installez le en prenant garde à bien cocher la case « Add Ruby executables to your PATH » lors de l’étape 2.

Ensuite, ouvrez l’invite de commandes Windows en mode administrateur, et écrivez :

gem install sass

puis

gem install compass

 

Une fois cela fait, rendez-vous dans le dossier de votre site avec la commande cd :

cd C:\wamp\www\site_test

Et tapez ensuite :

compass create

 

Vous devriez à présent pouvoir constater que 2 nouveaux dossiers (+1 caché) ont été créés par Compass à l’endroit spécifié. Notez également la présence d’une fichier config.rb.

Le dossier « Stylesheets » contiendra vos fichiers .css, et le dossier « SASS » vos fichiers .scss.

Si vous souhaitez renommer ces dossiers, il est impératif de modifier le fichier config.rb et de remplacer l’ancienne configuration par la nouvelle. Par exemple :

css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

 

Pour écrire vos CSS, vous éditerez toujours les fichiers .scss du dossier « sass ». Ainsi, commencez par ajouter au fichier screen.scss :

body {
    background-color:red;
}

Pensez à lier votre feuille de style CSS à votre HTML, puis actualisez votre page Web.

 

Rien ne se passe ? C’est normal ! Le fichier doit être compilé.

Pour cela, retournez dans votre terminal et entrez :

compass compile

Cette fois-ci, vous pouvez actualiser la page et constater que vos changements ont été pris en compte.

Mais je vous vois venir…

 

Donc je vais devoir écrire « compass compile » à chaque fois que je fais une modification ? :O ?

 

Eh bien non, Compass à prévu le coup :). Vous pouvez tout simplement écrire :

compass watch

qui surveillera le projet et compilera automatiquement les fichiers .scss s’ils sont modifiés.

 

Vous avez maintenant toutes les bases pour débuter avec Compass et SASS, et vous constaterez que le gain de temps est démentiel.

Je vous invite à consulter la documentation de Compass pour mieux démarrer.

[Prestashop 1.4.x] Ajouter un champ sur une fiche produit

Voici une petite astuce Prestashop qui va vous permettre d’ajouter un champ dans votre fiche produit. En clair, cette astuce vous permettra d’ajouter une zone de saisie dans votre back-office afin d’afficher un contenu personnalisé, unique à chaque produit.

Cette astuce est valable pour les versions 1.4.x.

 

La classe ‘Product’

A la racine de votre site, rendez-vous dans /classes/Product.php.

A la suite des variables publiques déclarées, ajoutez

public $monChamp;

 

Allez ensuite à la fonction getTranslationsFieldsChild() et remplacez la valeur de la variable protected $fieldsValidate par :

array( 'id_tax' => 'isUnsignedId', 'id_manufacturer' => 'isUnsignedId', .... couper pour pas faire trop long .... 'active' => 'isBool', 'ean13' => 'isEan13', 'monChamp' => 'isCleanHtml');

Remplacez ensuite la valeur de la variable protected $fieldsValidateLang par :

array( 'meta_description' => 'isGenericName', 'meta_keywords' => 'isGenericName', 'meta_title' => 'isGenericName', 'link_rewrite' => 'isLinkRewrite', 'name' => 'isCatalogName', 'description' => 'isString', 'description_short' => 'isString', 'available_now' => 'isGenericName', 'available_later' => 'IsGenericName','monChamp' => 'isString');

 

Modification du back-office de Prestashop

Nous allons maintenant devoir créer le champ associé à cette nouvelle variable dans l’administration des produits.

Pour ce faire, allez dans /tabs/AdminProduct.php. et ajouter dans le HTML (à la fin du document) le code suivant :

echo ' '.$this->l('Label de mon champ :').' '; foreach ($this->_languages as $language) echo ' < textarea class="rte" cols="100" rows="20" id="monChamp_'.$language['id_lang'].'" name="monChamp_'.$language['id_lang'].'">'.htmlentities(stripslashes($this->getFieldValue($obj, 'monChamp', $language['id_lang'])), ENT_COMPAT, 'UTF-8').'

 

Ajouter le champ dans la base de données

Enfin, nous devons créer l’endroit ou sera stocké ce contenu dans la base de données.

Ajouter donc le champ monChamp dans la table PREFIXE_product_lang.

Et voilà, votre nouveau champ est créé, il ne nous reste plus qu’a l’appeler dans le template.

 

Affichage du contenu personnalisé

Après avoir ajouter du contenu dans votre nouveau champ texte puis sauvegardé, rendez-vous dans /themes/votre_theme/product.tpl et ajoutez ce code à l’endroit où vous voulez faire apparaître votre contenu :

{$product->monChamp}

 

Voilà pour cette astuce, j’espère qu’elle vous aura été utile. En dérivant légèrement cette méthode, vous pourrez également ajouter un champ dans vos catégories par exemple.

Héberger et utiliser une police personnalisée

Qui n’a jamais révé de pouvoir installer la police de son choix sur son site internet, juste histoire de sortir des éternels Arial, Trebuchet MS ou encore Georgia ?

Styler vos titres et vos contenus avec une typographie sortant de l’ordinaire sans utiliser d’images (et donc améliorer le référencement de votre site), c’est possible grâce à la propriété @font-face !

Voici un petit tutoriel simplifié de la marche à suivre :

  1. Télécharger votre police, sur des sites comme Dafont par exemple.
  2. Vous allez avoir besoin de convertir ce fichier (généralement vous le téléchargerez au format .ttf) en 3 autres extensions, dans le but d’obtenir 4 fichiers de police aux formats .ttf, .eot, .svg et .woff.
  3. Ceci dans une optique de compatibilité avec les différents navigateurs et systèmes d’exploitation. Pour cela, rendez-vous sur ce site : http://www.fontsquirrel.com/fontface/generator
  4. Cliquez sur « Add fonts », attendez la fin de son téléchargement et téléchargez votre kit en cliquant sur « Download your kit ».
  5. Décompressez l’archive.
  6. Vous pourrez ensuite créer un dossier « polices » dans lequel vous mettrez les 4 fichiers cités plus haut.
  7. Il ne vous reste plus qu’à ajouter vos règles CSS, que vous trouverez dans l’archive, dans le fichier « stylesheet.css ». Vous copierez donc ce code :

 

@font-face {
	font-family: 'MaPolice';
	src: url('polices/MaPolice.eot');
	src: url('polices/MaPolice.eot?#iefix') format('embedded-opentype'),
	url('polices/MaPolice.woff') format('woff'),
	url('polices/MaPolicet.ttf') format('truetype'),
	url('polices/MaPolice.svg#MaPoliceMaPolice') format('svg');
	font-weight: normal;
	font-style: normal;
}

et appellez votre police de la même façon que toutes les autres, par exemple :

h2 { font-family : "MaPolice", Arial, sans-serif; }

 

N’omettez d’ailleurs pas de mettre des polices alternatives, au cas où ;).

Amusez-vous bien ! 😉

Changer la couleur de sélection du texte

Vous avez toujours voulu modifier la couleur de sélection du texte sur vos sites grâce à CSS ?

Voici la solution !

Vous devrez ajouter ce code à votre fichier CSS général :

::selection { background-color:#f00; color:#fff; } /* Tout les navigateurs */
::-moz-selection { background-color:#f00; color:#fff; } /* Firefox */

Vous pourrez également appliquer ce style uniquement à certaines de vos balises, en ajoutant simplement le nom de la balise ciblée devant :

h1::selection { background:#f00; color:#fff ; }

 

Même si cette propriété n’est encore que très peu gérée par les navigateurs, n’hésitez cependant pas à l’utiliser car vous n’aurez rien à perdre ;).

 

Voir la démonstration

Helper « Lorem » : Simplifiez vos tests d’intégration

Un simple article pour mettre à votre disposition un petit helper créé par mes soins. Il est tout simple, mais il fait gagner un temps fou lors de l’intégration / développement de votre site.
Je l’ai appelé « Lorem » (j’avoue, c’est vraiment pas original), car il s’agit d’un générateur de texte.

 

Revue des fonctions :

  • text(nombreDeCaractères) : génère du text brut sans mise en forme
  • html() : renvoie tout les types de balises afin de juger de l’apparence de vos contenus
  • createlist(nombreDeLi) : génère une liste de type <ul>
  • createForm() : renvoie un formulaire contenant les différents champs possibles

 

Télécharger  le Helper Lorem