Multi-Theme affichage site_infos

Multi-Theme affichage site_infos [Réglé]

olivierb Membre non connecté

Le 13/08/2016 à 18h57

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

Bonjour à tous,

Après l'aide précieuse fournie par @ElenWii pour intégrer le slide de JustPlayForFun dans le thème Multi-Thème adapté v5.0 par @Swan, je me rend compte que ni sur le thème original, ni sur le thème modifié je ne vois apparaître la div id="site-infos" qui inclus le logo et le nom du site :

En affichant la page en 800x600 je vois quelque chose qui y ressemble :

Et pourtant il me semble que le code est placé au bon endroit :

Code TPL :

    <header id="header">
        <div id="header-gsm">
        <a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a>
        </div>
        <div id="top-header">
            <div id="compteur">
                # IF C_COMPTEUR #
                 ::&nbsp;<span>{L_VISIT} : {COMPTEUR_TOTAL}&nbsp;-&nbsp;{L_TODAY} : {COMPTEUR_DAY}</span>&nbsp;:: &nbsp; Bienvenue sur le site de la <a id="wellcome-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a> !
                # ENDIF #
            </div>
            <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="top-header-content">
            # IF C_MENUS_HEADER_CONTENT #
                # START menus_header #
                {menus_header.MENU}
                # END menus_header #
            # ENDIF #
            </div>

Auriez-vous une idée pour résoudre ceci ?

Cordialement,
Olivier.

Olivier

ElenWii Membre non connecté

Equipe Graphique Administrateur

Le 13/08/2016 à 19h34

#153410

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

Bonjour olivierb,

Je ne sais pas si tu connais, mais la version 5.0 utilise le "responsive" pour permettre un afficahge Desktop, tablette, mobile.
Pour ce faire, nous utilisons les media-queries.

Code CSS :

@media (min-width: 800px)
div#site-infos {
    display: none;
}

Dans le cas précis de ce code, le

display:none;

sur le

div#site-infos

ne s'appliquera que si la taille du media dépasse les

800px

(le desktop donc).

C'est donc tout à fait normal que le logo et le nom du site soit masqué en Desktop.

Pour changer cela, il te suffit d'adapter le code dans le fichier design.css. Commence par mettre en forme en mobile, puis tu agrandis la fenêtre pour la tablette et enfin tu finis par le desktop.

Tu peux remplacer le

min-width: 800px

par

max-width

si tu veux en dessous d'une certaine taille.

PS : n'oublie pas la fonction "examiner l'element de tous les navigateurs qui te permet de voir les attributs des classes.
ElenWii

olivierb Membre non connecté

Equipe Assistance Modérateur

Le 13/08/2016 à 21h06

#153411

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

Merci pour ce cours précis @ElenWii

J'utilise la fonction examiner de FF mais je ne comprenais pas pourquoi la div était "grisée" lors de l'examen.

On en apprend tous les jours

Cordialement,
Olivier.

Olivier

olivierb Membre non connecté

Equipe Assistance Modérateur

Le 16/08/2016 à 17h13

#153435

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

Bien la balise display: none pour cacher la date de publication et le nom de l'auteur dans les news, articles et autres...
Encore mieux l'outil d'inspection (F12) des navigateurs pour retrouver ces balises CSS !

J'en apprend tous les jours ! Merci à toute l'équipe !

Cordialement,
Olivier.

Olivier

Créations de Thèmes

Répondre

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