Tutoriel Layout

MAJ: 30/10/17

correction grammaire et orthographe: Non fait

Bienvenue sur ce tutoriel,

Où vous pouvez apprendre à personnaliser la mise en page de votre fiche sur OhMyDollz. La personnalisation de fiche est principalement nommée Design. Dans le soucis de différencier le Design(aménagement) de pièces et la mise en page, j’utilise le terme Layout.

Pour modifier nos fiches, nous utilisons principalement le langage informatique CSS qui normalement permet de définir la mise en page, l’aspect visuel. Ils peuvent être mis entre balise <style> (Interne) ou dans un document hébergé sur un site internet (Externe).

Les feuilles de style en cascade, généralement appelées CSS de l’anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. (Wikipedia)

Le contenu est sous forme HTML (Hypertext Markup Language). Le CSS est complémentaire du HTML. Très souvent, on utilise du CSS directement dans le HTML pour aligner un paragraphe, colorer un texte,

Exemple de CSS directement dans du HTML:

< div style=”height: auto; width: 510px; background-color: #fff; margin: 10px; padding: 20px; border: 1px solid #000;”> Contenu de votre élément < /div>

<p style=”text-align: center;”> Contenu de votre élément </p>

Sur OhMyDollz, l’aspect visuel sur une fiche de joueuse est sous forme CSS (le rose, le fond de la page, etc.) alors que le Qsj est à la fois sous forme HTML et CSS.

Comme le langage CSS est déjà défini par le site, il reste possible de modifier notre mise en page en respectant les balises[#] déjà établies ce qui nous facilite la tâche.

Note: C’est une explication très simplifié du codage informatique qui s’applique à OhMyDollz

Source:

Sommaire

Mise en garde et Conseils
Liste de Tutoriaux existant
Mon tutoriel
Différents Outils
Mot de la fin

Mise en garde & conseils

Avant de personnaliser sa fiche, il faut prendre connaissance de certaines informations et de règles.

Premièrement, Un design comme un Qsj ou n’importe quelle page web avec beaucoup d’images ralentissent le chargement de la page.

Conseil: Éviter de surcharger son QSJ d’images si l’on utilise un Layout.

Deuxièmement, Feerik Games tolère les changements de design, mais il ne faut pas en abuser et respecter les options des fiches mises par l’administration tel que le bouton de signalement ou les boutons de votes, ainsi que les autres.

Les Règles Officielles (Layouts)

Tenter d’interrompre, bloquer ou interférer avec les systèmes du jeu ou les services est interdit

Sur vos fiches, plusieurs options sont des services du jeu comme :

l’achat in loft – la visite des pièces – le bouton de signalement – la possibilité de voter (Même de voter +1)

Nous tolérons que les joueurs modifient leurs designs, qu’ils personnalisent leurs fiches, mais pas qu’ils détournent des fonctions du jeu qui sont censées être présentes sur leurs pages.

Conseils:

Modifier seulement l’aspect visuel de notre fiche
Ne pas retirer de blocs
Ne pas modifier de fonctions
Éviter les déplacements de blocs majeurs

Troisièmement, une fois un Layout mis, vous ne pourrez plus changer votre Qsj avec l’éditeur Html.

METTRE IMAGE ÉDITEUR HTML

Si vous validez le Qsj avec l’éditeur Html,

Si vous avez mis votre CSS en interne, les balises

Si ça vous arrive:

Solution 1: Retirer le codage CSS puis en le remettant sans l’éditeur html

Solution 2: Modifier <— par <style> puis —> par </style>

Si vous avez mis votre CSS en externe comme

Conseils:

Utiliser un autre éditeur en html et coller le codage html obtenu dans votre QSJ sans éditeur HTML

J’utilise désormais Eklablog pour faire mes Qsj, car j’aime mieux l’éditeur Html. Je fais une page pour un Qsj, je le modifie avec l’éditeur. Quand j’ai fini, je mets l’éditeur en code source puis colle tout le code dans mon Qsj en remplaçant l’ancien. REFORMULER

Conserver le codage HTML et CSS de votre Qsj dans un document (txt, css, word, etc.) sur votre ordinateur. Ainsi vous pourrez sélectionner des parties de codages ou encore tout effacer puis remettre votre copie.
Supprimer tout et recommencer. En bas de page “Mon Compte” => “Vider Mon Qsj”
Garder mon site et vos designs préférés en favoris 😉

En attendant de finir mon tutoriel un peu plus bas

Liste de tutoriaux

(par ordre de préférence)

La dollz Jesssloulou qui a fait un tutoriel complet dans un document PDF. Le lien du document est présent sur son Qsj
Le wix de Misslafolle52 => http://designmisslafolle52.wixsite.com/design-ohmydollz
Le facebook de Fire où vous pouvez également retrouver des explications pour faire son propre design sur son wix
Facebook=>https://www.facebook.com/pages/Fire/959500217425836?ref=hl
Wix => http://erika-44.wix.com/freya-fire-world
Tutoriel restauré de Camille(Anciennement Ptico-toi)
Je vous propose un tuto disponible sur le forum de la version espagnole => http://es.ohmydollz.com/foro/viewtopic.php?id=8253
Un autre tuto espagnole fait par Nejihina-loves dont une video=> http://nejihina-loves.blogspot.com.ar/
Le blog de Carolelol=> http://lepetitmondedesgens.over-blog.com/2013/12/codes-html-pour-design.html

Mon tutoriel

Il existe plusieurs tutoriaux, mais aucun que je ne trouve complet. Le mien est rédigé selon mes envies et mon temps libre. Il est sous forme de différents Google Docs dont les liens sont listés ici. REFORMULÉ

Le codage en général