Le vrai problème était le grand-parent.. utilisateurs de WordPress, vous utilisez souvent le $post->post_parent et il y a un IF sur le Codex de WordPress qui permet de déterminer un enfant d’un parent.

Ceci dis, un parent peut aussi être l’enfant d’un autre parent, qu’on appelle un grand-parent (j’imagine?). Et donc là, il faut savoir distinguer les deux! Je vous montre :

<?php
//on va chercher l'enfant, le parent et le grand-parent en variables.
$current = $post->ID;
$parent = $post->post_parent;
$grandparent_get = get_post($parent);
$grandparent = $grandparent_get->post_parent;

//Si tu as des grands-parents (tu es un chanceux de la vie) et bien affiche les enfants de ton parent
if($grandparent){
    $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0");
}else{
//Si tu n'as pas de grands-parents (paix ait leurs âmes) et bien affiche tes enfants mon homme!
    $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
}

//Affiche toute ça voir toé lalala
if ($children) { ?>
    <?php echo $children; ?>
<?php } ?>

Pour ma part, je veux afficher un menu similaire en 3e level de menu et au 2e level, le parent et l’enfant. Mais le parent comprenait toujours qu’il était un enfant, donc il affichait une « shitload », en bon langage, de liens autres qui étaient les enfants de son parent.. ouf. Vous comprendrez que le code ne fonctionnera pas avec un menu à 4 niveau.. donc il faudra l’ajuster

Le code est détaillé, have fun girls!

Depuis plusieurs semaines je me rend compte de personnes dans mon entourage qui sont victimes de fraudes par internet. Ô vous savez, c’est courant, ça arrive à n’importe qui et la plupart du temps c’est vraiment désolant. Vous sentez vous responsable? non! Mais une chose est sûre, nous n’éduquons pas suffisamment les personnes à risques face aux dangers que comporte le Web de nos jours.

C’est pourquoi j’écris ces lignes, je veux vous faire part de mon expérience mais aussi de solutions et de tactiques qui pourront vous aider.

L’achat : Tout commence par l’achat d’un ordinateur, vous l’avez sûrement déjà vécu. Vous voulez que votre père, mère, oncle, tante ou grand-parent se livre à un apprentissage grandissant d’internet et de l’ordinateur en général afin de ne pas être dépassé dans le monde d’aujourd’hui. C’est le moment crucial. Celui où l’on ne se dit pas assez souvent : mais cette personne est-elle d’ores et déjà heureuse sans ordinateur ou internet? La majorité du temps nous pourrions répondre oui à cette question et sauter tout le reste de l’histoire. Une belle économie d’argent, mais surtout de temps.

Internet : Après l’achat de l’ordinateur, vient Internet. Ce géant qui sommeil attend seulement de nouveaux adeptes afin de les convertir en internautes chevronnés. Plusieurs ne comprendront le principe de prime abord, mais généralement un membre de la famille pourra lui installer les quelques navigateurs/logiciels existants en plus de lui créer plusieurs comptes : gmail, hotmail, facebook, etc.

La découverte : Étape cruciale dans l’apprentissage de la vie est un ordinateur. C’est ce moment où chaque personne se lâche lousse. Le moment où elle se dit : bon, je vais essayer de toute faire moi-même, d’apprendre comment cela fonctionne! Bravo, j’aime cette attitude, c’est de cette façon que les jeunes apprennent tout, en essayant et trop souvent lorsqu’on fait face à l’inconnu, on ne tente rien, on essaie rien de peur de briser quelque chose.

Le danger : Le danger est toujours présent, cependant, il l’est encore plus lorsqu’on arrête de poser des questions autour de nous et qu’on se fie à notre instinct. C’est à ce moment qu’on commence à naviguer, découvrir et malheureusement, croire en tout. Internet est faux. Écoutez-bien ceci : Internet est FAUX. Vous pensez communiquer avec un roi du nigéria? Un prince de Chine vous dis que vous êtes son seul espoir pour récupérer une fortune colossale? Une jolie jeune Russe veut passer sa vie à vos côtés, et bizarrement elle a 20 ans de moins que vous et veut se marier sans vous connaitre réellement?

Pensez à tout cela, pensez-y bien. Est-ce réel? Les gens mentent de nature, ce n’est pas différent sur Internet. Tout le monde se construit une existence de rêve, veut être ce quelqu’un de bien, de grand, quelqu’un de connu. Faites attention, les voleurs courent les rues comme les arnaques sur Internet se propagent à tous les courriels.

La perte : Vous voilà amoureux, amis avec un prince ou simplement humaniste qui croit aider toute une communauté. C’est le moment ou vous penser recevoir une fortune colossale, la visite d’une inconnue ou les remerciements d’un peuple entier pour vos bonnes oeuvres. Comment avez-vous dépensé? 10 000$, 25 000$ ou 400 000$? Vous avez sorti vos réer (il faudra payer l’impôt), pris une deuxième hypothèque et un prêt personnel? Réfléchissez, auriez-vous fait cela pour quelqu’un de près de vous? Votre fille, garçon, frère ou soeur admettons? Peut-être pas. Mais vous le faite en pensant que quelqu’un va vous donner la moitié de sa fortune! Franchement, on devrait vous envoyer réfléchir en prison pour donner de l’argent à des bandits! Ô oui, je suis sérieux, la PRISON!

Exemples typiques : Une personne vous contacte par courriel en vous mentionnant qu’elle est un prince, que sa fortune de 24 millions ne peut sortir de Chine sans un coup de pouce de quelqu’un, en l’occurrence VOUS, qui devez débourser une simple 3500$ pour empocher la moitié, soit 12 millions de la fortune de QUELQU’UN D’AUTRE. On échange les rôles, donneriez-vous 12 millions à un parfait inconnu s’il vous versait 3500$ pour vous aider à récupérer votre fortune ou vous tourneriez-vous vers une personne de confiance, que vous connaissez et qui vous passera de l’argent sans vous demander la moitié de votre fortune?

Juste ce matin j’ai reçu ce genre de demande, je vous en fait part :

I need your assistance to transfer an abandoned $22.5 Million Dollars from Hong-Kong to your country. You will get more info when i receive a positive reply from you.

Best Regards,
Mr.Leung Cheung
Email: cheungleung@kimo.com

Hum, je me demande bien quoi faire. Je pourrais lui récrire et embarquer dans cette histoire. Mais comme je connais internet, je sais que c’est un SPAM, une ARNAQUE, qui veut seulement profiter de moi.

Comment reconnaitre les fraudes : Premièrement, le fraudeur ne parlera sûrement pas votre langue. C’est un bon indice. Deuxièmement, il y aura toujours un cadeau en échange de l’argent. Troisièmement, vous ne connaitrez pas la personne qui vous écrit. Finalement, même si vous pensez connaitre la personne, elle vous demandera de l’aider de toute urgence, elle s’est mis dans un pétrin grave et a besoin d’argent. Vous devriez vérifier ses dires, appeler les parents de la personne, un ami, une connaissance, qui pourrait vous informer sur la situation réelle de cette personne.

Éviter la fraude : Vous doutez que c’est une fraude ou non? Faites une recherche sur google. Tapez l’adresse de l’expéditeur suivi du mot spam ou fraude. Vous tomberez sur des sites qui répertorient les courriels frauduleux. Vous pouvez aussi demander à une personne qui connait bien les ordinateurs ce qu’elle en pense. Ne vous sentez pas gêner de demander, car vous vous sentirez bien plus gêné si vous vous faites prendre. Pensez à votre avenir avant tout.

Internet et l’argent : Vous ne savez peut-être pas, mais un virement d’argent vers un compte tierce n’est jamais protégé, ou presque. On vous demandera de l’argent pour un billet d’avion, qu’on aura ensuite perdu ou qu’on se sera fait voler. On vous dira qu’il faut payer le notaire pour faire des papiers afin de sortir de son pays. Finalement, on vous aura escroqué quelques dizaines ou centaines de milliers de dollars par petits coups jusqu’à ce que vous n’ayez pls un sous. Faites attention avec votre argent sur Internet, ce n’est pas une banque! Utilisez des services sécurisés, ne rentrez pas votre numéro de carte de crédit sur n’importe quel site et informez-vous auparavant. Un transfert d’argent par Western Union ne vous sera jamais renvoyé, même si vous vous êtes faite frauder. Envoyer de l’argent au Nigéria disparaitra et vous n’aurez aucun recours pour le récupérer.

Les solutions : La meilleure solution consiste en l’éducation. Nous devons tous, en tant que professionnels d’Internet si l’on peut dire, sentir un sentiment de protection envers les nouveaux venus. Nous nous devons de les éduquer contre les dangers que cela représente. Prenez le temps de naviguer avec eux, de leurs poser des questions sur ce qu’ils aiment ou n’aiment pas, tentez subtilement de savoir quel genre de courriels ils reçoivent.

Vous pouvez aussi vous immiscer dans leur vie Web. Si vous avez la chance de les protéger de cette façon, sachez que c’est temporaire. Tôt ou tard ils voleront de leurs propres ailes et vous ne pourrez plus rien y changer. C’est pourquoi il faut à tout prix les éduquer. Contrôler le contenu qui passe dans un courriel d’un proche vous donnera du temps pour l’éduquer, mais ne le protégera pas de tout. (oui oui, ici je parle de s’introduire dans les divers comptes de la personne afin de « modérer » ce qui peut s’y trouver.)

En dernier lieu, si vous remarquez que cette personne est prise dans une histoire impossible, vous pouvez toujours tenter de renverser la vapeur en lui envoyant de faux courriels (qui ne proviennent pas de vous mais d’une personne en qui la personne croira) lui mentionnant qu’elle est victime d’une arnaque. Bien sûr ça ne fonctionnera pas à tout coups, mais peut-être pourrez-vous limiter les dégâts.

Les personnes à risque : Les gens seuls, les dépendants affectifs, ceux qui croient en tout, les personnes qui commencent avec Internet, celles qui croient que personne ne leur veut de mal, bref, des gens bien la plupart du temps, qui ne demandent qu’à aider autrui.

En conclusion, on pourrait écrire un livre sur le sujet, mais la n’est pas ma tâche. Ce que je veux, c’est protéger le plus de monde possible. Il ne suffit pas de le dire, il faut agir. Sachez que j’appliques ces méthodes aux personnes que j’aime, je m’assure que rien ne leur arrivera. Vous savez, des gens en viennent au suicide car ils ont tout perdu pour une arnaque, je ne veux pas que ça arrive à ceux qui me sont chers.

« Aimez-les, écoutez-les, protégez-les »

Comment ajouter une classe au parent d’une page si je me trouve dans un de ses enfants?

Voyons le problème!

Premièrement, j’ai un menu en haut de mon site, sans sous-menu.

Je veux ajouter une classe à chacun de ces <li> lorsque je suis dans un de leur enfant. Je précise qu’il n’y a pas de sous-menu mais que j’ai bel et bien utilisé les paramètres ‘parents’ pour chaque page enfant d’une autre page. Voici donc comment j’appels mon menu :

<?php wp_nav_menu( array( 'menu' => 'primaire' ) ); ?>

Ainsi, je sais que j’appels un menu fonctionnel. De plus, je sais que pour obtenir mon résultat, je dois passer par le fichier function.php vu que le wp_nav_menu ne possède pas le paramètre nécessaire.

Voici donc la solution, trouvé sur le site de blago.net, merci!

/* -- add css_class to main menu for a current page in a sub menu --*/
function add_current_page_class( $classes = array(), $item = false ) {
    //$item is each menu item on the page
    global $post;

    $homepage_url = trailingslashit( get_bloginfo('url') );
    if( is_single() || is_404() || $item->url == $homepage_url ) return $classes;

    //get main menu *parent* id from $item (for custom menu)
    $item_parentId = $item->post_parent;
    //check if current $post has same ancestor
    $ancArr = get_post_ancestors( $post->ID );
    if(is_page() && $post->ID == $item_parentId){
        $classes[] = 'current-post-ancestor';
    }else{
        foreach($ancArr as $ancestor){
            if( is_page() && $ancestor == $item_parentId ){
                $classes[] = 'current-post-ancestor';
            }
        }
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'add_current_page_class', 10, 2 );

Ceci vous donnera un résultat comme ça :

<li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101 current-post-ancestor">

au lieu de ça :

<li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101">

Voici le résultat final :

Étape 1 : Découper un sapin dans du carton suffisamment grand!

Étape 2 : Créer une base solide (peut supporter plus de 200 lbs)

Pour faire solide, nous avons découpés des morceaux de carton avec un hauteur de 21 pouces (les rebords de notre carton original) et une longueur équivalent à 3/4 de notre sapin (2 morceaux collés) afin d’être suffisamment large pour ne pas qu’il balance. Ensuite, nous avons découpés des fentes (4) dans chaque morceaux à 3, 8, 13 et 18 pouces respectivement. Pour finir, il suffit de les enchâsser  l’une dans l’autre comme dans les caisses de bière. Le test du poids est effectué avec une planche à découper posé à plat sur la structure et un humain debout dessus. Les coches de la 3e photo servent à insérer le sapin, pour l’aligner.

Étape 3 : Peinturer le sapin!

Peinture verte, un peu de noir/bleu pour la teinte, ce n’est pas complètement réussi mais on ne peut pas se plaindre, c’est en carton!

Étape 4 : Faire un tronc d’arbre!

Pour ce faire, nous avons découper un morceau qui allait prendre tout un carré dans notre base. En hauteur, il faut que ce morceau touche par terre pour être solide dans la base du sapin. De plus, il ne fini pas en haut du sapin afin de laisser la pointe faire son oeuvre de beauté. Les incisions pratiquées de chaque côtés ne sont pas sur toute la longueur, mais uniquement sur la hauteur que le sapin occupera pour y insérer les feuilles.

Étape 5 : Insérer le tronc dans la base et la peinturer

On commence par peinturer la base pour qu’elle ne soit pas couleur carton. Ensuite, on insère le tronc dans la base (ça devrait être solide). Finalement, faites de petits trous dans la base sur les feuilles qui forment le contour. Ces trous vous permettront de passer un attache câble (tie wrap) dans la base ainsi que dans le sapin pour le solidifier.

Étape 6 : Insérer les feuilles dans le tronc

Première photo, on insère la feuille de sapin dans une fente ainsi que dans la base. Ensuite, on passe un attache câble dans le sapin et dans la base pour faire tenir le tout ensemble. Finalement, voici le résultat. N.B. Nous avons décidés, à la fin, de ne pas attacher les feuilles du sapin avec la base. Nous avons préféré coller les feuilles au milieu de la base et attacher les 4 ensembles. La base sert encore de tronc, pour ne pas que les feuilles bougent de gauche à droite mais l’arbre va jusqu’au milieu. Ceci est dû au trou qu’il y avait au milieu si on ne collait pas les feuilles.

Étape 7 : Assembler les 4 feuilles sur le tronc

C’est ici que nous nous sommes rendus compte qu’il fallait coller les feuilles au milieu plutôt que de les assembler avec le tronc!

Étape 8 : Décorer le sapin (dernière étape!!!)

Voilà, l’étape que vous faites comme vous voulez!

En espérant que vous aurez autant d’intérêt à tenter l’expérience une année que nous l’avons eus à le faire!

Depuis la mise à jour de WordPress 2.9.1 qui permet d’ajouter une simple ligne pour la transformer en un vidéo, un bug d’affichage de ce dit vidéo est présent dans Internet Explorer.

Le problème :

http://www.youtube.com/watch?v=y0zAQ_jQDA4

Cette ligne se transforme en un vidéo embed sur votre page Web si vous la placez sur une ligne, sans rien autour (texte ou html)

Comme ceci :

Cependant, dans Internet Explorer vous verrez ceci :

Et voici comment voir votre vidéo dans Internet Explorer sans vous casser la tête..

<div>
votre lien de vidéo (si moi je l'insère, on verra un vidéo)
</div>

Il faut mettre un div avant et après, sur 3 lignes séparées, afin que le vidéo se transforme en vidéo, sinon vous aurez du texte à la place.. tout ça dans l’onglet HTML de wordpress !

Merci à AnsonAlex.com pour l’astuce!

L’hexadécimale c’est en somme une numérotation des couleurs en 6 caractères. Chaque couleur correspond à un code de 6 caractères qui peut être réduit à 3 lorsque les caractères sont redondants. Pour écrire de l’hexadécimale, vous possédez 16 caractères différents. En chiffres, nous avons de 0 à 17. En hexadécimales, nous avons de 0 à 11.

0 = 0, 1 = 1, 2 = 2, 3 = 3, 4 = 4, 5 = 5, 6 = 6, 7 = 7, 8 = 8, 9 = 9, 10 = A, 11 = B, 12 = C, 13 = D, 14 = E, 15 = F, 16 = 10, 17 = 11. À gauche les décimales et à droite les hexadécimales.

Les couleurs de base que tout le monde doivent savoir :

#000

#FFF (blanc)

#F90

#90F

#00F

#F00

#0F0

#F0F

#FF0

#0FF

Maintenant, voici quelques couleurs qui se retiennent facilement.. à vous de juger

#bebebe

#agacee

#ace

#0ef

Finalement, voici de BELLES couleurs !

#289dd7

#12d8cb

#bd0f94

#bf1784

#56a620

#dfc7010

Je sais que je vous l’avais p-e déjà écris quelque part.. mais voici un site pour vous « péter » les yeux aux couleurs.. c’est comme la drogue, mais visuelle!

http://color.aurlien.net/

Depuis longtemps.. vous cherchez une extension facile pour mettre en évidence votre code.. sans avoir à vous soucier de balises compliquées, sans avoir des pertes dans votre code et tout cela, évidemment, sans perdre trop de temps.

Et bien l’un des plus récents plugins que j’ai installé est mon nouveau Syntax Highlighter ! Franchement, il en vaut le coup et voici comment l’installer (en fait c’est 2 plugins, mais bon, tenez-vous pour dire qu’on a rien sans rien dans vie !).

1. Premièrement, vous avez besoin de SyntaxHighlighter Evolved. Ceci est le coeur de l’extension. Je vous suggère la version 2, pour le line-wrapping mais à vous de voir ! (les versions sont dans « settings » en haut complètement.

2. Ensuite je vous suggère d’installer TinyMCE Advanced si ce n’est déjà fait. Il vous apportera un tout joli petit bouton avec le dernier plugin suivant..

3. SyntaxHighlighter TinyMCE Button ! Ceci vous procure un bouton dans votre barre TinyMCE marqué « code ». Ça ouvre alors une nouvelle fenêtre dans laquelle vous choisissez le type de code ainsi qu’un textarea où mettre votre code.

4. Maintenant, pour être sur que cela fonctionne, allez dans votre SyntaxHighlighter TinyMCE Button « settings » et choisissez dans les options en haut « SyntaxHighlighter Evolved », l’autre plugin qu’on a installé précédemment.

Et voilà.. en moins de deux minutes j’ai fait ces étapes et installé cette extension sur un autre blogue.. have fun !

Comment l’installer ?

Télécharger la dernière version de jQuery Mobile

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

Ensuite et bien, dites-vous que chaque élément que vous créez doit se voir attribuer un data-role. De plus, votre page restera blanche si vous ne mettez pas à votre conteneur principal (div qui suit votre body) un data-role= »page ».

Comment faire plusieurs colonnes ?

<div class="ui-grid-a">
	<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
	<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>

<div class="ui-grid-b">
	<div class="ui-block-a">Block A</div>
	<div class="ui-block-b">Block B</div>
	<div class="ui-block-c">Block C</div>
</div>

Et ainsi de suite, pour qu’il partage en blocs égaux.

Créer des sections qui se déplient

Ouvert au départ, par défaut,

<div data-role="collapsible">
	<h3>I'm a header</h3>
	<p>I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.</p>
</div>

Fermé au départ, pour cacher du contenu,

<div data-role="collapsible" data-collapsed="true"></div>

Vous pouvez aussi faire des « collapsible » à l’intérieur de d’autres « collapsible » ! Magie magie !

Utiliser différents thèmes

<div data-role="page" data-theme="a"></div>
<div data-role="page" data-theme="b"></div>
<div data-role="page" data-theme="c"></div>
<div data-role="page" data-theme="d"></div>
<div data-role="page" data-theme="e"></div>

Simplement en choisissant parmi les thèmes par défaut ! J’ai mis en surbrillance les plus beaux ^^

Éléments de formulaire

Appliquer un conteneur à chaque bloc

<div data-role="fieldcontain">
	...label/input code goes here...
</div>

Champ texte normal

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

Pour un mot de passe

<div data-role="fieldcontain">
    <label for="password">Password Input:</label>
    <input type="password" name="password" id="password" value="" />
</div>

Un « textarea »

<div data-role="fieldcontain">
	<label for="textarea">Textarea:</label>
	<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
</div>

Un outil de recherche

<div data-role="fieldcontain">     <label for="search">Search Input:</label>     <input type="search" name="password" id="search" value="" /> </div>

Des « checkbox »

<div data-role="fieldcontain">
 	<fieldset data-role="controlgroup">
		<legend>Agree to the terms:</legend>
		<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
		<label for="checkbox-1">I agree</label>
    </fieldset>
</div>

Un « checkbox » sans le carré « checked »

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">

Des boutons radio

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
    	<legend>Choose a pet:</legend>
         	<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
         	<label for="radio-choice-1">Cat</label>

         	<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
         	<label for="radio-choice-2">Dog</label>

         	<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3"  />
         	<label for="radio-choice-3">Hamster</label>

         	<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
         	<label for="radio-choice-4">Lizard</label>
    </fieldset>
</div>

Un « select option »

<div data-role="fieldcontain">
	<label for="select-choice-1" class="select">Choose shipping method:</label>
	<select name="select-choice-1" id="select-choice-1">
		<option value="standard">Standard: 7 day</option>
		<option value="rush">Rush: 3 days</option>
		<option value="express">Express: next day</option>
		<option value="overnight">Overnight</option>
	</select>
</div>

Un flip (on/off)

<div data-role="fieldcontain">
	<label for="slider">Select slider:</label>
	<select name="slider" id="slider" data-role="slider">
		<option value="off">Off</option>
		<option value="on">On</option>
	</select>
</div>

Un « slider »

<div data-role="fieldcontain">
	<label for="slider">Input slider:</label>
 	<input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
</div>

Une liste d’éléments

<ul data-role="listview" data-theme="g">
	<li><a href="acura.html">Acura</a></li>
	<li><a href="audi.html">Audi</a></li>
	<li><a href="bmw.html">BMW</a></li>
</ul>

Liste d’éléments utiles

Les différents icônes possible; ne pas oublier d’ajouter le dossier images.

<a href="#" data-role="button" data-inline="true" data-icon="alert">data-icon="alert"</a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-d">data-icon="arrow-d"</a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-l">data-icon="arrow-l"</a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-r">data-icon="arrow-r"</a>
<a href="#" data-role="button" data-inline="true" data-icon="arrow-u">data-icon="arrow-u"</a>
<a href="#" data-role="button" data-inline="true" data-icon="back">data-icon="back"</a>
<a href="#" data-role="button" data-inline="true" data-icon="check">data-icon="check"</a>
<a href="#" data-role="button" data-inline="true" data-icon="delete">data-icon="delete"</a>
<a href="#" data-role="button" data-inline="true" data-icon="forward">data-icon="forward"</a>
<a href="#" data-role="button" data-inline="true" data-icon="gear">data-icon="gear"</a>
<a href="#" data-role="button" data-inline="true" data-icon="grid">data-icon="grid"</a>
<a href="#" data-role="button" data-inline="true" data-icon="home">data-icon="home"</a>
<a href="#" data-role="button" data-inline="true" data-icon="info">data-icon="info"</a>
<a href="#" data-role="button" data-inline="true" data-icon="minus">data-icon="minus"</a>
<a href="#" data-role="button" data-inline="true" data-icon="plus">data-icon="plus"</a>
<a href="#" data-role="button" data-inline="true" data-icon="refresh">data-icon="refresh"</a>
<a href="#" data-role="button" data-inline="true" data-icon="search">data-icon="search"</a>
<a href="#" data-role="button" data-inline="true" data-icon="star">data-icon="star"</a>

Sources :

http://jquerymobile.com/demos/1.0a4.1/#docs/lists/index.html

http://devgrow.com/mobile-web-dev-using-jquery-mobile/

http://dhtmlexamples.com/2011/05/05/setting-icons-on-a-jquery-mobile-button/

« Cliquer sur le bouton +1, c’est faire savoir que quelque chose vous a vraiment plu. Vos +1 aideront vos amis, vos contacts et bien d’autres personnes à trouver le meilleur du Web lorsqu’ils font une recherche. »

Présentement, ce service est uniquement disponible sur www.google.com en anglais. Étant connecté à votre compte Google, vous pourrez voir s’afficher les +1, sinon, just too bad. Ceci dit, lorsque vous trouverez un lien, vous pourrez voir si vous avez des amis qui recommandent ce lien.

Vous pouvez choisir de rendre publique ou privé vos +1 dans votre profil Google. Cependant, lorsque vous donnez un +1 il est automatiquement public, en dehors de votre profil. Seulement votre liste personnelle peut s’avérer privée.

Comment installer le +1 sur votre site ?

Rien de plus simple, allez sur ce site :

http://www.google.com/intl/fr/webmasters/+1/button/

Vous n’avez qu’à choisir les options qui s’offrent à vous. Ensuite, procédez à l’implantation dans votre site à commencer par le code Javascript

<script src="http://apis.google.com/js/plusone.js" type="text/javascript">// <![CDATA[
   {lang: 'fr'}
// ]]></script>&lt;script type="text/javascript" src="http://apis.google.com/js/plusone.js"&gt;{lang: 'fr'}&lt;/script&gt;

avant votre </head> ou votre </body>. Par la suite, ajoutez le code google correspondant à votre sélection à l’endroit désiré sur votre site :

<g:plusone size="small"></g:plusone>

Et voilà, tout fonctionne comme sur des roulettes ! Merci Google de nous apporter toujours de si merveilleuses idées, parfois ratées, parfois géniales et d’autres fois.. comme celles-ci. Sait-on jamais, la recherche Web est toujours de mieux en mieux, dans un avenir rapproché nous recommanderons peut-être tous des liens à nos amis !

Voici un vidéo pour vous montrer les fonctionnalités :

Sources :

http://www.google.com/+1/button/

http://www.google.com/support/profiles/bin/answer.py?hl=fr&answer=1047397&p=sign_up_about_plusones

Petit plus : Je viens de trouver un plugin WordPress que vous pourrez utiliser afin de vous simplifier la vie, si vous avez un blog évidemment ! Malheureusement, je trouve que ça s’en vient compliqué avec tous ces icônes sur les pages.. bon, voilà l’url !

http://googlemesocialnetworking.blogspot.com/2011/04/google-1-button-for-wordpress-plugin.html

CodeStyling Localization

Une découverte en soi.. modifier tous les strings de son site WordPress tel : Continue reading, Edit, Leave a comment et compagnie ! J’en ai trouvé plusieurs qui le font, pas si mal je vous dirais, mais pas comme celui-ci. Cette extension permet de faire le tour interne de toutes les extensions en plus du site même. Nous utilisons souvent WPML dans notre compagnie pour faire des sites bilingues. Et bien le même outil produit par WPML ne recherche pas aussi efficacement toutes les traductions ! Et pour dire, il y en a plus de 3000, imaginez

Vous pouvez trouver cette extension en lançant une recherche avec son nom dans votre onglet extensions, ou bien en suivant ce lien : http://wordpress.org/extend/plugins/codestyling-localization/

Vous trouverez toutes les ressources nécessaires sur le site de l’extension. Cependant, un petit rappel à suivre pour l’utiliser.

Après l’installation :

1. Aller dans Outils > Localisation
2. Choisir ce que vous voulez traduire (toute la liste y est)
3. Ajouter une nouvelle langue (peu importe le nom..)
4. Lancer ‘rescanner’ de ce qu’on veut traduire
5. Faire modifier
6. Faites une recherche dans la colonne de gauche pour trouver le texte original de ce que vous voulez traduire
7. Faire modifier, ajouter dans ‘Traduction’ le terme désiré.
8. Sauvegarder
9. En haut de la page, cliquer sur « générer le fichier .mo ». Si vous ne le faites pas, vous n’aurez pas de traduction visible.

Petite mise en garde. Récemment j’ai installé cette extension sur le site d’un client. Malheureusement, le site est devenu une page blanche sur à peu prêt tous les navigateurs. Nous supposons que ce plugin n’est pas compatible avec une version antérieure de WordPress qui fonctionnerait sur PHP4. Donc, malheureusement pour vous, si vous ne faites pas vos mises à jour WordPress, vous ne pourrez bénéficier de ce petit bijou !

After the Deadline

Je viens de tester cette extension sortie tout droit de la liste de Sébastien Giroux. Et bien, figurez-vous qu’au moment de la parution de son article, l’extension était en anglais ! Depuis le 24 mars, cette extension est aussi offerte dans quelques autres langues dont.. le français. Voilà qui devrait m’éviter bien des fautes d’orthographe

Vous pouvez trouver cette extension ici : http://wordpress.org/extend/plugins/after-the-deadline/

Et plus d’explications sur cet article : http://www.sebastien-giroux.com/2011/03/my-favorite-wordpress-plugins/

Contact Form 7

Qui veut se faire des formulaires rapidement et efficacement ? Bon je vous le donne en mille, moi ! Récemment, Axial Développement a sorti un produit que vous pouvez tester gratuitement pendant 30 jours : Ekoforms. La simplicité en terme de création et distribution de formulaires en ligne.

Cependant, nous nous intéressons aux extensions WordPress et comme Ekoforms n’est pas encore sorti en extension, voici Contact Form 7.

Il vous permet de créer un formulaire, avec tous les champs nécessaires et d’ensuite personnalisé le courriel que vous recevez. Après cela, il suffit de l’insérer dans une page avec le petit bout de code donné et le tour est joué !

Magique, pratique et rapide, merci Contact Form 7 !

Google Analytics for WordPress

Peu importe le genre d’utilisateurs que vous êtes, vous ne pouvez pas contourner Analytics ! Allez, jetez vos vieux boutons « 1152 visiteurs ont vu cette page » et abonnez-vous à Google Analytics ! Google Analytics for WordPress est une extension qui vous permet de voir rapidement en un clin d’oeil l’évolution de l’achalandage sur l’une de vos pages Web.

Vous remarquerez en vous promenant que le chargement de l’administration prend un peu plus de temps, évidemment, car il doit charger une image pour chaque page que vous avez. Le résultat ressemble à celà :

Avouez que vous êtes tentés Un petit plus lorsque vous vous promenez dans votre administration !

http://codex.wordpress.org/fr:Marqueurs_de_Modele/the_content

http://codex.wordpress.org/fr:Marqueurs_de_Modele/the_excerpt

Cependant, vous pourriez trouver plus d’informations en regardant ces pages en anglais. Il faut comprendre une chose, the_content affiche le contenu de l’article en complet, peu importe ce que vous lui ferez. Tandis que the_excerpt affichera l’extrait de l’article et/ou sera plus facile à contrôler.

Voici donc ce que j’ai découvert ce soir et qui pourrait vous intéresser.

$contenu = the_content();

substr($contenu,0,150);

retournera tout le contenu de l’article..

$contenu = the_excerpt();

substr($contenu,0,150);

va se plier aux 150 caractères.

Et un mystère de résolu !! Il suffit de les noter, ensuite, plus de problèmes de mémoire

DrPic.com

http://www.drpic.com/

Un des ajouts les plus courant au Web ces derniers temps est le pouvoir de modifier ses propres images en ligne. Et bien, ce sit vous le permet de plusieurs façons. Rapide, simple et efficace !

Minus

http://min.us/

Quand j’ai découvert ce site.. wow ! Je pouvais maintenant glisser dans un site une image afin d’obtenir un lien vers cette image en ligne. Bien pratique pour le partage. De plus, la possibilité de mettre ses images publiques ajoute aux +++ !

Piknik Color Picker

http://color.aurlien.net/

Mettez vos lunettes soleil ! Ce site est un assemblage extrêmement puissant de couleurs Déplacez votre souris et émerveillez-vous.. 2 minutes ! je l’utilise pour trouver des couleurs, de belles couleurs sourtout ! Ensuite, je passe au prochain site pour les agencements.

Color Schemer Online

http://www.colorschemer.com/online.html

Comme je viens de le dire, faire des agencements de couleur c’est pratique ! C’est beau, bon et pas cher.

Markup

http://markup.io/

Pour faire un screenshot d’une page, dessiner dessus et l’envoyer à vos amis Très pratique, facile d’accès et bien fait ! Cependant, dernièrement j’ai vécu quelques problèmes. 1. En local, ça ne fonctionne pas. 2. Les dimensions d’écran peuvent faire varier ce que vous dessinez sur vos pages.. dommage !

Voilà En primeur, prochain article : Pictobuilder et PictoBrowser ! 2 article : Comment l’utiliser et Comment vous débugguer !

Quand j’étais passé de Chrome è RockMelt, j’avais une vie sociale démesurée.. et le contraire s’appliqua en revenant à Chrome. J’étais alors très déçu, sourtout car je perdais mes fils de nouvelles twitter/facebook/rss qui étaient alors dans ma barre de droite de mon écran, ultra accessible et vraiment facile à lire ! Depuis mon déménagement sur Chrome, j’en suis venu à utiliser seesmic, ou chrome bird pour mon compte twitter. Ce que je n’aime cependant pas, c’est qu’ils ne me laissent pas savoir ceux que j’ai lu de ceux que je n’ai pas lu avec une couleur évidente. Lorsque j’ouvre ma fenêtre Chrome Bird, il devrait logiquement marquer tous les messages « as read » et les nouveaux, les afficher d’une couleur différente ! Haaaaaa la guerre la guerre.. mais à quoi bon !

Mon sujet n’étant pas là, voici un site qui s’est vu afficher sur le site de @Sventovit inscrit un peu plus haut : http://sixrevisions.com/tools/10-google-chrome-extensions-for-boosting-your-productivity/

Pour votre curiosité, j’ai ajouté 3 extensions de cette liste à mes extensions Chrome :

Pixlr Grabber, Copy Without Formatting et Web2PDFConverter

Bien sûr je suis intégrateur Web, ça m’est pratique mais pas nécessairement pour tout le monde. Cependant, voici ceux de ma liste que vous pourriez être tenté d’ajouter

TikiSurf iPhone (voir son site sur iphone/ipad/samsung)
https://chrome.google.com/webstore/detail/bkokcmfolfandebcgebllapgecabfkla

EyeDropper (sélectionner une couleur sur un site, une pipette quoi)
https://chrome.google.com/webstore/detail/hmdcmlfkchdmnmnmheododdhjedfccka

DropBox (uploader et partager ses fichiers sur dropbox)
https://chrome.google.com/webstore/detail/cleemiokmnpncbdoepicpphinodgekfi

Translator (de l’api de google translate, il transforme tous vos textes dans la langue désirée)
https://chrome.google.com/webstore/detail/abcgneajidenbgfaghpleafgpppbdpbh

WiseStamp (pour ajouter votre signature courriel à n’importe quel client courriel en ligne)
https://chrome.google.com/webstore/detail/pbcgnkmbeodkmiijjfnliicelkjfcldg

Cette image vous plait? Continuons !

Alors voici le fichier JS linké sur votre page !

/*
* jQuery selectbox plugin
*
* Copyright (c) 2007 Sadri Sahraoui (brainfault.com)
* Licensed under the GPL license and MIT:
*   http://www.opensource.org/licenses/GPL-license.php
*   http://www.opensource.org/licenses/mit-license.php
*
* The code is inspired from Autocomplete plugin (http://www.dyve.net/jquery/?autocomplete)
*
* Revision: $Id$
* Version: 0.5
*
* Changelog :
*  Version 0.5
*  - separate css style for current selected element and hover element which solve the highlight issue
*  Version 0.4
*  - Fix width when the select is in a hidden div   @Pawel Maziarz
*  - Add a unique id for generated li to avoid conflict with other selects and empty values @Pawel Maziarz
*/
jQuery.fn.extend({
selectbox: function(options) {
return this.each(function() {
new jQuery.SelectBox(this, options);
});
}
});

/* pawel maziarz: work around for ie logging */
if (!window.console) {
var console = {
log: function(msg) {
}
}
}
/* */

jQuery.SelectBox = function(selectobj, options) {

var opt = options || {};
opt.inputClass = opt.inputClass || "selectbox";
opt.containerClass = opt.containerClass || "selectbox-wrapper";
opt.hoverClass = opt.hoverClass || "current";
opt.currentClass = opt.selectedClass || "selected"
opt.debug = opt.debug || false;

var elm_id = selectobj.id;
var active = -1;
var inFocus = false;
var hasfocus = 0;
//jquery object for select element
var $select = $(selectobj);
// jquery container object
var $container = setupContainer(opt);
//jquery input object
var $input = setupInput(opt);
// hide select and append newly created elements
$select.hide().before($input).before($container);

init();

$input
.click(function(){
if (!inFocus) {
$container.toggle();
}
})
.focus(function(){
if ($container.not(':visible')) {
inFocus = true;
$container.show();
}
})
.keydown(function(event) {
switch(event.keyCode) {
case 38: // up
event.preventDefault();
moveSelect(-1);
break;
case 40: // down
event.preventDefault();
moveSelect(1);
break;
//case 9:  // tab
case 13: // return
event.preventDefault(); // seems not working in mac !
$('li.'+opt.hoverClass).trigger('click');
break;
case 27: //escape
hideMe();
break;
}
})
.blur(function() {
if ($container.is(':visible') && hasfocus > 0 ) {
if(opt.debug) console.log('container visible and has focus')
} else {
hideMe();
}
});

function hideMe() {
hasfocus = 0;
$container.hide();
}

function init() {
$container.append(getSelectOptions($input.attr('id'))).hide();
var width = $input.css('width');
$container.width(width);
}

function setupContainer(options) {
var container = document.createElement("div");
$container = $(container);
$container.attr('id', elm_id+'_container');
$container.addClass(options.containerClass);

return $container;
}

function setupInput(options) {
var input = document.createElement("input");
var $input = $(input);
$input.attr("id", elm_id+"_input");
$input.attr("type", "text");
$input.addClass(options.inputClass);
$input.attr("autocomplete", "off");
$input.attr("readonly", "readonly");
$input.attr("tabIndex", $select.attr("tabindex")); // "I" capital is important for ie

return $input;
}

function moveSelect(step) {
var lis = $("li", $container);
if (!lis) return;

active += step;

if (active < 0) {  active = 0;  } else if (active >= lis.size()) {
active = lis.size() - 1;
}

lis.removeClass(opt.hoverClass);

$(lis[active]).addClass(opt.hoverClass);
}

function setCurrent() {
var li = $("li."+opt.currentClass, $container).get(0);
var ar = (''+li.id).split('_');
var el = ar[ar.length-1];
$select.val(el);
$input.val($(li).html());
return true;
}

// select value
function getCurrentSelected() {
return $select.val();
}

// input value
function getCurrentValue() {
return $input.val();
}

function getSelectOptions(parentid) {
var select_options = new Array();
var ul = document.createElement('ul');
$select.children('option').each(function() {
var li = document.createElement('li');
li.setAttribute('id', parentid + '_' + $(this).val());
li.innerHTML = $(this).html();
if ($(this).is(':selected')) {
$input.val($(this).html());
$(li).addClass(opt.currentClass);
}
ul.appendChild(li);
$(li)
.mouseover(function(event) {
hasfocus = 1;
if (opt.debug) console.log('over on : '+this.id);
jQuery(event.target, $container).addClass(opt.hoverClass);
})
.mouseout(function(event) {
hasfocus = -1;
if (opt.debug) console.log('out on : '+this.id);
jQuery(event.target, $container).removeClass(opt.hoverClass);
})
.click(function(event) {
var fl = $('li.'+opt.hoverClass, $container).get(0);
if (opt.debug) console.log('click on :'+this.id);
$('li.'+opt.currentClass).removeClass(opt.currentClass);
$(this).addClass(opt.currentClass);
setCurrent();
hideMe();
});
});
return ul;
}

};

À mettre dans votre header à la fin des lignes… bien après le formScript.js on va dire

echo '<script src="' . pnGetBaseURI() . '/themes/resources/js/jquery-min.js" type="text/javascript"></script>'; echo '<script src="' . pnGetBaseURI() . '/themes/resources/js/jquery.selectbox-0.5.js" type="text/javascript"></script>';

Dans cette ordre ! Le premier fichier est jquery tout simplement, donc, vous devez appeler jQuery avant d’appeler votre script sinon cela ne fonctionnera pas !

Ensuite, vous avez besoin d’un formulaire (votre page dans le cms bien entendu..)

<div id="nousjoindre">
<div id="hiddendiv"><form method="post">
<fieldset style="border: none;"> <input name="subject" type="hidden" value="Pour nous joindre" /> <input name="redirect" type="hidden" value="fr/envoie-reussie.html" /><label>Prénom : </label>
<input id="prenom" onkeyup="FormValidate(this,event)" name="prenom" type="text" />

<label>Nom : </label>
<input id="nom" onkeyup="FormValidate(this,event)" name="nom" type="text" />

<label>Courriel : </label>
<input id="email" onkeyup="FormValidate(this,event)" name="email" type="text" />

<label>Téléphone: </label>
<input id="phone" onkeyup="FormValidate(this,event)" name="phone" type="text" />

<label>Sujet de votre requête : </label>

<select id="myselectbox" name="myselectbox"> <option value="Aucun sujet en particulier">Aucun sujet en particulier</option> <option value="Droit de la famille et de la personne">Droit de la famille et de la personne</option> <option value="Droit criminel et pénal">Droit criminel et pénal</option> <option value="Responsabilité et litige civil">Responsabilité et litige civil</option> <option value="Sûreté et droit immobilier">Sûreté et droit immobilier</option> <option value="Droit administratif">Droit administratif</option> <option value="Droit du travail et de l'emploi">Droit du travail et de l'emploi</option> <option value="Droit des affaires">Droit des affaires</option> <option value="Faillite et insolvabilité">Faillite et insolvabilité</option> <option value="Droit municipal">Droit municipal</option> </select><label>Personne ressource choisie : </label>

<select id="myselectbox2" name="myselectbox2"> <option value="Personne en particulier">Personne en particulier</option> <option value="Me Michel Isabelle">Me Michel Isabelle</option> <option value="Me Patsy Bouthillette">Me Patsy Bouthillette</option> <option value="Me Pierre Leduc">Me Pierre Leduc</option> <option value="Me David Robinson">Me David Robinson</option> <option value="Me François Simard">Me François Simard</option> </select><label>Commentaires: </label><textarea cols="20" rows="10" name="comm"></textarea>

<input id="soumettre" type="submit" value="Envoyer" /></fieldset>
</form></div>
</div>

Comme vous pouvez le remarquer, j’ai 2 beaux select et non un seul Vous pouvez aussi remarquer que j’ai le FormValidate que j’ai modifié pour l’occasion en enlevant les contours de bordure et en y ajoutant des beaux petits crochets verts pomme !

Ensuite, dans votre thème vous devez appeler ceci au début :

<script type="text/javascript">// <![CDATA[
 $(document).ready(function() {  $('#myselectbox').selectbox({debug: true});  $('#myselectbox2').selectbox({debug: true}); });
// ]]></script>

Et oui, 2 select, 2 lignes de code.. vous comprenez pour la suite ? Non? Et bien, ces lignes de code ne servent que pour les select donc, ce que je vous montre aujourd’hui fonctionne pour vos select principalement Remplacer un input text par une image c’est beaucoup plus simple..

Voici la partie la plus ardue : le CSS ! (je vous conseil de le copier dans un document et de refaire l’indentation.. il était trop long pour être séparé 1 ligne par code)

#nousjoindre .selectbox-wrapper{  /* ceci c'est la boite qui entoure vos option dans les select */ position:absolute;width:279px!important;border:1px solid #e3e5d3;margin:0px;margin-top:20px;  /* remarquez que ici je fais passer ma boite de option en dessous de mon image de select .. ainsi donc on n'obtient pas de délimitation entre le select et les option, plus joli -_- */margin-left:200px;*margin-left:22px;padding:0px;padding-top:10px;font-size:12px;text-align:left;height:auto;  /* vous pouvez aussi définir une hauteur si vous préférez et ainsi les overflow réapparaitrons ! */ overflow:auto;color:#7a7a78;list-style:none;z-index:9990;background:#f2f4e5;-webkit-border-bottom-right-radius: 5px;  /* on s'amuse un peu avec le design, des coins ronds en dessous et rien au dessus ! */-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;*position:relative;*z-index:9999;}

#nousjoindre .selectbox-wrapper2{  /* un duplicata pour mon 2e select.. */position:absolute;width:279px!important;border:1px solid #e3e5d3;margin:0px;margin-top:20px;margin-left:200px;*margin-left:20px;padding:0px;padding-top:10px;font-size:12px;text-align:left;height:auto;overflow:auto;color:#7a7a78;list-style:none;z-index:9988!important;background:#f2f4e5;-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;*position:relative;*z-index:9999;}

#nousjoindre .selectbox-wrapper ul,#nousjoindre .selectbox2-wrapper ul {  /* le ul tout simplement, on ne prend pas de chance on applique du code a plusieurs endroits.. */list-style-type:none;margin:0px;padding:0px;background:#f2f4e5;z-index:9900!important;}

#nousjoindre .selectbox-wrapper ul li.selected,#nousjoindre .selectbox2-wrapper ul li.selected {   /* ici c'est le li choisi.. pas compliqué si vous voulez qu'a la réouverture du menu il soit d'une autre couleur */background-color: #FFF!important;line-height:2!important;padding: 3px 10px!important;list-style:none!important;}

#nousjoindre .selectbox-wrapper ul li.current,#nousjoindre .selectbox2-wrapper ul li.current {   /* ici c'est votre "hover" on va dire ! */background-color: #FFFFFF!important;}

#nousjoindre .selectbox-wrapper ul li,#nousjoindre .selectbox2-wrapper ul li {  /* ici c'est les li normals */display:block;margin:0;line-height:2!important;padding: 3px 10px!important;list-style:none!important;cursor:pointer;width:auto!important;background:transparent!important;z-index:9900!important;position:relative!important;}

.selectbox   /* ca et bien c'est ce qui apparait a la place de votre select en haut de vos options ! Son z-index est plus haut que ma boite d'option pour passer par-dessus evidemment */{margin: 0px 5px 10px 0px;padding-left:2px;font-family:Arial, Helvetica, sans-serif;font-size:12px;display : block;text-align:left; background: url('/themes/resources/images/backSelect.png') right;/*height:18px;*/cursor: pointer;border:1px solid #D1E4F6;color:#104b7d;z-index:9991;}

.selectbox2  /* meme chose mais en version 2 */{margin: 0px 5px 10px 0px;padding-left:2px;font-family:Arial, Helvetica, sans-serif;font-size:12px;display : block;text-align:left; background: url('/themes/resources/images/backSelect.png') right;/*height:18px;*/cursor: pointer;border:1px solid #D1E4F6;position:relative;color:#104b7d;}

/* ici c'était pour régler quelques problemes de z-index dans les différents navigateurs.. je vous suggère de ne pas y toucher mais bon   */

#nousjoindre #hiddendiv form fieldset #myselectbox_input{z-index:9991!important;position:absolute!important;}
#nousjoindre #hiddendiv form fieldset #myselectbox_container{z-index:9990!important;position:absolute!important;}

#nousjoindre #hiddendiv form fieldset #myselectbox2_input{z-index:9989!important;position:absolute!important;}
#nousjoindre #hiddendiv form fieldset #myselectbox2_container{z-index:9988!important;position:absolute!important;}

select {
background: url('/themes/resources/images/backSelect.png') right;
}

/* À noter que j'ai du faire quelques petits modifications css pour ie6 et ie7 donc, je vous montre d'autres lignes de code.. */

#nousjoindre input[type=text]{background:url('/themes/resources/images/backText.jpg') no-repeat;width:259px;height:15px;border:none;padding:5px 10px;}
#nousjoindre input#email{background:url('/themes/resources/images/backText.jpg') no-repeat;width:259px;height:15px;border:none;padding:5px 10px;}
#nousjoindre input#nom{background:url('/themes/resources/images/backText.jpg') no-repeat;width:259px;height:15px;border:none;padding:5px 10px;}
#nousjoindre input#phone{background:url('/themes/resources/images/backText.jpg') no-repeat;width:259px;height:15px;border:none;padding:5px 10px;}
#nousjoindre input#prenom{background:url('/themes/resources/images/backText.jpg') no-repeat;width:259px;height:15px;border:none;padding:5px 10px;}
#nousjoindre input.selectbox{background:url('/themes/resources/images/backSelect.png') no-repeat;width:261px;height:17px;border:none;padding:5px 10px;*z-index:9900;}

#nousjoindre input[type^="submit"]{cursor:pointer;border:none;font-family:arial;font-weight:bold;color:#1a527f;font-size:14px;text-decoration:none;background:url('/themes/resources/images/btnInput.jpg') no-repeat top;width:110px;height:42px;text-align:left;left:0;*padding-left:10px;margin-left:370px;position:relative;z-index:900;}
#nousjoindre input:hover[type^="submit"]{cursor:pointer;border:none;font-family:arial;font-weight:bold;color:#1a527f;font-size:14px;text-decoration:none;background:url('/themes/resources/images/btnInput.jpg') no-repeat bottom;width:110px;height:42px;text-align:left;left:0;*padding-left:10px;position:relative;z-index:900;}
#nousjoindre input#soumettre{cursor:pointer;border:none;font-family:arial;font-weight:bold;color:#1a527f;font-size:14px;text-decoration:none;background:url('/themes/resources/images/btnInput.jpg') no-repeat top;width:110px;height:42px;text-align:left;left:0;*padding-left:10px;margin-left:370px;position:relative;z-index:900;}
#nousjoindre input#soumettre{cursor:pointer;border:none;font-family:arial;font-weight:bold;color:#1a527f;font-size:14px;text-decoration:none;background:url('/themes/resources/images/btnInput.jpg') no-repeat bottom;width:110px;height:42px;text-align:left;left:0;*padding-left:10px;position:relative;z-index:900;}

/* pour des raisons obscures, ie6 ne prend pas certains sélecteurs donc j'ai du rajouter des id a mes input afin de les remplacer par une image ! Donc le code semble en double car [type="text"] veut dire la meme chose que #phone ... */

Petits problemes rencontrés

- Si vos select se cachent derrières d’autres champs ou un bouton ou autre chose, vérifiez bien que vos P dans cette colonne ne sont pas en position relative car le petit script vous crée des p autour de tous vos éléments..
- Si vous voyez sortir de nul part une puce à liste c’est que vous avez d’autres listes dans ce thème qui entrent en conflit avec celle-ci. Dans le code css ci-haut le problème semble résolu.
- Je n’ai pas cru nécessaire de mettre le positionnement des labels ici car à chacun sa facon de procéder.
- Si d’autres bugs me reviennent je vous en ferai part

Je vous mets le CSS qui va avec le menu que je vous ai mis plus haut et non celui de base car, il faut l’avouer, il manquait quelques petits trucs ! Donc regardez bien les commentaires dans le CSS et vous comprendrez sinon, mon poste est le 4320

Marche sur FF, Chrome, Safari, IE8,IE7,IE6 et j’en passe..

Si vous êtes comme moi, amoureux du Web, des nouvelles techniques et des avancées technologiques nous rendant la vie plus facile, vous aurez tenté, en vain pour certains, d’installer less.js. Pour d’autres, vous avez un blogue comme ici, un wordpress.org qui mange et mange des plugins pour survivre. Au milieu de ces plugins, vous avez WP-LESS, la version WordPress de LESS.js.

Première étape

Installer WP-LESS sur votre blogue.

Télécharger LESS.js sur le site officiel.

Ajoutez ce fichier à votre site via ftp et on passe à l’étape 2.

Deuxième étape

Comme il est indiqué à plusieurs endroits, il faut ajouter un bout de code à notre fichier function.php qui se trouve dans notre thème. Voici le code à ajouter :

function add_less_js() {

wp_enqueue_script('less-js', '/wp-content/themes/marathon/less-1.0.41.min.js');

wp_enqueue_style('mytheme', '/themes/marathon/style2.less', '', '', 'all');

}

add_action('init','add_less_js');

Pour ma part, j’ai ajouté ce code à la dernière ligne de mon fichier. Remarquez, je dois en plus d’ajouter ce code, utiliser le fichier que j’ai télécharger de less.js en plus de mon fichier css qui se trouve à être renommé pour la cause.

Troisième étape

Rendu à cette étape, si vous rafrachissez votre page vous aurez une erreure du genre « le fichier style2.less n’existe pas ». C’est pourquoi mon style.css doit devenir style.less en le renommant. Ainsi, le fichier less.js peut lire ce qui est écrit à l’intérieur et le traduire. À partir de cette étape, vous pouvez commencer à utiliser des variables, additionner des variables, utiliser une nouvelle structure dans votre css, etc.

Finalement

Je vous recommande fortement l’utilisation de less.js. Vous savez, il existe aussi http://www.dotlesscss.org/ pour les .NET. Maintenant, si vous pensez que ce tutoriel s’adresse uniquement aux détenteurs de blogue wordpress, sachez qu’avec un site tout ordinaire, html/php/css/javascript etc, vous n’avez qu’à inclure votre fichier javascript APRÈS votre fichier style.less. Beaucoup moins compliqué, mais combien efficace 

Pour votre bien, http://lesscss.org/