En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Forum » En vrac ! » Feuille de style personnalisée
 
 
 
    Imprimer la page...
    Imprimer la section...

Forum - En vrac ! - Feuille de style personnalisée


Nombre de membres 56 membres
Connectés : ( personne )
Snif !!!
 

clos par  le //  Sujet n° 99

le 08/11/2020 @ 21:20
par Norbert

Norbert

1 message

Bonjour,

Merci pour vos astuces !

Jusqu'à maintenant, j'arrivai à me débrouiller seul mais cette fois, je suis bloquée.

Je viens de réaliser un édito avec camera (lestg.free.fr) et je voudrais mettre le style dans une feuille de style séparée mais je ne sais pas comment.

Merci pour votre aide.

Cordialement.

Norbert

Site web Norbert
sujet clos Haut  

Réponse n° 1
--------
le 09/11/2020 @ 06:40
par JeanDenis

JeanDenis

Administrateur
226 messages

Bonjour Norbert,

Merci pour cette question et pour l'utilisation d'une de mes propositions.

Il n'est pas compliqué de créer des fichiers de style (et de script... pour Camera...)

Tu copies-colles la partie incluse entre les balises (sans ces balises)

<style type="text/css">
...
</style>

dans un fichier texte avec notepad++ par exemple que tu enregistres au format .css (Attention, vérifie que l'encodage soit bien en UTF-8). Donne-lui un nom comme par exemple editocamera.css cela peut avoir de l'importance qu'alphabétiquement il soit situé après camera.css suivant la déclaration : en effet, il doit être interprété après.

Même chose pour la partie incluse entre les balises (sans ces balises)

<script>
...
</script>

dans un fichier texte toujours avec notepad++ que tu enregistres au format .js (même encodage). Un nom comme editocamera.js conviendra pour les mêmes raisons.

Tu as ensuite deux solutions pour déclarer des fichiers de style ou de script dédiés :

Soit les déclarer pour tout le site (ils seront déclarés à chaque affichage que l'édito soit affiché ou non et l'affichage dans l'éditeur de texte est lisible et modifiable plus facilement : c'est donc le plus simple...)

dans ce cas, place le fichier editocamera.css dans le dossier inc/csshead de guppy et le fichier editocamera.js dans le dossier inc/jshead de guppy. C'est tout

Soit de les appeler au début du code source de ta boîte édito, en ce cas, tu peux les placer dans le dossier skins (par exemple) et placer ces deux lignes au début du code source :

<link charset="utf-8" href="skins/editocamera.css" rel="stylesheet" />
<script src="skins/editocamera.js" type="text/javascript" charset="utf-8"></script>

L'ordre alphabétique a dans ce cas moins d'importance. Une astuce : lors des modifications dans l'éditeur pour rendre lisible plus facilement le contenu de la boite faire un simple copier-couper ... coller dans le bloc-note et à la fin les recopier au début du code.

J'espère avoir été à peu près clair...

N'hésite pas à revenir au besoin...

Cordialement,

Site web JeanDenis
clos par  le // Haut  
Réponse n° 2
--------
le 09/11/2020 @ 09:19
par Norbert

Norbert

2 messages

Bonjour,

Merci pour ta réponse rapide et claire.

J'utilise aussi le Bandeau avec des cellules -variantes-. (ici)

Je teste le menu escamotable spécial mobile, je n'hésiterai pas à te questionner en cas de besoin.

Cordialement.

Norbert

Site web Norbert
clos par  le // Haut  
Réponse n° 3
--------
le 09/11/2020 @ 11:12
par JeanDenis

JeanDenis

Administrateur
227 messages

Bonjour Norbert,

Tiens ! un site d'école... wink

Je suis un enseignant, directeur d'école à la retraite maintenant... pas très éloignée de la tienne (près de Reims)...

Merci encore pour cette utilisation...

En ce qui concerne le menu escamotable mobile, il est présent sur ce site mais non fixé... (je n'ai pas vraiment trouvé pourquoi cela ne fonctionnait pas correctement sinon...)

...mais sur ces sites (sous le CMS adHoc, dont j'ai rejoint l'équipe pour participer aux tests et à la documentation et que j'utilise désormais)...

https://adhoc.71site.fr/

https://cuirs.71site.fr/

...il est fixé et fonctionne tout à fait correctement. biggrin

Bon courage,

Cordialement,

Site web JeanDenis
clos par  le // Haut  
Réponse n° 4
--------
le 05/12/2020 @ 23:53
par Norbert

Norbert

3 messages

Bonsoir,

Petite question :

"place le fichier editocamera.css dans le dossier inc/csshead de guppy et le fichier editocamera.js dans le dossier inc/jshead de guppy. C'est tout"

Comment appeler ces fichiers dans la boite ?

J'ai regardé Adhoc. Je l'essaierai plus tard (je suis à la retraite depuis peu...)

Merci.

Norbert

Site web Norbert
clos par  le // Haut  
Réponse n° 5
--------
le 06/12/2020 @ 06:17
par JeanDenis

JeanDenis

Administrateur
228 messages

Bonjour Norbert,

Si tu places ces fichiers editocamera.css dans le dossier inc/csshead de guppy et le fichier editocamera.js dans le dossier inc/jshead de guppy ...

alors tu n'auras rien à faire de plus : ils seront déclarés pour tous les affichages des pages. C'est un script de guppy qui se charge de déclarer ces fichiers (d'où l'ordre alphabétique dans lequel ils sont lus) et  tu pourras vérifier leur présence dans le code source de la page dans la partie [head]...[/head] et ils seront disponibles pour toutes les boites et les tous les articles ainsi que déjà, par exemple camera.css et camera.js indispensables pour faire fonctionner Camera.

Par contre, si tu ne veux t'en servir que pour la boîte qui te servira d'édito, alors tu places ces fichiers ailleurs, par exemple dans le dossier skins, ainsi que je l'indiquais plus haut et là, tu dois les appeler au début du code source de ta boîte ainsi

<link charset="utf-8" href="skins/editocamera.css" rel="stylesheet" />
<script src="skins/editocamera.js" type="text/javascript" charset="utf-8"></script>

C'est une petite contrainte, évidemment, mais je pense qu'il vaut mieux utiliser cette seconde solution, cela allège le code des pages de guppy et après tout, tu n'as besoin de ce code que pour l'édito...

Ce type de fonctionnement se retrouvera sur adHoc peu ou prou de la même manière... et j'ai adopté cette seconde technique pour tous les tutoriels de mon site dédié à adHoc :

https://adhoc.71site.fr/

N'hésite pas à revenir en cas de besoin...

Cordialement,

Site web JeanDenis
clos par  le // Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum