Source : Responsive Typography With Sass Maps.
Mois : juin 2015
[CSS][Foundation 3.2.5] Reset CSS des styles du composant Tabs de Foundation v3.2.5
Attention : n’inclut pas la version pills. Source originale obtenue ici : Download Foundation v3.2.5.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* [CSS reset] Foundation Tabs component */ .tabs { border-bottom: 0; height: auto; margin-bottom: 0; } .tabs dt, .tabs li.section-title { font-size: inherit; height: auto; line-height: auto; padding-right: 0; padding-left: 0; text-transform: none; } .tabs dt:first-child, .tabs li.section-title:first-child { padding-right: 0; } .tabs dd a, .tabs li a { font-size: inherit; height: auto; line-height: auto; padding: 0; } .tabs dd a:focus, .tabs li a:focus { font-weight: normal; } .tabs dd.active, .tabs li.active { border-top: 0; margin-top: 0; } .tabs dd.active a, .tabs li.active a { border-left: 0; border-right: 0; font-weight: normal; } .tabs.vertical { border-bottom: 0; } .tabs.vertical dd, .tabs.vertical li { border-left: 0; } .tabs.vertical dd a, .tabs.vertical li a { border: 0; border-width: 0; font-size: inherit; padding: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .tabs.vertical dd.active, .tabs.vertical li.active { border-top: 0; border-left: 0; } .tabs.two-up dt a, .tabs.two-up dd a, .tabs.two-up li a, .tabs.three-up dt a, .tabs.three-up dd a, .tabs.three-up li a, .tabs.four-up dt a, .tabs.four-up dd a, .tabs.four-up li a, .tabs.five-up dt a, .tabs.five-up dd a, .tabs.five-up li a { padding: 0; text-align: left; } ul.tabs-content { margin: 0; } ul.tabs-content.contained > li { border: 0; border-width: 0; padding: 0; } ul.tabs-content.contained.vertical > li { border-width: 0; } |
[jQuery][Foundation 3.5.2] Modifier le comportement natif du composant Accordion pour empêcher la fermeture d’un panneau au clic sur son en-tête
Les versions récentes de Foundation incluent toute une batterie d’options pour le composant Accordion.
Le comportement standard consiste à pouvoir fermer un panneau au clic sur son en-tête. Tous les panneaux sont alors fermés.
Nous allons modifier le code natif du composant accordion.js
de Foundation 3.5.2 afin qu’un panneau ouvert ne puisse plus être fermé (par l’utilisateur) au clic sur son en-tête.
Il suffit de repérer et de commenter la ligne suivante : p.find('li').removeClass('active').end().find('.content').hide();
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
// Please note : this is a fork of original "jquery.foundation.accordion.js" code. // // Accordion panels could originaly be closed by clicking on their headers. // When loading this fork, accordion panels can only be closed when another is opened by user. ;(function ($, window, undefined){ 'use strict'; $.fn.foundationAccordion = function (options) { // DRY up the logic used to determine if the event logic should execute. var hasHover = function(accordion) { return accordion.hasClass('hover') && !Modernizr.touch }; $(document).on('mouseenter', '.accordion li', function () { var p = $(this).parent(); if (hasHover(p)) { var flyout = $(this).children('.content').first(); $('.content', p).not(flyout).hide().parent('li').removeClass('active'); flyout.show(0, function () { flyout.parent('li').addClass('active'); }); } } ); $(document).on('click.fndtn', '.accordion li .title', function () { var li = $(this).closest('li'), p = li.parent(); if(!hasHover(p)) { var flyout = li.children('.content').first(); if (li.hasClass('active')) { //p.find('li').removeClass('active').end().find('.content').hide(); } else { $('.content', p).not(flyout).hide().parent('li').removeClass('active'); flyout.show(0, function () { flyout.parent('li').addClass('active'); }); } } } ); }; })( jQuery, this ); |
[CSS][Foundation 3.5.2] Reset CSS des styles du composant Accordion de Foundation v3.5.2
en SASS (ajouter la classe .css-reset
) :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* [CSS reset] Foundation Accordion component */ ul.accordion.css-reset { margin: 0; border: none 0; > li { border: none 0; > div.title { &:after { border: none 0; } } .content { padding: 0; } } > li.active { border: none 0; > div.title { border: none 0; &:after { border: none 0; } } .content { border: none 0; } } } |
[jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique
A voir aussi : Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick=""
placé sur le booléen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
jQuery(document).ready(function(){ // http://devfrontend.info/jquery-agir-uniquement-sur-des-blocs-contenant-des-boutons-radio-ou-des-cases-a-cocher-possedant-un-attribut-name-dont-la-valeur-est-identique/ jQuery('.radio-boxes-group').on('click', '.radio-box', function(){ var nameAttributeValue = jQuery(this).closest('.radio-boxes-group').find('.is-checked').children('input:radio').attr('name'); jQuery(this).closest('.radio-boxes-group').find('.is-checked').toggleClass('is-checked'); jQuery(this).find('input:radio')[0].checked = true; if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) { jQuery(this).toggleClass('is-checked'); } else { // do nothing ... } }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<!-- 1er groupement de boutons radio --> <div class="radio-boxes-group"> <div class="row"> <div class="six columns payment-mode"> <div class="radio-box is-checked"> <input type="radio" id="monthly_payment" name="payment_mode" value="" checked="checked" /> <div class="information"> <label for="monthly_payment">Par mois</label> <p class="complementary-information">15€/mois</p> </div> </div> </div> <div class="six columns payment-mode"> <div class="radio-box"> <input type="radio" id="yearly_payment" name="payment_mode" value="" /> <div class="information"> <label for="yearly_payment">En une fois</label> <p class="complementary-information">180€ pour 1 an</p> </div> </div> </div> </div> </div> <!-- 2ème groupement de boutons radio --> <div class="radio-boxes-group"> <div class="row"> <div class="twelve columns payment-method"> <div class="radio-box is-checked"> <input type="radio" id="cb_method" name="payment_method" value="" checked="checked" /> <div class="information"> <label for="cb_method">Prélèvement CB</label> <p class="complementary-information">Confirmation d'achat et facture à l'étape suivante</p> </div> </div> </div> </div> <div class="row"> <div class="twelve columns payment-method"> <div class="radio-box"> <input type="radio" id="cheque_method" name="payment_method" value="" /> <div class="information"> <label for="cheque_method">Par chèque</label> </div> </div> </div> </div> <div class="row"> <div class="twelve columns payment-method"> <div class="radio-box"> <input type="radio" id="sepa_method" name="payment_method" value="" /> <div class="information"> <label for="sepa_method">Prélèvement SEPA (RIB)</label> </div> </div> </div> </div> </div> |
Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick=""
placé sur le booléen
1 2 3 |
<div class="radio-box"> <input onclick="[...]" /> </div> |
Ajouter une ligne de code jQuery pour statuer qu’un clic utilisateur sur une zone .radio-box
, compte pour un clic sur le champ radio ou checkbox dont il est le parent.
1 2 3 4 5 6 |
if(jQuery(this).children('input:radio').attr('name') == nameAttributeValue ) { jQuery(this).children('input').click(); // ajouter cette ligne dans le cas où un attribut 'onclick=""' est placé sur l'input. jQuery(this).toggleClass('is-checked'); } else { // do nothing ... } |
[Magento] Charger une ressource externe (cdn) dans l’en-tête de page depuis un fichier xml en utilisant les méthodes setText ou addLinkRel
Pour ajouter des ressources CSS, JS ou Google Fonts externes à votre site, procéder comme suit :
Version 1.8 et supérieures de Magento avec setText
1 2 3 4 5 6 7 8 9 10 |
<default> <reference name="head"> <block type="core/text" name="google.cdn.jquery"> <action method="setText"> <text><![CDATA[<link href='//fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700' rel='stylesheet' type='text/css'>]]> </text> </action> </block> </reference> </default> |
Version 1.8 et supérieures de Magento avec addLinkRel
1 2 3 4 5 6 7 8 |
<default><!-- use for all pages --> <reference name="head"> <action method="addLinkRel"> <rel>stylesheet</rel> <href>//fonts.googleapis.com/css?family=Roboto:400,400i,700,900</href> </action> </reference> </default> |
Attention : version 1.7 et antérieures de Magento avec addLinkRel seulement !
Retirer une ressource externe avec removeItem
1 2 3 4 5 6 7 8 |
<default><!-- use for all pages --> <reference name="head"> <action method="removeItem"> <type>link_rel</type> <name>//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600</name> </action> </reference> </default> |
[Magento] Un template de config local.xml standardisé pour débuter une installation
Solution 1: générer un fichier local.xml à l’aide de Magerun :
1 |
php shell/n98-magerun.phar local-config:generate |
Solution 2: le copier/coller/remplacer à la main :
Modifier les lignes suivantes à votre convenance :
1 2 3 4 |
<host><![CDATA[localhost]]></host> <username><![CDATA[root]]></username> <password><![CDATA[123]]></password> <dbname><![CDATA[dbname]]></dbname> |
URL admin (mot clé pour accéder au BO) :
1 |
<frontName><![CDATA[admin]]></frontName> |
Source complète :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<?xml version="1.0"?> <!-- /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce .com for more information. * * @category Mage * @package Mage_Core * @copyright Copyright (c) 2008 Irubin Consulting Inc. DBA Varien (http://www.varien.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ --> <config> <global> <install> <date><![CDATA[Thu, 08 Jan 2015 09:38:23 +0000]]></date> </install> <crypt> <key><![CDATA[9f667ea65a83786b07824093f9f3f035]]></key> </crypt> <disable_local_modules>false</disable_local_modules> <resources> <db> <table_prefix><![CDATA[]]></table_prefix> </db> <default_setup> <connection> <host><![CDATA[localhost]]></host> <username><![CDATA[root]]></username> <password><![CDATA[123]]></password> <dbname><![CDATA[dbname]]></dbname> <initStatements><![CDATA[SET NAMES utf8]]></initStatements> <model><![CDATA[mysql4]]></model> <type><![CDATA[pdo_mysql]]></type> <pdoType><![CDATA[]]></pdoType> <active>1</active> </connection> </default_setup> </resources> <session_save><![CDATA[files]]></session_save> </global> <admin> <routers> <adminhtml> <args> <frontName><![CDATA[admin]]></frontName> </args> </adminhtml> </routers> </admin> </config> |
[CSS] Afficher des icônes issus d’une police dans des champs de formulaire (notamment ceux de Bootstrap)
Source : Support glyph and fa icon inside input.
Code CSS réduit (mis en place dans un Magento avec Font Awesome comme bibliothèque d’icônes) :
Afin que l’icône s’affiche correctement, (il semble que) la structure HTML doivent obligatoirement comporter des <div class="row"><div class="classes-de-votre-grille placeholder-icon">
englobants :
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="row"> <div class="twelve columns placeholder-icon"> <input type="text" id="<?php echo $this->getFieldId('company') ?>" name="<?php echo $this->getFieldName('company') ?>" value="<?php echo $this->escapeHtml($this->getObject()->getCompany()) ?>" title="<?php echo $this->__('Company') ?>" class="input-cartegie input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?> input-lg" <?php echo $this->getFieldParams() ?> placeholder="<?php echo $this->__('Company') ?>" /> <label for="<?php echo $this->getFieldId('company') ?>" class="fa fa-building-o" rel="tooltip" title="<?php echo $this->getStoreLabel('company') ?>"></label> </div> </div> |
La classe .icon-addon
pouvant entrer en conflit avec d’autres styles affectés à des classes plus génériques de type icon-
, j’ai préféré changer le libellé en .placeholder-icon
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.placeholder-icon { position: relative; display: block; } .placeholder-icon:after, .placeholder-icon:before { display: table; content: " "; } .placeholder-icon .glyphicon, .placeholder-icon .fa { position: absolute; z-index: 2; left: 10px; font-size: $baseFontSize + 4; width: 20px; text-align: center; padding: 10px 0; top: $baseFontSize + 4; color: $placeholderColor; } .placeholder-icon .input-text { padding-left: 28px; } |
Code HTML/CSS de la démo initiale :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="container"> <div class="row" style="margin-top: 5%"> <div class="col-md-5"> <div class="form-group"> <div class="icon-addon addon-md"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="icon-addon addon-md"> <select class="form-control"> <option>Select Option</option> <option>Sample</option> <option>Sample</option> </select> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> </div> <div class="form-group"> <div class="input-group input-group-md"> <span class="input-group-addon"><i class="glyphicon glyphicon-filter"></i></span> <div class="icon-addon addon-md"> <input type="text" placeholder="Email" class="form-control" id="email"> <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label> </div> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> </div> </div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
.center-block { float: none; margin-left: auto; margin-right: auto; } .input-group .icon-addon .form-control { border-radius: 0; } .icon-addon { position: relative; color: #555; display: block; } .icon-addon:after, .icon-addon:before { display: table; content: " "; } .icon-addon:after { clear: both; } .icon-addon.addon-md .glyphicon, .icon-addon .glyphicon, .icon-addon.addon-md .fa, .icon-addon .fa { position: absolute; z-index: 2; left: 10px; font-size: 14px; width: 20px; margin-left: -2.5px; text-align: center; padding: 10px 0; top: 1px } .icon-addon.addon-lg .form-control { line-height: 1.33; height: 46px; font-size: 18px; padding: 10px 16px 10px 40px; } .icon-addon.addon-sm .form-control { height: 30px; padding: 5px 10px 5px 28px; font-size: 12px; line-height: 1.5; } .icon-addon.addon-lg .fa, .icon-addon.addon-lg .glyphicon { font-size: 18px; margin-left: 0; left: 11px; top: 4px; } .icon-addon.addon-md .form-control, .icon-addon .form-control { padding-left: 30px; float: left; font-weight: normal; } .icon-addon.addon-sm .fa, .icon-addon.addon-sm .glyphicon { margin-left: 0; font-size: 12px; left: 5px; top: -1px } .icon-addon .form-control:focus + .glyphicon, .icon-addon:hover .glyphicon, .icon-addon .form-control:focus + .fa, .icon-addon:hover .fa { color: #2580db; } |
Angular JS en 60 minutes (jsfiddle.net)
Attention : bac-à-sable foireux !!
Pensez également à bien vérifier la mise à jour des URLS vers les jsfiddles.
Source YouTube : AngularJS Fundamentals in 60 Minutes.
[Change cross commerce] Déclarer une dépendance d’un thème existant dans un nouveau thème.
Dans App/Themes/<plugin>/<module>/Setup/Install.php
, dans la classe Install extends \Change\Plugins\ThemeInstallBase
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
protected function createOrUpdateTheme($plugin, $applicationServices, $transactionManager) { $theme = parent::createOrUpdateTheme($plugin, $applicationServices, $transactionManager); try { $transactionManager->begin(); $theme->setParentTheme($applicationServices->getThemeManager()->getByName('<plugin_module>')); $theme->save(); $transactionManager->commit(); } catch (\Exception $e) { throw $transactionManager->rollBack($e); } return $theme; } |