[QALC] Style d'image en CSS sur Wordpress

Répondre
Avatar du membre
InMedio
Messages : 138
Enregistré le : ven. 5 janv. 2018 12:37
Présentation : Ça se passe par ici :
http://adulte-surdoue.fr/viewtopic.php?f=9&t=9049
Profil : Diagnostic +
Test : WISC
Localisation : Angers
Âge : 25

[QALC] Style d'image en CSS sur Wordpress

Message par InMedio » sam. 4 août 2018 16:20

Bonjour,

En cette chaude fin de journée, j'essaie désespérément de faire quelque chose de mes dix neurones et doigts, à savoir de la mise en forme CSS sur un site Wordpress.

Ma question est : comment est-ce que je peux appliquer la déclaration CSS "border-radius" à mon image telle qu'elle est codée sur Wordpress ?

Voilà le code en question :

Code : Tout sélectionner

<img class="wp-image-197 size-full aligncenter" src="###censuré###" height="auto"; />
Je précise que mes connaissances en code sont à 0 sur une échelle de 1 à 10. Je fais ça pour le fun pour mon asso d'aïkido.
Je suis allé voir un petit peu sur w3school que m'a conseillé une amie qui apprend tout ça en ce moment, mais s'il vous plaît, allez-y doucement pour que je comprenne :wasntme:
Une lueur typique chez les individus qui se sont découverts d'une intelligence supérieure à celle de la majorité de leur entourage mais qui n'ont pas encore compris qu'ils seraient encore plus malins s'ils s'abstenaient de le faire savoir. T.P

Avatar du membre
pixelvois
Papa Ours
Papa Ours
Messages : 5977
Enregistré le : dim. 27 nov. 2011 10:50
Présentation : moi-jeu...
Profil : Diagnostic +
Test : WAIS
Localisation : planète Mars en navet rond
Âge : 46

Re: [QALC] Style d'image en CSS sur Wordpress

Message par pixelvois » mar. 7 août 2018 04:23

Je ne pratique pas WordPress, mais je pratique HTML, CSS et compagnie...
Le code que tu montre c'est du HTML, sans CSS "direct", mais avec CSS "indirect" (la liste des noms de classes).
Pour appliquer la déclaration CSS "border-radius" à ce code HTML directement (sans modifier les fichiers/déclarations CSS "indirectes"), il faut utiliser l'attribut "style"... en admettant que le code CSS "indirect" est suffisament "propre" (mais en principe, y'a de grandes probabilités que ça passe, vu que l'attribut "style" a quasiment -- quasiment n'étant pas exempt d'exceptions -- la plus haute priorité):

Code : Tout sélectionner

<img class="wp-image-197 size-full aligncenter" src="###censuré###" height="auto"; style="border-radius:10px;"/>
Hors-sujet
En passant, ça serait pas plus mal de supprimer l'attribut "height" pour le déclarer dans l'attribut "style":

Code : Tout sélectionner

<img class="wp-image-197 size-full aligncenter" src="###censuré###" style="height:auto; border-radius:10px;"/>
... avec les mêmes réserves (mais dans l'absolu, cet attribut, ainsi que tous les attributs HTML dédiés aux styles sont dépréciés, et susceptible un jour ou l'autre de ne plus être supporté par certains/les navigateurs ;))
A part ça, à toi de voir exactement quelle valeur tu mets pour ton "border-radius", ainsi que quelle unité tu utilises...
En espérant que w3school te soit profitable, perso' je préfère MDN (Mozilla Develloper Network) comme source de référence (un peu peu plus orienté technique que w3school, mais un peu plus "sérieux" aussi, bien que W3S soit une des bonnes références, y'a un peu des manques).

mdn/fr/docs/Web/CSS/border-radius
fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius

Et pour ce qui est des unités:
/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units


Voili-voilou... très succintement.
Le truc, c'est que ça s'improvise pas vraiment, même si c'est comme ça qu'on commence :P
Dans les années 90-2000 encore, les possibilités étaient relativement limitées, mais aujourd'hui les tenants et les aboutissants sont de plus en plus nombreux et complexes, malgré et parce que que on "vend" tout ça comme très simple : ça l'est et ça ne l'est pas. Mais ça reste accessible. Faut juste du temps et de la pratique pour ne pas se faire déborder... et essayer de pas (trop) mettre la charrue avant les boeufs, en voulant le beurre, l'argent du beurre et la crémière (donc essayer de pas vouloir trop d'un coup, être prêt à lâcher des trucs -- mais c'est pas évident de savoir quoi est plus impossible que quoi tant qu'on a pas une bonne vue d'ensemble).

Sinon, j'suis pas trop sur le forum ces temps-ci, donc n'hésite pas à me relancer par mp: en voyant la notif', j'essayerai de pas trop tarder à venir te répondre ;)
"Dans un monde où chacun triche, c'est l'homme vrai qui fait figure de charlatan." ( André Gide - Les faux monnayeurs )

Avatar du membre
InMedio
Messages : 138
Enregistré le : ven. 5 janv. 2018 12:37
Présentation : Ça se passe par ici :
http://adulte-surdoue.fr/viewtopic.php?f=9&t=9049
Profil : Diagnostic +
Test : WISC
Localisation : Angers
Âge : 25

Re: [QALC] Style d'image en CSS sur Wordpress

Message par InMedio » mar. 7 août 2018 12:38

Merci beaucoup pix !
Mon amie m'a passé ses cours, donc j'ai de la lecture, et j'ai trouvé des vidéos tuto sur youtube, donc je vais faire mon petit bonhomme de chemin et reviendrai certainement vers toi pour des questions techniques.
Une lueur typique chez les individus qui se sont découverts d'une intelligence supérieure à celle de la majorité de leur entourage mais qui n'ont pas encore compris qu'ils seraient encore plus malins s'ils s'abstenaient de le faire savoir. T.P

Avatar du membre
Kirigol
Messages : 513
Enregistré le : mer. 24 févr. 2016 18:36
Profil : Diagnostic +
Test : WAIS
Localisation : IN87

Re: [QALC] Style d'image en CSS sur Wordpress

Message par Kirigol » mar. 7 août 2018 20:18

Sous firefox tu peux aussi télécharger un add on, Mozilla inspector ou DOM inspector je ne me souviens plus, et un petit outil genre web-développer.
Lorsque tu cliques droit et inspecte ça te donne la page CSS la ligne et le CSS de la div.

Je ne connais pas WordPress étant plutôt sous joomla, en général tu as une page de surcharge dans les templates où tu rentres ton code customisé.
Ensuite il y a le rendu qui diffère suivant les navigateurs et peut tout décaler... Grrr
Moz-border-radius, webkit-border-radius...

Juste en conseil d'amateur bien suivre les standards bootstrap et responsive (Div et flex) sinon c'est pleins de refontes du site qui t'attendent au gré des mises à jour du cms. Donc un truc simple qui passe sur ordi et mobile en même temps. Mais ça devrait être le cas si tu utilises un template déjà prêt.
Toutefois dans ce cas c'est parfois difficile de s'y retrouver dans le code et ce peut être intéressant de trouver un tuto pour faire le tien ( de template), même tout simple et comprendre les imbrications.
Ne pas chercher à tout caler au pixel ( pas trop de Padding Margin) mais penser une interface redimmensionnable suivant la résolution de l'utilisateur (genre moins de @media750px c'est un mobile épicétou et les div flex se positionnent 'automatiquement' suivant l'espace dispo).
Enfin bon en gros pèle mêle...

Chouette projet
Signé : un adorateur des gif animés vintage lol

PS: sur le site du Zéro ( openclassroom) tu dois pouvoir trouver les bases de bases sur les balises classiques usuelles.

Mais WordPress ils font en sortent que tu mettes pas les mains dans la cambouis non ?
Quand on est mort, c'est pour la vie.
Avant c'était pire mais c'était mieux.
La sensation est proportionnelle au logarithme de la grandeur excitatrice (Fechner)

Avatar du membre
InMedio
Messages : 138
Enregistré le : ven. 5 janv. 2018 12:37
Présentation : Ça se passe par ici :
http://adulte-surdoue.fr/viewtopic.php?f=9&t=9049
Profil : Diagnostic +
Test : WISC
Localisation : Angers
Âge : 25

Re: [QALC] Style d'image en CSS sur Wordpress

Message par InMedio » mar. 7 août 2018 21:04

Merci à toi Kirigol,

Je crois que je ne sais pas encore dans quoi j'ai mis le doigt...

Contenu caché
Vous devez être inscrit et connecté sur ce forum pour voir le contenu caché.


Mais je sens que je progresse plutôt bien depuis... ce week end. :blond:

À suivre...
Une lueur typique chez les individus qui se sont découverts d'une intelligence supérieure à celle de la majorité de leur entourage mais qui n'ont pas encore compris qu'ils seraient encore plus malins s'ils s'abstenaient de le faire savoir. T.P

Avatar du membre
Kirigol
Messages : 513
Enregistré le : mer. 24 févr. 2016 18:36
Profil : Diagnostic +
Test : WAIS
Localisation : IN87

Re: [QALC] Style d'image en CSS sur Wordpress

Message par Kirigol » mar. 7 août 2018 23:44

Le lien dans le post ça marche pas lol
Sinon je suis sur téléphone donc je ne peux pas creuser plus que ça...
Mais c'est quand même correct pour un début non ?

J'ai bien le menu 'hamburger' en mobile.
En tête avec logo
Attention Gros espace avant la bannière.
La bannière
4 articles en 2 lignes 2 colonnes mais le texte chasse vers la droite en dehors de la main div background white
Je dirais que tu as intérêt à mettre tes div articles les unes en dessous des autres à 100% avec un Padding pour aérer le texte et enlever les listes à puces.

Tu as ensuite dû faire un copié-collé et ça reprends le logo avec un texte japonais et les horaires , la police est très différente et sors de la charte graphique, ça jure.
Si ça se trouve tu pourrait ajouter cette partie avec un item menu.

La carte Google impec.

Par contre ensuite ça chasse carrément à droite avec le texte d'affiliation à la fédé.
Probablement résolu en utilisant une div à 100% en max-size.

Le footer sur fond noir- anthracite, pas sur qu'il faille mettre propulsé par wp le nom du template... Et la flèche remonter en haut est sous ce texte.
Quand je dis cacher WordPress je pense aussi au côté sécurité, il y a un nombre de script de piratage wp impressionnant, il va falloir te rencarder là dessus pour bloquer des fichiers et dossiers avec des chmod spécifiques, le robot.txt et aussi avec un fichier .htaccess à la racine.

C'est pas la partie la plus rigolote à faire.

Sinon c'est plutôt prometteur, ne pas hésiter à bosser en local avant de mettre en production et faire plein de sauvegardes. Un sitemap aussi pour le référencement et une hiérarchie de titre (h1h2h3 en CSS) pour le référencement naturel. Mais bon je suis pas au fait des techniques non plus je suis avec plus ou moins de réussite.

Courage ! ;)
Quand on est mort, c'est pour la vie.
Avant c'était pire mais c'était mieux.
La sensation est proportionnelle au logarithme de la grandeur excitatrice (Fechner)

Avatar du membre
pixelvois
Papa Ours
Papa Ours
Messages : 5977
Enregistré le : dim. 27 nov. 2011 10:50
Présentation : moi-jeu...
Profil : Diagnostic +
Test : WAIS
Localisation : planète Mars en navet rond
Âge : 46

Re: [QALC] Style d'image en CSS sur Wordpress

Message par pixelvois » jeu. 9 août 2018 01:16

Kirigol a écrit :
mar. 7 août 2018 20:18
Sous firefox tu peux aussi télécharger un add on, Mozilla inspector ou DOM inspector je ne me souviens plus, et un petit outil genre web-développer.
Lorsque tu cliques droit et inspecte ça te donne la page CSS la ligne et le CSS de la div.
Ca fait déjà un bail que c'est plus la peine d'installer un add-on pour ça : c'est inclu dans tous les navigateurs majeurs (Firefox, Chrome, et même IE/Edge... sûrement aussi Safari et probablement Opéra^^).

Kirigol a écrit :
mar. 7 août 2018 20:18
Ensuite il y a le rendu qui diffère suivant les navigateurs et peut tout décaler... Grrr
Moz-border-radius, webkit-border-radius...

Juste en conseil d'amateur bien suivre les standards bootstrap et responsive (Div et flex) sinon c'est pleins de refontes du site qui t'attendent au gré des mises à jour du cms. Donc un truc simple qui passe sur ordi et mobile en même temps. Mais ça devrait être le cas si tu utilises un template déjà prêt.
Toutefois dans ce cas c'est parfois difficile de s'y retrouver dans le code et ce peut être intéressant de trouver un tuto pour faire le tien ( de template), même tout simple et comprendre les imbrications.
Ne pas chercher à tout caler au pixel ( pas trop de Padding Margin) mais penser une interface redimmensionnable suivant la résolution de l'utilisateur (genre moins de @media750px c'est un mobile épicétou et les div flex se positionnent 'automatiquement' suivant l'espace dispo).
Enfin bon en gros pèle mêle...
Pêle-mêle... oui :lol:
InMedio a écrit :
mar. 7 août 2018 21:04
Je crois que je ne sais pas encore dans quoi j'ai mis le doigt...
Fatalement :P
InMedio a écrit :
mar. 7 août 2018 12:38
Merci beaucoup pix !
Mon amie m'a passé ses cours, donc j'ai de la lecture, et j'ai trouvé des vidéos tuto sur youtube, donc je vais faire mon petit bonhomme de chemin et reviendrai certainement vers toi pour des questions techniques.
De fait, il y aurait des tas de conseils à donner, mais inévitablement ce serait pêle mêle, en vrac... et je doute que ça aide vraiment, mais que ça risque d'affoler et d'ajouter à la confusion, plus qu'autre chose : c'est pour ça que je préfère te laisser te dépatouiller avec tes premières sources dans un premier temps, puis voir au cas par cas si je peux t'aider/aiguiller par la suite sur des points spécifiques ;)

Hors-sujet
InMedio a écrit :
mar. 7 août 2018 21:04
Contenu caché
Vous devez être inscrit et connecté sur ce forum pour voir le contenu caché.
Le lien marche pas si on clique dessus (ça cherche une adresse sur le forum)...
Celui-là devrait mieux fonctionner :
Contenu caché
Vous devez être inscrit et connecté sur ce forum pour voir le contenu caché.

... le "http://" étant nécessaire pour que phpBB (le moteur du forum) comprenne qu'il faut aller chercher l'adresse à l'extérieur et l'ouvrir dans un nouvel onglet du coup (la barre d'adresse des navigateurs ajoute prioritairement ce préfixe quand ils repèrent un format qui peut être une adresse internet, et seulement sinon, aiguille vers un moteur de recherche -- à la base c'est pour aider/simplifier la vie de l'utilisateur lambda, mais au final, ça maintient ces derniers dans une profonde méconnaissance qui les fait par exemple allègrement mélanger et ne plus savoir la différence entre google et internet :1cache: )
InMedio a écrit :
mar. 7 août 2018 21:04
Que personne n'hésite à y aller franchement pour me dire ce qui ne va pas sur la page. Il y a une partie du code qui est le template de WP, et une partie écrite par moi qui contient un script c/c depuis W3School pour afficher l'image en grand.

Mais je sens que je progresse plutôt bien depuis... ce week end. :blond:
Sur ma tablette (et en orientation paysage) la page d'accueil passe bien... et je vois qu'apparament tu t'en es sorti pour ajouter des coins arrondis :)
Tant que tu ne fais que des petites modifications avec des fonctionnalités aujourd'hui largement supportées, tu ne devrais pas avoir (trop) de mauvaises surprises (c'est le cas du "border-radius", à moins de se retrouver avec un vieux IE, et comme de plus comme ce n'est qu'une amélioration "cosmétique", ce ne serait pas bien grave si tel vieux navigateur ne savait pas l'interpréter ^^

Cela-dit, j'appuie un des conseils de Kirigol : "ne pas chercher à tout caler au pixel"... voire ne pas trop utiliser le pixel comme unité, et rester "flou" pour les tailles, en laissant les navigateurs faire leur job pour adapter les dimensions au maximum (ça a toujours été le cas et le principe, mais c'est d'autant plus d'actualité de nos jours avec le nombre de tailles différentes des dispositifs d'affichage disponibles aujourd'hui (des plus ou moins tout petits smartphones aux plus ou moins très très grands écrans ultra haute définition). C'est pourquoi aussi les mises en page/écran les plus basiques restent les plus simples à gérer (de ce point de vue, celle de ton site paraît proposer un bon compromis).


Voilà, voilà : comme je disais plus haut, je vais éviter de trop prodiguer d'informations/conseils d'un seul coup :wasntme:
"Dans un monde où chacun triche, c'est l'homme vrai qui fait figure de charlatan." ( André Gide - Les faux monnayeurs )

Avatar du membre
InMedio
Messages : 138
Enregistré le : ven. 5 janv. 2018 12:37
Présentation : Ça se passe par ici :
http://adulte-surdoue.fr/viewtopic.php?f=9&t=9049
Profil : Diagnostic +
Test : WISC
Localisation : Angers
Âge : 25

Re: [QALC] Style d'image en CSS sur Wordpress

Message par InMedio » jeu. 9 août 2018 13:51

@Kirigol : merci pour ton retour !
Point par point :
- le blanc avant la bannière je ne sais pas d'où il vient.
- les listes à puce j'aimais bien (bon je fera une mise en forme plus tard pour que ça soit un poil joli, mais voilà), et je vais suivre ton conseil de remettre les div à 100% rangées en row avec le petit padding pour aérer bien entendu.
- la <table> avec le logo de la fédé et le texte à côté ne sont pas de moi, mais du remplaçant du précédent WebMaster. Je l'ai laissée, mais elle est destinée à être supprimée sous peu, car nous changeons de fédé cette année.
- le footer de WP n'est pas le mien. C'est le CSS additionnel pour chaque page, qui est propre au template. Cette feuille de style est accessible, mais je ne m'y suis pas encore penché. Cela dit c'est au programme car je n'aime pas ce footer.
- pour les notions de sécurité, merci, je ne savais pas du tout. Ce sera à creuser à l'avenir c'est sûr.
C'est pas la partie la plus rigolote à faire.
J'imagine, mais entre nous c'est pas moi... qui rigole :blond: 8) :rock:

@pixelvois : Oups, effectivement, je ne pensais pas qu'il eût fallu ajouter http:// (j'étais tellement confiant que je n'ai pas testé mon lien :huhu: )
En tout cas merci encore pour ces retours et ces conseils !
Une lueur typique chez les individus qui se sont découverts d'une intelligence supérieure à celle de la majorité de leur entourage mais qui n'ont pas encore compris qu'ils seraient encore plus malins s'ils s'abstenaient de le faire savoir. T.P

Avatar du membre
Osia
Messages : 252
Enregistré le : lun. 16 janv. 2017 12:02
Profil : En questionnement
Test : NON
Âge : 40

Re: [QALC] Style d'image en CSS sur Wordpress

Message par Osia » dim. 28 oct. 2018 13:37

Hello IM !
J'ai été voir http://aubance-aikido.fr, est-ce que tu continues de t'en occuper ?
Et où en es-tu aujourd'hui de l'apprentissage des langages html et css ?
J'ai utilisé openclassrooms pour débuter, et le forum d'alsacreations pour trouver des réponses plus complètes. Je suis curieuse de connaitre les tutos que tu as utilisé et d'avoir ton retour d'expérience :)
«Les grandes personnes sont décidément très très bizarres».
Le Petit Prince

Répondre