juin 2015 – devfrontend.info

Monthjuin 2015

[SASS] Typographie responsive avec SASS maps

30/06/2015 / admin

Source : Responsive Typography With Sass Maps.

Responsive Typography With Sass Maps (pdf)

[CSS][Foundation 3.2.5] Reset CSS des styles du composant Tabs de Foundation v3.2.5

18/06/2015 / admin

Attention : n’inclut pas la version pills. Source originale obtenue ici : Download Foundation v3.2.5.

/* [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; }

/* [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

15/06/2015 / admin

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();.

// 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 );

// 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

15/06/2015 / admin

en SASS (ajouter la classe .css-reset) :

/* [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;
        }
    }
}

/* [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

12/06/2015 / admin

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.

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 ...
        }
    });
});

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 ...

}

});

<!-- 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>

</div>

</div>

<label for="cb_method">Prélèvement CB</label>

<p class="complementary-information">Confirmation d'achat et facture à l'étape suivante</p>

</div>

<label for="cheque_method">Par chèque</label>

</div>

<label for="sepa_method">Prélèvement SEPA (RIB)</label>

</div>

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen

<div class="radio-box">
    <input onclick="[...]" />
</div>

</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.

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 ...
}

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

10/06/2015 / admin

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

<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>

</text>

</action>

</block>

</reference>

</default>

Version 1.8 et supérieures de Magento avec addLinkRel

<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>

<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

<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>

<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

09/06/2015 / admin

Solution 1: générer un fichier local.xml à l’aide de Magerun :

php shell/n98-magerun.phar local-config:generate

1	php shell/n98-magerun.phar local-config:generate

Solution 2: le copier/coller/remplacer à la main :

Modifier les lignes suivantes à votre convenance :

<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) :

<frontName><![CDATA[admin]]></frontName>

1	<frontName><![CDATA[admin]]></frontName>

Source complète :

<?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>

<?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

* @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)

-->

</install>

<crypt>

</crypt>

<disable_local_modules>false</disable_local_modules>

<db>

<table_prefix><![CDATA[]]></table_prefix>

</db>

<default_setup>

</connection>

</default_setup>

</resources>

<session_save><![CDATA[files]]></session_save>

</global>

<admin>

<args>

</args>

</adminhtml>

</routers>

</admin>

</config>

[CSS] Afficher des icônes issus d’une police dans des champs de formulaire (notamment ceux de Bootstrap)

09/06/2015 / admin

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 :

<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>

<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>

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.

.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;
}

.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 :

<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>

</div>

<option>Select Option</option>

<option>Sample</option>

</select>

</div>

</div>

</span>

</div>

.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;
}

.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)

08/06/2015 / admin

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.

04/06/2015 / admin

Dans App/Themes/<plugin>/<module>/Setup/Install.php, dans la classe Install extends \Change\Plugins\ThemeInstallBase :

    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;
    }

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;

}

Theme by Anders Norén — Up ↑

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Monthjuin 2015

[SASS] Typographie responsive avec SASS maps

[CSS][Foundation 3.2.5] Reset CSS des styles du composant Tabs de Foundation v3.2.5

[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

[CSS][Foundation 3.5.2] Reset CSS des styles du composant Accordion de Foundation v3.5.2

[jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen

[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

Version 1.8 et supérieures de Magento avec setText

Version 1.8 et supérieures de Magento avec addLinkRel

Retirer une ressource externe avec removeItem

[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 :

Solution 2: le copier/coller/remplacer à la main :

[CSS] Afficher des icônes issus d’une police dans des champs de formulaire (notamment ceux de Bootstrap)

Code CSS réduit (mis en place dans un Magento avec Font Awesome comme bibliothèque d’icônes) :

Code HTML/CSS de la démo initiale :

Angular JS en 60 minutes (jsfiddle.net)

[Change cross commerce] Déclarer une dépendance d’un thème existant dans un nouveau thème.

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Monthjuin 2015

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut onclick="" placé sur le booléen

Version 1.8 et supérieures de Magento avec setText

Version 1.8 et supérieures de Magento avec addLinkRel

Retirer une ressource externe avec removeItem

Solution 1: générer un fichier local.xml à l’aide de Magerun :

Solution 2: le copier/coller/remplacer à la main :

Code CSS réduit (mis en place dans un Magento avec Font Awesome comme bibliothèque d’icônes) :

Code HTML/CSS de la démo initiale :

Si l’action à effectuer au clic est pilotée en Javascript par le biais d’un attribut `onclick=""` placé sur le booléen