Développement

Une boite à outils pour vos faciliter la vie et améliorer la qualité de vos sites.

Afficher une div ou un bloc de contenu sur une page unique

Dans votre fichier votre_thème/layout/theme.php

Afficher une div sur une page unique

PHP
1
2
3
<?php if( is_page('1026') ):?>
<div class="ma-classe"></div>
<?php endif; ?>

 Afficher un bloc de contenu sur une page unique

PHP
1
<?php echo do_shortcode('[content_block id=1940]') ?>

 Afficher un bloc de contenu et une div sur une page unique

PHP
1
2
3
4
5
<?php if( is_page('1026') ):?>
<div class="teste">
<?php echo do_shortcode('[content_block id=1940]') ?>
</div>
<?php endif; ?>

 

Centrer un svg dans son container

Par défaut, les svg sont des éléments en ligne.

CSS
1
2
3
4
div {
display: block;
margin: auto;
}

Il suffit donc de changer leurs types et ainsi nous pouvons les centrer facilement.

Comparer deux fichiers dans Sublime Text

Sublime_Text

La création d’un site internet passe par la création, l’édition et la correction de nombreux fichiers. Il est souhaitable de toujours mettre en place un système de versioning (version de fichier). Cette bonne pratique de développement nous permet de revenir sur d’anciennes version de fichier et de les comparer avec ceux en ligne.

Lire la suite

Feuilles types HTML5 + CSS3

Une feuille HTML5 type :

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Page HTML5</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<header></header>
 
<nav></nav>
 
<section>
<article></article>
<aside></aside>
</section>
 
<footer></footer>
</body>
</html>

 Une feuille CSS3 type avec @media query :

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
/* MOBILE PORTRAIT */
@media only screen and (min-width: 320px) {
}
 
/* MOBILE LANDSCAPE */
@media only screen and (min-width: 480px) {
}
 
/* SMALL TABLET */
@media only screen and (min-width: 600px) {
}
 
/* TABLET/NETBOOK */
@media only screen and (min-width: 768px) {
}
 
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
@media only screen and (min-width: 1024px) {
}
 
/* LAPTOP Medium resolution*/
@media only screen and (min-width: 1280px) {
}
 
/* LAPTOP Hight resolution */
@media only screen and (min-width: 1400px) {
}
 
/* PRINT */
@media print {
}

 

Diminuer la luminosité au passage de la souris sur une image

Le filtre britghtness est une propriété introduite par le CSS3. Il faut donc appliquer le CSS correspondant pour chaque navigateurs.

CSS
1
2
3
4
5
6
7
img:hover {
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
}

 

Charger des fonctions depuis un autre fichier en js

JavaScript
1
2
3
4
5
function max_color(color){
$('body').css("background-color", color);
}
 
window.max_color = max_color ;

// Permet a la fonction d’etre accessible depuis n’importe quelle fichier js charger par votre page web.

Appliquer un style CSS uniquement sur Internet Explorer 9

Pour une valeur négative:

CSS
1
2
3
.header{
top: ~'-60px\9\0';
}

Pour une valeur positive :

CSS
1
2
3
.header{
top: 60px\9\0;
}

! Fonctionne à conditions de placer le hack en dessous de votre code css.

Une erreur dans la bannière de l’espace client de Canal +

canal
Il y a quelques jours de cela, un ami nous a fait remarquer la présence d’une petite erreur sur le site de l’espace client de Canal +.
Celle-ci a très vite été corrigé toutefois nous avons eu le temps de décrypter un peu ce problème.

Lire la suite

Résoudre une erreur Bad value du validateur W3C

w3c
Si comme la team Sosmooth, vous avez l’habitude passer par le validateur du W3C, pour améliorer vos sites internet, il se peut que vous êtes confrontés comme nous à des erreurs pas vraiment évidentes à comprendre.

Lire la suite

1 2 3  
Réalisé par M.Defachelle.