Plateforme source
Accueil
La formation
Parcours 1
Parcours 2
Parcours 3-LMS
Parcours 3-Publications
Parcours 3-Ferme
Le trombi
Espace personnel d'apprentissage
Rechercher
×
Se connecter
×
Se connecter
Email ou NomWiki
Mot de passe
Mot de passe perdu ?
Se souvenir de moi
S'inscrire
Suivi formateurices
Aide, démo, actu
Présentation YesWiki
Gestion du site
Tableau de bord
Base de données
Plateforme source
Construire la gare centrale d'un projet collectif avec YesWiki
Plateforme pédagogique
Session du ...
Saisir une fiche : LMS Activité
Titre de l'activité
Titre affiché (optionnel)
Auteur·ice·s
Durée estimée de l'activité en minutes
Licence
×
{{ actionGroup.label }}
Choisissez un Formulaire
{{ name }}
Nb. : Il est possible d'afficher plusieurs bases de données d'un coup en entrant leur id séparé par une virgule [
accéder à la documentation
].
{{ isBazarListeAction ? 'Sous quelle forme voulez-vous afficher les données?' : 'Choisissez une action' }}
{{ action.label }}
{{ selectedAction.hint }}
{{ panel.params.title ? panel.params.title : 'Paramètres'}}
Code à include dans la page
Contenu
====Nous allons entrer dans la quatrième dimension : le CSS !==== - une référence sur le sujet : https://www.w3schools.com/cssref/ (n'y allez pas tout de suite) - sur votre navigateur préféré, tapez conjointement ctrl + maj + I : vous **ouvrez l'outil de développement Web**. Pour le refermer, utilisez la même combinaison de touches - Vous pouvez aussi, dans une page web (une publication en aperçu) faire un clic droit sur un élément de la page, et **cliquer sur "inspecter"** - la même interface va s'ouvrir - dans la partie "**Filtrer les styles**" amusez-vous à cocher les cases proposées quand on passe sur les éléments bizarres (c'est du css) {{attach file="slecteur.png" desc="image slecteur.png (0.2MB)" size="big" class="center" caption="Oui, je sais que c'est petit, il faut cliquer sur l'image pour la voir en grand"}} - **amusez-vous à cliquer sur les cases et à changer les variables**, pour l'instant vous ne casserez rien mais ça vous permettra d'appréhender un peu la séparation entre le fond (ce que vous avez écrit dans le wiki) et la forme (les éléments css qui décrivent comment les choses doivent être affichées) Ce que nous voyons c'est que **nous pouvons interagir sur la forme (le css), indépendamment du fond.** Certains se diront, il est gentil mais où veut-il en venir... ===LA Page Css=== Dans ""YesWiki"" une page vous permet de modifier le css et ainsi modifier la manière dont vous souhaitez que le contenu de votre wiki mais surtout dans notre cas des PDF ne s'affiche, il s'agit de la PageCss En fonction de l'ancienneté de votre wiki - soit votre page sera vide - soit votre page sera remplie de texte commenté Pour commencer à agir sur votre pdf généré par publication, ajoutez les éléments suivants dans cette page : %%@media print { .yeswiki-publication .right { float: right !important;} } .pagedjs_page.pagedjs_left_page { --pagedjs-margin-top: 10mm !important; --pagedjs-margin-right: 10mm !important; --pagedjs-margin-left: 10mm !important; --pagedjs-margin-bottom: 10mm !important; } .pagedjs_page.pagedjs_right_page { --pagedjs-margin-top: 10mm !important; --pagedjs-margin-right: 10mm !important; --pagedjs-margin-left: 10mm !important; --pagedjs-margin-bottom: 10mm !important; } }%% tout ce qui sera rajouté comme css dans cette page sera pris en compte dans les restitutions. Par exemple si je souhaite que les listes à puce disparaissent (mais uniquement lors de l'impression du pdf) je rajouterais %% ul {padding-left: 1rem; list-style:none;}%% sous .yeswiki-publication Si vous souhaitez augmenter les marges, il convient de modifier les chiffres au niveau des pagedjs-margin sachant que - top veut dire haut - Left gauche et right droite - bottom bas - il vous faudra faire cela pour les pages de droites (.pagedjs_page.pagedjs_right_page) et les pages de gauches (.pagedjs_page.pagedjs_left_page) ====Mais comment tu fais pour trouver les codes à changer ?==== Vous allez trouver en suivant racollant les morceaux... ===Voilà comment je trouve le code à changer=== {{attach file="code.gif" desc="image code.gif (3.0MB)" size="original" class="center"}} ===Et voilà comment je le rajoute dans la ""PageCss""=== {{attach file="intgration_du_code.gif" desc="image intgration_du_code.gif (2.3MB)" size="original" class="center"}} ===Et maintenent c'est facile de passer pour un magicien...=== à vous de pratiquer et de vous plonger dans le css. - rappellez-vous : https://www.w3schools.com/cssref
Activer JavaScript pour joindre des fichiers.
Fichier
Annuler
Échoué
Tags de description
Activer les commentaires ?
Oui
Non
Activer les réactions ?
Oui
Non
Valider
Annuler
×
Télécharger le fichier
Texte du lien de téléchargement
Afficher le pdf dans la page :
sous forme de lien
directement inclus dans la page
Alignement de l'image
Texte en dessous
Gauche
Centre
Droite
Taille de l'image
Miniature (140x97)
Moyenne (300x209)
Large (780x544)
Taille originale
Texte de la vignette
Paramètres avancés
Lien associé
Effets graphiques
Bord blanc
Ombre portée
Agrandissement au survol
Ajouter un lien pour afficher l'image seule en entier
Oui
Non
Texte de remplacement