Dimension automatique des images (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 18)
  • Auteur
    Messages
  • #462514
    minilogue
    Membre
    Initié WordPress
    41 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 2.6
    – Thème utilisé : Monotone
    – Nom de l’hebergeur : Free
    – Adresse du site : http://fatherdaughter.free.fr/

    J’aimerais savoir si il est possible de configurer mon blog pour que les images occupent automatiquement toute la largeur de l’écran?
    D’autre part, sachant que j’utilise le thème Monotone, est-il possible de remplacer les bandes blanches de chaque côté par une autre couleur?

    Merci d’avance!

    #643684
    Rflx
    Membre
    Chevalier WordPress
    208 contributions

    « Les bandes blanches » de part et d’autres, c’est le background. Il suffit de changer dans le CSS la couleur du background 😉 !

    Pour que les images occupent toute la largeur, il suffit de savoir la largeur d’une page type de ton blog, puis tu as qu’à mettre widht= »xxx » comme attribut à l’image !

    #643685
    minilogue
    Membre
    Initié WordPress
    41 contributions

    Merci pour ta réponse! Mais:
    – qu’est-ce donc que le CSS? 😳
    – pour la largeur, si je calcule en fonction d’un écran 19″, est-ce que les dimensions seront respectées sur un 17″ ou un 22″? Et où donc dois-je indiquer widht= »xxx » ?
    Merci pour ta patience!

    #643686
    Rflx
    Membre
    Chevalier WordPress
    208 contributions

    – Tu as un fichier CSS associé à ton thème, ouvre le chercher « background » (souvent au début si c’est bien trié) et remplace le « #FFFFF » (le blanc) par la couleur de ton choix en code hexadecimal

    – Pour la largeur, tu peux prendre par exemple un screenshoot, découpez le contour pour avoir que le « corps central » puis prendre les dimensions dans les propriétés de ton image.

    #643687
    minilogue
    Membre
    Initié WordPress
    41 contributions

    Je suis désolée mais où est ce fichier CSS? J’ai un fichier csscolor dans wp-content/theme/monotone sur mon PC, mais apparemment c’est pas ça (pas de #FFFFF nulle part).

    Et dans WordPress/Apparence/Editeur de thème je n’ai pas de fichier « fond » ou « background », et j’ai beau fouiller dans les autres Fichiers du thème je ne vois rien…

    #643688
    Rflx
    Membre
    Chevalier WordPress
    208 contributions

    Dans wp-content/theme/tonthème tu as un fichier qui se termine par .css

    Poste le ici 😉 !

    #643689
    minilogue
    Membre
    Initié WordPress
    41 contributions

    J’ai effectivement un fichier « rtl.css » et un « style.css ». Dans ce dernier je trouve « color:#fff » dans une section /* Footer */
    Est-ce que c’est cette valeur qu’il faut changer? Que mettre pour avoir du noir? Merci!

    #643690
    Rflx
    Membre
    Chevalier WordPress
    208 contributions

    Footer = Pied du site, ce n’est donc pas ça.

    Tu peux, si tu le souhaites, poster ton fichier style.css ici entre les balises CODE que je regarde 😉 !

    #643691
    minilogue
    Membre
    Initié WordPress
    41 contributions

    Le voilà:

    /*
    Theme Name:Monotone
    Theme URI:http://monotonedemo.wordpress.com/
    Description:A photo blogging theme. Colors change to match the photo.
    Version:1.1
    Author:Noel Jackson / eight6
    Author URI:http://eight6.com
    Tags:photoblogging,one column,fixed width,custom colors
    */
    /* ————————————————————–
    * Resets default browser CSS.
    Based on work by Eric Meyer:* meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
    ————————————————————– */
    html,body,div,span,applet,object,iframe,
    h1,h2,h3,h4,h5,h6,p,blockquote,pre,
    a,abbr,acronym,address,big,cite,code,
    del,dfn,em,font,img,ins,kbd,q,s,samp,
    small,strike,strong,sub,sup,tt,var,
    dl,dt,dd,ol,ul,li,
    fieldset,form,label,legend,
    table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
    /* remember to define focus styles! */
    :focus{outline:0;}
    body{line-height:1;color:black;background:white;}
    ol,ul{list-style:none;}
    /* tables still need ‘cellspacing= »0″‘ in the markup */
    table{border-collapse:separate;border-spacing:0;}
    caption,th,td{text-align:left;font-weight:normal;}
    blockquote:before,blockquote:after,
    q:before,q:after{content: » »;}
    blockquote,q{quotes: » » «  »;}
    /* Tables still need ‘cellspacing= »0″‘ in the markup. */
    table{border-collapse:separate;border-spacing:0;}
    caption,th,td{text-align:left;font-weight:400;}
    /* Remove possible quote marks (« ) from <q>,<blockquote>. */
    blockquote:before,blockquote:after,q:before,q:after{content: » »;}
    blockquote,q{quotes: » » «  »;}
    a img{border:none;}
    /************* END RESET RELOADED *************************/
    body{font:normal 75%/1.6em « Lucida Sans », »Lucida Grande », »Trebuchet MS »,Georgia,Helvetica,sans-serif;color:#444;background-color:white;}
    a,a:link,a:visited,a:active{color:#333;text-decoration:none;}
    a:hover{color:#666;}
    h1,h2,h3,h4,h5,h6{ font-family: »Lucida Fax »,Georgia,Helvetica,sans-serif; }
    h2{ font-size:1.5em;line-height:1;font-weight:bold;margin-bottom:.25em;color #333; }
    h2,h2 a,h2 a:link,h2 a:visited,h2 a:active{ color:#6c6c6c;font-weight:bold;text-decoration:none;letter-spacing:-.02em; }
    h2 a:hover{}
    h3{line-height:1em;padding-bottom:5px;font-size:1.2em;font-weight:bold;color:#6e6e6e;}
    h4{}
    ul, dl, ol { margin-left: 20px; }
    li { list-style: square; }
    strong{font-weight:bold;}
    blockquote,em, cite, q {font-style:italic;}
    /* Structure */
    #page{width:840px;margin:0px auto 35px auto;background-color:white;}
    .archive #page{width:820px;}
    .vertical #page{width:560px;}
    /* Header */
    #header{clear:both;}
    h1{font-size:1.5em;line-height:2.666em;float:left;letter-spacing:-.02em;margin-left:10px;}
    h1 a,h1 a:link,h1 a:visited,h1 a:active{color:#333;text-decoration:none;font-weight:bold;}
    h1 a:hover{}
    .archive h1{margin-left:0;}
    .description{float:left;line-height:4em;margin-left:1em;font-style:italic;padding-left:1em;color:#444;}
    #menu{float:right;margin-right:10px;}
    .archive #menu{margin-right:0;}
    #menu li{display:block;float:left;}
    #menu li a,#menu li a:link,#menu li a:visited,#menu li a:active{height:4em;line-height:4em;display:block;float:left;font-weight:normal;letter-spacing:normal;margin-left:10px;text-transform:uppercase;}
    #menu li.first a{border-left:0;}

    /* Content */
    #content{clear:both;}
    #content .sleeve{margin:0;}
    .vertical #container{clear:both;margin:0 0 0 10px;}
    #content h2{color:#333;margin-left:210px;margin-top:10px;}
    .archive #content h2{margin-left:0;margin-bottom:10px;}
    .image{float:left;text-align:center;position:relative;width:840px;}
    .image img{margin:0;padding:0 0 10px 0;}
    .vertical .image{width:560px;clear:both;float:none;}
    .thumbnails{margin:0 auto;width:860px;margin-left:-5px;clear:both;}
    .thumbnails li{float:left;display:block;width:133px;height:85px;margin-left:5px;margin-bottom:5px;list-style:none;}
    a .thumbnail,a:link .thumbnail,a:visited .thumbnail,a:active .thumbnail{float:left;display:block;width:133px;height:85px;background:#c4c4c4;text-align:left;}
    a:hover .thumbnail{background:#919191;}
    .thumbnail{float:left;display:block;width:133px;height:85px;}
    .thumbnail img{max-width:123px;margin:5px 5px 0 5px;padding:0 0 5px 0;max-height:75px;border:0;}
    #container{clear:both;margin:0 0 0 10px;padding-top:5px;}

    /* Post Layout */
    #post{float:left;margin:0 20px 0 0;width:340px;border-top:1px solid #ccc;font-size:1.1em;}
    .vertical #post{margin:0;}
    #post .sleeve{border-top:2px solid #ccc;padding:10px;display:block;position:none;}
    #postmetadata .sleeve{padding:10px;}
    #postmetadata,.commentlist li .metadata{font-size:.92em;line-height:1.45em;width:200px;float:left;border-top:1px solid #ccc;}
    #postmetadata cite,
    #postmetadata small{clear:both;}
    #post p{margin-bottom:1.5em;}
    .navigation{font-family: »Courier New », »Lucida Grande »,Tahoma, »Trebuchet MS »,sans-serif;width:260px;font-size:100px;line-height:.5em;float:left;}
    .vertical .navigation{margin:0px;width:540px;}
    .navigation div{float:left;display:block;width:50%;}
    .navigation div.prev{text-align:left;}
    .navigation div.next{float:right;text-align:right;}
    .vertical .navigation div.prev{text-align:right;}
    .vertical .navigation div.next{float:right;text-align:left;}

    /* Comments list */
    .commentlist{clear:both;width:540px;}
    .commentlist li{border-bottom:1px solid #ccc;}
    .commentlist li .metadata{border:0;margin:10px 0;width:148px;float:left;}
    .commentlist li .gravatar{float:left;width:32px;margin:10px;}
    .commentlist li cite,
    .commentlist li small{font-weight:bold;clear:both;display:block;}
    .commentlist li .content{padding:10px;float:left;clear:right;width:287px;}
    .commentlist li .clear{clear:both;}
    #content .commentlist .comment p{font-weight:normal ;}

    /* Comment Form */
    h3#respond,h3#comments{width:530px;margin:0;padding:0 0 5px 10px;clear:both;border-bottom:1px solid #afb1b2;padding-top:20px;}
    #comments{border-bottom:2px solid #afb1b2;}
    #commentform{width:540px;margin-bottom:10px;}
    #commentform p{padding:10px;}
    #commentform small{display:inline;}
    #commentform .sleeve{margin:10px;}
    #commentform label{width:200px;display:block;float:left;font-size:.96em;line-height:2em;}
    #commentform label{margin:0px;margin-bottom:10px;}
    #commentform p input{float:left;margin:0;border:none;width:310px;padding:3px;margin-bottom:10px;}
    #commentform input#submit{width:15em;height:2em;margin-left:10px;}
    #commentform textarea,#commentform input{font-family: »Lucida Grande »,Tahoma, »Trebuchet MS »;font-size:1.2em;}
    #commentform p{clear:both;border-top:1px solid #ccc;line-height:1.6em;}
    #commentform textarea{:10px;width:520px;}

    /* Footer */
    #footer{clear:both;height:42px;padding-top:20px;margin:0px 10px 0px 10px;width:820px;}
    .archive #footer{margin:0;}
    .vertical #footer{width:540px;}
    #footer .info{clear:both;float:left;width:50%;height:32px;display:block;line-height:32px;position:relative;padding-left:42px;}
    #footer .info img{position:absolute;margin-left:-42px;}
    #searchform{float:right;}
    #searchform #s{width:150px;}
    .archive{margin:0 auto;}
    #filters{clear:both;height:2em;margin-bottom:1em; margin-left: 0;}
    #filters li{ list-style: none; margin-left: 0; float:left;margin-right:2em;}
    a:hover .nav_over{background-color:#afb1b2;}
    .image .nav{position:absolute;width:50%;height:100%;z-index:1000;}
    .image .nav a,.image .nav a:link,.image .nav a:visited,.image .nav a:active{width:100%;height:100%;display:block;position:absolute;text-indent:-1000em;}
    .prev{left:0;width:50%;}
    .next{top:0;left:50%;width:50%;}
    .nav_over{position:absolute;top:50%;margin-top:-1em;display:block;z-index:1000;color:#fff;width:1em;height:1em;line-height:1em;text-align:center;font-size:2em;}

    #643692
    viwiv
    Membre
    Maître WordPress
    809 contributions

    Bonjour,

    Petite remarque sur la dimension des images… 640 x 480 pixels est une dimension idéale… Ainsi chaque écran sera capable de les afficher… Le temps de téléchargement ainsi que la bande passante du serveur seront préservés. Avec une élégante couleur de fond, ça passe très bien ! 🙂

    Cordialement,

    V.

    #643693
    Maitre Mo
    Participant
    Maître WordPress
    1653 contributions

    Bonjour,
    Viwiv a raison, modifier la largeur, c’est s’exposer à ce que ton blog soit mal vu sur d’autres écrans que le tiens… J’en sais quelque chose !
    Sinon, pour ta couleur de fond, c’est dans ce bout de code :

    #
    body{font:normal 75%/1.6em « Lucida Sans », »Lucida Grande », »Trebuchet MS »,Georgia,Helvetica,sans-serif;color:#444;background-color:white;}
    #
    a,a:link,a:visited,a:active{color:#333;text-decoration:none;}
    #
    a:hover{color:#666;}

    ,
    qui est au début juste sous END RESET RELOADED, il faut que tu modifies « white », qui est une autre façon d’écrire la couleur blanche (#fff).
    Tu peux aller par exemple ici pour choisir la tienne, tu fais glisser les curseurs jusqu’à obtenir celle que tu veux, et le code s’affiche : tu le copies, et tu le colles exactement à la place de « white » derrière « background-color : ».

    #643694
    viwiv
    Membre
    Maître WordPress
    809 contributions

    Maître Mô,

    Salut Camarade !

    Tu es trop généreux dans tes interventions, tu mâches le travail !

    Cordialement,

    V.

    #643695
    Maitre Mo
    Participant
    Maître WordPress
    1653 contributions

    Salut Viwiv,
    C’est parce que je suis un crâneur, et que je sais peu de trucs, donc qu’en j’en sais un..!
    Et puis, j’en ai tellement ch… au départ (et encore maintenant) avec ces trucs…!

    #643696
    minilogue
    Membre
    Initié WordPress
    41 contributions

    Merci c’est parfait!

    Maître Mô wrote:
    Viwiv a raison, modifier la largeur, c’est s’exposer à ce que ton blog soit mal vu sur d’autres écrans que le tiens…

    D’où ma question concernant une possible redimension automatique, en fonction de l’écran… Est-ce possible?

    #643697
    viwiv
    Membre
    Maître WordPress
    809 contributions

    Bonsoir,

    Non, pas de redimensionnement possible à ma connaissance, ou peut-être en utilisant un hack pourri en JavaScript.

    Les spécialistes de ce langage abscons te renseigneront mieux que moi.

    Cordialement,

    V.

15 sujets de 1 à 15 (sur un total de 18)
  • Vous devez être connecté pour répondre à ce sujet.