-
Astuces CSS
Yo! Vous trouverez ici des astuces CSS diverses et variées, incluant parfois (souvent?) du HTML.
Avant d'entrer dans le vif du sujet, rappel: un code CSS, c'est quoi?sélecteur {propriété: valeur;}
Sélecteur = partie du blog sur laquelle l'effet s'appliquera (header, titres, liens...)
Propriété = paramètre que vous voulez modifier (arrondi des angles, opacité, couleur...)
Valeur = valeur du paramètre (taille et arrondis en pixels [px]; opacité entre 0 et 1; couleur en hexadécimal ou en RGB -cf. cet article pour savoir ce que c'est, etc.)
Ces caractères sont indispensables, ils séparent les sélecteurs des propriétés des valeurs pour permettre au navigateur de lire le code.
La plupart des erreurs de CSS sont dues à un de ces caractères qui manque, qui est dupliqué ou à des fautes de frappe. -
Par Chiki le kiri le 3 Septembre 2016 à 09:12
Hey! De retour ici également, ceci est un article sur les possibilités infinies qui s'offrent à vous sur... les informations des articles.
Je me dis que ce serait bien de faire un article partie de blog par partie de blog, au niveau sélecteurs, astuces et infos. Donc ici, il y a un peu de tout.Tout d'abord, que sont les informations d'un article?
Bon, je suppose que vous le savez, mais c'est la petite ligne sous le titre d'un article qui indique qui l'a écrit, à quelle date et dans quelle rubrique.
On y accède dans l'interface d'édition Ekla, via Contenu > Infos articles tout simplement.Ce que le commun des mortels ne sait pas
Les informations d'un article, au niveau CSS, sont accessibles en un seul sélecteur ( .article_info )... mais sont également accessibles en quelques sélecteurs, qui sont les suivants:
.article_info_date = date de publication de l'article
a = accessible sur tous les sélecteurs textes contenant potentiellement des liensFranchement, il n'y a pas beaucoup de "catégories", et avant de vérifier pour avoir les sélecteurs exacts, je pensais qu'il y en avait plus.
Cela dit, voici une petite astuce pour avoir les deux liens différents.article_info a:first-of-type {propriété: valeur;} > premier lien de la catégorie "info des articles" info d'article lien: premier {propriété: valeur;} .article_info a:last-of-type {propriété: valeur;} > dernier lien de la catégorie "info des articles" info d'article lien: dernier {propriété: valeur;} Mais cela n'affectera que les liens.
Cela dit, voici comment n'avoir que le lien de la rubrique ou le pseudo (par contre le "par" ne s'affichera pas en cas d'un pseudo, ni le "dans" en cas de rubrique).
Il vous faudra: un fond opaque, des informations d'article.
- Mettez l'ensemble propriété/valeur suivant derrière le sélecteur du lien que vous ne voulez pas voir: {display: none;}
- Mettez le texte de la même couleur que l'arrière-plan, ou sa police à zéro.
- Pour les liens, modifiez simplement la taille de la police, ou simplement sa couleur grâce au CSS (ou dans l'interface d'édition Ekla directement): .info_article a {font-size: XX; color: #XXXXXX;}
Pour une modification plus avancée, il vous faudra faire appel au JavaScript je pense, chose à laquelle je ne connais... rien. Voilà. o/
J'espère tout de même avoir pu vous aider.
votre commentaire -
Par Chiki le kiri le 8 Août 2016 à 23:09
Yo!
Dans cet article, nous allons décomposer et expliquer trois codes CSS simples: fond de page translucide, angles des images du contenu arrondis et modification de la largeur des champs, modification des pseudos dans une shoutbox.
Avant cela, un petit rappel de la structure générale d'un code CSS:
sélecteur {propriété: valeur;}
Sélecteur = partie du blog sur laquelle l'effet s'appliquera (header, titres, liens...)
Propriété = paramètre que vous voulez modifier (arrondi des angles, opacité, couleur...)
Valeur = valeur du paramètre (taille et arrondis en pixels [px]; opacité entre 0 et 1; couleur en hexadécimal ou en RGB -cf. cet article pour savoir ce que c'est, etc.)
Ces caractères sont indispensables, ils séparent les sélecteurs des propriétés des valeurs pour permettre au navigateur de lire le code.
La plupart des erreurs de CSS sont dues à un de ces caractères qui manque, qui est dupliqué ou à des fautes de frappe.(oui j'ai copié-collé mon intro de rubrique)
2 commentaires -
Par Chiki le kiri le 7 Août 2016 à 00:05
Bonjour les enfants! Vous vous rappelez quand j'avais expliqué comment changer son curseur? Non? Ah bon. Clique là alors.
Ici, c'est une espèce de patch pour compléter le précédent article. En effet, j'ai trouvé comment faire pour que le curseur que vous avez choisi pour le survol de vos lien, s'active également au survol du header mais également des boutons, champs et petits ronds des sondages -en fait je crois bien avec tout ce avec quoi il est possible d'interagir sur une page.
Vous vous rappelez la ligne A:hover {cursor: url('BLABLABLA'),auto;} ?
C'est sur celle-là qu'on va modifier un truc.
On va simplement remplacer a:hover par a:hover, input:hover, #header-link:hover.
Maintenant, la petite explication pour ceux et celles qui veulent comprendre:
A est le sélecteur pour les liens, jusque-là tout va bien. #header-link est le sélecteur pour le lien du header (c'est un privilégié il a un sélecteur pour lui tout seul '^').
input est le sélecteur pour les éléments de type input. Bravo vous l'auriez pas deviné tout/e seul/e, et donc un élément de type input c'est quoi?
Si mes connaissances limitées sont correctes, un élément de type input est un élément avec lequel on va pouvoir interagir sur la page, mais qui ne ramène pas forcément à une autre page. Des input couplés permettent par exemple d'entrer un message et de l'envoyer, ou de sélectionner une réponse parmi plusieurs (pour un sondage par exemple).
Par exemple, un champ de texte est un élément de type input. Un bouton aussi. Etc.Je ne prétends pas avoir cerné tous les secrets de l'input, mais c'est ce qu'on a besoin de savoir pour cette petite modification qui évitera qu'une petite main s'invite au survol de votre header, mais aussi de vos boutons et champs de texte.
:hover est la pseudo-classe qui permet de spécifier que l'élément doit être survolé pour que l'effet s'applique.
Voilà o/ espérant que cet article vous aura plus, aura pu vous être utile etc.
4 commentaires -
Par Chiki le kiri le 8 Juillet 2016 à 15:04Yo! Il existe deux moyens.
Avec un curseur déjà fait:
Il existe pas mal de sites vous proposant des curseurs déjà faits, joignant le code qui permet de l'installer. Je vais vous en donner plusieurs et vous donner le mode de fonctionnement.
Sur ce site, on vous donne deux codes pour chaque curseur.
Le premier, à copier-coller dans le CSS du blog ou l'HTML de l'article, est pour le curseur par défaut.Le second est pour le cuseur au survol d'un élément cliquable, comme un lien.
J'avais piqué ce curseur pour essayer de l'intégrer uniquement dans cet article en le mettant dans le code HTML, mais vous voyez que c'est une master sword qui s'affiche, je donne le lien du site où je l'ai trouvée plus bas.Pas trop de choix, mais pour ceux qui m'ont intéressé, ils sont assez chouettes.
Sur ce site, on vous donne un code par curseur, à insérer dans le CSS ou l'HTML également. Il y a beaucoup plus de choix que sur le précédent et ils sont plutôt sympathiques aussi.
C'est celui qui a fourni le curseur Master Sword présent sur cet article. BEAUCOUP de choix, des curseurs de très bonne qualité, et comme sur Totally Free Cursors on vous donne un code par défaut et un code pour le survol.
Autre chose, matez ce curseur, il est plutôt cool :3Avec une image personnalisée:
Celle que vous voulez. Vous aurez besoin de:
- une ou deux image/s de moins de 150x150 pixels
- Cette ligne de code:
HTML,BODY {
cursor: url("URL1"),auto;}
A:hover {
cursor: url("URL2"), auto;
}URL1 est votre curseur par défaut, URL2 est le curseur au survol.
Je pense me remettre à faire dans le curseur, ceux que je proposais jusqu'à présent n'étaient pas de très bonne qualité mais j'essaierai de faire mieux ^^'N'importe quelle image ne fait pas un bon curseur, il vous faudra sûrement la bidouiller.
Voilà! J'espère que cet article vous aura servi :)
2 commentaires -
Par Chiki le kiri le 6 Juillet 2016 à 09:42
Yo! Voici une liste (non complète) des sélecteurs Ekla, triés par partie de la page. N'hésitez pas à me donner ceux qui me manquent.
Ensemble du blog
Ensemble de la fenêtre #body Corps de page #background Elément survolé ajouter :hover derrière le sélecteur Liens a Infobulle #help_bubble Barre de menu/ Menubarre / Infobarre
Ensemble de la menubarre #menubar Ces sélecteurs doivent tous être mis si vous voulez éliminer les séparations entre les éléments de la menubarre Barre entre les éléments .menubar_section Séparation des éléments .menubar_separation Séparation des éléments .menubar_button Logo Ekla de la menubarre #menubar_logo Cœur de favoris #menubar_favorites Ces sélecteurs servent à coder l'apparence des différentes
sections de la menubarre (contenu, apparence, interactions,
aide, configuration...)
account = compte (pseudo)
help = aide
signin = champs de connexion
favorites (au-dessus) = coeur de favoris
notifications = icône de notificationsLe reste est invisible pour l'utilisateur
#menubar_section_content #menubar_section_appearance #menubar_section_interactions #menubar_section_manage #menubar_section_account #menubar_section_help #menubar_notifications #menubar_signin Cœur de favoris si l'utilisateur n'a pas mis votre blog en favori #menubar_nofavorites_btn Cœur de favoris si l'utilisateur a mis votre blog en favori #menubar_favorites_btn Pseudo dans la menubarre #menubar_notifications.menubar_section #menubar_section_account.menubar_section Notifications:
L'ensemble des notifications "lues" #notifications_panel Une seule notification #notifications_panel_li Bouton afficher les nouvelles notifications #notifications_panel_li:lastchild Notifications "non lues" #notifications_panel .new_notification Header
Header #header Titre #titre_header Slogan #slogan_header Menu d'en-tête #menu a Sous-menu d'en-tête #menu ul a Menus de gauche/droite
Menu de gauche #menu1 Menu de droite #menu2 Titres des menus .module_menu_tire Titres du menu de gauche #menu1 .module_menu_tire Titres du menu de droite #menu2 .module_menu_tire Contenu des modules .module_menu_contenu Un seul module .module_menu Haut du menu #menu1_top / #menu2_top Bas du menu #menu1_bottom / #menu2_bottom Boutons #background input[type="submit"] Champs #background input[type="text"] Types de menus:
Statistiques .module_menu_type_stats Derniers visiteurs .module_menu_type_lastvisitors Images des derniers visiteurs img.menu_lastvisitors-avatars Calendrier .menu_calendar Recherche .module_menu_type_search Shoutbox #shoutbox Pseudo de la shoutbox #shoutbox strong Derniers articles .module_menu_type_lastarticles Un module en particulier cliquez droit > inspecter > #module_menuXXXXXXXXX Liens .module_menu_type_links2 Newsletter .module_menu_type_newsletter Sondages .module_menu_type_survey Derniers commentaires .module_menu_type_lastcomments Articles les plus commentés .module_menu_type_mostcommented Tag cloud .module_menu_type_tags Derniers topics sur les forums .module_menu_type_lasttopics Contenu
Ensemble du contenu #content Contenant du titre de l'article .module_titre Titre des articles .module_menu_titre Information des articles .article_info Date dans les infos de l'article .article_info_date Texte des articles .article_text Lien pour ajouter son commentaire au bas d'un article .article_comments_link Pseudo des commentaires .commentpseudo En-tête des commentaires .commentheader Corps des commentaires .commentbody Commentaires de l'auteur de l'article .comment_admin Commentaires des autres .comment_normal Date des commentaires .commentdate Avatar des commentaires .commentavatar Numéro du commentaire .commentnumber Réponse(s) à un commentaire #replies Citations blockquote Fil d'Arianne #breadcrumb Footer
Ensemble #footer 1er lien (nom du blog) #titre_footer
18 commentaires
Suivre le flux RSS des articles de cette rubrique
Suivre le flux RSS des commentaires de cette rubrique