Tutoriel Vidéo WordPress : Créer un thème wordpress

madeinfr Il y a 2 jours Répondre

Il faut le faire une vidéo de 3heures !! Good job !
Très complet et vraiment bien expliqué
Merci pour tous ces tutos

Guish75 Il y a 1 mois Répondre

Bonjour !
Je viens de me lancer dans Wordpress mais la version 3.3... il semblerait que tout ne fonctionne pas correctement pour ma part... Tout allait très bien jusqu'au menu ou là il a tout viré... il ne reste que le background avec un pixel blanc qui montre qu'il y a qqch quand j'actualise mais c'est tout... Une idée ?

wiss62 Il y a 2 mois Répondre

Salut,
Ou je peut trouver la maquette (psd) !!!!!

Simon Il y a 4 mois Répondre

Alors là je dis bravo pour ce tutoriel de 3h !! OO !!
Super bien fait, claire et très instructif.
Merci beaucoup pour tout ce temps passé.

stofcmoi Il y a 4 mois Répondre

est ce que la vidéo est flou ou c'est moi qui doit allez voir un opti
Merci bcp pour cette excellent tuto

Ciloe Il y a 5 mois Répondre

Bonjour!

Je te félicite pour ce tuto. Il est vraiment super. Pour ma part, je sais pas trop utiliser wordpress donc c'est une véritable bouffé d'aire ton tuto!

Je voulais savoir si on pouvais aussi designé l'espace admin?

Pour le moment je suis juste dans la conception de site fixe: www.grandprixdelimoges.com
dont le design a été créé avec Artisteer2.

Si non encore bravo et bon courage pour la suite. PS: Ton site deezyne, si c'est le tien, est très bien aussi. J'aime beaucoup tes musiques ^^.

Bye.

Ciloe Il y a 5 mois - Répondre

Et au passage, finalement le plus dure, c'est de creer le design avec photoshop et de bien savoir se qu'on veux xD

Darkmoon Il y a 7 mois Répondre

Si quelq'un pourrait m'aider ce serait cool ! Merci d'avance

Darkmoon Il y a 7 mois Répondre

Salut ! Voilà j'ai un problème pour afficher mon post_head !
mon style.css : http://parkour.flink.free.fr/images/fichier-css
mon header.php : http://parkour.flink.free.fr/images/fichier-header

corpobeziers Il y a 7 mois Répondre

J'ai exactement le même soucis que Woaworld!
Comme lui j'ai ma sidebar qui parait faire partie intégrante de la col21 puisque elle ne veut pas se "décoller" sur la droite.

Second problème cette fameuse sidebar n'apparait que lorsque je consulte l'article et pas quand je suis sur l'index...

Je cite :
"Les catégorie/widget ne veule pas se mettre à côté des articles (droite).
#col21{ width:552px; float:left; }
#col22{ float:right; width:400px; }
Je ne comprend pas...
Merci d'avance, Woa. "

Si quelqu'un à la solution notamment toi graf ça serait cool d'en savoir un peu plus

Mitch Il y a 8 mois Répondre

Très sympa ce tuto !
Juste un ptit tips :
Quand tu cherches le calque d'une image, plutôt que de fouiller dans ta liste de dossiers et de calque, sélectionne la flèche (v) et fais Ctrl+Alt+Clic droit sur l'image qui t'intéresse.
Cela sélectionnera le calque correspondant à l'image.

Loopstik Il y a 11 mois Répondre

Merci , pour le partage ...

Arcade Il y a 11 mois Répondre

Bonjour,

Pourais-je savoir combien fais ton cms ??? x ??? sur ton tutoriel s'il te plais ?

morfo Il y a 12 mois Répondre

excellent Tutorial merci mr Grafikart je laisse définitivement tomber Joomla c tellement plus compliqué
longue vie a Grafikart.net

boardingnow Il y a 1 an Répondre

merci meme si ca va un peu vite j'ai essayé de le faire en meme temps mais au bout de 2 h j'ai laché en plus maintenant ce n'est plus la meme version qui est en download les fichiers ne sont pas les memes. En tout ca moi qui ne connaissais pas a quoi ca pouvait servir je suis conquis. As tu une vie a part l'informatique car tout ca prend tu temps :-) Si tu n'existait pas il faudrait t'inventer

Brune Marie Il y a 1 an Répondre

Bonjour,
Je voulais remercier Grafikart pour ce tutoriel, qui m'a permis de réaliser le site à cette adresse
http://www.madamedame.fr
Je n'ai pas encore tout comme je le voudrait, mais il y aune bonne base.
J'ai eu un soucis en suivant le tut avec la sidebar. Elle ne respecte pas le fichier style.css du site...
J'ai mis les infos de style directement dans la div avec style=""
j'aimerais bien pouvoir la régler avec la feuille de style. Si quelqu'un avait une idée ou une piste pour que je règle ça, je serais enchantée du coup de main.

Je n'ai jamais reçu de confirmation de mon inscription, et je n'ai donc pas pu devenir premium... Je me suis débrouillée autrement, mais je suis toujours intéressée par une inscription sur ce site.

Merci.

stan Il y a 1 an Répondre

Hello, super tuto !

Au passage quand le positionnement des images de marchent pas dans l'édition des articles, il faut rajouter cela dans le style.css

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

Voila, bonne continuation

jimmyplant Il y a 1 an Répondre

Salut et merci pour ce super tuto ^^
Je viens de finir et le résultat est nickel !
Mais j'ai un petit soucis (désolé) :
En effet tout passe bien avec Firefox et Safari mais par contre IE et Chrome ne l'affichent pas bien (les typos, l'emplacement des div...) comment ça se fait ?
Y a t-il un moyen de palier à ce problème ? car c'est vrai que pas mal de monde utilise IE et chrome et je veux pas les exclure ^^

naflo Il y a 1 an Répondre

sur le site http://wpchannel.com tu as aussi pas mal de tuto en français sur Worpress, mon problème est que le site que je développe n'est pas un blog mais un site où il y a nombre de catégorie et de sous-catégories. Dans ce cas savoir gérer les modèles de template pour les page et catégorie est primordial.

dayshen Il y a 1 an Répondre

J'ai résolu mon problème en supprimant cette fameuse fonction et en faisant un copier/coller des div qui m'apparaissaient sous firebug..

Pour ton soucis je ne sais pas encore.. je n'ai fait qu'une seule page pour mon blog et là j'ai des soucis au niveau de la mise en ligne, cela fonctionnait jusqu'à ce que je touche dans les options général
> Adresse web de WordPress et Adresse web du site (URL)

Donc dès que ce soucis sera réglé je verrais à créer d'autres pages et à ce moment là je comprendrais peut être ton problème.

naflo Il y a 1 an Répondre

Dayshen, je ne connais pas ta réponse, essaie de voir dans wp-includes qui sait peut être trouvera tu le formulaire.

Moi même je patauge carrément sur mon problème, j'ai cherché et essayé plusieurs choses mais je n'y arrive decidement pas.

J'ai créé 4 pages qui utilisent le même model de template.
dans ce template il y a deux colonnes.

je voudrait afficher dans la colonne de droite les titres des articles concernant la page et dans la colonne de gauche l'article en question avec un article par défaut lorsque j'arrive sur la page.

naflo Il y a 1 an Répondre

J'ai créé de nouvelles pages grâce à l'interface de Wordpress, ainsi mon adresse est de style "?page_id=2", j'ai bien vu que l'on pouvais changer les permaliens pour les catégories mais cela ne fonctionne pas.

Dayshen, ta réponse est un peu simple et j'ai bien essayé cette méthode avant de poster ici. De plus ton explication comporte une erreur, tu a laissé trainer un chevron apres tes guillemets de fin.

Dayshen Il y a 1 an

désolé pour le chevron, je n'ais pas bien saisit ton problème..

Sinon j'ai une question (peut être sauras tu me répondre) :

je boss sous wordpress 3.0 et comme le tuto est fait sous une version antérieur je m'emmèle un peu les pinceaux.

Je veut modifier mon formulaire qui permet de poster des commentaires.
Dans ma page comments.php après la liste des commentaire j'ai une fonction qui est appelée:
<?php comment_form(); ?>

Le problème c'est que j'ai cherché partout et je ne trouve pas ou elle se trouve, sous firebug j'ai une div "respond" après la "commentlist" et pareil impossible de la trouvée pour la modifier..

Je suis vraiment bloqué et malgrès google rien n'y fait.. je suis pas vraiment doué mais peut être que toi si ?? merci d'avance.

Dayshen Il y a 1 an - Répondre

bon alors de ce que j'ai pu comprendre pour modifier pour modifier <?php comment_form(); ?>c'est avec ceci :

http://codex.wordpress.org/Function_Reference/comment_form #.24fields

il faut modifier les paramètre $args et $fields ... okey mais comment ?
où se trouvent ces paramètres ? faut t'il que je les place dans une pages spécifique ??

le problème est que c'est vraiment confus et que je ne sais pas ou placer chaque portion de code..

J'ai parcouru google de long en large j'ai rien trouver de clairement expliqué en francais ! si quelqun peut m'aider ?? svp je me prend la tête alors que la réponse est là..

naflo Il y a 1 an Répondre

Bonjour et merci, tu m'a bien aidé à mettre le pied à l'étrier et débuter wordpress.
Néanmoins j'aurais une question. j'ai créé des pages supplémentaire mais je ne sais pas comment je dois écrire mon lien en relatif ou absolue par rapport à l'index, dans ton tuto tu as mis des # à un moment mais par quoi tu peux les remplacer.

merci!!

Dayshen Il y a 1 an - Répondre

Tu remplace le # par le nom de ta page, par exemple: <a>href="index.php"></a>

J'espère que sa t'auras aidé.

Adrien Il y a 1 an Répondre

Bonsoir, Bravo à graphikart et un grand merci pour ce magnifique tutoriel !!

J'ai un souci, ça fait 20 min que je cherche je comprend pas d'où sa viens, j'essaye de mettre, comme dans le tuto, une image dans ma div "head" et elle ne s'affiche pas, j'ai fait des tests en mettant la div sous "head", en changeant l'image, en enlevant des propriétés css.. je comprend pas voici mon code:

html :

<body <?php body_class(); ?>>
<div id="head">
<div id="top"></div>
</div>

css:

#head{
background: url(images/head_bg.png) repeat-x;
height: 166px;
width: 100%;
}

#head #top{
background: url(images/header.png) top-left no-repeat;
width: 900px;
height: 166px;
margin: 0 auto;
}

l'image du head s'affiche mais pas celle du header (qui est censée se mettre sur head) bref d'habitude je me débrouille tout seul mais là je bloque total.

Merci d'avance.

Adrien Il y a 1 an - Répondre

Bonsoir, Bravo à graphikart et un grand merci pour ce magnifique tutoriel !!

J'ai un souci, ça fait 20 min que je cherche je comprend pas d'où sa viens, j'essaye de mettre, comme dans le tuto, une image dans ma div "head" et elle ne s'affiche pas, j'ai fait des tests en mettant la div sous "head", en changeant l'image, en enlevant des propriétés css.. je comprend pas voici mon code:

html :

<body <?php body_class(); ?>>
<div id="head">
<div id="top"></div>
</div>

css:

#head{
background: url(images/head_bg.png) repeat-x;
height: 166px;
width: 100%;
}

#head #top{
background: url(images/header.png) top-left no-repeat;
width: 900px;
height: 166px;
margin: 0 auto;
}

l'image du head s'affiche mais pas celle du header (qui est censée se mettre sur head) bref d'habitude je me débrouille tout seul mais là je bloque total.

Merci d'avance.

>> top left et non pas top-left, solution trouvée !! :/

jponline Il y a 1 an Répondre

le fichier source du psd n'est plus disponible ?? dommage qu'on puisse pas avoir les fichiers graphiques pour pouvoir suivre les tutos comme sur les vidéos !!

damienlvka Il y a 1 an Répondre

Ah, j'ai fait une erreur de débutant pour ce qui est de ma colonne de droite, tout est revenu dans l'ordre ;-)! Sauf que je n'arrive pas atteindre mon avatar (le mot du rédacteur)... je vais trouver !!

Et en ce qui concerne mes nombres de commentaire, tout marche impec en ligne... mais mon problème persiste hors ligne...

damienlvka Il y a 1 an Répondre

Un problème en chaque toujours d'autres? C'est vrai ce qu'on dit ?
Je viens de mettre mon thème en ligne en copiant tout mes fichiers sur mon serveur... tout marche impec, sauf que (grrr), mon menu de droite avec mes infos ne sont pas visible!?
Voici un imprim écran de ma page en ligne:
http://www.neimad.fr/images/ecr1.jpg
Merci beaucoup

Damien

damienlvka Il y a 1 an Répondre

Je viens également de m'apercevoir qu'en proposant un nouveau commentaire, quand je retourne sur l'index de mon blog où sont répertoriés mes articles, mon nombre de commentaire reste à "O Aucun commentaire". et si je retourne sur mon post, je peux visionner mes commentaires... C'est à n'y rien comprendre...
Peut être que quelqu'un est déjà passé par au dessus de cet obstacle?
Merci beaucoup.

Damien

damienlvka Il y a 1 an Répondre

Bonjour à tous!
Et merci infiniment à Grafikart pour ce fabuleux tuto !
Je l'ai englouti et je ne suis vraiment pas mécontent d'avoir passé quelques heures à réaliser mon thème Wordpress!

Mais j'ai un tout petit problème... si quelqu'un pouvait m'éclairer, ce serait vraiment super!
En fait, quand je laisse de long commentaires! Mon bloc ne se redimensionne pas en fonction de mon contenu!
Voici un imprim écran:
http://www.neimad.fr/images/ecr.jpg

Merci infiniment pour voter astuce!
@ bientôt

Damien

damienlvka Il y a 1 an

Bonjour à tous!
Mon problème persiste toujours... mon contenu ne se redimensionne pas quand un de mes commentaire est trop grand!!! Please help me!!!

Merci beaucoup

damienlvka Il y a 1 an - Répondre

Personne n'a donc rencontré ce problème ??

capmarketer Il y a 1 an Répondre

Vous avez du talent. Bravo! tout simplement.

Disgraz Il y a 1 an Répondre

Salut c'est étrange la diéo ne se lance pas je n'arrive pas a la regarder

groscoeur Il y a 1 an Répondre

un grand grand merci à des gens généreux comme vous

groscoeur Il y a 1 an Répondre

Bonjour, serait il possible d'avoir le code complet reset css
body,div,dl,dt,dd,ul...

Merci d'avance

la chose Il y a 1 an - Répondre

http://meyerweb.com/eric/tools/css/reset/

Tchupa Il y a 1 an Répondre

Bonjour, mon wordpress ne détecte pas mon thème je suis bien embêter

Alexis Il y a 1 an Répondre

Avec la nouvelle mise à jour de Wordpress (version française 3.0.1), j'ai perdu mes repères ! Il n'est plus possible de bidouiller le theme par défaut...
Il faudrait faire une mise à jour de ce tuto aussi !
Avec la même clareté, bien entendue. Sans vouloir vous obliger...
Je tenais à vous remercier pour l'accessibilité de votre pédagogie.

Nico Il y a 2 ans Répondre

Quelqu'un sait-il comment modifier le formulaire de "post" de commentaires dans Wordpress 3 (je précise que je ne parle pas du CSS, mais bien de la structure <form>, <label> etc...)?

Jbay Il y a 2 ans Répondre

Il y a quelque chose que je n'arrive pas à comprendre.. Sur le fichier comments.php, il y a une ligne <?php comment_text() ?> sans le point-virgule. Pourquoi ça ne plante pas ? ( Peut être que c'est parceque je n'ai pas de compte prenium et que la qualité m'empêche de voir ? )

Galithiel Il y a 2 ans Répondre

Il serait judicieux de spécifier que les pingbacks et compagnie ont une classe différente des commentaires, ça m'a fait perdre vachement de temps quand j'ai cherché pourquoi le design buguait ^^

remu38 Il y a 2 ans Répondre

bonjour,

bravo pour votre travail .

quest : à 7:00 comment faites vous pour masquer les titres (ici HOT CHIP) avec une forme transparente par dessus ?
(l'interet est de mettre une forme transparente ou de meme couleur que le fond mais comment faire ?)

merci bcp

cdt
rc

d40x Il y a 2 ans Répondre

Il y a eu une mise à jour de wordpress. Après voir fait la mise à jour, il s'avère que la fonction the_content(); qui écrivait le contenu de la page ne fonctionne plus. dans une catégorie en revanche aucun changement.

film juicio Il y a 2 ans Répondre

ouais j'ai le meme souci

Moran34Claudia Il y a 2 ans Répondre

Cars and houses are quite expensive and not everyone is able to buy it. Nevertheless, <a href="http://lowest-rate-loans.com/topics/business-loans ">business loans</a> was created to support people in such kind of situations.

moustache Il y a 2 ans Répondre

Salut,

Je suis entrain d'essayer de le faire cependant quand j'arrive a la partie code css ect meme quand je veux mettre le bg.png ou
le header ca ne saffiche pas.

Je ne comprends pas.

de l'aide ?

karmalo Il y a 2 ans Répondre

Bonjour,
Excellent tuto, félicitation pour ton travail.
J'ai une question. J'ai vu que tu avais créé dans le header des pages, tu as mis <a href="#"></a>.
J'ai fait la même chose dans le footer, car je veux avoir un lien vers "Les Lens" qui est links.php.
J'ai fait ceci: <li><a href="links.php">Liens</a></li>
Mais ca ne marche pas. Cette fonctionnalité est par défaut dans la sidebar mais moi je ne la veux pas, je veux ca dans le footer et que ca redirige vers la page de tous les liens.
J'espère que je me suis bien exprimée et je te remercie d'avance pour l'aide que tu pourras m'apporter.
Bonne soirée
Karine

karmalo Il y a 2 ans - Répondre

on, j'ai fini par trouver une astuce
donc dans mon menu, j'ai mis ceci:
<div id="menu"> <ul><li><a href="<?php bloginfo('url'); ?>">accueil</a></li><?php wp_list_categories("depth=1&title_li="); ?></ul></div>
Comme ca j'ai seulement la page accueil qui s'affiche et les catégories ensuite.
Puis j'ai crée une page liens dont j'ai précisé modèle de page"liens". Ainsi, je connais le permalien de ma page que j'ai copié/collé dans mon footer.
<div id="footer">
<ul>
<li><a href="http://localhost/nom/?page_id=33 " rel="bookmark">Liens</a></li>
<li><a href="#">une autre page</a></li>
</ul>
</div>
Et la tout fonctionne sur des roulettes, je n'aurais plus qu'à faire la même chose pour la page "une autre page"

Zoliobi Il y a 2 ans Répondre

Bonjour,
J'ai une question au niveau de la font utilisé pour le menu "Myriad Pro", j'ai tenté également de l'inclure dans mon design, ça fonctionne bien. Sauf que lorsque je test mon site chez des personnes qui ne possède pas cette police sur leur PC forcément cela affiche une autre police. Après des recherches je suis tombé sur le fameux @font-face de CSS3 qui permet d'importer une police que l'utilisateur n'a pas forcement. Cela marche très bien sur les différents navigateurs sauf bien sûr IE qui l'importe bien mais qui a l'air de grossir la police ce qui fait buguer mon design.
As-tu une méthode différente pour utiliser une police que les utilisateurs n'ont pas ou y'a t'il un moyen pour qu'IE ne foire pas l'importation (je précise que j'ai importé la police au format eot et otf pour que ça fonctionne sur tous les navigateurs). En gros ça donne ça :
@font-face {
font-family: 'Myriad Pro';
src: url('fonts/MyriadPro-Bold.eot');
src: local('Myriad Pro Bold'), local('Myriad Pro'),
url('fonts/MyriadPro-Bold.otf') format('opentype');
}
Encore merci pour ce tutoriel et bonne continuation.

ZiOu333 Il y a 2 ans Répondre

Bonjour, est-ce que quelqu'un peu m'indiquer un tuto pour créer une maquette wordpress sur photoshop. J'en ai trouvé un sur "weecast" mais il est payant et je suis encore mineur donc je ne peu pas l'acheté.
Merci de votre aide par avance et à bientôt,

starsky Il y a 2 ans Répondre

Balaies, oui, un très bon tuto. Pour moi ce sera le début de beaucoup de themssssss avenir, chic alors.... et pour le prix, c'est vraiment donnée. car il y a du travail tout même..

fanzing Il y a 2 ans Répondre

bonjour, merci pour ton tuto,
je suis novice de chez novice,
et je cherche un tuto pour comprendre les bases
du logiciel que tu utilise komodo edit 5.1 (en français)

Merci par avance

jeje39 Il y a 2 ans Répondre

J'ai un petit souci au moment de la personnalisation du bloc texte.
J'ai beau rentrer les paramètres dans mon css, rien n'est pris en compte. Et avec l'outil debug de firefox, il n'y a rien qui apparait dans les div: bloc-top, bloc-bot et bloc.
Pouvez vous m'aider ?

sitewaide Il y a 2 ans Répondre

Bonjour, ayant suivi le tutoriel, je suis confronté a un problème, lors de l'utillisation de la fonction the_content('Lire la suite...');, je n'ai pas le lien lire la suite, malgré une recherche dans le codex, je n'ai pas trouvé, merci d'avance

jeje39 Il y a 2 ans - Répondre

Bonjour,
En fait pour voir le "Lire la suite", il te faut ajouter la balise "More" au moment ou tu tape ton article sur Wordpress. (c'est un petit icône en haut du formulaire de l'article)
J'espere t'avoir aidé.

kev Il y a 2 ans Répondre

ah oui et bien sur pret a donner de l'argent si tu refais du tuto de cette qualité =)

kev Il y a 2 ans Répondre

Franchement tu es doué !!! Pédagogue comme j'ai rarement entendu sur des videos de tuto, tu es à la porter du plus naze en informatique pour faire des choses qui sont quand même du domaine avancé...

Chapeau j'ai enfin tout compris avec toi, je suis doué sur flash mais avec ta video je vais enfin pouvoir passer ce cape que beaucoup de graphise ne passe pas parce le dev buerk quoi !

Merci encore

Grafikart Il y a 2 ans - Répondre

Merci ça fait plaisir

Dark Il y a 2 ans Répondre

J'ai une dernière question:

-j'ai créer une autre page qui s'appelle blog, comment fait on pour rajouter un news article sur cette page ?

Dark Il y a 2 ans Répondre

salut j'ai fini le tuto... est franchement tu viens de me faire découvrir un nouveau système pour créer un site.

J'ai des question:

-t'aurai pas un ptit système pour un petit espace membre? pour que quand il laisse un com's avec un pseudo, personne d'autre peux l'utilisé(sinon beaucoup de confusion et d'embrouille avec les membre sa risque xD)?

-J'ai les emplacements pour les avatars, mais rien pour enregistré l'images du visiteur ?

mediacoda Il y a 2 ans Répondre

Vraiment sympa, le tuto: je vais squatter cette page quelques nuits...

Jutix Il y a 2 ans Répondre

Arf... J'hésite entre Wordpress et Joomla pour la refonte de mon site...
Mais j'avoue, j'ai une petite préférence pour Wordpress après ce super tutoriel =)

silence Il y a 2 ans Répondre

Salut merci pour ce tutopourrais tu me dire qu'est le code pour faire un reset css ? Moi j'ai juste mis un padding et marge a 0. Et est-ce que cette technique est bonne car j'ai un peu regardé sur le net et on dit que ce n'est pas recommandé d'utiliser cette methode .

Merci

silence Il y a 2 ans - Répondre

Ps: Peux tu aussi me dire qu'est ce que tu utilises pour modifier les variables en ayant l'aperçu net ? Comme lorsque tu règles la disposition du titre ou du menu ?

doudouzeb Il y a 2 ans Répondre

Bonjour à tous, je confirme toutes les critiques positives, membre Premium depuis deux jours et très satisfaits des tutos sur ce super site que je cherchais depuis toujours...

il vaut largement les 10€ pour ce qui aimes ce former seul et rapidement...

bast_65 Il y a 2 ans Répondre

Super tuto, vraiment bravo, mais je vais quand même faire mon relou (qui a dit encore ?).
Le site comporte des catégories ou la c'est parfaitement expliquer encore bravo, mais il y a aussi des pages "portefolio" et "espace pro". Tu a l'air d'avoir mis un menu en dur pour faire cela, mais si on veut utiliser le système de page de wordpress pour faire des page dynamique, comment si prend t-on et a tu des site intéressant qui traite de ce sujet (j'ai vu passé 'model de page' ou encore template avec un num de catégorie mais sa resté très vague)
merci d'avance et encore bravo pour ce tuto

ibrahem Il y a 2 ans Répondre

Is it possible to add links Free Lesson

dreadstock Il y a 2 ans Répondre

Peut-on avoir les fichiers sources pour les abonnés ? MERCI

Grafikart Il y a 2 ans - Répondre

N'étant pas l'auteur du design je ne peux pas fournir les sources. A la limite je peux te donner le code mais sans les images.

guiguilemalin Il y a 2 ans Répondre

super tuto franchement merci beaucoup tout y es j'ai énormement apris grace a ce dernier .
un grand merci a Grafikart et une bonne continuation ...

dbzes Il y a 2 ans Répondre

Je comprend pas, au moment où tu t'occupe de la cascade et tu met un "fixed", moi je reproduit en parallèle ce que tu fait donc j'ai ça :

#main { width:1000px; margin:0 auto; text-align:left; background:url(images/cascade.png) 647px 75px repeat-y fixed;}

A part quelque pixel qui change mais le resulat est pareille, donc je disait quand je met pas le fixed, c'est bon la cascade est parfaitement alignée mais quand je met fixed elle est se décale carrément sur la gauche d'au moins 300px et jai pas trouvé pourquoi??

OoimedoO Il y a 2 ans Répondre

Sa fessait un bout de temps que j'ai pas coder de design et je peux te dire que te design ma vraiment rafraîchi la mémoire très très bon tuto

IgiX Il y a 2 ans Répondre

Sympa le rendu! mais pourquoi ne pas faire avec l'outil tranche qui est bien plus pratique et permet d'optimiser tes image pour les web assez rapidement

Cordialement,
IgiX

Grafikart Il y a 2 ans - Répondre

J'ai pas pris l'habitude d'utiliser les selections (surtout la sélection de 1px) faudrait que je me penche sur l'outil tranche. L'autre souci c'est que suivant les éléments à découper je dois afficher/masquer des calques.

maronette Il y a 2 ans Répondre

trooo bien j'aiime bien

Ben8 Il y a 2 ans Répondre

Génial !!! merci beacoup

Sweet Il y a 2 ans Répondre

Excellent ! Merci merci merci merci

kosaidpo Il y a 2 ans Répondre

bonjour merci pour ce super tuto mais y'a pas de tuto de Gimp c'est vraiment dommage

sinon merci bonne continuation ;]

ben Il y a 2 ans Répondre

jolie le thème,
mais il n y a pas de lien pour télécharger la vidéo?

greg Il y a 2 ans Répondre

Terrible ton tuto, je me demandai si tu ulilser pas joomla par hasard ?
On sait jamais
Félicitation encore pour ton tuto, je crois que tu es "hors concours"

Grafikart Il y a 2 ans - Répondre

Non je n'utilise pas Joomla, l'administration me fait peur

Andy Il y a 2 ans Répondre

Tout juste greg ! Moi je fais -moz-border-radius:20px

Grafikart Il y a 2 ans - Répondre

Il faut utiliser -webkit-border-radius:20px; aussi comme ça ça marchera aussi sur safari

greg Il y a 2 ans Répondre

Je crois que l'on peut faire des arrondis
moz-border-radius

Baptiste Il y a 2 ans Répondre

Salut à tous,
je profite de ce tuto sur le découpage d'un site pour exposer mon problème avec photoshop.
Lorsque je découpe mes parties et que je passe par enregistrer pour le web ça m'éclaircit tout, et si je mets cette image en header par exemple et que je pipette la couleur de fond et bien ce ne sera pas exactement la même couleur!
Il y a pas un problème de couche RGB et sRGB ou un truc du genre?

merci de votre aide! car je ne peux plus passer par enregistrer par le web donc...
++

darkn1ko Il y a 2 ans Répondre

@ rechart

ca sert a réinitialiser les attributs css puisque suivant les navigateurs, ils sont différents par défaut

Rechart Il y a 2 ans Répondre

bonjour,

c'est quoi le bout de code en début du css body,div,dl,dt,dd,ul.....

tibeoh Il y a 2 ans Répondre

C'est bien ! Mais si tu dois faire une modification légère sur ton design c'est pas évident de retrouver exactement les mêmes dimensions que l'image présente sur ton site...
Alors qu'avec un découpage avec l'outil approprié, tu as une trace dans ton photoshop et la découpe, même après modification de style de ton design se fait en quelques secondes !
Mis à part ça c'est sympa !
Petite question : Qu'est ce qui distingue Wordpress et Joomla ? J'attends avec impatience ta réponse !

Krome Il y a 2 ans - Répondre

J'ai fait quasiment la même remarque un peu plus haut, à savoir qu'il est ptètre plus pratique d'utiliser les tranches dans photoshop d'après moi mais nous avons tous des habitudes différentes

WoaWorld Il y a 2 ans Répondre

Re-bonjour,
Certain post mon interloquer, http://www.jankoatwarpspeed.com/post/2009/07/07/Adaptable-view.aspx explique comme dans votre tutorial la fonction du positionnement et je me demandai si l'on ne pourrait pas via le css modifier l'affichage du des "bloc" de l'articles.
Woa

WoaWorld Il y a 2 ans Répondre

Merci pour le lien, je vais chercher des tutos car je ne suis pas in pro en codage, je préfére le design. ^^
Je vous tient au courant, Woa

WoaWorld Il y a 2 ans Répondre

Bonjour Grafikart, j'ai une question sur le design de la page index.
Je voudrais affiché les post d'une manière vignette comme sur ce site:http://www.jonathan-menet.fr/blog/ ou encore comme on peut le voir sur cette image: http://wpinspiration.com/wp-content/uploads/starcatcher-555x330.png et pour finir: http://www.designbombs.com/.
Quelqu'un aurait une idée de la manière de procéder?
Merci d'avance, Woa.

Grafikart Il y a 2 ans - Répondre

Tu veux utiliser wordpress avec une disposition ressemblant à un portfolio, je n'ai encore jamais fait ça mais je te conseille de lire cet article qui donne de très bon conseils : http://www.smashingmagazine.com/2009/04/29/ultimate-guide-to-using-wordpress-for-a-portfolio/

valentin45000 Il y a 2 ans Répondre

Ouah c'est génial, le seul truc c'est que pour installé le CSS sur wordpress faut payer lol, et sa c'est moins cool

Flipsyde92 Il y a 2 ans

Tu parles bien du 'Cascading Style Sheet' ? Il ne faut rien payer ! Ou as-tu entendu cela ?

valentin45000 Il y a 2 ans

Bien comment créer tu ton CSS, parce que moi je vais dans apparence > Modifier le CSS.
C'est bien ici ?

valentin45000 Il y a 2 ans

En faite je comprend pas ou on met se code ^^

valentin45000 Il y a 2 ans

A non j'avais pas compris. Je croyais que c'était pas a installer sur un site.

Grafikart Il y a 2 ans - Répondre

Regarde le tutoriel je pense que ça ira mieux

Tony Il y a 2 ans Répondre

Bonjours , je voulais savoir si il est possible de vous contacter pour une aide ?

Tonyg Il y a 2 ans - Répondre

Je peu rémunéré aussi rémunéré pour l'aide fourni .

WoaWorld Il y a 2 ans Répondre

Devient premnium, tu peut tous les télécharger et accéder à des ressources inédite en étant premium.

multras Il y a 2 ans Répondre

Y a pas une autre moyen pour regarder la vidéo !!??
Dailymotion ne fonctionne pas dans mon pays

Merci

talandria Il y a 2 ans Répondre

merci , Graph

Super tuto comme d'hab , justement je refond mon site en ce moment avec wordpress ...
Donc super agréable surprise en tombant sur ton tuto ..qui est toujours nickel .

le bon boulot ça se récompense.
A +
jm

WoaWorld Il y a 2 ans Répondre

Grafikart, voit-tu ou est le problème? :/

Zelvac Il y a 2 ans Répondre

Bravo ! Très bon tutoriel !

WoaWorld Il y a 2 ans Répondre

Voici un screen pour mieux aider à comprendre;
http://img197.imageshack.us/img197/4750/screenzr.jpg
merci,

WoaWorld Il y a 2 ans Répondre

Re,
Problème résolue,
Mais un problème résolue, un autre arrive...
Les catégorie/widget ne veule pas se mettre à côté des articles (droite).
#col21{ width:552px; float:left; }
#col22{ float:right; width:400px; }
Je ne comprend pas...
Merci d'avance, Woa.

twisted355 Il y a 1 an

J'ai le même soucis, ca fait 2h00 que je tourne en rond a essayer de trouver le problème mais rien y fait :/ Si je trouve une solution je vous tien au courent !

corpobeziers Il y a 7 mois - Répondre

Moi aussi j'ai exactement le même soucis (je sais que la réponse est très tardive mais bon j'ai commencé ce tuto que hier^^).
Comme vous deux j'ai ma sidebar qui parait faire partie intégrante de la col21 puisque elle ne veut pas se "décoller" sur la droite.

Second problème cette fameuse sidebar n'apparait que lorsque je consulte l'article et pas quand je suis sur l'index...

Si quelqu'un à la solution notamment toi graf ça serait cool d'en savoir un peu plus

Nouipoz Il y a 2 ans Répondre

Grafikart j'ai posté un commentaire problème dans les ressource pour komodo merci :p

megacouick Il y a 2 ans Répondre

non c'est pas ça, je n'arrive pas à me connecter au site.
j'ai reçu les mails mais je n'arrive pas à me connecter :S
il me met toujours la fenêtre de login avec un mot de passe tres long ...
et quand je mets le mien il me remet la meme page...

megacouick Il y a 2 ans Répondre

Salut, Bravo pour ce tuto.
Le Problème, c'est que moi je ne peux pas avoir accès aux fichiers sources car je ne peux pas me connecter.
J'ai créé un compte -> entré les informations dans le "login" mais pas moyen
J'ai mis "mot de passe perdu" pour en avoir un nouveau mais ça marche toujours pas :'( .
Si tu as une solution...
Merci

Grafikart Il y a 2 ans - Répondre

Contacte moi, et donne moi ton login, tu ne reçois pas le mail avec le mot de passe c'est ça ?

WoaWorld Il y a 2 ans Répondre

Merci,
Maintenant j'ai un problème avec la couleur du texte, j'ai sa pour le css:
body{ text-align:center;}
#head{ background: url(images/bg.png) repeat-x #e0d6bb; height:160px;}
#head #paysage{ position:relative; width:1000px; margin:0 auto; background: url(images/head.jpg) top left no-repeat; height:160px;}
#head #paysage #menu{ position:absolute; top:95px; left:270px;}
#head #paysage #menu ul{}
#head #paysage #menu ul li{ float:left; width:115px; list-style:none; }
#head #paysage #menu ul li{float:left; width:115px; font-size:20px; font-family:Myriad Pro; color:#FFFFF; text-transform:uppercase;}
#head #paysage #menu ul li span{ display:block; font-size:11px; font-family:Myriad Pro; color:#FFFFF; text-transform:lowercase; }

WoaWorld Il y a 2 ans Répondre

Pardon pour le head j'ai :
#head{ background:url(images/head.jpg); }

Grafikart Il y a 2 ans - Répondre

Il faut préciser une hauteur et largeur à l'élément head

WoaWorld Il y a 2 ans Répondre

Re-bonjour,
J'ai un problème pour l'affichage des images pour le header, le voici.
Pour le style.css j'ai :
#head{ background:url(images/head.jpg);
Et pour le header.php j'ai :
<div id="head">
</div>
Le dossier "images" et bien dans le dossier du thème avec les images dedans.
Comment faire pour quel s'affiche?

Woa Il y a 2 ans Répondre

je savais ce que c'été, je ne savais pas quel logiciel prendre pour l'avoir via localhost.
Woa,

Harry Il y a 2 ans Répondre

A un moment du tuto, tu sors ta calculette, qui fait aussi recherche, c'est quoi ce petit logiciel ?

Woa Il y a 2 ans Répondre

Oui merci,

Woa Il y a 2 ans Répondre

Ok, mais comment installer MyPhpAdmin..?

Ravi Il y a 2 ans - Répondre

ben Myphpadmin s'installe automatique quand tu installes wamp, xamp, easyphp sur windows et sur Mac Mamp...

j'espère avoir répondu à ta question

Fataliste Il y a 2 ans Répondre

Merci

shorty26 Il y a 2 ans Répondre

Merci encore :D

shorty26 Il y a 2 ans Répondre

Salut tous le monde,

Je vais peut-être passer pour un inculte mais bon, je me lance :P

Dans la vidéo, on voit que quand il écrit, il y a une petite box sur le coté qui lui évite de taper les mots en entier !
Est-ce intégré avec les logiciels type C++ etc...?
Est-ce un logiciel spécial ?

Merci d'avance et encore bravo pour ton travail ^^

Grafikart Il y a 2 ans - Répondre

C'est intégré dans les logiciels que j'utilise. Dans le tutoriel j'utilise Komodo mais d'autre le font comme notepad++ par exemple.

Martino Il y a 2 ans Répondre

Excellent tuto et on ne peut plus pédagogique pour les novices (comme moi).
Cependant, une petite question, je voudrai intégrer un caractère pipe "|" entre mes menus. Comment puis-je le faire??
D'avance merci et encore chapeau pour ton travail.

shorty26 Il y a 2 ans Répondre

Bon tuto comme toujours ^^.
Merci pour ton travail !

zedat Il y a 2 ans Répondre

stp grafikart fait un tour pour voir tes mails stp j'ai posté dans contacte mais ça fait quelque jour déjà je n'es pas de réponse ^^'

Woa Il y a 2 ans Répondre

Nouipoz, en étant premium tu peut voir la vidéo du carousel flash complète?

Harry Il y a 2 ans - Répondre

Waip

spookdealer Il y a 2 ans Répondre

Merci beaucoup pour ce tutoriel, je vais pouvoir me faire un thème sur wordpress grasse a toi trop cool.

Nouipoz Il y a 2 ans Répondre

Merci beaucoup , tu aide super bien les gens comme d'habitude , je suis compte premieum :D , euh par conte sur file zilla comment on peut editer direct le fichier avec komodo ? merci

Ravi Il y a 2 ans Répondre

merci beaucoup :D

Nouipoz Il y a 2 ans Répondre

Re , mais petit problème regarder : http://dreamlike.toile-libre.org , je n'arrive pas a modifier les onglet sur le coté comme "My latest twitts" comment faire?

merci beaucoup

Grafikart Il y a 2 ans - Répondre

Si le thème utilise la sidebar dynamique tu gère ça depuis l'onglet widgets de l'administration Wordpress. Sinon il faut que tu édite le fichier qui gère la sidebar (souvent sidebar.php).

Analyse le code pour trouver ce qui gère cet affichage

Nouipoz Il y a 2 ans Répondre

Ha !! je l'attendait ! merci beaucoup c 'est génial ! merci grafikart ! :D

Krome Il y a 2 ans Répondre

Salut,

Je confirme que le son se dégrade façon R2D2 vers la 100e minute et est décalé jusqu'à la fin que ce soit en streaming ou avec la vidéo téléchargée sur mon pc.

A l'occasion Graf si je peux avoir ton avis sur ma remarque postée un peu plus haut http://grafikart.fr/tutoriels/video/creer-theme-wordpress-79 #c3263

Merci

Grafikart Il y a 2 ans - Répondre

La vidéo télécharger depuis Grafikart ne fait pas du tout ce son normalement
Je retenterais un upload sur dailymotion d'ici quelques jours pour voir si ça marche mieux.

Baptiste Il y a 2 ans Répondre

salut Graf'
oui à partir de 95 minutes à peu près ça fais un son saccadé, puis inaudible: ça change complètement ta voix! ça fais star-wars mais bon! lol
Il n'y a pas de possibilité de couper le tuto en 2 ou 3? car j'arrive pas à retourner à 100minutes pour réssayer, je dois tout revoir...

@+ !

Dr Rodney Mckay Il y a 2 ans Répondre

oui Graph le son est tr§s dégradé à partir du milieu de la vidéo.

Merci quand même pour ce big tuto

Baptiste Il y a 2 ans Répondre

au fait pourquoi t'as quitté mac?? je préférais!! :D

Grafikart Il y a 2 ans - Répondre

Les tutoriels sont fait sur mon PC fixe qui est équipé de windows. Mac c'est lorsque je fait les tutos ailleurs que chez moi

Zod Il y a 2 ans Répondre

Désolé du double post, mais t'es sous Seven ou Vista ? Je pencherais pour Seven (même si je ne l'ai encore pas testé) mais j'aimerais bien avoir une confirmation/correction.

Grafikart Il y a 2 ans - Répondre

Je suis sur Seven Release Candidate effectivement.

Zod Il y a 2 ans Répondre

Correction : En local avec Wamp(/Mamp/Lamp) on peut envoyer des emails, si l'on a bien configuré Wamp(/Mamp/Lamp) lors de son installation (à un moment donné il demande l'adresse mail, et pour ceux qui sont chez Free par exemple il faut mettre smtp.free.fr (de tête, si je ne me trompe pas) ! ;]

codekiller Il y a 2 ans Répondre

Bonjour,
Merci pour ce tuto, et pour tous les autres.
J’écume le net depuis un moment déjà à la recherche de tutos, et aucun site ne t’arrive a la cheville, explications claires, sujets hyper intéressants, bref que du bonheur.
Par contre comme les derniers posts je rencontre également un décalage du son vers la 100iéme minutes, mais bon cela ne ma pas empêcher de le suivre jusqu’au bout.
Encore merci.

greg Il y a 2 ans Répondre

C'est vrai que comme cms wordpress et terrible..

Xty Il y a 2 ans Répondre

Tout d'abord bravo pour ce tutoriel (et tous les autres, par la même occasion).
Mais je rencontre le même problème que les gens ci-dessus, à savoir le décalage son/image vers la moitié du tutoriel (qu'il devient donc très difficile de suivre).
Ceci est-il dû à Dailymotion, ou est-ce un problème de montage?

Grafikart Il y a 2 ans - Répondre

Je ne peux pas voir la vidéo vu que je n'ai pas un bon débit mais la vidéo uploadée n'avait pas de problème de son. Le décalage est conséquent ?

BlackWashington Il y a 2 ans Répondre

Merci pour ce super TUTO !!!!
Mais sinon j'ai le même problème que Baptiste sa fonctionne nickel puis vers les 100 minute sa déconne tous est décaler jusque la fin de la vidéo.
Mais a part sa un très bon Tuto.

Baptiste Il y a 2 ans Répondre

heu 100 minutes je veux dire!!
bon en plus je peux pas avancer la vidéo avec dailymotion, j'ai voulu recharger la page et je dois recommencer du début -_-

Baptiste Il y a 2 ans Répondre

re salut,
vers 1000minutes, qu'est ce qui se passe? il y a décalage son et tout, le son beug, ça saute...

@+

Krome Il y a 2 ans Répondre

Excellent tuto comme d'habitude !

Petite question à Graf : Pourquoi ne pas avoir utiliser les tranches dans photoshop pour les différents éléments graphiques plutôt que de tout rogner un par un ?

Je ne suis pas un expert mais il me semble que les tranches permettent d'exporter d'un coup toutes les images utiles au design.

En utilisant l'option "Calque->Nouvelle tranche d'après un calque" les tranches créées sont liées à leur calque respectif et se redimensionnent si l'on vient à changer le contenu du calque (largeur ou hauteur bien sur)

Et encore bravo !

Grreg Il y a 2 ans Répondre

Très bon tuto ! C'est exactement ce que je recherchais pour refaire mon site !

Par contre, j'ai payé 3€ sur Weecast pour me rendre compte qu'il était en ligne gratuitement ici... Un peu dèg' quand même (même si c'est juste 3€).

Mais bon, c'est mérité quand même

leknoppix Il y a 2 ans Répondre

Je le regarderais dès ce soir

Baptiste Il y a 2 ans Répondre

surtout que la vidéo dailymotion je peux pas dépasser les 20 secondes... !ça coupe après ta première phrase!! lol

Baptiste Il y a 2 ans Répondre

ok! bon bin j'attends le paiement téléphonique pour l'avoir en HD!
à 15 ans j'ai pas encore de CB! lol

bravo et merci!
@+

PS: je ne peux toujours pas envoyer de commentaire avec mon compte, je dois être déconnecté...

Baptiste Il y a 2 ans Répondre

Ah on aura plus la version HD de dailymotion?

Grafikart Il y a 2 ans

Pour les longs tuto non, je dois baisser la résolution et la qualité pour obtenir une vidéo qui soit uploadable

DevAddict Il y a 2 ans - Répondre

Et c'est la vrai merde xD

pobourger Il y a 2 ans Répondre

Merci vivement qu'on puis payer par Allopass

par exemple 2€ pour 31 jours sa serait cool ^^

Harry Il y a 2 ans Répondre

Je pensais que 3h de vidéo sur DailyMotion c'était impossible, INTOX
Tchou

MyKiwi Il y a 2 ans - Répondre

Plus de 20 minutes c'est possible lorsque l'on a un compte MotionMaker
Excelent tuto, je pense passer premium pour pouvoir le voir en true HD :D

tchitcho Il y a 2 ans Répondre

Franchement respect ! c'est pas banal de voir de si gros tuto en France, c'est grâce aux gens comme toi que des autodidactes (comme moi ^^) ont pus évoluer au fil du temps !

encore une fois respect, 3h c'est pas rien OO

et merci, hô grand merci pour ce tuto en particulier, je déboule tout juste sur Wordpress et l'idée de taffer sur des thèmes préexistants ne m'emballe pas vraiment, je vais pouvoir attaquer ce que j'ai à faire ...

Dechuck Il y a 2 ans Répondre

Ton tuto est super!!
Merci!!

Je voulais savoir quelle est la dimension de ton design sous photoshop? Je me demandais quelle dimension, je devrais choisir pour mon site?!

Merci

Antho Il y a 2 ans Répondre

Un très grand et très très intéressant tutoriel ! Franchement c'est que du bon boulot, où j'ai appris quelques astuces bien sympathique ^_^

Merci beaucoup

ZiPo Il y a 2 ans Répondre

Excellent tuto !! je le cherchais partout celui là, très bien réalisé, Merci !

Boudda Il y a 2 ans Répondre

Un grand merci pour se tuto que j'attend depuis si longtemps...Merci pour le tuto ..Merci pour la qualité ....bigup grafikart.
Peace...

Harry Il y a 2 ans Répondre

J'ai remarquer une erreur sur Deezyne.fr et dans le tuto :
Tu as mis display:bock; pour

#col21 #commentform input[type=text]

C'est donc pour ça que tu disais que ça voulais pas se mettre tout seul et au passage que tu as du mettre width:100%;

Grafikart Il y a 2 ans - Répondre

Bien vue