Forum d'entraide TOWeb - Le logiciel de création de site web responsive
Retour au site lauyan.com

Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.
Avez-vous perdu votre courriel d'activation?
Identifiez-vous Inscrivez-vous Accueil du forum Aide sur le forum

Lancement de pagexl.com pour la création gratuite et facile de sites "one page" (page unique)

IMPORTANT: Avant de poster un message sur le forum n'oubliez pas :
1. d'effectuer une recherche sur le forum ainsi que dans l'aide en ligne TOWeb
2. de consulter les tutoriels vidéo sur YouTube et les dernières informations du blog de TOWeb
3. de consulter les tutoriels de Frangin62
+  Forum TOWeb
|-+  TOWeb
| |-+  Discussions générales sur TOWeb
| | |-+  [RESOLU] TW 7 Album changer la couleur des flèches
« sujet précédent | | sujet suivant »
Pages: [1] 2 3 Bas de page Imprimer
Auteur Fil de discussion: [RESOLU] TW 7 Album changer la couleur des flèches  (Lu 595 fois)
J64P
Jr. Member
**

Nombre de "j'aime" : 0
Messages: 72



WWW
« le: 20 Avril 2019 à 18h02 »

Bonjour à tous,

  Dans une page  d’album, photo agrandie, je souhaiterais changer la couleur des flèches (en bleu d'origine) "Précédent, Index, suivant"  ?
Existe t'il une solution ?

Merci
Journalisée
frangin62
Hero Member
*****

Nombre de "j'aime" : 98
Messages: 2081



WWW
« Répondre #1 le: 20 Avril 2019 à 20h24 »

Bonsoir,
La couleur des commandes de l'album est la même que les liens dans un paragraphe standard.
Quand tu es dans le thème, fais CTRL + clic gauche sur une imagette pour ouvrir l'image. Clique ensuite sur une flèche et dans le CSS, clique sur l'onglet Police et modifie la couleur du Lien de Style des paragraphes Par défaut. Seulement, tous tes liens vont avoir cette couleur également.
Par contre, tu peux utiliser le mode "PhotoSwipe" en cochant la case " Ouvrir les grandes images depuis l'index " de l'album. Les images sont mieux présentées aux visiteurs.

Cdlt
frangin62

Edit : le lien de ton site sous l'avatar nous amène sur la page de Félicitations de OVH, est-ce normal !!!! ?
« Dernière édition: 20 Avril 2019 à 20h29 par frangin62 » Journalisée

frangin62
Hero Member
*****

Nombre de "j'aime" : 98
Messages: 2081



WWW
« Répondre #2 le: 20 Avril 2019 à 21h09 »

Une solution pour ne changer que ces commandes.
Dans le " head " de l'album, il faut entrer ces lignes, les couleurs sont données en exemple et doivent être en anglais

<style>
.fa-chevron-up { color: red !important;}
.album_nav_btn { color: red !important;}
</style>

illustration, les liens en bas de page sont bleus, les flèches sont rouges
http://testtoweb.free.fr/testvierge/portfolio.html
Les modifications ne sont visibles qu'en aperçu ou publiées, dans TW on garde les couleurs d'origine
« Dernière édition: 20 Avril 2019 à 21h17 par frangin62 » Journalisée

J64P
Jr. Member
**

Nombre de "j'aime" : 0
Messages: 72



WWW
« Répondre #3 le: 21 Avril 2019 à 12h54 »

Bonjour et merci Frangin 62 pour ta rapide réponse ! Sourire

Je ne suis pas encore familiarisé avec TW 7, j'ai suivi tes directives cela fonctionne  !

J'ai appris au passage le coup du Ctrl clic ,en "Théme", pour ouvrir une image, je ne pouvais le faire qu'en "Rubrique" auparavant  !
Effectivement la présentation est plus sympa en cochant "Ouvrir les grandes images depuis l'index"
J'ai également essayé le script dans"head" cela fonctionne aussi, mais je vais en rester à la proposition précédente , mais je garde sous le coude ! Clin d'oeil

Par contre effectivement, je suis étonné du lien de félicitation d'OVH ,d'une part je n'ai jamais été hébergé chez eux , et d'autre part l'URL est erroné !   Huh

Merci encore et bonnes pâques !

Journalisée
J64P
Jr. Member
**

Nombre de "j'aime" : 0
Messages: 72



WWW
« Répondre #4 le: 21 Avril 2019 à 16h26 »

Bonjour ,
Je reviens vers vous car j'ai encore un p'tit problème  Huh

J'ai choisi suite à la réponse de Frangin62 l'option:
 " Par contre, tu peux utiliser le mode "PhotoSwipe" en cochant la case " Ouvrir les grandes images depuis l'index " de l'album.
Les images sont mieux présentées aux visiteurs."

Effectivement la présentation me convient mieux, MAIS dans cette option les titres s/l'image apparaissent en blanc, de plus mal centrés !
En résumé:
- "Ouvrir les grandes images depuis l'index" Déoché,  la couleur choisie et le centrage du titre son bon, mais  "Précédent, Index, suivant" apparaissent sur l'image agrandie.
- "Ouvrir les grandes images depuis l'index" Coché,   Couleur de la police perdu (blanc)  et décentré

Y a t'il moyen de remédier à ce problème ?
Journalisée
frangin62
Hero Member
*****

Nombre de "j'aime" : 98
Messages: 2081



WWW
« Répondre #5 le: 21 Avril 2019 à 20h04 »

Bonsoir,
…….
- "Ouvrir les grandes images depuis l'index" Coché,   Couleur de la police perdu (blanc)  et décentré

Y a t'il moyen de remédier à ce problème ?

Oui, il y a un moyen, encore un recours au code html. Cette fois directement sur les images agrandies.
Je prends l'exemple du Lac dans l'album standard de TW.
Pour le titre, il faut écrire,
<h2 style="text-align:center; color:red;">Le lac</h2>
comme toujours la couleur est en anglais, tu peux remplacer les " h2 "  par " h3 ", c'est la taille du titre.

Pour le texte
<p style="text-align:center;text-size:20px;color:green;"> ici tu mets ton texte.</p>
pour modifier la taille du texte, tu remplaces le  " 20 " .

résultat de l'exemple
http://testtoweb.free.fr/toweb2/portfolio.html#&gid=1&pid=1

Si tu as quelques images, ça va, si tu en quelques centaines……...  pfiouou !! Malheureusement on ne peut pas utiliser les champs html, PhotoSwipe ne les reconnait pas.

Cdlt
frangin62

Edit : pour l'url de ton site, tu peux la mettre à jour dans ton profil
« Dernière édition: 21 Avril 2019 à 20h27 par frangin62 » Journalisée

J64P
Jr. Member
**

Nombre de "j'aime" : 0
Messages: 72



WWW
« Répondre #6 le: 22 Avril 2019 à 13h20 »

Bonjour et  merci Frangin !  Clin d'oeil

Super cela fonctionne parfaitement !

Pour de ce qui est de "coder" chaque image, de toute façon on doit les annoter une par une, (elles peuvent déjà l’être)
on peut le faire en copier/coller du code en ne changeant que le titre , cela n'est pas trop contraignant ?

Bien que la police de caractère me conviennent, est il possible, et sans abuser,  d'inclure dans le code html
une police différente ?
 J'ai mis à jour  l'Url d'un de mes  site , félicitations pour le tien , tuto TW que je garde ^précieusement sous le coude !

Merci encore !
Journalisée
frangin62
Hero Member
*****

Nombre de "j'aime" : 98
Messages: 2081



WWW
« Répondre #7 le: 22 Avril 2019 à 14h24 »

Bonjour, merci pour les encouragements.

Dans le code tu ajoutes  font-family: le nom de la police;  , ça donne un truc du genre
<h2 style="font-family:Comic sans ms;text-align:center; color:red;">Le lac</h2>
résultat sur l'exemple précédent
Cdlt
frangin62
Journalisée

J64P
Jr. Member
**

Nombre de "j'aime" : 0
Messages: 72



WWW
« Répondre #8 le: 22 Avril 2019 à 16h57 »

Merci Frangin !  Sourire

Que du bonheur et pas que dans le prés  !

A bientôt pour de nouvelles aventure avec TW 7 ! Grima&ccedil;ant
Journalisée
frangin62
Hero Member
*****

Nombre de "j'aime" : 98
Messages: 2081



WWW
« Répondre #9 le: 22 Avril 2019 à 20h01 »

 Clin d'oeil  Clin d'oeil   Souriant
Si cela te convient, tu peux mettre résolu dans ton premier message.
Journalisée

J64P
Jr. Member
**

Nombre de "j'aime" : 0
Messages: 72



WWW
« Répondre #10 le: 24 Avril 2019 à 12h18 »

Bonjour Frangin

Ok, j'aurais une autre question, mais je peux aussi récréer un nouveau sujet, tu me dis  ?

"Peu ton changer le couleur du fond du diaporama de PhotoSwipe, et d'une manière générale peut on modifier l'aspect de ce diapo
Si j'ai bien compris PhotoSwipe est un plugin qu s’intègre à TW, est il modifiable dans TW ?

Bonne journée

JP
Journalisée
frangin62
Hero Member
*****

Nombre de "j'aime" : 98
Messages: 2081



WWW
« Répondre #11 le: 24 Avril 2019 à 14h06 »

Bonjour J64P,
Comme on est toujours sur l'album, je pense qu'on peut continuer., à moins que Ghost veuille un sujet sur PhotoSwipe vu qu'il y a déjà d'autres questions sur le sujet.

PhotoSwipe utilise son propre fichier CSS, on va dans ce cas écrire les codes dans le Head général (Options/Sécurité & HTML), ce qui veut dire que si tu as plusieurs albums, ils seront tous concernés.
Tu ajoutes les lignes pour modifier le fond, la couleur est toujours anglaise, si tu ne mets pas la ligne ".pswp__caption….", le bas de page sera plus sombre dans la même teinte.

<style>
.pswp__bg {background: blue !important;}
.pswp__caption {background: blue !important;}
</style>

sans la deuxième ligne
http://testtoweb.free.fr/toweb2/portfolio.html#&gid=1&pid=1

Par contre, pour l'aspect d'une manière générale, il faut voir ce que tu veux faire, il faut à chaque fois retrouver la "class" à modifier.

Cdlt
frangin62
« Dernière édition: 24 Avril 2019 à 20h06 par frangin62 » Journalisée

Ghost
Moderateur
Hero Member
*****

Nombre de "j'aime" : 89
Messages: 4065



« Répondre #12 le: 24 Avril 2019 à 17h10 »

Comme on est toujours sur l'album, je pense qu'on peut continuer.,

Bien entendu  Souriant
Journalisée

v2 à v7.
J64P
Jr. Member
**

Nombre de "j'aime" : 0
Messages: 72



WWW
« Répondre #13 le: 24 Avril 2019 à 18h55 »

Je remonte de la salle des machines de TW, en l’occurrence le "head général," émerveillé de ce que l'on peut faire  ici et ailleurs avec le html dans TW et ton aide ! ! !
Malheureusement  mes connaissances dans ce domaine sont très restreinte , et je ne sais pas trop par  quelque bout les améliorer  Huh

Je suis quand  même arrivé à modifier la couleur de ce fond en couleur RVB ( un gris foncé rvb 63) à partir du code que tu m'as donné et l'aide de
 https://web-color.aliasdmc.fr/convertisseur-couleur-rgb-hsl-hexa-predefini.php#bloc-resultat
<style>
.pswp__bg {background:rgb(63,63,63)!important;}
.pswp__caption {background:rgb(63,63,63)!mportant;}
</style>

Par contre,  le bas de page reste plus sombre avec ou sans la 2éme ligne, contrairement à ton exemple avec le désignation direct de la couleur ? cela n'est pas gênant.
.
  "Par contre, pour l'aspect d'une manière générale, il faut voir ce que tu veux faire, il faut à chaque fois retrouver la "class" à modifier."
   Qu'entends-tu par "à chaque fois fois retrouver la "class" à modifier "
Merci de ton aide!  Sourire

Bonjour et merci Gost de ta permission !

JP
Journalisée
frangin62
Hero Member
*****

Nombre de "j'aime" : 98
Messages: 2081



WWW
« Répondre #14 le: 24 Avril 2019 à 20h32 »

Merci Ghost  Clin d'oeil  Grima&ccedil;ant

J'ai testé tes valeurs avec les deux lignes, et tu peux voir le résultat sur le même site ci-dessus, j'ai bien une couleur unique.
Je viens de voir tes codes, si tu as fait un copier/coller de ce que tu as mis sur TW, il manque un  "  i  " à  " !important ".

Ce que j'entends, c'est que chaque élément de code HTML est regroupé par classe dans le CSS ( "class" en codage html/css).
par exemple   pswp__bg   est la classe qui regroupe la couleur, la position et la taille du fond d'écran et pour le bas de page, la classe   pswp__caption  gère en réalité du noir transparent ( rgba( 0, 0, 0, 0.3) ) (c,est le  0.3  qui fait le taux de transparence).
Donc pour modifier une classe, il faut voir dans le source celle qui correspond à l'élément à modifier.
Journalisée

Pages: [1] 2 3 Haut de page Imprimer 
« sujet précédent | | sujet suivant »
Aller à:  


TOWeb - Le logiciel de création de site Internet responsive Cliquez ici pour vous abonner au flux RSS du forum Règles du Forum  -   © 2005-2013 Lauyan Software
Powered by SMF 1.1.18 | SMF © 2006-2009, Simple Machines