Trucs et astuces
 
POUR ÊTRE INFORMÉ DES DERNIÈRES ASTUCES


et recevez automatiquement par mail chaque nouvelle astuce dès qu'elle est publiée.
Trucs pour les adresses des pages

Donner le plan d'une rubrique sur une page

Vous avez par exemple une rubrique Archives - cela peut être une autre rubrique - qui est maintenant très riche. Beaucoup de menus et peut-être même des sous-menus. Quand un visiteur clique sur le menu déroulant, il est un peu intimidé.
Cela pourrait être plus accueillant quand il clique sur Archives d'ouvrir une page affichant le plan de la rubrique : ce sera plus confortable pour choisir où se rendre. En outre dans la page vous pourrez fournir des contenus pour guider la suite de la visite.

Rien de plus facile à réaliser !

Dans Pages et menus

- à côté du dossier Archives, faites une nouvelle page Archives !
- passez le dossier Archives sur n'est pas visible dans les menus,
- maintenant dans la page Archives il faut présenter le plan de la rubrique, avec des liens vers chaque page. Vous pouvez le faire à la main, en commentant chaque page, mais pour faire vite, faites un copier-coller depuis votre plan du site dans une note Billet !

Votre plan du site s'obtient en ajoutant clubmap.html à la fin de votre adresse de site, exemples :
http://www.exemple.fr/clubmap.html
http://club.quomodo.com/exemple/clubmap.html
 

Raccourcir l'adresse d'une page

Vous avez une page du site qui a une adresse un peu compliquée mais vous voudriez bien lui donner une adresse facile à retenir. 
Exemple, la page est :
http://www.exemple.fr/manifestations/tournoi-seniors-2012, mais ce serait bien de donner aux visiteurs une adresse comme :
http://www.exemple.fr/tournoi.

Deux solutions possibles, à effectuer dans Pages et menus :
  • avec la nouvelle commande  +  Nouveau > Créer un nouveau lien, faites un lien Tournoi vers la page,
  • ou alors, si vous ne comptez pas modifier votre menu : déplacez la page pour la mettre au premier niveau en la sortant de son dossier, renommez-la Tournoi, cliquez sur Enregistrer les modifications, puis sans refermer le panneau faites les modifications en sens inverse : renommez la page avec le nom d'origine, et remettez-la dans son dossier. Même n'ayant existé qu'une seconde, la page Tournoi continuera à fonctionner.
Trucs de mise en page

Mettre une bannière entièrement personnalisée

Dans votre panneau Habillage, vous pouvez choisir de mettre une image comme fond de bannière. 
Pour un résultat optimal, la bannière doit faire 990 pixels de large, et être de la hauteur qui est indiquée pour la bannière : réglable entre 70 et 250 pixels.
 

Mettre un nouveau texte au-dessus des autres comme dans un blog

Activez la mise en page auto dans votre palette de gauche. Maintenant, si vous créez une note et que vous la positionnez plus haut dans la page que les autres, les autres redescendent et se repositionnent automatiquement sur la grille pour laisser la place de la nouvelle note.
 

Mettre une image en fond de page

Créez une note Image et sélectionnez l'image de votre choix. Dans la colonne de gauche, zone Marge, sélectionnez aucune. Enfin, positionnez votre note en haut à gauche de votre site, et étirez-la au maximum. 
Pour ajouter du contenu par-dessus, utilisez de préférence l'option associer une nouvelle note... de la note Image. 
Sinon, utilisez la commande mettre à l'arrière-plan dans la barre d'outils de la note Image.
 

Ajouter un filet vertical à une note Billet (expert)

Pour un filet vertical, vous pouvez utiliser une image que vous aurez réalisée vous-même, mais vous pouvez aussi ajouter un filet sur le côté de la smartnote Billet.

Pour un filet sur la gauche, cliquez son bouton HTML et ajoutez les lignes suivantes (les retours ligne sont pour la lisibilité) :

AVANT le contenu actuel :

<table cellspacing="0" cellpadding="0"><tr>
<td width="20px" style="border-style: solid ; border-width: 0px 1px 0px 0px ; border-color: #AAA">&nbsp;</td>
<td width="20px" style="border-style: solid ; border-width: 0px 0px 0px 1px ; border-color: #DDD">&nbsp;</td>
<td>

APRÈS le contenu actuel :

</td></tr></table>

Pour un filet sur la droite, cliquez son bouton HTML et ajoutez les lignes suivantes :

AVANT le contenu actuel :

<table cellspacing="0" cellpadding="0"><tr><td>

APRÈS le contenu actuel :

</td>
<td width="20px" style="border-style: solid ; border-width: 0px 1px 0px 0px ; border-color: #AAA">&nbsp;</td>
<td width="20px" style="border-style: solid ; border-width: 0px 0px 0px 1px ; border-color: #DDD">&nbsp;</td>
</tr></table>


Légende
  • on peut remplacer le 20px (2 fois) pour donner des marges différentes autour du filet, ne pas oublier le px qui doit rester collé,
  • le filet a une couleur à droite (ici DDD, gris clair) et une couleur à gauche (ici AAA, gris moyen), pour paraître en creux. Changez les couleurs en fonction de votre site,
  • pour un filet plus épais, donnez-lui une border-width plus élevée, remplacez le 1px.

Trucs visuels

Justifier les textes

Les textes justifiés - c'est-à-dire alignés à la fois à gauche et à droite - sont plus faciles à lire, et donnent une impression de meilleure finition. La note Billet vous permet de justifier vos textes : n'hésitez pas à justifier chaque paragraphe sauf exception.

Mettre un GIF animé sur la page

Utilisez la note Image. Choisissez le GIF animé - sur votre ordinateur, ou une adresse web - et dans la palette de gauche, zone Image, cochez utiliser l'image originale.

Mettre une légende originale à une image

Ajoutez une note Image, et associez-lui une note titre au moyen de la commande associer une nouvelle note. La note Titre vous propose de nombreuses options, dont celle d'avoir un fond partiellement ou totalement transparent, vous permettant des effets spéciaux.

Estomper une image

Besoin d'atténuer un peu une image, par exemple pour en faire un fond de page ? 
Mettez votre image sur votre page. Cliquez ensuite sur "associer une nouvelle note...", et choisissez la smartnote titre. Choisissez un fond blanc, et une transparence forte, sautez ensuite autant de lignes que nécessaire pour lui donner au moins la hauteur de l'image. Validez, adaptez la largeur de votre smartnote titre à celle de l'image.

Utiliser un smiley comme image

Voici comment mettre un smiley, aussi bien dans un message sur le Forum que dans une note Image : utilisez les adresses web des smileys Quomodo. 

Les adresses que vous pouvez utiliser sont du type :

http://club.quomodo.com/services/mcn/elems/smiley/64/adore.png

64 est la dimension, vous pouvez mettre 128.
adore est le nom du smiley en anglais, les noms valides sont : adore, angry, badly, celebrate, cool, cry, dizzy, easymoney, frown, furious, hysterical, impish, kiss, kissed, laugh, music, pudently, sad, shok, sleep, smile, stop, struggle, study, surprise, sweat, sweetangel, wink, woo, wornout. N'oubliez pas le .png à la fin.
 

Donner une icône personnalisée à la note billet

Vous aimeriez mieux une autre image comme icône pour la note billet ? 
Choisissez "aucune icône" puis en utilisant l'option "associer une nouvelle note..." superposez une image sur le coin de la note billet. Si votre image a des régions transparentes (.png, .gif) la transparence est respectée.

 

Donner une image personnalisée au compte à rebours

Encore une smartnote qui peut bénéficier d'un note associée : pour remplacer la pendule du compte à rebours, choisissez de ne pas afficher le logo, et en utilisant l'option "associer une nouvelle note...", superposez-lui l'image de votre choix.

 

Zoomer sur une partie de l'image

Vous pouvez créer un effet intéressant en autorisant un zoom sur une partie de l'image comme par exemple sur cette page.

Pour cela il faut :

  • depuis votre image, en créer une seconde qui sera l'image affichée par le zoom, en la rognant dans un logiciel de retouches d'images
  • insérer une note Image avec votre photo principale, sans zoom,
  • insérer la seconde image par-dessus en la dimensionnant de manière à ce qu'elle s'intègre parfaitement dans la première. Vous définissez un zoom à l'affichage de cette image.

Créer un effet ombré

Pour faire un effet ombré sur une silhouette ou un texte, commencez par créer la smartnote en noir. 
Cliquez ensuite sur "associer une nouvelle note..." et re-créez une note exactement identique, mais d'une couleur que vous choisirez. Placez-la ensuite légèrement décalée par rapport à la première afin d'obtenir un effet qui vous plaise.

 

Encadrer un texte à l'aide d'une note Billet (expert)

- Créez une note Billet,


- Pour simplifier la suite, sélectionnez l'onglet Marge situé dans la palette de la note sur la gauche du site et réduisez la "Marge autour du Texte" à 0,


- Cliquez sur le bouton HTML de la note Billet : le but est "d'encapsuler" le source, c'est-à-dire d'ajouter une ligne avant le début et une autre après la fin du texte à encadrer,


Avant le début, ajoutez :


<div style="padding: 20px ; border: solid 13px green">


Après la fin, ajoutez :


</div>


Bien sûr ce n'est qu'un exemple, voici les explications :

  • 20 règle la marge à l'intérieur de la bordure,
  • 13 règle l'épaisseur de la bordure, (respecter le px sans espace),
  • solid désign le type de trait (solid = trait plein), vous pouvez choisir dotted (pointillé), dashed (tireté), double, groove (sillon), ridge (ressaut), inset (arrière-plan), outset (premier-plan).
  • green indique une couleur, on peut mettre une couleur en anglais ou bien un code RGB, tel que #FAA ou #2B2B00. Se renseigner sur Internet à propos des "codes couleurs hexa".


Au lieu d'un cadre vous pouvez mettre un simple filet, ici sur la gauche (left = gauche, right = droite, top = dessus, bottom = dessous) :

<div style="padding: 20px ; border-left: solid 1px green">

 
Trucs pour les Smartnotes

Afficher un tableau Excel avec des fusions de cellule, des styles, etc.

La note tableau est très bien pour présenter rapidement un tableau simple, mais pour un tableau Excel plus compliqué il faut utiliser la note Billet, et procéder en 2 étapes.1. dans Excel, sélectionnez les cellules concernées, faites Copier. Puis faites Coller dans un nouveau document Word.

2. dans Word cette fois, sélectionnez le tableau, faire Copier. Créez une note Billet, cliquez dans la grande case blanche, faites Coller. Validez.


PRECAUTION IMPORTANTE : pour éviter des affichages tronqués sur certains ordinateurs, donnez à votre smartnote la même largeur que le tableau dans Word. Si le tableau dans Word est plus large que la page du site, réduisez d'abord suffisamment la largeur des colonnes dans Excel.

 

Mettre du texte en valeur dans un tableau ou dans un titre

Dans un tableau, si vous encadrez un mot (ou plusieurs) avec trois signes plus, comme +++ceci+++ par exemple,  il s'affichera en grande taille. 
Vous pouvez également utiliser la double apostrophe (italique), la triple apostrophe (gras), le triple signe moins (petit) ou le quadruple plus (très grand). Ce "truc" fonctionne dans plusieurs notes.
 

L'ascenseur vertical dans la Smartnote Billet

Si votre Smartnote Billet contient beaucoup texte mais que vous ne souhaitez pas qu'elle prenne beaucoup de place sur votre page, il est conseillé d'intégrer un ascenseur vertical à la note.

Il faut :

1. rédigez le contenu normalement dans la note Billet

2. cliquez sur HTML et effectuez 2 opérations :
- avant le début, ajoutez :
<div style="overflow: auto ; height: Hpx">
Remplacer H par la hauteur souhaitée en pixels

- après la fin, ajoutez :
</div>

Modifier le contenu d'une cellule d'un tableau

Editez votre note (cliquez sur le petit crayon de la note), puis cliquez sur la cellule que vous souhaitez modifier.
Un champ de saisie apparaît et vous permet de modifier le contenu de la case.
N'oubliez pas de valider vos changements en cliquant sur le bouton "ok", situé en bas de la note.
 

Ajouter un lien dans une note titre (expert)

Voici le "truc" pour insérer un lien dans les notes qui en principe n'en acceptent pas. Insérez le texte suivant, par exemple pour un lien e-mail :


[[contactez-nous->mailto:votrenom@yahoo.com]]


Pour un lien vers un site web :


[[cliquez ici->http://www.quomodo.com]]


Attention, n'ajoutez pas d'espaces sauf dans le texte libre. La flèche s'obtient avec le tiret du 6 puis le "supérieur".

Ce "truc" fonctionne dans plusieurs notes.


Mettre de la musique sur la page

Vous pouvez utiliser la note Flash pour écouter de la musique directement sur votre site. 
Utilisez par exemple les services de deezer (www.deezer.com).

Créez une playlist, et dans les options de la playlist, cliquez sur "partager".

Choisissez vos options, cliquez sur "copier ce code" et retournez sur votre site.

Créez maintenant une note Flash et collez le code que vous avez récupéré sur deezer, validez.

Écrire un caractère spécial

Certains caractères sont difficiles à taper : sur Mac il faut parcourir la palette de caractères, sur PC il faut utiliser des codes avec la touche alt...
Pourquoi ne pas plutôt utiliser le presse-papiers ?

© ♫ ✆ ☏ ✍ • € ⚠ ☺ ☹ ☼ ☂ ► ▼ 

Donner une adresse publique à un document

Un fichier qui n'a pas la planète dans le panneau Fichiers chargés sur le site n'a pas d'adresse web. L'adresse qu'on récupère si on le visualise dans ce panneau n'est pas une vraie adresse web. Si vous voulez le donner à télécharger, il lui faut une adresse web, et la seule façon est de le mettre sur une page. 
Mettez-le dans une note Documents, dans une nouvelle page créée à cet effet et réglée sur "non visible dans les menus", publiez, puis récupérez l'adresse dans la note Documents en mode visiteur. 

Récupérer les flux d'infos de votre comité ou d'un autre club

Vous pouvez récupérer l'ensemble des nouvelles que vous avez rédigées sur votre site (récupération des notes billets) dans un flux RSS.
Le flux RSS de votre site est à l'adresse de votre club, suivi de "filinfo.rss".

Par exemple : http://club.quomodo.com/news/filinfo.rssUtilisez directement cette adresse (ou celle de votre comité, ou d'un autre club) dans la smartnote RSS.

Afficher un extrait de page web (expert)

Pour afficher une zone déterminée d'une page web d'un autre site (ou même du vôtre), utilisez la note Billet, cliquez sur le bouton HTML, et indiquez le code suivant :


<div style="position: relative ; width:Apx; height:Bpx; overflow : hidden"><iframe src="http://ADRESSE" style="position: relative ; left: -Cpx ; top: -Dpx ; width: Epx ; height: Fpx ; frameborder: 0 " scrolling="no"></iframe></div>

A et B : dimensions de la zone à capturer

C et D : coordonnées du coin supérieur gauche de la zone à capturer dans la page d'origine

E = A + C  et  F = B + D

ADRESSE = adresse de la page d'origine (www etc.)


ATTENTION : certains sites refuseront de fonctionner, ils peuvent même compromettre le fonctionnement de votre page. Faites une copie de sauvegarde de la page dans Pages et menus et évitez de faire des essais sur votre page d'accueil.

 

Modifier l'apparence de sa Newsletter (expert)

Votre newsletter ne s'affiche pas exactement comme vous l'auriez souhaité ? Vous auriez voulu modifier les styles du texte, par exemple.


Une petite manipulation s'impose :


1. Créez votre newsletter et envoyez-la uniquement à vous.


2. Ouvrez la newsletter et cliquez sur le lien vers la version web, situé en haut de la newsletter.


3. Une fois sur la version web, vous "affichez le source de la page", c'est une commande dans les menus de votre navigateur.

Le source est un texte plein de balises. Repérez <body>, quelques lignes après le début. Repérez </body>, vers la fin. Mettez dans le presse-papiers tout ce qui est entre ces balises, sans ces balises elles-mêmes. Donc votre texte commence par <div> et finit par </div> (aux sauts de ligne près).


4. Sur une page Quomodo en admin, créez une note Billet, cliquez son petit bouton HTML, faites "Coller" et validez.

A présent, effectuez vos modifications dans la note Billet comme d'ordinaire, en restant sur les manipulations les plus simples : gras, couleur de texte, italique, souligné.

Parti d'un HTML compatible email on a ainsi des chances de le rester.

Une fois les modifications effectuées, cliquez à nouveau le petit bouton HTML et mettez tout le contenu dans le Presse-papiers.


5. A présent, rendez-vous dans la zone Envoi de messages, mais n'utilisez plus Nouvelle newsletter cette fois ! Utilisez Nouvelle alerte email, en effet l'alerte email accepte le HTML. Choisissez votre liste d'envoi (nous préconisons de commencer par une liste de test), faites "Coller" du contenu dans la grande case à cet effet, et envoyez.

Ajouter une image dans un tableau ou dans une note titre (expert)

Vous pouvez insérer une image dans certaines notes qui en principe n'acceptent que du texte. Insérez le texte suivant :
[[img->http://votre-site.fr/adresse-de-l-image]]
Il faut donc récupérer l'adresse de l'image, par exemple en la mettant dans une note Image (qu'on pourra d'ailleurs supprimer après l'opération), et en utilisant le clic droit sur l'image dans la page publiée. 
Attention, n'ajoutez pas d'espaces. La flèche s'obtient avec le tiret du 6 puis le "supérieur". 
Vous pouvez ajouter : __left ou __right, ou également __center ou encore __middle, après l'adresse de l'image pour la caler à gauche ou à droite, ou la centrer horizontalement ou verticalement. Il faut écrire 2 fois le tiret du 8 suivi de left, etc. Ce "truc" fonctionne dans plusieurs notes.
 

Afficher un texte en cliquant sur son titre (expert)

Il est possible de rendre un texte "dépliable" par clic sur un autre texte-"titre". Pour cela...

1. rédigez le contenu normalement dans la note Billet, mais sans le titre cliquable,

2. puis, cliquez sur HTML et effectuez 2 opérations :
- avant le début, ajoutez :
<div style="display:none">
et après la fin, ajoutez :
</div>

- avant le (nouveau) début, ajoutez :
<div style="cursor:pointer" onclick=" $ ( '+div' , this ).slideToggle( 250 ) ">ICI LE TITRE</div>

- enfin, mettez le titre à votre idée en remplacement de ICI LE TITRE.


3. pour remodifier le contenu, cliquez le bouton HTML, au début de votre contenu retrouvez display:none et remplacez-le par display:block.

Remarque : probablement que les textes cachés ne seront pas indexés par Google.
 

Lier une smartnote à une smartnote d'une autre page (expert)

Pour faire un lien d'une smartnote x située dans la page X, vers une smartnote y située dans la page Y :


- partez de la page Y, et créez un bouton dans celle-ci,

- cliquez sur "modifier le lien" et choisissez "Lien à une note de la page",

- trouvez le numéro de la note et copiez le,

- rendez-vous sur la page X et choisissez pour l'option du lien "Lien Javascript (expert)",

- écrivez dans le champ la ligne qui suit en modifiant AAAA et BBBB :

window.location.href="AAAA#note_BBBB"


AAAA = adresse de la page Y (http:// etc.)

BBBB = numéro de la note y copiée plus tôt


Trucs de maintenance

Réduire une image volumineuse

Vous avez sur votre ordinateur une image qui fait plusieurs Mo ? Vous allez pouvoir en charger une version réduite.
1. faites une note Image avec cette image, et agrandissez ses dimensions au maximum, 
2. à l'aide du clic droit téléchargez sur votre ordinateur l'image affichée par la note Image : c'est une copie en 1200 pixels de large, beaucoup moins volumineuse que votre image originale.
3. à présent, chargez sur l'espace du site cette image que vous venez de récupérer (renommez-la au besoin)...
4. ... puis supprimez de votre espace disque l'image trop volumineuse.

Réduire l'espace occupé par les fichiers

Votre espace de stockage occupé devient trop important ? 

Vous voulez bien commander le pack Giga, mais est-ce vraiment nécessaire ?

Supprimez d'abord les fichiers inutilisés. Ouvrez votre panneau Fichiers chargés sur le site. Cliquez sur l'en-tête de colonne Used ( = "utilisés"). Tous les fichiers qui ont leur cellule Used vide ne sont pas utilisés actuellement sur le site : ni pour l'habillage, ni sur une page. Vous pouvez les supprimer pour récupérer de l'espace de stockage. La place occupée par vos fichiers est affichée en bas du panneau.

Modifier la taille d'une image avec le logiciel Paint

Ouvrez votre Logiciel Paint.

1. Dans le menu "Fichier" cliquez sur "Ouvrir" et choisissez l'image que vous désirez redimensionner.

2. Dans le menu "Image" cliquez sur "Redimensionner/Incliner".

3. Il ne vous reste qu'à choisir de quel pourcentage modifier votre image.

Si vous souhaitez d'autres astuces, ou simplement suivre notre actualité, rendez-vous sur : 

 
 
 
 
 
 
 
 
L'offre Quomodo | Créer son site | Annuaire clubs de basket | Site des Admins Quomodo | News | Press Room | Aide
A propos de Quomodo | Conditions Générales | Confidentialité | Plan du site | Contactez-nous | Quomodo recrute

Quomodo S.A.S. au capital de 37000 euros - RCS Créteil 492 589 205 - 86, avenue Lénine 94250 GENTILLY
Copyright © 2011 Quomodo Paris (France)
Quomodo sur FacebookQuomodo sur TwitterFil RSS des news de Quomodo