Connexion
FAQ MembresM’enregistrer

Créer vos Thèmes HY-DV1

Le Bureau propre à Hybryde

Créer vos Thèmes HY-DV1

Messagepar chrisripp » 25 Déc 2012 16:09

[center]Créer un thème HYDV1.[/center]


Le nouveau bureau HYBRYDE est basé sur le CSS3, nous allons voir ensemble comment fonctionne le script css. Comment implémenter vos images, et animations le plus simplement du monde.
Dans la Team d’hybryde je ne touche qu’au design et n’ai aucune expérience en programmation. Pour autant, nous allons voir ensemble qu’avec un peu de méthodes et d’imagination la création d’un thème est à la portée de tous.

Mise en place de notre projet :

Les thèmes sont placés dans le dossier /home/.themes/HYDV1
Dupliquez un thème existant et renommez votre dossier de type mon-thème. Rafraîchissez le dash de droite: Mon thème doit maintenant figurer dans la liste de sélection.
Avec votre éditeur de texte préféré, éditez le fichier : /home/.themes/HYDV1/Mon-theme/css/style.css
Bien entendu, vous avez au préalable crée vos logos, animations et autres que vous stockerez dans : /home/.themes/HYDV1/Mon-theme/media/images

Se retrouver dans le script par rapport au bureau :

Image

Tous le script a été commenté, il est donc facile de s’y retrouver. Regardez le screenshoot ci-dessus, je vous ai placé les titres des différents module du script.
Un petit exemple :
Ce qui est génial avec le css, c’est le grand nombre d’applications en ligne que nous pouvons trouver sur la toile pour accélérer notre travail :
http://www.megaptery.com/2012/05/21-out ... l#bear_css
Mon préféré : http://www.css3maker.com/
Commençons par la barre des tâches, faites une recherche rapide en tapant : Bar windows, pour modifier ce module, il faut tout simplement remplacer les données se trouvant sous : .bar_background

Image

Sur css3maker, choisissez vos options et style s voulu et récupérer les webkit.

Image
Image
Image

Voici le css modifié pour la barre des tâches :

Image

Facile non ? Pour voir le résultat à l’instant "T" il vous suffit d’enregistrer le fichier css modifié, et de rafraîchir votre thème.
Après c’est la même méthode pour les autres modules, bien entendu il est possible d’insérer des animations frames ou gif dans vos compositions. Par exemple dans la fenêtre Hybryde je veux implanter mon logo animé. Je fais comme suis :

Image

Comme vous je me suis posé beaucoup de questions, la première toute bête comment faire pour placer ou je veux mes images sur mon thème, comment savoir sa position en pixel ? Les thèmes Maker sont-ils tous des surdoués en Math ? Bah non en fait, il suffit d’ouvrir gimp et de créer une nouvelle image à la dimension de l’écran, ensuite faites apparaître la grille en PIXEL. Placez à l’écran vos réalisations, regardez maintenant les options de sélection, gimp vous donne les coordonnées de vos images, vous n’avez plus qu’à les recopier dans le script.

Voici quelques tutoriels et script :
http://registry.gimp.org/taxonomy/term/383
http://gimp-tutorials.net/blog-theme-design-with-gimp
http://slodive.com/web-development/best ... tutorials/
http://www.sitepoint.com/build-awesome- ... nimations/
http://css3.bradshawenterprises.com/
http://www.dynamicdrive.com
http://www.alsacreations.com
http://stylishwebdesigner.com/21-must-s ... tutorials/
http://www.netmagazine.com/tutorials/ma ... -photoshop
http://www.darian-brown.com/2d-sprite-a ... -tutorial/
Image
Avatar de l’utilisateur
chrisripp
 
Messages: 577
Inscription: 07 Déc 2011 18:26

Retourner vers Desktop Hybryde

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

cron