Source : Responsive Typography With Sass Maps.
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; } |
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 ); |
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; } } } |
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> |
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 ... } |
Pour ajouter des ressources CSS, JS ou Google Fonts externes à votre site, procéder comme suit :
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> |
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 !
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> |
1 |
php shell/n98-magerun.phar local-config:generate |
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> |
Source : Support glyph and fa icon inside input.
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; } |
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; } |
Attention : bac-à-sable foireux !!
Pensez également à bien vérifier la mise à jour des URLS vers les jsfiddles.
Source YouTube : AngularJS Fundamentals in 60 Minutes.
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; } |