Classes liées aux albums

Publié le par Titia

Ci-dessous la liste des principales classes css utilisées pour l'affichage des albums.
N'hésitez pas à cliquer sur les images pour les afficher en plus grand format.
A noter que l'emplacement de la classe décrite est surligné en rouge dans les images correspondantes.

Dans la page principale du blog
#Album {}
Le module Album photos
#Album h2 {}
Le titre du module Album photos

#Album img {}
Chacune des images du module Album photos (ces images correspondent à la couverture des albums)
#Album a {}
Chacun des liens vers les albums photos (les titres des albums)
 
Lors de l'affichage des photos des albums
#bodyAlbum {}
La page entière lorsque l'on visualise un album
#topAlbum {}
L'entête de la page (identique à l'entête du blog sur les autres pages)
Attention : .topAlbum dans le css !

#enteteAlbum {}
L'entête de l'album, avec la liste des différents albums existants
.lienAlbum {}
Les liens vers les différents albums existants, dans l'entête de l'album

.h2Album {}
L'emplacement du titre de l'album (ou celui du titre de l'album et de la photo affichée lorsque l'on affiche une seule photo)
#descrAlbum {}
La description de l'album courant

#centreAccAlbum {} et .AccAlbum {}
La partie où sont affichées les miniatures des photos de l'album
.thumbAccAlbum {}
Chacun des emplacements où sont positionnées les miniatures des photos de l'album

.thumbAccAlbumimg {}
Chacune des miniatures des photos de l'album
#piedAlbum {}
Le pied de page (identique au pied de page du blog sur les autres pages)

.quickNavAlbum {}
Les emplacements de navigation de l'album (photo suivante / photo précédente / retour à l'accueil de l'album)
.precAlbum {}
Les emplacements pour naviguer vers la photo précédente de l'album

.retourAlbum {}
Les emplacements pour retourner à l'accueil de l'album
.suivAlbum {}
Les emplacements pour naviguer vers la photo suivante de l'album

#photo {}
L'emplacement où est affichée la photo courante de l'album
.nomPhotoAlbum {}
L'emplacement du titre de la photo courante, juste au-dessus de la photo affichée

.photoAlbum {}
La photo courante
#centrethumbsAlbum {} et .thumbsAlbum {}
L'emplacement des miniatures des photos de l'album

.thumbAlbum {}
Chacun des emplacements où sont positionnées les miniatures des photos de l'album, sauf la miniature de la photo courante
.thumbCouranteAlbum {}
L'emplacement de la miniature de la photo courante

.decrPhotoAlbum {}
L'emplacement de la description de la photo (si elle existe), positionné sous la photo courante

Autres classes :
#generalAbum {}
.topLienAlbum {}

Publié dans Aides diverses

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article
P
Encore une question !Toutes ces classes que tu définis dans cet article s'appliquent à la V1. Est-ce la même chose en V2 ???Merci à toi !!!!
Répondre
T
Et bien non... Alors déjà, tout ce qui est #Album... n'existe plus. Là, il faut passer par le mode avancé en utilisant un css dédié aux albums... Et en fait, il y a très très peu de classes identiques entre la v1 et la v2... Ca t'intéresse que je fasse un article dessus ?
S
ton blOg est génial !! enfin j'ai trouvé un blOg pour m'aider parce que j'y arrive un peu mais je comprenais pas tout bonne explication merci
Répondre
T
Il faudrait d'ailleurs que je le remplisse un peu, ce blog. Mais il aide déjà donc je suis contente :)Merci !
C
c'est ce que j'ai fait mais le n° des photo s'affiche egalement et en fait je voudrais juste faire apparaitre "photo suivante" et/ou "photo précédente". Actuellement apparait par exemple  "3m12 photo précédente" tu vois ce que je veux dire ?
Répondre
T
Ah ok... Ca n'a malheureusement pas l'air d'être possible...
C
Bonjour titia. J'allais te demander des conseils mais j'ai trouvé une bonne partie de mes reponses dans les comments ci dessus : super !
Il me reste quand même une petite question : je voudrai faire apparaitre les liens "photo suivante" et "photo précédente" (avec la font family moonpie a la monde) mais sans mettre les n° des photos.
Un grand merci.
petite question subsidiaire : peux tu me dire si lorsqu'on va passer en v2 il va falloir remodifier tout le css ? brrrrr.....
Répondre
T
Euh... C'est quoi cette police ? Je ne la connais pas. Méfie toi, hein : si les gens n'ont pas cette police sur leur pc, ils verront une autre policeJe te conseille plutôt : .suivAlbum{ font-family:"moonpie a la monde" Arial;text-align:center; font-size:20px;float:right;  }Donc, c'est entre guillemets... et j'ai mis "Arial" après histoire d'avoir une police de secours si les gens n'ont pas la première... Sinon, pour le passage en V2, non, à priori, tu pourras conserver ton css... C'était pas comme ça au début, mais ils l'ont changé :)
L
une pitite question! ^^je voudrais que dans la liste des photos d'un album, les photos soient plus espacées les unes des autres (surtout dans la hauteur parce que ça fait bizarre de voir les photos verticales et horizontales pèle-mèle, j'aimerai espacer pour rendre ça plus claire...)Je pense qu'il faut modifier le css sur les emplacements des images courantes pour le faire, mais bah, je ne sais pas trop comment! (ouh j'ai honte 8- )T'aurais ma réponse dans une de tes boites à malice, Titia?Et sinon, y a une solution pour que les photos agrandies (quand on a cliqué dessus cela s'entend) ... ne soient pas si grandes?! (je suis chiante je sais, mais mes photos ne sont pas top en si grand! :(  )ah et encore une question! (je suis intarissable lol)mettre une image différente à la place de chaque titre de chaque album, dans .h2Album{}, c'est possible?En tous cas, encore merci pour ce blog d'aide, on y trouve tjs quelque chose d'utile :D (et peu importe tes réponses, je serais toujours baba devant ton savoir.c'est incroyable comme je peux être comme une gamine émerveillée devant ton blog! et je jure que c'est vrai! :)  ) et merci d'avance pour ta réponse :)
Répondre
T
Alors, on va faire dans l'ordre... Pour espace tes photos, tu peux tenter ça : .thumbAccAlbumimg { padding:15px 15px;}(premier nombre : espacement vertical et le second... espacement horizontal... Cela va de soi ^^)Pour tes photos en grand : #photo img {margin: 0px auto; width:450px;}La hauteur reste proportionnelle... A toi d'adapter comme tu veux... Par contre, pour l'image différente pour chaque article... C'est dans l'album même, que tu veux faire ça ? Ca ne va pas être possible, ça, par contre... Ravie que tu sois émerveillée devant ce bête blog d'aide :) ! Ca fait toujours plaisir à entendre :)