Modification de l'apparence de la page d'accueil

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

Résolu Modification de l'apparence de la page d'accueil

Message par ipodjeremy le Mar 1 Déc 2015 - 16:23

Détails techniques


Version du forum : invision
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://guilde-wanted-test.taguilde.net/ (Oui, j'utilise un forum de test, pour éviter de tous casser en grattant partout)

Description du problème

Bonjour,

C'est relativement simple, ce que je recherche.

Le forum actuel à cette apparence :
image:

Et je voudrais qu'il soit comme ceci :
image:
( adaptation via paint pour mon forum à partir de ce forum qui utilise cette apparence : http://irydae.forumactif.org/ )

Ne connaissant pas du tout comment fonctionne les templates et quoi sert à quoi, j'ai bien besoin de votre aide Wink


Bien cordialement


Dernière édition par ipodjeremy le Ven 4 Déc 2015 - 0:39, édité 3 fois

ipodjeremy
**

Masculin
Messages : 89
Inscrit(e) le : 24/07/2012

http://chudoku.superforum.fr/
ipodjeremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par Feuilla' le Mar 1 Déc 2015 - 17:22

Bonjour,
déjà pour les images en fond des descriptions des forums : dans la description de chaque, rajoutez des balises autour, comme ceci :
Code:
<div class="forumun">Nom du forum</div>
Le "forumun" est changeable par un autre mot. Wink
Pour le suivant, on peut mettre "forumdeux" etc. .
Dans la Feuille de style, collez ceci :
Code:
div.forumun {background-image:url("adressedemonimage")}
Il faut mettre une vraie adresse bien sûr. Smile Puis faire pour chaque forum/sous-forum le code, par exemple :
Code:
div.forumdeux {background-image:url("adressedemonimage")}
div.forumtrois {background-image:url("adressedemonimage")}
etc. etc. . Wink
Warning Attention car il faut que les mots soient les mêmes (pour le premier forum par exemple, si l'on met "exemple" dans la description, alors il faudra mettre "exemple" aussi dans le CSS).
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par ipodjeremy le Mar 1 Déc 2015 - 17:51

Yeah, pour les images, sa fonctionne bien. J'ai fait le test avec ce que j'avais, mais sa fonctionne, c'est le principal.



Concernant l'apparence des catés, je vais tenter des bidouillages en attendant une aide Wink

ipodjeremy
**

Masculin
Messages : 89
Inscrit(e) le : 24/07/2012

http://chudoku.superforum.fr/
ipodjeremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par Feuilla' le Mar 1 Déc 2015 - 18:24

Re,
que voudriez-vous pour les titres des catégories, précisément ? (modifier quoi, changer quoi ?) Smile

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par ipodjeremy le Mar 1 Déc 2015 - 18:36

Sans prendre en compte les images et les couleurs, mais seulement l'apparence ou du moins la structure de la page en elle même je voudrais que le forum ne ressemble plus au premier screen, mais au deuxième.

Par conséquent, je pense que tout est a modifier. Si j'ai bien suivi ( oui c'est dur) tous ce passe ici : Template / index_box

ipodjeremy
**

Masculin
Messages : 89
Inscrit(e) le : 24/07/2012

http://chudoku.superforum.fr/
ipodjeremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par Neptunia le Mar 1 Déc 2015 - 20:21

Bonjour ^^


Ce que vous recherchez, ças'appelle des catégories en bloc.
Vous trouverez un tutoriel ici :
Right Catégories en blocs avec effets de transition - Version phpBB2

Le rendu en image :

Ici on a 3 forums par ligne mais il suffit de modifier une seule ligne de CSS pour passer à 2 ou 4

Un tutoriel équivalent est aussi disponible sur Never Utopia au cas où vous y auriez déjà un compte.

Neptunia
+ Hyperactif +

Féminin
Messages : 11004
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: Modification de l'apparence de la page d'accueil

Message par ipodjeremy le Mer 2 Déc 2015 - 6:49

Bonjour Neptunia,

Merci beaucoup ! Le fait d'avoir un nom sur ce que je cherche m'a en effet permit de trouver bien de l'aide sur internet, dont un tutoril plutôt sympa. Ceux que tu m'as donné, même inscrit, j'ai pas les accès pour ces parties du forum. Je suis donc aller ici (pas besoin d'inscription) : Lien du tuto

Ça prend forme déjà , on verra la suite pour la beauté Wink


Cependant, je suis bloqué sur la 2ème partie. Celle concernant l'intégration des éléments dans les cadres.

Une petite image d'où j'en suis :
image:

Mais sur les templates, je regarde, mais je ne vois pas du tout, ou je dois apporter la modification suivante :

Code:
 <div class="forum">
    
    <!-- titre du forum -->
    <div class="forumlink"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    
    <!-- icone des messages -->
    <div class="forum_icone"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></div>
    
    <!-- description -->
    <div class="forum_description">{catrow.forumrow.FORUM_DESC}</div>
    
    <!-- sous forum -->
    <div class="sous_forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    
    <!-- stats -->
    <div class="forum_stats"><span class="stats1">{catrow.forumrow.TOPICS}</span><span class="stats2">{catrow.forumrow.POSTS}</span></div>
    
    <!-- dernier message -->
    <div class="dernier_mess">{catrow.forumrow.LAST_POST}</div>  
  
   </div>

Si vous savez dans quel templates, je dois faire ça, je prends Wink

ipodjeremy
**

Masculin
Messages : 89
Inscrit(e) le : 24/07/2012

http://chudoku.superforum.fr/
ipodjeremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par Neptunia le Mer 2 Déc 2015 - 8:11

C'est le template index_box qu'il faut modifier !

C'est d'ailleurs précisé dans le tuto que vous mentionnez.

Neptunia
+ Hyperactif +

Féminin
Messages : 11004
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: Modification de l'apparence de la page d'accueil

Message par ipodjeremy le Mer 2 Déc 2015 - 8:25

Suis-Je bête, au début il le dit. Si il précise pas sur la deuxième partie, c'est que c'est la même chose.

Mais du coup, je colle ce code à la suite de l'autre ou il faut l'insérer à un endroit précis dans le code déjà existant ?

ipodjeremy
**

Masculin
Messages : 89
Inscrit(e) le : 24/07/2012

http://chudoku.superforum.fr/
ipodjeremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par Neptunia le Mer 2 Déc 2015 - 14:37

Là encore, ilsuffit de lire attentivement le tutoriel.

Vous devez dans un premier temps "nettoyer" votre template. C'est à dire que vous allez remplacer l'intégralité du template par le premier code fourni. Ensuite il reste à suivre pas à pas chaque instruction.

Mais du coup, je colle ce code à la suite de l'autre ou il faut l'insérer à un endroit précis dans le code déjà existant ?
Autant pour du CSS vous pouvez le mettre à peu près dans l'ordre qui vous chante, en matière de HTML il faut l'insérer exactement là où on le demande.

Neptunia
+ Hyperactif +

Féminin
Messages : 11004
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: Modification de l'apparence de la page d'accueil

Message par ipodjeremy le Mer 2 Déc 2015 - 22:34

Bonsoir !

Voilà, concernant les blocs, tout fonctionne très bien !

J'ai quelques finitions à demander :

Un petit screen pour mieux voir ce que je demande :
image:

ROSE : Supprimer le soulignement
Vert : Faire un angle arrondi
Bleu : mettre un - entre les deux chiffres qui correspond aux sujets et aux messages
Rouge : Supprimer le cadre du forum pour qu'il soit transparent afin de voir entièrement l'image de fond. J'ai voulu tenter avec une opacité, mais sa assombri l'ensemble du forum.



Bien cordialement

ipodjeremy
**

Masculin
Messages : 89
Inscrit(e) le : 24/07/2012

http://chudoku.superforum.fr/
ipodjeremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par R-max le Mer 2 Déc 2015 - 23:04

bonsoir > un ptit coup de pouce ! Mouais

rouge >
Code:
.bodyline {
    background-color: transparent;
    border: 0px;
}

rose et vert >
Code:
.forumlink a {
  text-decoration: none!important;
border-radius: 25px 25px 0px 0px;
}

bleu>
chercher ce morceau dans le template modifier
Code:
<div class="forum_stats"><span class="stats1">{la variable}</span><span class="stats2">{la variable}</span></div>

et ajouter
Code:
&nbsp;-&nbsp;

ce qui donne ceci
Code:
<div class="forum_stats"><span class="stats1">{la variable}</span>&nbsp;-&nbsp;<span class="stats2">{la variable}</span></div>



R-max
# Tropactif #

Masculin
Messages : 1528
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: Modification de l'apparence de la page d'accueil

Message par ipodjeremy le Mer 2 Déc 2015 - 23:50

Merci beaucoup, R-Max

Tout fonctionne à souhait Wink



Il me manque donc plus que le dernier détail et mettre le sujet en résolu Smile

Il faudrait que je passe les couleurs : bleu, jaune rouge, orange, gris et violet en transparent pour pouvoir à la place du blanc, mettre une image.

D'ailleurs en parlant d'image, les angles sont fait automatiquement ainsi que si je prend une image trop grande, elle sera redimensionné pour s'adapter au cadre ?

ipodjeremy
**

Masculin
Messages : 89
Inscrit(e) le : 24/07/2012

http://chudoku.superforum.fr/
ipodjeremy a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par Feuilla' le Jeu 3 Déc 2015 - 16:58

Re-Bonjour,
dans la Feuille de style, pour les parties rouges :
Code:
div.forum_description {
  background-color:transparent;
  background-image:url("url_de_l'image");
}
pour les parties bleues :
Code:
.forumlink {
  background-color:transparent;
  background-image:url("url_de_l'image");
}
pour les parties violettes :
Code:
div.sous_forum {
  background-color:transparent;
  background-image:url("url_de_l'image");
}
pour les parties oranges :
Code:
div.dernier_mess {
  background-color:transparent;
  background-image:url("url_de_l'image");
}
et pour les parties jaunes :
Code:
div.forum-icone {
  background-color:transparent;
  background-image:url("url_de_l'image");
}
Il suffit de remplacer à chaque fois "url_de_l'image" par la vraie URL. Wink
Bonne journée !

Feuilla'
# Tropactif #

Messages : 1388
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification de l'apparence de la page d'accueil

Message par ipodjeremy le Ven 4 Déc 2015 - 0:38

C'est vraiment super ! C'est parfait !

Je vous remercie tous les deux pour votre aide.

Je passe le sujet en résolu Wink

ipodjeremy
**

Masculin
Messages : 89
Inscrit(e) le : 24/07/2012

http://chudoku.superforum.fr/
ipodjeremy 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