Page d'acceuil personalisé !

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

Résolu Page d'acceuil personalisé !

Message par Funplay3 le Dim 31 Oct 2010 - 12:13

Bonjour, je suis désoler je n'ai pas pu faire de sreem donc je ne peut fournir qu'un lien, j'aimerai savoir comment on peut se genre de page d'accueil, je ne sais pas vraiment comment cela se nomme, mais vous pouvez voir dans le lie ci-dessous que lorsque l'on passe sa souris sur "Events" on passe sur une nouvelle page qui est différente de "New's". Je suis navré si je m'exprime mal, mais je ne sais comment décrire ceci ou encore le nommer.

http://naruto-katana-rpg.forumactif.com/

je remercie d'avance ceux ou celle qui m'aideront Wink


Dernière édition par Funplay3 le Dim 31 Oct 2010 - 14:10, édité 1 fois

Funplay3
Nouveau membre

Messages : 25
Inscrit(e) le : 17/03/2010

http://naruto-no-war.forumactif.org/forum.htm
Funplay3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'acceuil personalisé !

Message par Kokari le Dim 31 Oct 2010 - 12:24

Bonjour,

C'est un codage assez complexe que l'on appelle onglet. Enfin, tout est relatif, pour les codeurs c'est peut-être vraiment simple. Je me souviens avoir vu le code sur CSS actif mais je ne saurais vous l'expliquer clairement. Il faut toucher au CSS de votre forum évidement, je ne sais pas si vous avez des bases en code?

Je suis navrée de ne pas pouvoir vous aider d'avantage, j'ai encore beaucoup à apprendre dans le codage. Mais ce genre d'affichage est très utilisé en ce moment et je suis sure que ce sont des onglets. J'espère que quelqu'un de plus compétent que moi saura vous aiguiller.

Kokari
Nouveau membre

Féminin
Messages : 3
Inscrit(e) le : 25/10/2010

http://poke-celestia.darkbb.com/forum
Kokari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'acceuil personalisé !

Message par Funplay3 le Dim 31 Oct 2010 - 12:59

D'accord, de toute façon je ne cherche pas à faire pareil, mais s'il y avait un tuto, j'aimerai bien que l'on me dise où se trouve ce-dernier. Je te remercie de ta réponse Kokari Wink

Funplay3
Nouveau membre

Messages : 25
Inscrit(e) le : 17/03/2010

http://naruto-no-war.forumactif.org/forum.htm
Funplay3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'acceuil personalisé !

Message par Invité le Dim 31 Oct 2010 - 13:07

Bonjour,

Cette question a déjà été souvent posée, il s'agit d'un petit tableau à onglets en page d'accueil.
Voici le script à enregistrer en .js puis à hébérger:
Code:
function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }         
}

La partie CSS - à personnaliser:
Code:
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  cursor: pointer;
  margin-bottom: -1px;
}
.mon_onglet:hover{
  background: #b8efa1;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-bottom: 1px solid #ffffff;
  cursor: pointer;
  margin-bottom: -1px;
}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
        margin: -1px;         
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

Et le message d'accueil - a remplir avec le contenu souhaité:
Code:
<script src="ADRESSE_DU_FICHIER.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></ul>

Cordialement.

Invité
Invité


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

Résolu Re: Page d'acceuil personalisé !

Message par Funplay3 le Dim 31 Oct 2010 - 13:27

D'accord je vous remercie, mais j'ai juste une petite question comment j'héberge le premier code en .js car j'en ai aucune idée ?

Funplay3
Nouveau membre

Messages : 25
Inscrit(e) le : 17/03/2010

http://naruto-no-war.forumactif.org/forum.htm
Funplay3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'acceuil personalisé !

Message par Arlem le Dim 31 Oct 2010 - 13:57

Voici une liste d'hébergeurs avec entre autres des hébergeurs de fichiers .js (JavaScript) :
http://www.patmax.info/hebergeurs/

Arlem
+ Hyperactif +

Messages : 2550
Inscrit(e) le : 30/06/2009

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

Résolu Re: Page d'acceuil personalisé !

Message par Funplay3 le Dim 31 Oct 2010 - 14:10

Merci Wink

Funplay3
Nouveau membre

Messages : 25
Inscrit(e) le : 17/03/2010

http://naruto-no-war.forumactif.org/forum.htm
Funplay3 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'acceuil personalisé !

Message par Kokari le Dim 31 Oct 2010 - 14:35

Je suis désolée de vous embêter mais ne peut on pas simplement héberger sur une page HTML de notre propre forum? Juste à titre d'information ?

Kokari
Nouveau membre

Féminin
Messages : 3
Inscrit(e) le : 25/10/2010

http://poke-celestia.darkbb.com/forum
Kokari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'acceuil personalisé !

Message par Invité le Dim 31 Oct 2010 - 14:41

Bonjour,

C'est à tester, cela doit être possible. Il faut remplacer <script src="ADRESSE_DU_FICHIER.js"></script> par <script src=/-h1.htm></script> .
Faites attention à bien remplacer -h1 par l'ID de votre page HTML.

Cordialement.

Invité
Invité


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

Résolu Re: Page d'acceuil personalisé !

Message par Kokari le Dim 31 Oct 2010 - 14:46

Merci beaucoup de votre réponse rapide. C:

Kokari
Nouveau membre

Féminin
Messages : 3
Inscrit(e) le : 25/10/2010

http://poke-celestia.darkbb.com/forum
Kokari 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