Wakka wakka pas comprendre?

Support
#1

Bonjour du printemps !

Je souhaite sortir du canva graphique de base du yeswiki. Deux choses qui sont peut-être liées :

  1. comment accéder à l’édition du wakka.config.php ?
  2. j’ai beau fait des changements de couleurs et autres dans /?PageCss, je ne vois rien qui a changé…

Bonus : des exemples de yeswiki avec mise en page/graphisme inspirantes, folle, artistique

Merci d’avance

#2

Hello,

  1. on peut acceder aux parametres editables depuis l’interface du fichier de conf. dans « Roue Crantée » > « Gestion du site » > onglet « Fichier de conf. » (l’onglet « Look ») permettant aussi de mettre des themes sur des pages, creer un preset pour changer les couleurs de base et les polices, ou acceder a la PageCSS
  2. il faudrait une url pour voir, normalement ca marche bien

bonus : ma derniere intégration graphique : https://colibris-lemouvement.org/mooc-revolutions-locales/

1 « J'aime »
#3

Merci mrflos !

J’arrive pas à rétrécir la page menu haut malgré la lecture line-height 0
comme sur la photo… Je ne sais pas quoi rentrer dans le CSS

Capture d’écran 2024-03-26 à 11.58.36
Capture d’écran 2024-03-26 à 11.58.361231×296 157 KB

Aussi, je me demandais comment avez-vous fait pour ajouter la fenêtre volante « un mooc gratuit à couts réel » sur colibri-lemouvement ?

Merci

#4

Et quel code CSS entrer pour que toutes mes pages soient adaptatives en lecture sur mobile ?

MErci :wink:

#5

Pour l’encart fenêtre volantes, c’est un code spécifique, réalisé par @jeey , comme vous pouvez le voir c’est assez complexe, ca mélange du css, du javascript, de l’html et du code wiki.
Et pour changer la taille du menu, faut changer en css les tailles des liens dans le menu, la taille du titre, la hauteur de la navbar, changer la taille de la police sur l’élément body ne sera pas suffisant. (Si vous voulez aller loin dans la personnalisation, il faudrait vous former au développement web)

""
<script>
function demoDisplay() {
  var encart = document.getElementById("encart");
  // Vérifier si le div est déjà masqué
  if (encart.style.display !== "none") {
    encart.style.display = "none";
    // Enregistrer le statut du div dans un cookie
    document.cookie = "divMasque=true; expires=" + new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toUTCString();
  }
}

// Au chargement de la page
window.addEventListener('load', function() {
  // Lire le cookie
  var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)divMasque\s*=\s*([^;]*).*$)|^.*$/, "$1");
  // Vérifier si le cookie existe et a la valeur "true"
  if (cookieValue === "true") {
    // Masquer le div
    var encart = document.getElementById("encart");
    encart.style.display = "none";
  }
});
</script>

<div id="encart" class="encart">
  <span class="close" onclick="demoDisplay(); ">&times;</span>""
  ====Un MOOC gratuit,""<br>""des coûts réels====
[Votre soutien fait la différence :](https://www.jedonneenligne.org/colibris/DONS/){.newtab}
[Faites un don !](https://www.jedonneenligne.org/colibris/DONS/){.newtab}""
</div>
<style>
.encart {
  position: fixed;
  top: 115px;
  right: 50px;
  width: 300px;
  height: 193px;
  background-color: #fdf9ef;
  border: 1px solid #fff;
  padding: 10px;
  z-index: 2000;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  color: #177be2;
}
</style>""
#6

Ouf, c’est compliqué ça ! Je laisse tomber le pop-up… Merci mrflos
Pour diminuer la PageMenuHaut, ça m’a l’air aussi compliqué.

J’aimerais te demander encore deux choses pour que ça tienne la route et que ça me satisfasse :

  • Qu’encoder pour que le contenu soit adaptable à lecture sur téléphone portable ?
  • Comment puis-je faire pour que la la barre de navigation ne soit plus figée et se déroule quand on descend dans la page ?
#7

Comment puis-je faire pour que la la barre de navigation ne soit plus figée et se déroule quand on descend dans la page ?

Dans la PageCss , encoder le code suivant pour que le menu ne suive pas en descendant dans la page

#yw-topnav, #yw-topnav.fixable {
  position: relative;
}

Qu’encoder pour que le contenu soit adaptable à lecture sur téléphone portable ?

Il nous faudrait une copie d’écran d’une navigation depuis le téléphone car en théorie c’est sensé fonctionner d’entrée de jeu

#8

Waw super pour le petit bout de code qui change beaucoup, ça rend plus léger la lecture !!
Voici le wiki en question :four à chaux : Le projet
Les images de la page d’accueil s’adaptent pas en mode téléphone, elles sont rabotées

#9

Ok cool, des fours à chaux!

Pour la page d’accueil, pour les sections il ne faudrait pas rajouter de hauteur fixe a 800px, c’est cela qui deforme en mode portable.

donc:

  1. retirer les height=« 800 » des {{section
  2. rajouter en bas de la page d’accueil:
""<style>
.cover {
 aspect-ratio: 16 / 9;
}
</style>

pour forcer un ratio a 16/9 (4/3 ou 3/2 aussi possible selon le format de vos images)

#10

Fantastique ! Je vous suis reconnaissant, une place pour la faites du feu 29 juin près de Tournai, Belgique (30 min de Lille) :slight_smile: vous intéresse ? Je vous l’offre, dites moi si ça vous intéresse
Belle journée
Nb: si vous voyez d’autres éléments qui clochent, faites moi signe aussi

#11

Merci de la proposition d’invitation, ca m’aurait intéressé mais j’habite a plus de 2500 km de Tournai, ca fait un peu loin! Par contre on a un grand contributeur belge en la personne de @gatienbataille qui n’est pas loin de Tournai.

Pour les autres éléments, il y a peut etre agrandir la zone cliquable des liens dans les images de la page d’accueil, en plus des propriétés ci dessus, mettre .cover h1 a { display: block; padding: 5em; }

#12

Yes, Gatien est mon formateur yeswiki :slight_smile:
Merci pour la dernière note, mais en vue adaptative (téléphone), la taille des titres me vont à merveilles.
Tout grand merci mrflos !

-François

1 « J'aime »