[Résolu] Texte sur vidéo youtube

  • WordPress :5.2
  • Statut : résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2273812
    Livie2
    Participant
    Initié WordPress
    40 contributions

    Bonjour,

    Ma configuration WP actuelle

    Bonjour à tous,

    Je souhaite écrire du texte sur la vidéo yt en page d’accueil de mon site. (url de la vidéo ajoutée via thème > personnalisé > média de l’entête. )

    Donc je me suis dit, “trouve d’abord dans quel fichier s’affiche les codes”, mais je n’arrive même pas à savoir dans quel fichier PHP se met le lien url que j’ai mis dans thème > personnalisé > média de l’entête.

    J’ai déjà fouillé dans header, index,  custom-header, header-media, et tout ce que je trouve ce sont des appels du style:

    $enable = get_theme_mod( 'catch_vogue_header_media_option', 'homepage' );
    
    
    
    if ( ! function_exists( 'catch_vogue_header_style' ) ) :

    Donc voilà quel est ce fichier qui contrôle réellement mon header custom et comment faire pour écrire du texte par dessus cette vidéo (juste une div en plus ?)

    Merci d’avance à tous.

    #2273814
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Bonjour.

    Il faut d’abord que tu crées un thème enfant, ce que tu aurais dû faire depuis le début, utilises cette extension https://fr.wordpress.org/plugins/child-theme-configurator/

    Une fois activé, dans ce thème enfant importes le fichier header.php, dans ce fichier colles le code que j’ai ajouté, là où je l’ai mis

    <div class="site-overlay"><span class="screen-reader-text"><?php esc_html_e( 'Site Overlay', 'catch-vogue' ); ?></span></div>
    						<div class="textevideo"/> <!-- Ajout-->
    					<span>Mon texte perso</span></div> <!-- Ajout-->
    		
    			<?php catch_vogue_sections(); ?>

    Ensuite dans le style.css du thème enfant, colles ce code et modifies les valeurs à ta guise

    .textevideo {
    	color : yellow; 
    	z-index: 9999;
    	margin-top:10%;
    	font-size:24px;
    	font-weight:700;
    	text-align:center;
    	position:absolute;
    	width: 100%;
    }

    Si tu avais déjà ajouté du CSS dans CSS personnalisé, copies-le et colles-le dans le style.css du thème enfant.

    🙂

    #2273820
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Pendant que tu y es, dans le style.css ajoutes ce code, ton titre déborde à droite

    #masthead {
        max-width: 250px;
    }

    🙂

    #2273957
    Livie2
    Participant
    Initié WordPress
    40 contributions

    Hello

    ha un z index et une position absolut ok ! Par contre la place dans le header j’aurai jamais trouvé !

    C’est vrai je m’étais pas rendu compte que le titre débordait sur un écran plus petit. J’ai mis ton code mais du coup la barre de menu se rétrécit sur grand écran (créé donc un espace blanc entre le menu lattéral et le body). Sur un petit écran, le titre se décale (j’ai prit des pj ce sera plus parlant =) ).

    J’ai essayé avec .site identity et .site branding mais ça n’a pas fonctionné.

    Je voulais régler le problème avec un @média screen mais vu que le problème apparaît  au dessus d’une certaine taille +  en dessous d’une certaine taille ça fait trop de rafistolage …

     

    Merci pour cette aide !

     

    • Cette réponse a été modifiée le il y a 1 mois par  Livie2.
    • Cette réponse a été modifiée le il y a 1 mois par  Livie2.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2273999
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Bonjour.

    Essaies-ça

    @media screen and (min-width: 64em){
    #masthead {
        max-width: 250px !important;
    }
    }

    🙂

    #2274027
    Livie2
    Participant
    Initié WordPress
    40 contributions

    Coucou

    Toujours pareil; pas de changements. Avec un padding ou un margin je suppose que ça n’ira pas. Sinon tant pis je réduit la taille de la police.

    #2274029
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Vide ton cache !

    🙂

    #2274030
    Livie2
    Participant
    Initié WordPress
    40 contributions

    Ha oui j’ai pas bien regardé. Alors sur petits écrans c’est nickel effectivement, par contre sur les grands y’a la menu lattéral qui est rétréci et laisse apparaître une barre blanche (pj)

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2274032
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Tout le monde n’a pas tes moyens et un 27 pouces 😆

    🙂

    #2274033
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Autre essai

    .below-site-header {
        left: 250px;
    }

    🙂

    #2274034
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Ça plutôt, sinon ça coince sur les mobiles

    @media screen and (min-width: 64em){
    #masthead {
    	max-width: 250px !important;}
    .below-site-header {
        left: 250px;
    }
    }

    🙂

    #2274054
    Livie2
    Participant
    Initié WordPress
    40 contributions

    xD oui oui c’est parce que je suis riche tu vois (en vrai c’est un Cibox ça vaut pas trop cher et ça tient bien)

    C’est au top merci encore pour tous ces essais 😀

    #2274057
    PhiLyon
    Modérateur
    Maître WordPress
    23528 contributions

    Tu as le “droit” de passer le sujet en “Résolu”.

    🙂

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