[PBT 4.1.3] Thème Vertigo et Flexbox

[PBT 4.1.3] Thème Vertigo et Flexbox [Réglé]

ou comment élargir le container site-name et site-slogan Créations de Thèmes

olivierb Membre non connecté

Le 18/01/2015 à 18h41

Modérateur
Voir le profil du membre olivierb
Inscrit le : 07/02/2014
Site internet
Groupes :
Equipe Assistance

Bonjour,

Je viens d'intégrer dans le thème Vertigo le SlideShow JS de Around The World mais je rencontre un souci avec la flexbox contenant le Site-name et le site-slogan qui ne s'agrandi plus de façon automatique. Je suppose à cause de la présence du slide à droite de ce conteneur.

Alors, pour élargir manuellement le conteneur, j'ai ajouté une ligne "width" au design.css comme suit :

Code CSS :

div#site-name-container {
margin-top: 10px;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
-ms-flexbox: 1 1 auto; /* IE10 */
width: 240px; /* Largeur du container */
height: 108px;
overflow: hidden;
}
 
a#site-name {
color: #F47321;
font-size: 48px;
font-weight: bold;
line-height: 1em;
text-shadow: 0px 0px 0 rgb(0,0,0), 1px 0px 0 rgb(-255,-255,-255), 2px 0px 1px rgba(0,0,0,0.1), 2px 0px 1px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,.1);
letter-spacing: 1.1pt;
text-decoration: none;
white-space: nowrap;
}
 
span#site-slogan {
display: block;
color: #F47321;
font-size: 12px;
font-weight: bold;
padding: 4px 0px 0px 4px;
letter-spacing: 1.5pt;
}

Mais si je teste sur une résolution plus petite, c'est le slide qui rogne sur le logo et le site-name :

Avez-vous des suggestions ?

Olivier.

Olivier

olivierb Membre non connecté

Equipe Assistance Modérateur

Le 19/01/2015 à 17h51

#142670

Modérateur
Voir le profil du membre olivierb
Inscrit le : 07/02/2014
Site internet
Groupes :
Equipe Assistance

Bonjour,

Je viens de trouver la solution qui fonctionne aussi sur un smartphone.

Dans le body.tpl, j'avais mis le script JS au tout début du header, en déplaçant la div "slide-show" après la div "top-header" comme suit, mon problème n'en est plus un :

Code TPL :

    # INCLUDE  MAINTAIN #
    <header id="header">
        <div id="top-header">
            <div id="site-infos">
                <div id="site-logo" # IF C_HEADER_LOGO #style="background: url('{HEADER_LOGO}') no-repeat;"# ENDIF #></div>
                <div id="site-name-container">
                    <a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a>
                    <span id="site-slogan">{SITE_SLOGAN}</span>
                </div>
            </div>
        <div id="slide-show">
            <ul id="slide-images">
                <li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/fontaine.png" alt="fontaine" title="fontaine" /></li>
                <li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/braslou1.png" alt="entree de Braslou" title="entree de Braslou" /></li>
                <li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/braslou2.png" alt="entree de Braslou" title="entree de Braslou" /></li>
                <li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/braslou3.png" alt="entree de Braslou" title="entree de Braslou" /></li>
            </ul>
        </div>
            # IF C_MENUS_HEADER_CONTENT #
            {MENUS_HEADER_CONTENT}
            # ENDIF #
        </div>
        <div id="sub-header">

Olivier

olivierb Membre non connecté

Equipe Assistance Modérateur

Le 19/01/2015 à 17h55

#142671

Modérateur
Voir le profil du membre olivierb
Inscrit le : 07/02/2014
Site internet
Groupes :
Equipe Assistance

Bonjour,

Maintenant, j'aimerai de l'aide faire en sorte que mes images du slide-show, ou que le container ai une taille variable selon la résolution employée (pc, tablette ou smartphone)

ElenWii ou Babsolune pourraient m'aider SVP ?

Olivier.

Olivier

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 20/01/2015 à 00h02

#142693

Administrateur
Voir le profil du membre ElenWii
Inscrit le : 14/08/2009
Site internet
Groupes :
Equipe Graphique

Bonsoir,

Cela redimensionnera tes images en fonction du conteneur ? Cela peut être bizar.

Je ferait plutôt des tailles précises en fonction du support.

un truc du genre :
1650 en desktop, 800 en tablette, 450 en smartphone

Il te suffit d'utiliser les mediaqueries pour modifier les classes CSS associées

ElenWii

babsolune Membre non connecté

Equipe Développement Administrateur

Le 20/01/2015 à 08h37

#142694

Administrateur
Voir le profil du membre babsolune
Inscrit le : 16/05/2008
Site internet
Groupes :
Equipe Développement

j'allais le dire

Pour un support plus efficace, pensez à déclarer dans votre profil, le lien vers votre site

olivierb Membre non connecté

Equipe Assistance Modérateur

Le 20/01/2015 à 14h13

#142705

Modérateur
Voir le profil du membre olivierb
Inscrit le : 07/02/2014
Site internet
Groupes :
Equipe Assistance

Bonjour ElenWii et Babsolune [plop],

Je suis content que vous preniez en compte ma demande mais votre réponse me semble infaisable

Rappelez-vous, je suis capable de "copier/coller" du code mais de là à entrer dans la création, il y a un pas, que dis-je, une rivière sans pont, un fleuve, une mer, un océan !

Bref, mon ami google me renvoi vers, par exemple, http://www.alsacreations.com/article/lire/930-css3-media-queries.html mais le padawan que je suis n'y comprend absolument rien.

C'est pas que je ne veux pas, je n'y comprend réellement rien.

M'enfin, je suis déjà satisfait du résultat, sachant que le public concerné par le site possède en majorité des pc.

Olivier.

Olivier

Créations de Thèmes

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie