possibilité de modifier le codage?

[jaycsi85]

Bonjour, j'aimerais savoir si c'est possible de modifier le codage de mon template. Je ne connais pas du tout le CSS, mais j'ai une base dans le codage HTML. En fait, j'ai plusieurs changements que j'aimerais apporter à l'esthéthique de mon forum.

URL du forum: http://pcmtldp.forums-actifs.com

Voici ce que j'aimerais modifier:

1. j'aimerais savoir si c'est possible d'insérer un espace entre le logo et les bouton, question d'aérer le tout pour ne pas que ce soit trop compact.

2. changer l'emplacement de la description du forum. C'est-à-dire avoir une image en haut de la page, ensuite le nom du forum en dessous avec sa description et ensuite une autre image juste en dessous de la description.

3. Augmenter le nombre de caractères dans la description du forum pour pouvoir en écrire un peu plus.

4. J'aimerais enlever les liens de "membres" et "groupes" pour le moment. Je ne suis pas encore certaine de vouloir les garder sur mon forum, mais pour l'instant, je ne crois pas en avoir besoin.

Finalement, comme vous avez surement remarqué, mon forum est bilingue. Je ne sais pas si c'est faisable, mais est-ce qu'il y a moyen d'insérer quelque chose dans le code du forum pour qu'un membre anglophone ait la possibilité de cliquer sur un bouton "anglais" et que le forum est traduit ou dois-je continuer à faire mon forum dans les 2 langues, tel qu'est le cas en ce moment?

Merci beaucoup
j'attend vos réponses avec impatience

[jaycsi85]

et up...

[Adeovski Rosenthal]

Bien le bonjour!
Bon alors... Pfiou! Je me lance, je ne les ai pas tous, mais je vais déjà indiquer ce que je sais...!

1. Oui, c'est possible ^^
Alors pour le code, il suffit de coller une div à la barre de navigation... dans le template overhall-header new, il faut trouver >

Code:

{GENERATED_NAV_BAR}

Et le remplacer par :

Code:

<div class="barre_de_navigation">{GENERATED_NAV_BAR}</div>

Dans le CSS, il suffit tout juste de mettre quelque chose du genre

Code:

.barre_de_navigation
{
position: absolute;
top: 250px;/*Espace du haut*/
left: 40px; /*position à gauche*/
right: 0px;/*position à droite*/
width: 100%;
text-align: center;
}

Vous pouvez modifier le nom de la div mais n'oubliez pas de modifier le CSS alors.

2. Dans le template overhall header, vous pouvez trouver ceci:

Code:

<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}</span>
</td>

Et vous mettez vos image (en HTML) au dessus et en dessous

3. Alors je n'ai pas essayé, mais vos pouvez peut-être faire un I-frame
Vous allez dans votre P. d'administration: Divers --> gestion des pages HTML -->
et vous crez une nouvelle page dans laquelle vous mettez vos information et tout et tout puis, vous enregistrez et vous copiez l'adresse de votre nouvelle page.
Puis, dans la description du forum, il vous suffira de mettre :

Code:

<iframe src="http://URL DE VOTRE FICHE" style="height: 160px; width: 450px; background:transparent;" frameborder="no"; scrolling="no"></iframe>

4. Pour enlever ces liens... ... vous pouvez faire vos image de la barre de navigation, les installer mais ne pas mettre d'image pour "membre" et "groupe"

Et enfin... pour traduire le forum... Je ne sais pas ^^'
Je pense que google doit avoir des outils spéciaux pour ce genre de cas comme les traducteurs ou autres... mais là, il vaut mieux faire des recherches...

En espérant que tout fonctionne, passez une bonne soirée

[Kiirii]

Ah les toutou j'adore! :3
Bonjour,

Hum je pense qu'il y a plus simple sans avoir besoin à toucher aux templates.

1. Il suffirait de créer un espace en dessous du logo:
Donc il faut aller dans le css
PA
Affichage
Images et couleurs
Couleurs
Feuille de Style Css
et ajouter ceci:

Code:


#i_logo{
margin-bottom: 50px;
}


La valeur 50 peut être augmentée ou diminuée selon vos besoins.

2. Il faudrait modifier l'en-tête (pas besoin de code)
PA
Affichage
Page d'accueil
En-tête et navigation
Mettez centré pour position du logo.

3. Je ne pense pas que ce soit possible d'augmenter le nombre de caractère de la description ._. .. Donc il faudrait mieux afficher un cadre. Mettre un message d'accueil:
PA
Affichage
Page d'accueil
Généralités
Ici il y a un encadré permettant de faire un message d'accueil.

4. Ça se passe encore dans le PA.
PA
Affichage
Page d'accueil
En-tête & Navigation
Cette fois cliquez sur l'icône de modification puis modifier les permissions. Ainsi mettez les liens groupe et membre sur Administrateur, comme ça personne à par vous ne pourra les voir.

Ou sinon, puisque vous n'avez que des images dans votre barre de navigation vous pouvez tout simplement effacer l'image.
PA
Affichage
Gestion des images
Mode avancé
Ici cherchez les liens des images de groupe et membres et effacez. L'image sera remplacer par une image transparente de 1pixel de longueur et de largeur (donc incliquable sauf pour les archarnés)


5. Hum je ne sais pas si cela sera possible... Les traductions seraient automatiques ou manuelles?

[Kiirii]

Désolée double post

[Adeovski Rosenthal]

Toutou :3
Ah oui... ben c'est bien plus simple comme ça sans doute (Pourquoi faire simple quand on peut faire compliqué )
Merki !

[jaycsi85]

1. Il suffirait de créer un espace en dessous du logo:
Donc il faut aller dans le css
PA
Affichage
Images et couleurs
Couleurs
Feuille de Style Css
et ajouter ceci:

Code:


#i_logo{
margin-bottom: 50px;
}


La valeur 50 peut être augmentée ou diminuée selon vos besoins.

Merci Beaucoup. C'est en plein ce qu'il me fallait.

2. Il faudrait modifier l'en-tête (pas besoin de code)
PA
Affichage
Page d'accueil
En-tête et navigation
Mettez centré pour position du logo.

ça fonctionne, mais il m'en manque un peu... comment je fais pour rajouter une image (même dimensions que la première et centré aussi) en-dessous de la description du forum pour faire en sorte que la description soit entre 2 images. J'aimerais que ça ressemble un peu à ceci:

3. Je ne pense pas que ce soit possible d'augmenter le nombre de caractère de la description ._. .. Donc il faudrait mieux afficher un cadre. Mettre un message d'accueil:
PA
Affichage
Page d'accueil
Généralités
Ici il y a un encadré permettant de faire un message d'accueil.

merci, je vais l'essayer pour voir ce que ça donne


Merci beaucoup

[jaycsi85]

1. Il suffirait de créer un espace en dessous du logo:
Donc il faut aller dans le css
PA
Affichage
Images et couleurs
Couleurs
Feuille de Style Css
et ajouter ceci:

Code:


#i_logo{
margin-bottom: 50px;
}


La valeur 50 peut être augmentée ou diminuée selon vos besoins.

est-ce que ce serait le même code si je voudrais rajouter un espace en dessous du menu, mais changer le "#i_logo{" pour le "#i_menu{" ?

merci

[Kiirii]

Bien tenté mais le #i_menu n'existe pas. Autrement c'est exactement ça mais le nom est .mainmenu
N'oubliez pas le point devant mainmenu!

ça fonctionne, mais il m'en manque un peu... comment je fais pour rajouter une image (même dimensions que la première et centré aussi) en-dessous de la description du forum pour faire en sorte que la description soit entre 2 images. J'aimerais que ça ressemble un peu à ceci:

https://i.servimg.com/u/f32/15/52/97/38/help210.jpg

Oui c'est possible mais cette fois-ci, pour insérer la seconde image, il va falloir utiliser les templates. Mais d'abord dites moi si vous comptez utiliser le message d'accueil ou non. Le code sera placé différemment dans ce cas là.

[jaycsi85]

Bien tenté mais le #i_menu n'existe pas. Autrement c'est exactement ça mais le nom est .mainmenu
N'oubliez pas le point devant mainmenu!

Alors le code à insérer est le suivant?

#i_.mainmenu{
margin-bottom: 50px;
}

Oui c'est possible mais cette fois-ci, pour insérer la seconde image, il va falloir utiliser les templates. Mais d'abord dites moi si vous comptez utiliser le message d'accueil ou non. Le code sera placé différemment dans ce cas là.

oui, je désire utiliser le message d'acceuil.

merci de la patience!

[Kiirii]

Non il faut mettre

Code:

.mainmenu{
margin-bottom: 50px;
}

Ensuite vous allez remplacer la description par le message d'accueil c'est bien ça? Parce que dans ce cas il faudra déplacer le message d'accueil dans le code et modifier le css.

[jaycsi85]

Ensuite vous allez remplacer la description par le message d'accueil c'est bien ça? Parce que dans ce cas il faudra déplacer le message d'accueil dans le code et modifier le css.

oui c'est bien ce que j'aimerais faire. en plus de rajouter une photo en dessous de ce message d'accueil.

Merci de me donner un coup de main, c'est très apprécié

:thanks:

[Kiirii]

Désolée j'arrive pas à déplacer la variable du message d'accueil ><'.

Du coup on va devoir faire ça manuellement ^^' (bon c'est pas plus compliqué non plus, vous aurez juste à copier coller votre message d'accueil au lieu de la variable).

On va se diriger dans les templates donc:

PA
Affichage
Templates
Général
Overall_header_new

Cherchez ensuite ceci:

Code:


<!-- END switch_logo_right -->
               </tr>
            </table>


On va positionner une div après ce bout de code qui contiendra votre message d'accueil et votre deuxième image, vous devriez donc avoir ce résultat:

Code:


<!-- END switch_logo_right -->
               </tr>
            </table>
<div align="center" class="gen">Message d'accueil

<a href="{U_INDEX}"><img src="URLDEVOTREDEUXIEMEIMAGE" id="i_logo2" border="0" alt="{L_INDEX}" /></a></div>


Une fois ceci fait, enregistrez puis cliquez sur le et voilà c'est terminé.

[jaycsi85]

cool, ça fonctionne. merci. Si je prend le même principe de codage que tu m'avais dit plus tôt, pour insérer une petite espace en dessous du message d'accueil je ferais ceci:

PA
Affichage
Images & Couleurs
Couleurs
Feuille de style CSS

et j'ajoute ce code:

Code:

#SITE_DESCRIPTION{
margin-bottom: 20px;
}

ou celui-ci

Code:

.SITE_DESCRIPTION{
margin-bottom: 20px;
}

Encore une fois, merci beaucoup.

[Kiirii]

Hum non normalement il faudrait utiliser .gen mais cet attribut est déjà utilisé pour plusieurs textes. Donc on va éviter de prendre celui-ci en s'en créer un autre.

Donc on récupère le code que j'ai fait précédemment (d'ailleurs j'ai oublié de mettre un br pour aller à la ligne, je l'ai ajouté dans le code en dessous), on va faire deux div (pour faire un espace entre la page d'accueil et la deuxième image).

PA
Affichage
Templates
Général
Overall_header_new

Code:


<!-- END switch_logo_right -->
               </tr>
            </table>

<div class="gen" align="center" id="espace_accueil">Message d'accueil</div>
<div id="i_logo2" align="center"><a href="{U_INDEX}"><img src="URLDELADEUXIEMEIMAGE" border="0" alt="{L_INDEX}" vspace="1"  /></a></div>


Enregistrez puis cliquez sur

Maintenant on va aller dans le CSS

PA
Affichage
Images et couleurs
Couleurs
Feuille de style CSS

C'est exactement le code que vous avez dit, à l'exception qu'il faut changer le nom:

Code:


#espace_accueil{
margin-bottom: 20px;
}


Validez et voilà c'est terminé!

[jaycsi85]

Merci Beaucoup de ta patience

C'est exactement le code que vous avez dit, à l'exception qu'il faut changer le nom:

question comme ça, comment fait-on pour savoir quel "nom" choisir plutôt qu'un autre?

je dervais peut-être prendre des cours de CSS lol

[Kiirii]

Parce qu'on le créé dans le html (ici les templates). Et le moindre caractère compte. Celui que vous aviez cité n'existait pas. Il faut attribuer une class ou un id à une balise pour pouvoir lier le style de celle-ci (par exemple mettre du texte en couleur) à la feuille de style css.
Si le nom n'existe pas dans la partie html les styles dans le css ne trouverons pas à quoi ils sont liés.

[jaycsi85]

comment fait-on pour voir quel nom a été attribué à quel élément de la page dans mon template?

[jaycsi85]

je viens de trouver. dsl

merci pour ton aide. C'est très apprécié