Aide pour le codage de la version mobile

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Aide pour le codage de la version mobile

Message par horusbk le Mer 25 Fév 2015 - 19:45

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://themazerunner-forum.fr/

Description du problème

Bonjour
J'ai découvert ce tutoriel permettant de personnaliser l'apparence de son forum dans sa version mobile. Toutefois, j'ai essayé de rentrer certains codes dans ma page CSS mais cela n'a pas fonctionné.

J'aimerais déjà, commencer par l'apparence générale :
Tutoriel : personnaliser l'apparence en version mobile de votre forum. a écrit:Général :

L'image de fond :

Code: Sélectionner le contenu

       #page-body

L'image de fond de haut de page :

Code: Sélectionner le contenu

       .mobile_title

Texte de haut de page :

Code: Sélectionner le contenu

       .mobile_title_content

L'image de fond de bas de page :

Code: Sélectionner le contenu

       .linklist

Texte de bas de page (nécessite la balise !important) :

Code: Sélectionner le contenu

       .small


Quelqu'un pourrait-il m'expliquer comment intégrer ces balises dans le CSS ?
Est-ce que si le CSS contient déjà des éléments (comme la couleurs des titres ...) est-ce grave ?

En vous remerciant pour vos réponse et votre aide, 1BAPTISTE.


Dernière édition par 1baptiste le Jeu 26 Fév 2015 - 16:23, édité 1 fois

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par Neptunia le Mer 25 Fév 2015 - 19:57

Bonjour ^^


Qu'avez-vous essayé de mettre dans votre CSS ?

Le tuto ne mentionne que les identifiants à cibler

Si vous ajoutez par exemple
Code:
.mobile_title
sans rien d'autre, il ne se passera rien

Il vous faut définir au moins une propriété et une valeur pour chacun de vos blocs CSS
Par exemple
Code:
.mobile_title_content {
fontsize: 30px;
color: #FF0000;
propriete3: valeur3;
propriete4: valeur4;
}

Tuto Le CSS – Comment ça marche ?

Neptunia
+ Hyperactif +

Féminin
Messages : 10392
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par horusbk le Mer 25 Fév 2015 - 19:59

En effet, j'avais juste mis :
Code:
        .mobile_title
#Neptune- Pouvez-vous me donner un exemple avec le code du fond du forum en version mobile s'il vous plait ? C'est pour avoir un exemple concret à reproduire. Merci Very Happy

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par Neptunia le Mer 25 Fév 2015 - 20:26

N'ayant pas d'appareil mobile pour procéder à des tests, je ne saurais rien garantir.

Code:
.mobile_title_content {
font-size: 30px;
color: #FF0000;
}
devrait faire passer votre texte de haut de page en rouge et en taille XL

Code:
#page-body {
   background-image: url('http://hebergeur.com/uneimagedefond.jpg');
   }
devrait changer l'image de fond (remplacer l'URL dans le code fourni par une image qui existe réellement.

Neptunia
+ Hyperactif +

Féminin
Messages : 10392
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par horusbk le Mer 25 Fév 2015 - 20:39

Merci ! Je vais essayer avec mon mobile et l'émulateur de Google Chrome. Je ne ferme pas le sujet au cas où ça ne fonctionne pas.


Dernière édition par 1baptiste le Mer 25 Fév 2015 - 22:16, édité 1 fois

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par horusbk le Mer 25 Fév 2015 - 22:15

Donc j'ai essayé et effectivement la photo apparait. Cependant c'était trop simple car :
Le fond des catégories masque le fond :
Catégories qui masquent le fond:

Peux-t-on faire en sorte que le fond des catégorie soit à 50% transparent par exemple ?

De plus, le fond du forum n'est pas centré : c'est-à-dire qu'il n'est pas adapté à la taille de l'écran :
Un fond non adapté:

Pour répondre à ça j'ai une hypothèse : soit il faut que je refasse un fond adapté à la taille de l'écran du téléphone. Toutefois le problème persistera pour les téléphones plus grand ou plus petit de la taille du fond que j'aurais fais. Donc selon moi, il faudrait une code qui oblige l'image à s'adapter : pour rendre cette taille universelle à tous les mobiles / tablettes.

Merci pour vos réponses ! Thanks

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par R-max le Mer 25 Fév 2015 - 23:32

bonsoir
vous pouriez rajouter ceci a votre code par exemple !

Code:
#page-body {
  background-image: url('http://hebergeur.com/uneimagedefond.jpg');
  width:100%;
  height:100%;
  }

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par horusbk le Jeu 26 Fév 2015 - 1:33

C'est exactement ce que je voulais R-Max. Sinon avez vous une solution pour la couleur des catégories que j'aimerais a 50% transparente ?

Edit : Malheureusement, même avec ce nouveau code j'ai toujours le même problème Rolling Eyes .

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par R-max le Jeu 26 Fév 2015 - 12:04

bonjour
avec ce code ,elle s'adapte en largeur , mais elle se répète en hauteur !!
j'ai bien essayer divers code (no-repeat)sans résulta !
Code:
#page-body {
  background-image:url(http://i38.servimg.com/u/f38/18/76/86/41/drapea10.jpg);
  background-size: 100% auto ;}

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par horusbk le Jeu 26 Fév 2015 - 12:28

Merci R-Max, pour le fond qui s'adapte à l'écran du téléphone c'est résolu
Toutefois, pour le second problème qui est la couleur des catégories ... c'est en cours , il faudrait qu'elles soient toujours visibles mais qu'elles laissent apparaitre en arrière-plan le fond du forum.

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par R-max le Jeu 26 Fév 2015 - 12:56

tu a la variable qui agi sur les couleurs !!!

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Aide pour le codage de la version mobile

Message par horusbk le Jeu 26 Fév 2015 - 16:23

Oui en effet, merci Very Happy

horusbk
*****

Masculin
Messages : 616
Inscrit(e) le : 14/02/2015

http://forumtest-horus.forumactif.org/
horusbk a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum