Monthavril 2014

[CSS] Centrer horizontalement et verticalement une boite de manière absolue dans une page

Source : http://codepen.io/shshaw/pen/gEiDt

Code HTML pour une boite fixe


<div class="Center-Block Absolute-Center is-Fixed is-Variable Modal" id="Fixed-Modal">
  <div class="Center-Content">
    <h4 class="Title">Absolute Center.</h4>

    <p>This box is absolutely centered within the viewport, horizontally and vertically, using only CSS.</p>
        
    <p><a href="#" class="Shaw-Button trigger-Resize">Resize Me!</a></p>
 
    <p><a href="#" class="Shaw-Button toggle-Modal">Close Modal</a></p>
  </div>
</div>

Code CSS pour une boite fixe


/*
////////////////////////////////////////
 Absolute Centering
//////////////////////////////////////// 
*/
.Absolute-Center { 
  height: 50%; /* Set your own height: percents, ems, whatever! */
  width: 50%; /* Set your own width: percents, ems, whatever! */
  overflow: auto; /* Recommended in case content is larger than the container */
  margin: auto; /* Center the item vertically & horizontally */
  position: absolute; /* Break it out of the regular flow */
  top: 0; left: 0; bottom: 0; right: 0; /* Set the bounds in which to center it, relative to its parent/container */
}

/* //////////////////////////////////////// */
/* Make sure our center blocks stay in their container! */
.Center-Container { position: relative; }

/* //////////////////////////////////////// */
/* Fixed floating element within viewport */
.Absolute-Center.is-Fixed { 
  position: fixed;
  z-index: 999;
}

Code CSS complémentaire pour une boite responsive


/* //////////////////////////////////////// */
/* Min/Max Width */
.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

Code CSS complémentaire pour fixer l’alignement de la boite à droite ou à gauche


/* //////////////////////////////////////// */
/* Align Right, still vertically centered */
.Absolute-Center.is-Right { 
  left: auto;
  right: 20px;
  text-align: right;
}

/* //////////////////////////////////////// */
/* Align Left, still vertically centered */
.Absolute-Center.is-Left { 
  right: auto;
  left: 20px;
  text-align: left;
}

Code CSS complémentaire pour une image responsive


/* //////////////////////////////////////// */
/* Responsive image, still absolutely centered! Apply the classes to the image itself. */
.Absolute-Center.is-Image { 
  width: 50%;
  height: auto;
  padding: 0;
}
.Absolute-Center.is-Image img { 
  width: 100%;
  height: auto;
}

Code CSS complémentaire pour une boite dont le contenu serait trop haut


/* //////////////////////////////////////// */
/* Set content overflow if your content may go too long */
.Absolute-Center.is-Overflow { 
  height: 250px;
  max-height: 100%;
  overflow: auto;
}

Code CSS complémentaire pour une boite à hauteur variable

En cas d’apparition/disparition de contenu sur une action de l’utilisateur, par exemple…


/* //////////////////////////////////////// */
/* Variable content height with display: table; 
Breaks cross browser compatibility, but now has a Modernizr test available!

Modernizr test adds ".absolutecentercontent" to <html> if the browser will center correctly with a variable height, and ".no-absolutecentercontent" if it will not be centered with a variable height so that you can add fallback styles in your CSS or use Javascript to manually center it. */
.absolutecentercontent .Absolute-Center.is-Variable {
  display: table; 
  height: auto;/* Only necessary because height was already declared */
}

Code CSS complémentaire pour boite que l’utilisateur peut redimensionner


/* //////////////////////////////////////// */
/* Allow the user to resize */
.Absolute-Center.is-Resizable {
  min-width: 20%;
  max-width: 90%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
}

.absolutecentercontent .Absolute-Center.is-Resizable { 
  /* necessary to override settings from .is-Variable, if used */
  display: block !important;
}

Autres techniques CSS de centrage horizontal et vertical d’une boite de manière absolue dans une page


/* 
////////////////////////////////////////
 Other Techniques  
//////////////////////////////////////// 
*/

/* //////////////////////////////////////// */
/* Negative Margin Technique */
.Center-Block.is-Negative {
  width: 300px;
  height: 200px;
  padding: 20px;
  position: absolute;
  top: 50%; left: 50%;
  margin-left: -170px; /* (width + padding)/2 */
  margin-top: -120px; /* (height + padding)/2 */
}

/* //////////////////////////////////////// */
/* Display: Table Technique */
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

/* //////////////////////////////////////// */
/* Inline-Block Technique */
.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.Center-Container.is-Inline:after {
  content: ' ';
  height: 100%;
  margin-left: -0.25em; /* to offset spacing. may vary with fonts */
 }
 
.is-Inline .Center-Block { 
  text-align: left;
  max-width: 80%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

.lt-ie8 .is-Inline .Center-Block {
   /* IE7 Support */
  display: block;
  margin-top: ~'expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0")'; 
}

/* //////////////////////////////////////// */
/* Transform Technique */
.is-Translated {
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

/* //////////////////////////////////////// */
/* Flexbox Technique */
.Center-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

[Magento] Remplacement d’une base de données et modification de l’URL d’un site

Note : L’ensemble des commandes SSH de ce tuto sont à taper à la racine de votre projet.

Avec magerun (méthode la plus efficace)

Supprimer la BDD existante, en recréer une vide, importer la nouvelle BDD :

Sans magerun

Si la nouvelle base de données est fournie sous forme d’archive *tar.gz

Décompresser l’archive à la racine de votre projet :

  • avec n’importe quel utilitaire de type Winzip, Winrar, 7zip…
  • …ou décompresser l’archive en tapant la ligne de commande suivante :

Si la nouvelle base de données est fournie sous forme d’archive *.gz

Notez bien le nom du fichier ma_nouvelle_base_de_données.sql que vous venez de décompresser. Vous en aurez besoin dans un instant…

Remplir les tables avec la nouvelle base fraîchement copiée

Pour modifier (où simplement obtenir) les username, password et dbname de votre base de données taper la commande :

Les informations dont vous aurez besoin sont renseignées entre les balises suivantes :

Notez que ce fichier doit également contenir l’URL local de votre site :

Commande SSH à exécuter pour déployer la base :

Attention, lorsque mysql est dockerisé, rajouter un paramètre -h db. La commande suivante sue joue à l’intérieur du conteneur !

Lancer, toujours ds le Docker, le script configurator, qui permet de setter la config (notamment de mettre à jour les URLs) projet :

Exemple :

Attention : -p et le mot de passe doivent être collés !!

Remarque : il reste possible que la commande fonctionne sans qu’on ait besoin de renseigner le mot de passe.

Changer les URLs de la nouvelle base que vous venez d’importer dans votre projet par vos URLs locales

Se connecter à un PhpMyAdmin qui permet d’administrer les tables du projet Magento

Méthode 1:

magento-modifier_URL_bdd

Si le site possède plusieurs Store Views (multilangue) :

Sous phpMyAdmin, dans le champ textarea de l’onglet SQL, taper :

Que faire dans le cas où le contenu des pages s’affiche dans le navigateur mais que les ressources CSS et JS ne sont pas chargées ?

Dans cet ordre :

  1. Afficher la source dans le navigateur (ctrl + u) et vérifier que la racine des URLs vers lesquelles pointent vos ressources CSS et JS est similaire à l’URL du site.
    Dans l’exemple ci-dessous, ce n’est pas le cas :

    magento_bdd-url_error

    Si la racine des URLs vers lesquelles pointent vos ressources CSS et JS est différente de l’URL du site :

    Rendez-vous en base de données et dans la table core_config_data effectuer une recherche (onglet Rechercher) dans la colonne value avec comme opérateur LIKE %…% et comme valeur le libellé de la racine de votre URL (dans notre exemple : media.xxx.com).

    magento_bdd-bad_url_search

    Vous devriez vous retrouver avec les résultats suivants (les URLs dans la dernière colonne de la capture sont déjà modifiées :

    magento_bdd-edit_url

    Editez les URLs dans la dernière colonne comme suit :
    Pour base_xxx_url dans l’avant-dernière colonne, mettrez <url_de_la_racine_de_mon_site>/xxx/ dans la dernière colonne.

  2. Vérifier en backoffice que les caches sont désactivés. System > Cache Management. Attention : j’ai eu un cas où les caches étaient, à priori, désactivés mais lorsque j’ai cliqué sur le bouton « Flush Magento Cache » (1er bouton en haut à droite, au-dessus du tableau) tout est repassé en ENABLED !
    En ligne de commande, on peut supprimer les caches de la manière suivante :

  3. Eventuellement, jouer sur la compression des ressources CSS et JS.
    System > Configuration > (Sidebar) encart ADVANCED > entrée Developer > volets « Merge JavaScript Files » et « Merge CSS Files » à No.

Méthode 2:

Sélectionner la table core_config_data relative à la base de données de votre projet.

Trouver un mot-clé présent dans toutes les URLs qu’on souhaite changer et effectuer une recherche à partir de celui-ci (cf. illustration ci-dessous avec le mot-clé ‘netapsys’) :

  • Onglet Rechercher
  • Dans le tableau, dernière rangée ‘value’ sélectionner l’opérateur LIKE %…%
  • Mettre votre mot-clé dans la colonne ‘Valeur’

01

…puis éditer les URLs souhaitées parmi celles qui s’affichent dans la liste des résultats de recherche.

Se connecter au backoffice du projet Magento.

  • Catalogue > Gérer les produits
  • Sélectionner tous les éléments de la colonne ‘Nom’ qui n’ont pas d’URL de spécifié dans la colonne ‘Sites web’
  • En haut à droite du tableau, champ ‘actions’ choisir ‘Mettre à jour les attributs’

02

  • Dans la colonne de gauche ‘Informations produits’ sélectionner l’entrée ‘Sites web’
  • Cocher la case qui correspond au site qui vous intéresse dans le groupe de champs ‘Modifier les attributs > Ajouter le produit aux sites web’
  • Cliquer sur sauvegarder

03

[Machine virtuelle] Accéder à un site hébergé sur une VM depuis une autre VM (Windows XP montée sur VMware Player).

Sur la VM qui vous servira à naviguer, configurer VMware Player

  • Dans le menu : Player > Manage > Virtual Machine Settings
  • Onglet Hardware
  • Dans la liste, colonnes ‘Device | Summary’, choisir ‘Network Adapter | NAT’.
  • Groupe de champs ‘Network Connexion’ : cocher le bouton radio « NAT : Used to share the host’s IP address ».

vmware

Sur la VM qui héberge votre site, récupérer l’IP qui permettra l’accès distant à votre site

En SSH sur la VM qui héberge le site :

ifconfig


eth0      Link encap:Ethernet  HWaddr 08:00:27:f5:15:b9
          inet addr:192.168.68.64  Bcast:192.168.68.255  Mask:255.255.255.0
          inet6 addr: fe80::a00:27ff:fef5:15b9/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:163739 errors:0 dropped:0 overruns:0 frame:0
          TX packets:71007 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:179564356 (179.5 MB)  TX bytes:5854769 (5.8 MB)

eth1      Link encap:Ethernet  HWaddr 08:00:27:6c:52:66
          inet addr:192.168.56.102  Bcast:192.168.56.255  Mask:255.255.255.0
          inet6 addr: fe80::a00:27ff:fe6c:5266/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:2256660 errors:0 dropped:0 overruns:0 frame:0
          TX packets:1950355 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:526756805 (526.7 MB)  TX bytes:381303328 (381.3 MB)

lo        Link encap:Local Loopback
          inet addr:127.0.0.1  Mask:255.0.0.0
          inet6 addr: ::1/128 Scope:Host
          UP LOOPBACK RUNNING  MTU:16436  Metric:1
          RX packets:126643 errors:0 dropped:0 overruns:0 frame:0
          TX packets:126643 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0
          RX bytes:429443089 (429.4 MB)  TX bytes:429443089 (429.4 MB)

L’adresse IP qui nous intéresse est la 1ère, « eth0 » puis ligne 2 « inet addr:192.168.68.64 » dans notre exemple.

Sur la VM qui vous servira à naviguer, éditer le fichier hosts de Windows

Le fichier hosts se trouve ici : C:\WINDOWS\system32\drivers\etc\hosts

Ajouter la ligne suivante :

192.168.68.64 url-de-mon-site.com

Vous accèderez à votre site hébergé sur une VM distante en tapant url-de-mon-site.com dans votre navigateur.

[CSS][SASS][COMPASS] installation sous Linux (SSH), configuration d’un projet et troubleshooting

Installation de SASS et COMPASS en ligne de commande

Configuration projet

Pour initialiser SASS, taper à la racine du répertoire qui contient le dossier CSS :

Cette commande va, par défaut, créer un fichier config.rb et des répertoires et des fichiers de base dans lesquels seront stockés vos fichiers SASS et les CSS générées.

Editer le fichier config.rb en fonction de votre propre organisation en terme de fichiers et supprimez les fichiers et répertoires par défaut qui vous sont inutiles.
Exemple pour un thème Change :

  • Editer les chemins (paths) vers les répertoires qui stockent vous fichiers css, sass, images, js…
  • Passer line_comments à true
  • Passer output_style à :expanded (mode dev)

Votre arborescence (toujours pour un thème Change) devrait ressembler à ceci :

sass_arbo_theme_change

Pour lancer la génération automatique des fichiers CSS à partir des fichiers SASS, rendez-vous à la racine de votre thème (dans le répertoire où se trouve le fichier config.rb) :

Troubleshooting

/usr/lib/ruby/vendor_ruby/bundler/rubygems_ext.rb:8:in `require’: no such file to load — rubygems (LoadError)

I have a hunch that you have two ruby versions. Please paste the output of following command:

Nuke one version and leave only one. I had same problem with two versions looking at different locations for gems. Had me going crazy for few weeks. Put up a bounty here at SO got me same answer I’m giving to you.

All I did was nuke one installation of ruby and left the one managable via ports. I’d suggest doing this:

  1. Remove ruby version installed via ports (yum or whatever package manager).
  2. Remove ruby version that came with OS (hardcore rm by hand).
  3. Install ruby version from ports with different prefix (/usr instead of /usr/local)
  4. Reinstall rubygems

Could not find rake-10.0.4 in any of the sources

Sometimes we doesn’t get response from http://rubygems.org/ so it will shows error again try

to install latest version (10.0.4) of rake, and next

to update the Gemfile.lock

LoadError on line 70 of /usr/lib/ruby/vendor_ruby/sass/../compass/commands/watch_project.rb: no such file to load — fssm

Failed to build gem native extension (installing Compass)

Essayer ceci, puis ré-essayer d’installer compass :

Failed to build gem native extension

Erreur : sh: make: not found lors de l’install de compass.

Installer le package build-essential :

[jQuery][CSS][Fancybox] Le wrapper de Fancybox ne s’adapte pas correctement aux dimensions d’une image

Nature du bug : Les dimensions du wrapper d’une pop-in Fancybox sont supposées s’adapter automatiquement aux dimensions de l’image que cette pop-in contient. Cependant, l’image est plus grande que la pop-in…

fancybox-bug_image

Résolution du bug : Le problème peut venir d’une déclaration CSS Reset qui entrerait en conflit avec les styles propres au plug-in Fancybox. Cette déclaration fixerait la propriété box-sizing des DIVs à border-box.

La solution consiste à surcharger les styles de Fancybox en fixant la propriété box-sizing des DIVs wrap, outer et inner à content-box.


/*----------*/
/* fancybox */
/*----------*/
#fancybox-wrap,
#fancybox-outer,
#fancybox-inner {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -safari-box-sizing: content-box;
  box-sizing: content-box;
}

[jQuery] Bonne syntaxe pour utiliser une variable comme valeur CSS


$(".text").css('margin-top', maVariable);

[jQuery] Simuler le click sur un élément lorsque l’utilisateur clique sur un autre élément présent dans le DOM

30/07/2015 Retour d’expérience sur ce procédé : mis en place sur un projet et pour des raisons qui restent obscures, le code n’a tout simplement pas fonctionné… Je me suis tourné vers une solution alternative consistant à stocker les URLs dans des variables et à les répercuter sur les liens ou boutons sur lesquels les clics sont délégués :

Source : Click on an element triggers the click on another element [JQuery]

Source : http://stackoverflow.com/questions/773639/how-can-i-simulate-an-anchor-click-via-jquery.

Fonctionne bien avec des liens (élément HTML ) (source : Why can’t I click() links in jQuery?) :

[jQuery] Ajouter une classe ‘before-active’ sur l’élément frère qui précède celui qui possède la classe ‘active’

Au clic sur un onglet, la classe ‘before-active’ viendra se positionner sur l’élément frère le plus proche qui précède celui qui possède la classe ‘active’. Très utile pour styler des menus avec séparateurs.

before-active


<script type="text/javascript">
  jQuery(function(){
    jQuery('.nav-tabs li a').click(function (e) {
      // Adding .before-active for CSS purpose
      jQuery('.nav-tabs li').removeClass('before-active');
      jQuery('.nav-tabs .active').prev('li').addClass('before-active');
    });
  });
</script>


<ul id="productTab" class="nav nav-tabs tab-list">
  <li class="active"><a href="#avis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-avis,ucf}</a></li>
  <li><a href="#donnezavis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-donnezavis,ucf}</a></li>
  <li><a href="#plusinfos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-plusinfos,ucf}</a></li>
  <li><a href="#demos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-demos,ucf}</a></li>
</ul>


.tab-list li {
  background-image: url();
  background-position: right 22px;
  background-repeat: no-repeat;
}

.tab-list li:last-child,
.tab-list li.before-active{
  background-image: none;
}

[Bootstrap Tabs] [jScrollPane] Utiliser jScrollPane sur un élément invisible (initialement en « display:none; »)

Il est normal que ce soit uniquement l’onglet visible qui soit en mesure d’afficher une scroll-bar.
C’est parce que les autres onglet sont invisibles (masqués par « display: none; ») et que le plug-in jScrollPane ne peut par conséquent pas calculer la hauteur de leurs contenus respectifs. Le résultat retourne zéro, donc le script décide de ne pas afficher de scRoll-bar.

Utiliser jScrollPane avec le système d’onglets (tabs) de Twitter Bootstrap

Source : jScrollPane.

Source : Twitter Bootstrap 3 | Tabs

Correction du bug : http://stackoverflow.com/questions/10548617/twitter-bootstrap-tabs-href-anchor-tag-jumping.


<script type="text/javascript">
  jQuery(function(){
    // http://stackoverflow.com/questions/10548617/twitter-bootstrap-tabs-href-anchor-tag-jumping
    jQuery('.nav-tabs li a').click(function (e) {
      e.preventDefault();
      jQuery(this).tab('show');
      jQuery('.tab-content > .tab-pane.active .scroll-pane').jScrollPane({
        // http://jscrollpane.kelvinluck.com/arrows.html
        showArrows: true,
        // http://jscrollpane.kelvinluck.com/drag_size.html
        verticalDragMinHeight: 17,
        verticalDragMaxHeight: 17
      });
    });
  });
</script>


<ul id="productTab" class="nav nav-tabs tab-list">
  <li class="active"><a href="#avis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-avis,ucf}</a></li>
  <li><a href="#donnezavis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-donnezavis,ucf}</a></li>
  <li><a href="#plusinfos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-plusinfos,ucf}</a></li>
  <li><a href="#demos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-demos,ucf}</a></li>
</ul>

<!-- Tab panes -->
<div id="productTabContent" class="tab-content">

  <!-- Début : Avis -->
  <div class="tab-pane active" id="avis">
    <div class="scroll-pane">

    </div>
  </div>
  <!-- Fin : Avis -->

  <!-- Début : Donnez votre avis -->
  <div class="tab-pane" id="donnezavis">
    <div class="scroll-pane">
      <h2>Donnez votre avis</h2>
    </div>
  </div>
  <!-- Fin : Donnez votre avis -->

  <!-- Début : Plus d'infos -->
  <div class="tab-pane" id="plusinfos">
    <div class="scroll-pane">
      <h2>Plus d'infos</h2>
    </div>
  </div>
  <!-- Fin : Plus d'infos -->

  <!-- Début : Demos -->
  <div class="tab-pane" id="demos">
    <div class="scroll-pane">
      <h2>Demos</h2>
    </div>
  </div>
  <!-- Fin : Demos -->
</div>


.tab-content .scroll-pane{
  width: 100%;
  height: 420px;
  overflow: auto;
}

.tab-content .horizontal-only{
  height: auto;
  max-height: 420px;
}

[Police d’icônes] Correction d’un bug d’affichage sous Firefox

Source : http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie.

Les lignes de code suivantes sont à ajouter au fichier .htaccess.


# BEGIN REQUIRED FOR WEBFONTS
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
# END REQUIRED FOR WEBFONTS

Attention : cette directive n’est pas autorisée sur les serveurs de SDV; elle est alors à placer directement dans le vhost.

D’une manière générale, on évite de mettre ces directives dans le .htaccess, ça peut ralentir les perfs et/ou casser le site.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑