Modifications Twenty-twelve (Créer un compte)

  • Statut : non résolu
7 sujets de 1 à 7 (sur un total de 7)
  • Auteur
    Messages
  • #557935
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 4.4
    – Version de PHP/MySQL : v5.5
    – Thème utilisé : Thème enfant de Twenty Twelve
    – Extensions en place :
    AntiVirus
    Foo Gallery
    Jetpack by WordPress.com
    MailPoet Newsletters
    Master Slider
    Media Library Assistant
    Meta Slider
    Page Builder by SiteOrigin
    Responsive Add Ons
    SiteOrigin Widgets Bundle
    WP Lightbox 2

    – Nom de l’hebergeur : OVH
    – Adresse du site : http://www.lgphotography.fr/wordpress

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

    J’aimerais faire 4 modifications sur mon thème Twenty twelve, mais je ne trouve pas comment faire. J’ai déjà réussi en partie, mais je ne suis pas encore 100% satisfait…

    Si quelqu’un a une idée, ne serait-ce que pour 1 des 4 modifs que je voudrais faire, ce serait super !

    1/ Je voudrais réduire l’espace entre mon titre et la barre de liens. J’ai réussi à réduire l’espace au dessus du titre, entre la barre de lien et le contenu de la page, mais je ne trouve pas comment réduire celui entre le titre et la barre de lien…
    Je crois qu’il faut que je réduise l’espace sous le titre dans le bloc titre, et que je réduise la hauteur de la ligne barre de lien, mais je ne trouve pas…

    2/ Lorsque je réduis la taille de l’écran, je voudrais que la taille (largeur/police) de la barre de lien diminue pour éviter qu’elle ne passe sur 2 lignes.

    3/ Je n’aime pas la présentation sur petit écran (ex. smartphone) ou la barre de lien devient un bouton “menu”. Je voudrais maintenir la barre de lien, mais toutes petite, comme sur cet exemple (obtenu avec un autre thème, que j’ai dû changer car il posait pas mal de problèmes) :
    IMG_20151125_183628.jpg
    Alors qu’actuellement, j’ai ça sur smartphone :
    IMG_20151125_183219.jpg

    4/ Toujours sur petit écran, je voudrais aussi réduire la taille du titre, pour qu’il reste sur une seule ligne. (cf. exemple au dessus)

    J’ai un déjà CSS modifié pour augmenter l largeur du thème et quelques autres personnalisations que j’ai faites :

    /*__________ Mint Cream Flavor child twentytwelve __________*/
    .site-header,
    footer[role=”contentinfo”] {
    	background: white;
    }
    
    footer[role=”contentinfo”] {
    	border: 0;
    	padding-top: 48px;
    }
    
    body .site {
    	margin: 0;
    	padding: 0;
    	box-shadow: none;
    }
    
    .site-content article {
    	margin-bottom: 24px;
    }
    
    .wrapper {
    	margin-top: 12px;
    }
    
    .site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    	padding-left: 10px;
    	padding-right: 10px;
    }
    
    @media screen and (min-width: 600px) {
    	.site-header {
    		padding: 4px 0 0;
    	}
    	
    	.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    		border: 0;
    	}
    	
    	.wrapper {
    		margin-top: 2px;
    	}
    	
    	body .site, footer[role=”contentinfo”] {
    		max-width: 100%;
    	}
    	
    	.site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    		margin-left: auto;
    		margin-right: auto;
    		max-width: 920px;
    		padding-left: 20px;
    		padding-right: 20px;
    	}
    }
    
    @media screen and (min-width: 960px) {
    	.site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    		max-width: 940px;
    		padding-left: 0;
    		padding-right: 0;
    	}
    }
    
    @media screen and (min-width: 980px) {
    	.site-header hgroup, .site-header nav, .wrapper, footer[role=”contentinfo”] .site-info {
    		max-width: 960px;
    	}
    }
    
    /*__________ end Mint Cream adjustments __________*/
    /*__________ Couleur du menu deroulant (liens) __________*/
    .main-navigation li ul li a {
    	background: rgba(255,255,255,0.85) none repeat scroll 0 0;
    	border-bottom: 1px solid #B6B6B6;
    	display: block;
    	font-size: .785714rem;
    	line-height: 2.18182;
    	padding: .571429rem .714286rem;
    	width: 12.8571rem;
    	white-space: normal;
    }
    
    /*__________ Fin Couleur du menu deroulant (liens) __________*/
    a {
    	outline: medium none;
    	color: #636363;
    }
    
    /*__________ Taille champs Forulaire de contact Contact Form 7 __________*/
    input[type=”textarea”], textarea {
    	width: 100%;
    }
    
    /*__________ Fin Taille champs Forulaire de contact Contact Form 7 __________*/
    .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    	box-shadow: none;
    }

    Est-ce que quelqu’un peut m’aider ?

    #1035177
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Juste pour compléter, dans mon exemple “ideal”, je préfère que la barre de lien reste sous le titre, comme c’est la cas actuellement sur “écran large”:
    3Dcarousel2.jpg

    #1035178
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Et je me suis trompé dans l’adresse du site, il faut enlever /wordpress : http://www.lgphotography.fr

    #1035179
    luciole135
    Participant
    Maître WordPress
    13743 contributions

    le principe de ce forum (comme de beaucoup d’ailleurs) est le suivant « Un seul problème par fil de discussion », ce qui permet aux moteurs de recherche d’indexer les discussions selon les problématiques et donc aux autres usagers d’utiliser ces fils de discussion pour résoudre leur propre problème.

    ici, en posant 3 problèmes, on a l’impression que vous vous adressez à un SAV (alors que WordPress est gratuit).

    Comme vous ne pouvez pas supprimer ou éditer votre premier message, vous devez choisir dans ce fil de discussion le problème à résoudre et ouvrir d’autres discussions pour les deux autres.

    #1035180
    Flobogo
    Modérateur
    Maître WordPress
    16259 contributions

    Bonjour,

    @ LGPhotography : compte-tenu du fait que sur smartphone, tout est petit mais doit être accessible facilement, il est fortement conseillé de laisser les points 2 – 3 – et 4 en leur état actuel.
    Votre thème est adapté aux smartphone,s ce ne serait pas logique de vous aider à faire l’inverse !

    Pour votre point n°1, ça se fait en CSS –> il faut modifier les lignes 587 et suivantes du fichier style.css
    A copier-modifier dans votre thème-enfant :

    .main-navigation {
    margin-top: 1.71429rem;
    }

    Vous pouvez mettre margin-top: 0.1rem; par exemple

    #1035182
    LGphoto
    Membre
    Padawan WordPress
    78 contributions

    Merci beaucoup pour vos réponses !

    Flobog, merci beaucoup, c’est exactement ce que je voulais.
    J’ai fais la modif dans l’éditeur de CSS.

    J’ai juste un doute, vous parlez des lignes suivantes. La balise suivante est

    .main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
    }

    avec les mêmes valeurs de marge. Savez-vous à quoi ça correspond ?
    Vaut-il mieux que je le modifie aussi ?

    En ce qui concerne les points 2, 3 4, je vais donc ouvrir un autre topic comme le suggère luciole135.
    Je pourrais éventuellement laisser le menu sous la forme d’un bouton pour la navigation mobile (point 3), mais je voudrais quand même que tant qu’il est sous la forme d’une barre de menu, il ne passe pas sur 2 lignes.

    Et pour le titre, ce qui me gêne, c’est que sur téléphone mobile, il prend quasiment tout l’écran, alors que l’important ce sont les photos qui viennent en dessous. Le titre n’est pas vraiment important, c’est pour ça que je voudrais vraiment qu’il soit plus petit…

    #1035181
    LGphoto
    Membre
    Padawan WordPress
    78 contributions
7 sujets de 1 à 7 (sur un total de 7)
  • Vous devez être connecté pour répondre à ce sujet.