Besoin d'aide pour changer l'accueil de mon forum

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

Résolu Besoin d'aide pour changer l'accueil de mon forum

Message par MalysJu le Mar 22 Mai 2012 - 0:10

Bonjour Smile Ou plutôt, bonsoir !

J'ai été nommé administrateur récemment, d'un forum (pas créé par moi) car la fondatrice n'avait plus de temps. Je souhaiterai donc modifier la page d'accueil du forum, qui pour moi est extrêmement fade et "non accueillante".
Problème dans tout ça... je ne connais absolument rien du tout en ces codages bizarroïdes...
J'ai réussi à intégrer la vidéo xD Mais le reste... pfiouuuuuuuuu.... Razz

Pour vous montrer un peu ce que je souhaiterais.


La présentation du forum n'ayant pas de cadre, c'est une image. A gauche, après avoir laissé 3 espaces depuis le haut.

La partie "actuellement sur le forum" a un cadre, en pointillés fins de cette couleur !Elle se situe à droite de la présentation, et fait la même taille.
Le titre du bloc :
En dessous se trouvent 2 liens incorporés dans du texte (comme sur la présentation actuelle)
Les 2 forment le "bloc " du haut.

Puis espace

L'image des fleurs (centré)




Pour la photo du mois, j'aimerais que ça soit centré
D'abord le titre (centré)

-espace
-espace

les gagnants (image) centré


Puis 2 espaces,
denouveau un bloc, comme en haut, avec :
à gauche, la vidéo :

Code:
<iframe src="http://player.vimeo.com/video/36826238?byline=0&amp;portrait=0" width="400" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

et à droite la clause



Puis fin.

Voila, j'espère que ça a été compréhensible !
Sachez aussi que toutes les images, question taille sont modifiables au gré Smile

Je souhaiterais aussi, que le tout se réduise un peu.
Si on regarde la page d'accueil maintenant
Spoiler:


Il faut scroller pour voir le tout, j'aimerais que ça puisse se contenir en 1 page...

J'espère avoir été claire et j'espère qu'une bonne âme pourra m'aider la dedans !
I love you


Dernière édition par MalysJu le Mar 22 Mai 2012 - 15:29, édité 1 fois

MalysJu
Nouveau membre

Féminin
Messages : 13
Inscrit(e) le : 21/05/2012

http://canifreestyle.bbactif.com/forum
MalysJu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour changer l'accueil de mon forum

Message par Invité le Mar 22 Mai 2012 - 10:56

Bonjour,

En faisant un tableau , ça me parait possible, regardez:

cequi donnerai en code html:
Code:
<table border="1" width="100%" height="200">
<tr>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ></td>
</tr>
<tr>
<td ></td>
<td ></td>
<td ></td>
</tr>
</table>
<table> ...</table> c'est le tableau dans son ensemble
<tr> ...</tr> c'est une ligne
<td> ... </td> c'est une cellule de la ligne, c'est entre ces deux balises que l'on place les contenus Wink.
donc ça donne ceci pour le moment:

Pas terrible ces lignes qui coupent au milieu d'un contenu , alors on va fusionner des cellules.
Colspan permet de fusionner des cellules sur une ligne et rowspan les fusionne sur une colonne. Il faut bien retirer les <td></td> en trop aussi Razz:
Code:
<table border="1" width="100%" height="200">
<tr>
<td ></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3" ></td>
</tr>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr><tr>
<td colspan="2" ></td>
</tr>
</table>
Résultat:

Il ne reste plus qu'à remplir! Une fois rempli, on remplace border="1" par border="0" et on enlève le width="200" Wink.
Il faudra certainement affiner quelques réglages du tableau, ajouter quelques div et/ou un peu de CSS. Mais vous devriez obtenir un résultat sympa avec ces éléments:
pour insérer une image:
Code:
<img src="adresse de l'image" />
pour insérer un lien:
Code:
<a href="url du lien">nom du lien</a>
pour sauter une ligne : <br /> .

Bien sincèrement.

Invité
Invité


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

Résolu Re: Besoin d'aide pour changer l'accueil de mon forum

Message par MalysJu le Mar 22 Mai 2012 - 12:52

Merci infiniment ! :-)
Je vais m'y mettre Very Happy

MalysJu
Nouveau membre

Féminin
Messages : 13
Inscrit(e) le : 21/05/2012

http://canifreestyle.bbactif.com/forum
MalysJu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour changer l'accueil de mon forum

Message par MalysJu le Mar 22 Mai 2012 - 13:28

Alors, voila ou j'en suis !
Code:
<table border="0"  height="200">
<td ><img src="http://d29.e-loader.net/c9yEz7LbsL.png" />
</td>
<td colspan="2"><img src="http://d15.e-loader.net/pwjjyZPiH0.png" />
<a href="http://canifreestyle.bbactif.com/f61-clicker">Exercices de Clicker du mois</a>
<a href="http://canifreestyle.bbactif.com/f59-oberythmee">Exercices d'obérythmée</a>
<a href="http://canifreestyle.bbactif.com/f60-one-trick-one-week">One trick, one week - Un tour à apprendre par semaine</a></td>
</tr>
<tr>
<td colspan="3" ><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /></td>
</tr>
<tr>
<td colspan="2"><img src="http://d3.e-loader.net/R3zCLk5Ng9.png" /><img src="http://d11.e-loader.net/DPpNndUOVf.png" />
</td>
<td rowspan="2"><img src=http://d3.e-loader.net/ltsak2Jkh3.png" /><iframe src="http://player.vimeo.com/video/36826238?byline=0&amp;portrait=0" width="400" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></td>
</table>

Ce que je souhaite encore modifier :

- L'espace entre le haut et la première image est trop grand, il faudrait le réduire de moitié
- Le cadre autour de "actuellement"
- Centrer plusieures images


Dernière édition par MalysJu le Mar 22 Mai 2012 - 14:07, édité 1 fois

MalysJu
Nouveau membre

Féminin
Messages : 13
Inscrit(e) le : 21/05/2012

http://canifreestyle.bbactif.com/forum
MalysJu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour changer l'accueil de mon forum

Message par Invité le Mar 22 Mai 2012 - 14:04

Essayez comme ceci:
Code:
<table class="panneau_accueil" border="0" width="100%">
<tr>
<td ><img src="http://d0.e-loader.net/09rUizZiba.png" /></td>
<td colspan="2"><div class="cadre_accueil"><img src="http://d14.e-loader.net/yxD6KI5gAd.png" /><br />
<a href="http://canifreestyle.bbactif.com/f61-clicker">Exercices de Clicker du mois</a><br/>
<a href="http://canifreestyle.bbactif.com/f59-oberythmee">Exercices d'obérythmée</a><br />
<a href="http://canifreestyle.bbactif.com/f60-one-trick-one-week">One trick, one week - Un tour à apprendre par semaine</a><br /></div>
</td>
</tr>
<tr>
<td colspan="3" ><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /></td>
</tr>
<tr>
<td colspan="2"><img src="http://d18.e-loader.net/9BL0n3LHh6.png" /><img src="http://d19.e-loader.net/D0C6agYk45.png" /></td>
<td rowspan="2"><iframe src="http://player.vimeo.com/video/36826238?byline=0&amp;portrait=0" width="400" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></td>
</tr><tr>
<td colspan="2" > <img src="http://d17.e-loader.net/O2FelXDMSK.png" /></td>
</tr>
</table>
En ajoutant dans votre CSS PA > Affichage > Couleurs > Feuille de style:
Code:
.panneau_accueil td{
  text-align: center;
  vertical-align: top;}

.cadre_accueil{
  border: 2px solid #000;
  padding: 2px;}
Bien sincèrement.

Invité
Invité


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

Résolu Re: Besoin d'aide pour changer l'accueil de mon forum

Message par MalysJu le Mar 22 Mai 2012 - 14:35

Edit : Problème réglé Wink

Mon code actuel
Code:

<table class="panneau_accueil" border="0" width="100%">
<tr>
<td ><img src="http://d29.e-loader.net/c9yEz7LbsL.png" /></td>
<td colspan="2"><div class="cadre_accueil"><img src="http://d15.e-loader.net/pwjjyZPiH0.png" /><br />
<a href="http://canifreestyle.bbactif.com/f61-clicker">Exercices de Clicker du mois</a><br/>
<a href="http://canifreestyle.bbactif.com/f59-oberythmee">Exercices d'obérythmée</a><br />
<a href="http://canifreestyle.bbactif.com/f60-one-trick-one-week">One trick, one week - Un tour à apprendre par semaine</a><br /></div>
</td>
</tr>
<tr>
<td colspan="3" ><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /></td>
</tr>
<tr>
<td colspan="2"><img src="http://d3.e-loader.net/R3zCLk5Ng9.png" /><img src="http://d14.e-loader.net/OwJmrEY4fs.png" /></td>
<td rowspan="2"><img src="http://d5.e-loader.net/wCtEu1XtiE.png" /><iframe src="http://player.vimeo.com/video/36826238?byline=0&portrait=0" width="400" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></td>
</table>

Je le met a présent

MalysJu
Nouveau membre

Féminin
Messages : 13
Inscrit(e) le : 21/05/2012

http://canifreestyle.bbactif.com/forum
MalysJu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour changer l'accueil de mon forum

Message par Invité le Mar 22 Mai 2012 - 14:44

Ah! ces tableaux ... au début c'est toujours compliqué Razz . Vous avez mis la vidéo en dehors d'une cellule et une cellule dans une autre, c'est pour ça que ça bug un petit peu Wink.
Vos images étant grande, on doit pouvoir simplifier le code en ne faisant que 3 lignes et 2 colonnes
Essayez comme ceci:
Code:
<table class="panneau_accueil" border="0" width="100%">
<tr>
<td ><img src="http://d29.e-loader.net/c9yEz7LbsL.png" /></td>
<td><div class="cadre_accueil"><img src="http://d15.e-loader.net/pwjjyZPiH0.png" /><br />
<a href="http://canifreestyle.bbactif.com/f61-clicker">Exercices de Clicker du mois</a><br/>
<a href="http://canifreestyle.bbactif.com/f59-oberythmee">Exercices d'obérythmée</a><br />
<a href="http://canifreestyle.bbactif.com/f60-one-trick-one-week">One trick, one week - Un tour à apprendre par semaine</a><br /></div>
</td>
</tr>
<tr>
<td colspan="2" ><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /></td>
</tr>
<tr>
<td><img src="http://d3.e-loader.net/R3zCLk5Ng9.png" /><img src="http://d14.e-loader.net/OwJmrEY4fs.png" /></td>
<td><img src="http://d5.e-loader.net/wCtEu1XtiE.png" /><br /><iframe src="http://player.vimeo.com/video/36826238?byline=0&portrait=0" width="400" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></td>
</tr>
</table>

Invité
Invité


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

Résolu Re: Besoin d'aide pour changer l'accueil de mon forum

Message par MalysJu le Mar 22 Mai 2012 - 14:49

Voila le résultat Smile



Pour ce qui est des numéros, c'est le points que j'aimerai changer.

1. Ajout de 2 espaces "ordi"
Cette taille la donc :
Bienvenue


Image 1

2. Plus d'espace après le dernier texte
Et le contour avec une opacité de 50%, pointillés, couleur brun-rouge

3. Un espace entre les fleurs et le reste

4. 2 espaces entre gagnants et les images

5. Un espace entre l'image et la vidéo


Voila voila, merci d'avance Smile

MalysJu
Nouveau membre

Féminin
Messages : 13
Inscrit(e) le : 21/05/2012

http://canifreestyle.bbactif.com/forum
MalysJu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Besoin d'aide pour changer l'accueil de mon forum

Message par Invité le Mar 22 Mai 2012 - 15:08

Pour les espaces, on ajoute autant de <br /> que nécessaire,
Code:
<table class="panneau_accueil" border="0" width="100%">
<tr>
<td ><br /><img src="http://d29.e-loader.net/c9yEz7LbsL.png" /></td>
<td><br /><div class="cadre_accueil"><img src="http://d15.e-loader.net/pwjjyZPiH0.png" /><br />
<a href="http://canifreestyle.bbactif.com/f61-clicker">Exercices de Clicker du mois</a><br/>
<a href="http://canifreestyle.bbactif.com/f59-oberythmee">Exercices d'obérythmée</a><br />
<a href="http://canifreestyle.bbactif.com/f60-one-trick-one-week">One trick, one week - Un tour à apprendre par semaine</a><br /><br /></div>
</td>
</tr>
<tr>
<td colspan="2" ><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /><img src="http://i47.servimg.com/u/f47/10/07/68/43/sans_t28.jpg" /></td>
</tr>
<tr>
<td><img src="http://d3.e-loader.net/R3zCLk5Ng9.png" />
<br /><br /><br /><img src="http://d14.e-loader.net/OwJmrEY4fs.png" /></td>
<td><img src="http://d5.e-loader.net/wCtEu1XtiE.png" /><br /><br /><br /><iframe src="http://player.vimeo.com/video/36826238?byline=0&portrait=0" width="400" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></td>
</tr>
</table>
et puis on peut améliorer un peu la partie CSS:
Code:
.panneau_accueil td{
  text-align: center;/*centre le contenu*/
  vertical-align: top;/*place le contenu en haut*/
  padding: 15px;/*marge intérieure*/
}

.cadre_accueil{
  border: 2px dotted rgba(139,0,0,0.5); /*épaisseur style et couleur des contour*/
  padding: 2px;/*marge intérieure*/
  padding-bottom: 10px;/*marge inférieure intérieure*/
}
( j'ai commenté pour que vous sachiez à quoi ça correspond, mais pas sûre que la feuille CSS accepte les commentaires, si ça bug enlevez tout ce qui est entre /* et */). Pour l'opacité, je ne savais pas faire, j'ai essayé en m'inspirant de ce sujet: http://forum.forumactif.com/t331383-opacite-des-couleurs , avec Chrome ça à l'air de fonctionner, j'espère que c'est de même pour tous les navigateurs.

Bien sincèrement.

Invité
Invité


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

Résolu Re: Besoin d'aide pour changer l'accueil de mon forum

Message par MalysJu le Mar 22 Mai 2012 - 15:24

OHYYEEEAHHHH !!!

C'est trop génial !! :-DDDD
Merci infiniment !

MalysJu
Nouveau membre

Féminin
Messages : 13
Inscrit(e) le : 21/05/2012

http://canifreestyle.bbactif.com/forum
MalysJu 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