Logo ET titre

  • WordPress :5.2
  • Statut : non résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2284107
    BpSh
    Participant
    Initié WordPress
    19 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7.2
    • Thème utilisé : SimpleShop
    • Extensions en place : Askimet, Flexible Shipping, Google Fonts, Jetpack, Menu Icons, Photo Gallery, WooCommerce/Admin/Paypal/Services, WordPress Importer
    • Nom de l’hébergeur : OVH
    • Adresse du site : http://latelierdescassheures.com/

    Problème(s) rencontré(s) :

    Bonjour à tous
    Voilà j’ai un petit soucis sur le site que je suis en train de finir de construire:
    Je voudrais pouvoir mettre un logo à gauche du titre, cependant dans la personnalisation du thème je peux soit mettre un logo soit un titre. Pas les deux 🙁 . L’un remplace l’autre

    Voilà je voudrais savoir si je peux changer ça en CSS ou tout autre méthode
    J’ai des notions de HTML mais le CSS j’avoue que je suis perdu

    Merci d’avance !

    #2284110
    ferman
    Participant
    Maître WordPress
    1493 contributions

    Bonjour,

    Il est sans doute possible de bricoler quelque chose . Cela vous donnerait à peu près ce qui est en pièce jointe. Les positions exactes de même que la taille de l’image sont modifiables. L’image vient de votre lien instagram pour l’exemple. Il vaudrait mieux une image avec un fond transparent au lieu de noir. Il faudrait d’abord coller une petite fonction (php) soit dans le fichier function.php d’un thème enfant (la meilleure solution), soit en utilisant un plugin tel que “my custom functions”. Ensuite il faudra ajuster avec un peu de css, ce qui ne devrait pas être un problème.

    Si ça vous convient on verra demain.

     

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2284380
    BpSh
    Participant
    Initié WordPress
    19 contributions

    Bonjour !
    Désolé de ma réponse tardive (travail oblige !)
    La solution du CSS me convient très bien 😀

    Du coup j’édite mon function.php ou style.css ?

    #2284384
    ferman
    Participant
    Maître WordPress
    1493 contributions

    Bonjour,

    Du coup j’édite mon function.php ou style.css ?

    Les deux, l’un après l’autre:

    1. Functions.php pour…la fonction en php  (important:vous avezbien un thème enfant? Autrement il faudra procéder de manière légèrement différente),  pour introduire le logo dans le header.
    2. Style.css pour les css, pour mettre en place et régler la taille du logo

    En un premier temps vous pouvez coller ce code dans functions.php (avec la réserve plus haut). L’image est sortie de Instagram. Si vous avez mieux dans vos archives vous pouvez en changer.

    function image_dans_header()
    	{		
    	echo '<img id= "imga" src="https://scontent-cdt1-1.cdninstagram.com/vp/3e52b7063a18571e9150f0cba9a49861/5E49DD48/t51.2885-19/s320x320/23824458_721389124736785_8614094521774374912_n.jpg?_nc_ht=scontent-cdt1-1.cdninstagram.com" width="100px" height="100px"></div>';
    }
    add_action('wp_head', 'image_dans_header');

    Quand ce sera fait, l’image devrait apparaître dans le header; je ne sais pas où exactement. Je regarderai (votre site avec le logo doit être en ligne) pour les réglages css et vous passerai alors les codes.

     

     

    #2284430
    BpSh
    Participant
    Initié WordPress
    19 contributions

    (Re)Bonjour,

    Oui j’ai bien un theme enfant
    Je colle donc ce code dans function.php ?

    ps: merci pour votre aide !

     

    edit: après test de votre code, cela fonctionne. J’upload donc on logo transparent (j’ai enlever le bout de code après test, histoire de ne pas laisser un logo tout moche toute la journée)

    • Cette réponse a été modifiée le il y a 1 mois par BpSh.
    #2284437
    ferman
    Participant
    Maître WordPress
    1493 contributions

    Bonjour,

    Je ne vois aucun logo. Vous n’aurez qu’à le remettre ce soir. Je regarderai.

    #2284966
    BpSh
    Participant
    Initié WordPress
    19 contributions

    Bonjour,
    Voilà j’ai mis le logo ^^
    On le place au bon endroit en CSS ?
    Merci encore

    (ps: veuillez m’excuser pour le temps de réponse aléatoire mais travail oblige)

    #2284977
    ferman
    Participant
    Maître WordPress
    1493 contributions

    Bonjour,

    Essayez ce code  à copier/coller dans style.css de votre thème-enfant. Il y a trois codes: en haut pour les pc, au milieu les tablettes, en bas les smartphones.

    Vous pouvez dans chaque cas régler comme vous voulez la taille et la position du logo en jouant sur les % width, margin-left et margin-top.

    /* PC */
    @media only screen and (min-width: 1000px) {
    #imga{position:absolute;
    margin-top:12%;
    margin-left:8%;
    width:8%;}
    }
    /* Tablette */
    @media only screen and (max-width: 999px) {
    #imga{position:absolute;
    margin-top:28%;
    margin-left:2%;
    width:15%;}
    }
    /* Smart-phone */
    @media only screen and (max-width: 500px) {
    #imga{position:absolute;
    margin-top:32%;
    margin-left:0%;
    width:10%;}
    }

     

    #2284979
    BpSh
    Participant
    Initié WordPress
    19 contributions

    C’est PARFAIT !
    Merci, merci beaucoup pour votre aide !
    Du coup j’ai mis :

    /* PC */
    @media only screen and (min-width: 1000px) {
    #imga{position:absolute;
    margin-top:4%;
    margin-left:5%;
    width:8%;}
    }

    J’avais une question pour le slogan du site (j’aimerai avoir deux lignes l’une en dessous de l’autre), il faut que j’ouvre un nouveau topic ? J’ai fouiné sur google mais apparemment c’est spécifique à chaque thème

    #2284984
    ferman
    Participant
    Maître WordPress
    1493 contributions

    Juste pour vous prévenir: si vous ne mettez qu’un code, l’aspect sur tablette ou smartphone ne sera pas satisfaisant.

    Pour le slogan je vais regarder

    Edit: je ne vais rien regarder! Je voulais tester la solution fournie ci-dessous par @Philyon.

    • Cette réponse a été modifiée le il y a 3 semaines et 4 jours par ferman.
    • Cette réponse a été modifiée le il y a 3 semaines et 4 jours par ferman.
    • Cette réponse a été modifiée le il y a 3 semaines et 4 jours par ferman.
    #2284986
    PhiLyon
    Modérateur
    Maître WordPress
    24116 contributions

    Bonjour.

    Il y a ce code en CSS, il est fait pour rajouter 2 lignes, tu supprimes celle dont tu n’as pas besoin.

    .site-description:before {
    content:    "This is an extra tagline above the existing Tagline";
    display:    block;
    text-align: right;
    }
    .site-description:after {
    content:    "This is an extra tagline below the existing Tagline";
    display:    block;
    text-align: right;
    }

    🙂

    • Cette réponse a été modifiée le il y a 3 semaines et 4 jours par PhiLyon.
    #2285018
    BpSh
    Participant
    Initié WordPress
    19 contributions

    Oui j’ai bien mis les 3 commandes ! Ça fonctionne niquel merci encore !

    #2285019
    BpSh
    Participant
    Initié WordPress
    19 contributions

    J’essaie ça au plus vite merci 🙂

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