Ceci est un guide d’aide à la personnalisation du kit graphique DarkCorporate, vous pourrez y trouver tous les détails importants qui vous aideront sans doute à modifier chaque page et chaque image contenus dans l’archive achetée sur kitgrafik.com

DarkCorporate qu’est-ce donc ?

C’est une interface graphique vendue au prix de 15 euros sur le site kitgrafik.com, elle a été créé par wks.fr, nous proposons notamment un article de présentation à cette adresse : http://www.wks.fr/fjdklfjkls

Pour plus d’efficacité, je vais m’efforcer d’être le plus simple possible dans le but d’être compris par tout le monde, si toutefois vous ne comprenez pas certains détails, vous pouvez poster vos questions dans le forum en bas de page.

Je vais détailler les modifications élément par élément. Vous pouvez vous référer au sommaire (présent en haut de la page) pour consulter les informations plus rapidement.

 Modifier le menu horizontal à onglet

Ce menu est présent dans chaque fichier html, vous devrez donc faire la modification sur chaque fichier : j’ouvre le fichier index.html (pour faire la modification sur la page d’index) et je fais ctrl + f (pour ouvrir une recherche interne) et j’inscris dans le formulaire menu_first, j’appuie sur entrer. Je me retrouve directement à l’endroit où se trouve le menu. Je n’ai plus qu’à modifier le nom des onglets :

Par exemple, ce code correspondant à l’onglet service :

<li><a href="page2.html" id="menu2"  class="link_menu_inside">Services</a></li>

Deviendra :

<li><a href="page2.html" id="menu2"  class="link_menu_inside">Mon nouveau titre</a></li>

Tout simplement, j’appuie ensuite sur ctrl + s ou fichier > enregistrez pour que mes modifications soit prisent en compte !

 Modifier le menu blanc à gauche

Le titre du menu : Ce menu est présent dans chaque fichier html, vous devrez donc faire la modification sur chaque fichier : j’ouvre le fichier index.html (pour faire la modification sur la page d’index) et je fais ctrl + f (pour ouvrir une recherche interne) et j’inscris dans le formulaire menu_left_head_1. Je me retrouve directement à l’endroit où se trouve le titre du menu. Je n’ai plus qu’à modifier le texte.

Par exemple ce code correspondant au titre du menu :

<div class="menu_left_head_1">Titre du menu</div>

Deviendra :

<div class="menu_left_head_1">Le nouveau titre</div>

Puis je vais modifier chaque lien de la liste qui se trouve juste en dessous.

<li><a href="">Adipiscing nec</a></li>

Deviendra :

<li><a href="http://www.l’url de mon lien.com">Le titre de mon  lien</a></li>

 Modifier les trois gros boutons noirs de gauche

Ces trois boutons correspondent à trois fichiers images respectivement : icone_left_1.png, icone_left_2.png et icone_left_3.png. Il va donc falloir ouvrir photoshop pour modifier ces images.

J’ouvre donc mon logiciel photoshop et j’ouvre le fichier icone_left_1.psd se trouvant dans le dossier source photoshop.

J’appuie sur la touche t pour sélectionner l’outil texte et je clique sur le titre de chaque bouton (sur le noir et le bleu). J’écris évidemment le même titre en haut et à droite. Ensuite je fais ctrl + alt + s ou fichier > enregistrez sous et j’enregistre sous le nom icone_left_1.png (je choisis l’extension .png dans le menu déroulant). Je fais la même chose avec les fichiers : icone_left_2.psd et icone_left_3.psd !

Je vais maintenant ajouter un lien sur chaque bouton :

Ces boutons sont présents dans chaque fichier html, vous devrez donc faire la modification sur chaque fichier : j’ouvre le fichier index.html (pour faire la modification sur la page d’index) et je fais ctrl + f (pour ouvrir une recherche interne) et j’inscris dans le formulaire icone_left1.

Je trouve donc le code <div class="icone_left1"></div>

correspondant au bouton 1 et je le remplace par :

<a href=“http://www.l’url de mon lien.com“><div class="icone_left1"></div></a>

Je fais la même chose pour les boutons 2 et 3.

 Supprimer le moteur de recherche google

Ce moteur de recherche est présent dans chaque fichier html, vous devrez donc faire la modification sur chaque fichier : j’ouvre le fichier index.html (pour faire la modification sur la page d’index) et je fais ctrl + f (pour ouvrir une recherche interne) et j’inscris dans le formulaire conteneur_search et j’appuie sur entrer, je me retrouve à l’emplacement où se trouve le code correspondant au moteur de recherche.

Plus particulièrement j’identifie le code :

que je supprime si je veux enlever le moteur de recherche de mes pages. Si je veux juste changer le texte, je le change directement dans le code.

 Modifier le logo en haut à gauche

J’ouvre le fichier header.psd avec photoshop, et avec l’outil texte je change les titres, puis j’ « enregistre sous » le fichier sous le nom header.png.

 Modifier le footer

Ce footer est présent dans chaque fichier html, vous devrez donc faire la modification sur chaque fichier : j’ouvre le fichier index.html (pour faire la modification sur la page d’index) et je fais ctrl + f (pour ouvrir une recherche interne) et j’inscris dans le formulaire conteneur_foot puis j’appuie sur entrée. Je trouve le code :

Je supprime simplement le contenu du div et je le remplace par mon copyright.

 Modifier les boutons lire la suite

Pour modifier ces boutons « lire la suite » et « visiter ce site » présent sur la page d’index et sur la page partenaire, il faut identifier le div button_dark et button_white,et je modifie l’intitulé ou j’ajoute un lien.

 Pour modifier le titre ou le texte

Pour changer le titre il faut chercher les balises H2 ou H3. Pour changer le texte il faut chercher la balise texte_claire.

 Pour modifier le gros titre des pages

Vous aurez remarqué qu’il y un titre graphique sur chaque page. Vous pouvez le modifier simplement en ouvrant le fichier : content_1_back.psd avec Photoshop et en l’éditant avec l’outil texte. Ensuite je dois l’ « enregistrez sous » avec les noms correspondant à chaque page :

• content_1_back.png : pour la page d’index
• content_1_back_services.png pour la page page2.html
• content_1_back_agence.png pour la page page4.html
• content_1_back_partenaires.png pour la page page5.html
• content_1_back_contact.png pour la page page6.html

 Pour modifier la galerie de photos

Dans le fichier page3.html je cherche le code :

Pour ajouter une image, j’ajoute simplement la ligne :

à la suite de la liste, en n’oubliant pas de modifier le nom de mon image et le titre de mon image !

Je place ensuite mon image dans le dossier img/

 Conclusion

Voilà, je pense avoir expliqué tous les points qui pourraient vous poser problème lors de la modification de ce kit graphique. Cependant si vous pensez avoir encore besoin d’une assitance, n’hésitez pas à poster des messages dans le forum ci-dessous.

Bonne chance à tous !

 Autres liens sur Internet en rapport avec l’interface graphique DarkCorporate

Article de présentation de l’interface DarkCorporate

http://www.wks.fr/Kit-graphique-DarkCorporate.html

Tutorial de personnalisation du kit DarkCorporate

http://www.wks.fr/Dark-Corporate-Aide-a-la.html

Tutorial de création du logo :

http://www.wks.fr/Creer-une-bille-metal-dark-glossy.html

Exemple du script lightbox :

http://www.wks.fr/kitgrafik/light1/index.html

Exemple de la galerie glissante :

http://www.wks.fr/kitgrafik/light2/index.html

Site officiel du script lightview :

http://www.nickstakenburg.com/projects/lightview/