It is currently Wed 28 Sep 2016 - 15:38 - créer un forum

Personnaliser l'en-tête du thème mobile

Skip to content

Post new topic Reply to topic Goto page: 1, 2  >

Personnaliser l'en-tête du thème mobile
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Wed 7 Jan 2015 - 21:23    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

PublicitéSupprimer les publicités ?


Personnaliser l'en-tête du thème mobile



L'en-tête par défaut du thème mobile est un logo Xooit.
Dans ce tutoriel, nous allons voir comment modifier cette image et comment réduire/agrandir l'en-tête.
Vous êtes prêts ? On y va !





Modifier l'image de fond de l'en-tête

Rendez-vous sur le panneau d'administration de votre forum Xooit.
Accédez à la section "Thème" puis cliquez sur le lien"Modifier les templates" du thème de test.



Sur cette page, cherchez le template XOOITMOBILE.CSS, puis cliquez sur le bouton "Modifier" situé à gauche de son nom.

Dans le template XOOITMOBILE.CSS, cherchez les lignes suivantes :

Code: Sélectionner - Agrandir
div#app-illustration {
    background: url(http://img.xooimage.com/files110/e/1/f/wall-489609d_e1f0...38c7e0cd-48b3b22.png) no-repeat center;
}


Pour remplacer le logo Xooit par votre image d'en-tête personnalisée, remplacez :

Code: Sélectionner - Agrandir
http://img.xooimage.com/files110/e/1/f/wall-489609d_e1f0...38c7e0cd-48b3b22.png


par l'adresse (URL) de votre image de fond.
Nous vous conseillons d'héberger votre image sur xooImage.com.

Pour finir, sauvegardez le template.

Félicitations, vous venez de changer l'image d'en-tête du thème mobile ! Smile




Agrandir ou réduire l'en-tête du thème mobile

Rendez-vous sur le panneau d'administration de votre forum Xooit.
Accédez à la section "Thème" puis cliquez sur le lien"Modifier les templates" du thème de test.



Sur cette page, cherchez le template XOOITMOBILE.CSS, puis cliquez sur le bouton "Modifier" situé à gauche de son nom.

Dans le template XOOITMOBILE.CSS, cherchez les lignes suivantes :

Code: Sélectionner - Agrandir
div#app-illustration {


Remplacez par :

Code: Sélectionner - Agrandir
div#app-illustration {
    height: 135px;


Modifiez ensuite la valeur 135 par celle de votre choix.

Sachez que plus cette valeur est grande, plus l'en-tête sera grand et au contraire, plus elle sera petite, plus l'en-tête sera petit.

Pour vous faire une idée, sachez aussi que la hauteur par défaut de l'en-tête est de 135px.

Pour finir, sauvegardez le template.

Félicitations, vous venez de changer la hauteur de l'en-tête du thème mobile ! Smile
_______________________
Following members like this message:
kieffer (07/01/15), Gu!gan (08/01/15)


Forum
Author Message
venosc
Membre


Offline
Membre

Joined: 18 Jun 2009
Posts: 23
Niveau:
Point(s): 21
Moyenne: 0.91
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Féminin Capricorne (22déc-19jan)

PostPosted: Thu 22 Jan 2015 - 23:34    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

Tes tutos sont très bien fait, ça m'a permis de garder ma bannière sur la version mobile , encore merci pour ton excellent boulot.
_______________________
tout à apprendre


Forum
Author Message
r4zeN
Membre


Offline
Membre

Joined: 22 Jan 2015
Posts: 3
Niveau:
Point(s): 3
Moyenne: 1.00
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Fri 23 Jan 2015 - 13:02    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

Bonjour merci beaucoup pour le tuto, mais j'aimerai savoir si il est possible de faire en sorte que quand on clique sur la banniere ça nous ramené sur la paeg d'acceuil...


En gros faire un lien sur la bannière...


Forum
Author Message
RotorMan
Contributeurs


Offline
Contributeurs

Joined: 21 Dec 2006
Posts: 376
Niveau:
Point(s): 357
Moyenne: 0.95
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

PostPosted: Fri 23 Jan 2015 - 13:16    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

Bonjour,
r4zeN wrote:

Bonjour merci beaucoup pour le tuto, mais j'aimerai savoir si il est possible de faire en sorte que quand on clique sur la banniere ça nous ramené sur la paeg d'acceuil...


En gros faire un lien sur la bannière...


Tout à fait, Kyosuke, que je salue amicalement, a très bien fait les choses.

Dans le Overall_header du thème du mobile, tout en bas, cherchez ceci :

Code: Sélectionner - Agrandir
<div id="app-illustration">&nbsp;</div>


Remplacez le par ceci :

Code: Sélectionner - Agrandir
<a href="{U_INDEX}"><div id="app-illustration">&nbsp;</div></a>


Rafraichissez votre index ou allez dans une sous rubrique, puis cliquez sur votre bannière. Elle vous ramènera sur votre index.

Cordialement
_______________________
Je ne répond plus aux demandes d'aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.


Forum
Author Message
r4zeN
Membre


Offline
Membre

Joined: 22 Jan 2015
Posts: 3
Niveau:
Point(s): 3
Moyenne: 1.00
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Fri 23 Jan 2015 - 13:42    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

RotorMan wrote:
Bonjour,
r4zeN wrote:
Bonjour merci beaucoup pour le tuto, mais j'aimerai savoir si il est possible de faire en sorte que quand on clique sur la banniere ça nous ramené sur la paeg d'acceuil...


En gros faire un lien sur la bannière...




Tout à fait, Kyosuke, que je salue amicalement, a très bien fait les choses.

Dans le Overall_header du thème du mobile, tout en bas, cherchez ceci :

Code: Sélectionner - Agrandir
<div id="app-illustration">&nbsp;</div>



Remplacez le par ceci :

Code: Sélectionner - Agrandir
<a href="{U_INDEX}"><div id="app-illustration">&nbsp;</div></a>



Rafraichissez votre index ou allez dans une sous rubrique, puis cliquez sur votre bannière. Elle vous ramènera sur votre index.

Cordialement




Merci beaucoup Smile


Forum
Author Message
venosc
Membre


Offline
Membre

Joined: 18 Jun 2009
Posts: 23
Niveau:
Point(s): 21
Moyenne: 0.91
Windows Vista ou 7 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Féminin Capricorne (22déc-19jan)

PostPosted: Fri 23 Jan 2015 - 22:31    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

yes , ça me plait bien ça aussi , merci
_______________________
tout à apprendre


Forum
Author Message
Tiboo
Membre


Offline
Membre

Joined: 26 Jan 2015
Posts: 2
Niveau:
Point(s): 2
Moyenne: 1.00
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin

PostPosted: Tue 27 Jan 2015 - 18:09    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

Ca marche niquel merci Smile

Forum
Author Message
fabfab
Membre


Offline
Membre

Joined: 06 Feb 2013
Posts: 10
Niveau:
Point(s): 10
Moyenne: 1.00
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Féminin Gémeaux (21mai-20juin) 龍 Dragon

PostPosted: Thu 5 Feb 2015 - 16:56    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

C'est top moumoute merci !  Very Happy


Fab
_______________________
Forum totoweb20.xooit.fr
Thème de fond : Subblack
Admin fondateur
Navigateur préféré : Chrome sous Windows 8


Forum
Author Message
Djizzz
Membre


Offline
Membre

Joined: 06 Oct 2012
Posts: 21
Niveau:
Point(s): 21
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Capricorne (22déc-19jan) 馬 Cheval

PostPosted: Thu 5 Feb 2015 - 22:35    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

bonsoir kyosuke.
je viens d'essayer, je n'y arrive pas.
j'ai bien hébergé mon image sur xooit, collé l'url au bon endroit : je n'ai pas d'image qui s'affiche, juste un carré blanc.

voici mon image :
http://img110.xooimage.com/views/e/7/a/logo-forum-png-49cb491.png/

voici a quoi ressemble mon templates modifié :

/**********************************************************************
***
***     XooitMobile theme version production 1
***     Utilisez cette feuille de style pour personnaliser votre theme
***
**********************************************************************/

/* Illustration affichée en haut de page */

div#app-illustration {
    background: url(http://img110.xooimage.com/views/e/7/a/logo-forum-png-49cb491.png/) no-repeat center;
}


j'ai merdé ou ?

merci Very Happy

P.S : pour info, mon image originale est en gif (la fumée bouge). donc je me suis dit que le gif n'était pas accepté.
alors je l'ai transformé en Jpeg, et la, rien pas d'image.
donc je me suis dit, bon : il faut du png !?
je l'ai transformé en png : idem, pas d'image.
_______________________
Djo

La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.

A. Einstein


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Thu 5 Feb 2015 - 23:07    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

Hello,

Djizzz wrote:
j'ai merdé ou ?


Tu as mis l'adresse de la page qui permet de télécharger, de partager ou d'afficher en taille réelle l'image au lieu de mettre l'adresse de l'image. Du coup, vu que ce n'est pas une image, rien ne s'affiche. Smile

Pour avoir l'adresse de l'image, rends-toi à cette adresse :

http://img110.xooimage.com/views/e/7/a/logo-forum-png-49cb491.png/

Clique sur l'image et copie-colle l'adresse qui s'affiche dans la barre d'adresse de ton navigateur, ou bien fait un clic droit sur l'image pour afficher un menu contextuel, puis sélectionne "copier l'adresse de l'image".

Si vraiment tu n'y arrives pas, voici l'URL de l'image :

http://img.xooimage.com/files110/e/7/a/logo-forum-png-49cb491.png
_______________________
Following members like this message:
Djizzz (06/02/15)


Forum
Author Message
Djizzz
Membre


Offline
Membre

Joined: 06 Oct 2012
Posts: 21
Niveau:
Point(s): 21
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Capricorne (22déc-19jan) 馬 Cheval

PostPosted: Fri 6 Feb 2015 - 13:43    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

je suis etourdi .. tout simplement
j'avais copié le premier lien sous l'image.. il fallait le second, bien sur !

merci kyosuke
_______________________
Djo

La théorie, c'est quand on sait tout et que rien ne fonctionne.
La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.

A. Einstein


Forum
Author Message
suly89
Membre


Offline
Membre

Joined: 02 May 2015
Posts: 3
Niveau:
Point(s): 3
Moyenne: 1.00
Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Sat 2 May 2015 - 05:57    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

Merci pour ce tuto,comme tout les autre il est bien fait... Wink
_______________________
˙·•●★*´A vaincre sans péril, on triomphe sans gloire`*★●•·˙˙


Forum
Author Message
Djamel123
Membre


Offline
Membre

Joined: 01 Jan 2015
Posts: 36
Point(s): 36
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Taureau (20avr-20mai)

PostPosted: Thu 7 May 2015 - 16:26    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

Monsieur Kyosuke, pourriez-vous jeter un coup d'oeil sur :
http://mobiletest.me/samsung_galaxy_y_emulator/#u=http://sonatrach1.forum-b…

et sur:

http://sonatrach1.forum-box.com/index.php

Histoire de voir si vous pouvez me conseiller certaines améliorations !!!

Un membre m'a signalé un problème sur sa tablette Galaxy tab3 10.1, model GT- P5200, version Android 4.4.2
mais je ne peux comprendre son problème car je ne peux tester sa tablette.  Merci pour tous vos efforts pour aider les gens.


Forum
Author Message
Kyosuke
Contributeurs


Offline
Contributeurs

Joined: 30 Mar 2009
Posts: 436
Niveau:
Point(s): 532
Moyenne: 1.22
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin

PostPosted: Fri 8 May 2015 - 16:55    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

Salut Djamel,


Djamel123 wrote:
Monsieur Kyosuke, pourriez-vous jeter un coup d'oeil sur :
http://mobiletest.me/samsung_galaxy_y_emulator/#u=http://sonatrach1.forum-b…

et sur:

http://sonatrach1.forum-box.com/index.php

Histoire de voir si vous pouvez me conseiller certaines améliorations !!!

Un membre m'a signalé un problème sur sa tablette Galaxy tab3 10.1, model GT- P5200, version Android 4.4.2
mais je ne peux comprendre son problème car je ne peux tester sa tablette.  Merci pour tous vos efforts pour aider les gens.



Le site mobiletest.me n'émule en aucun cas un appareil mobile.

Il affiche simplement ton forum dans une balise HTML nommée "iframe", qui permet d'intégrer un document dans le document courant.

C'est pratique pour voir le rendu d'un site dans différentes "résolutions", mais ce n'est pas utile dans notre cas car nous n'utilisons pas un thème adaptatif. Tu ne verras donc pas le résultat via ce genre de site.

Pour voir le résultat, il te faudra naviguer sur ton forum via un appareil mobile, utiliser un émulateur, ou si tu es bidouilleur, modifier temporairement l'user agent de ton navigateur.

Je te confirme que le thème mobile est bien installé sur ton forum. Smile

En ce qui concerne le membre qui rencontre un problème, n'hésite pas à lui poser la question afin qu'on en sache davantage.
On pourra peut être l'aider, voir corriger un problème sur le thème mobile.
_______________________
Following members like this message:
Djamel123 (10/05/15)


Forum
Author Message
Djamel123
Membre


Offline
Membre

Joined: 01 Jan 2015
Posts: 36
Point(s): 36
Moyenne: 1.00
Windows Vista ou 7 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Taureau (20avr-20mai)

PostPosted: Sun 10 May 2015 - 18:42    Post subject: Personnaliser l'en-tête du thème mobile Reply with quote

Grand merci pour cette confirmation que mon forum de test est bien installé.
Je ne manquerais pas de vous en informer dès que j'aurais de plus amples détails sur le problème signalé.
Salutations.


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 15:38    Post subject: Personnaliser l'en-tête du thème mobile

Display posts from previous:   
Reply to topic Page 1 of 2 Goto page: 1, 2  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401