AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


3 résultats trouvés pour auteur_Fangs

[HTML5 & CSS3] - Boutons 'Nouveau' & 'Répondre' originaux - Ven 3 Juil 2015 - 16:23




Boutons 'Nouveau' & 'Répondre" originaux


Bonjour à tous ! Alors voici un petit ls concernant les boutons 'Nouveau' et 'Répondre' qui servent respectivement à créer un nouveau sujet et à répondre à un autre, mais ça, vous le saviez déjà.

C'est pourquoi j'ai choisi aujourd'hui de les placer un peu comme des widgets sur la page de visualisation des sujets et des messages.


Pour avoir un petit aperçu je vous invite à checker ce lien où les boutons sont en position fixe sur le côté du forum et où les boutons bougent pour se dévoiler à 100% quand on les survole.



Nous n'allons utiliser dans ce ls que les template 'viewforum_body' et 'viewtopic_body' ainsi que nos CSS.


Je vous rappelle que, vu que nous modifions les templates il sera necessaire que votre forum tourne sous PHPBB2.

Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  :toto:



Occupons-nous donc tout d'abord de nos deux templates. Dans le premier qui est 'viewforum_body' nous allons supprimer ce code qui apparaît deux fois:


Code:

<td align="left" valign="middle" width="50">
   <!-- BEGIN switch_user_logged_in -->
   <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}1" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
   <!-- END switch_user_logged_in -->
</td>


Nous allons maintenant tout simplement intégrer ce code:


Code:

<span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>


Que vous pouvez placer n'importe ou dans votre template. Le mieux étant de le mettre à la première ou à la dernière ligne pour s'y retrouver.
Passons maintenant au second template, 'viewtopic_body'. Nous allons procéder de la même manière. Vous allez rechercher ce code qui apparaît deux fois également et que vous allez supprimer.


Code:

<td align="left" valign="middle" nowrap="nowrap">
   <span class="nav">
   <!-- BEGIN switch_user_authpost -->
   <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
   <!-- END switch_user_authpost -->
   <!-- BEGIN switch_user_authreply -->
   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
   <!-- END switch_user_authreply -->
   </span>
</td>   


Et nous allons ensuite intégrer ce code que vous pouvez placer également n'importe où SAUF entre les balises et présentes dans ce template.


Code:

<span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>
<span class="reply"><a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" class="reply_img"/></a></span>


Vous pouvez maintenant enregistrer et publier vos templates, et nous allons s'occuper des CSS à présent. Un CSS ici qui n'est pas très compliqué et qui fait appel aux propriétés 'transform' et 'transition' de CSS3.


Code:
/* DEBUT MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */

.new_topic {
  position: fixed;
  top: 15px;
  left: -20px;
  -webkit-transition: 1s;
  transition: 1s;
}

.new_topic:hover {
  left: 0px;
}

.reply {
  position: fixed;
  top: 75px;
  left: -20px;
  -webkit-transition: 1s;
  transition: 1s;
}

.reply:hover {
  left: 0px;
}

/* FIN MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */


Une dernière chose avant de vous laisser personnaliser. Pour vos images 'Nouveau' et 'Répondre' que vous pouvez bien évidemment modifier dans les réglages de votre forum.
Et bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?



Si vous avez une question, je vous rappelle que cette section est disponible !


Fangs

[HTML5 & CSS3] - Catégories & forums modernes - Mer 1 Juil 2015 - 18:58




Catégories et forums modernes

Bonjour à tous !  cheers


Me voici avec un nouveau libre service ! Ca faisait très longtemps que j'avais pas codé et du coup cet après midi je me suis dit qu'il était temps de s'y remettre !


Ce que je vous propose la c'est une mise en page des catégories et forums que j'aime pas mal. Je me suis bien débrouillé :)


Pour avoir un petit aperçu je vous invite à regarder cette image. (À noter que la description de forum apparaît au survol de l'image).


Il y a donc trois étapes à suivre pour ce LS donc:
- Le HTML dans les templates
- Le CSS
- Quelques codes dans la description de vos forums et dans votre titres de catégories


Je vous rappelle que, vu que nous modifions les templates il sera necessaire que votre forum tourne sous PHPBB2 ou PUNBB.

Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  :toto:

Assez parlé, tout d'abord on va premièrement se rendre dans le template 'index-box'. Vous allez tout selectionner et remplacer par ceci:


Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<div class="index_fc">
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="categorie">{catrow.tablehead.L_FORUM}</div>
   <!-- END tablehead -->
   <!-- BEGIN forumrow -->
      <div class="forum">
                <div class="forum_case">
                     <div class="description">
                        {catrow.forumrow.FORUM_DESC}
                     </div>
                     <div class="bottom_section"></div>
                     <div class="bottom_border"></div>                  
                     <div class="forum_name">
                           <a class="forum_link" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                     </div>
                     <div class="tnm">
                        {catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
                     </div>
                </div>
      </div>
   <!-- END forumrow -->

<!-- END catrow -->
</div>

N'oubliez pas de publier votre template. Donc à ce stade-ci, votre forum doit être aussi laid que possible. C'est pourquoi nous allons nous occuper des CSS, et plus particulièrement ceux-ci que vous allez coller dans vos feuilles de style:

Code:

/* DEBUT MISE EN PAGE CATEGORIES ET FORUMS - FANGS */
/* clearfix categorie - regle un bug*/
.index_fc::after {
  clear: both;
  content: "";
  display:block;
}

.categorie {
  position: relative;
  clear: both;
  height: 50px;
  position: relative;
  margin-top: 50px;
  margin-bottom: -18px;
  margin-left: 35px;
  z-index: 2;
}

.categorie_txt {
  position: relative;
  font-size: 40px;
  font-family: 'Josefin Slab', Georgia, serif;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  text-align: right;
}

.forum {
  width: 980px;
  margin: auto !important;
}

.forum_case {
  float: left;
  width: 490px;
  height: 245px;
  background-color: #111418;
}

.description {
  position: relative;
  width:490px;
  height: 245px;
  margin: 0 !important;
  padding: 0 !important;
}

.bottom_section {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  background-color: #fff;
  opacity: 0.3;
}

.bottom_border {
  position: relative;
  margin-top: -40px;
  width: 490px;
  height: 40px;
  border-top: 1px solid #fff;
}

.tnm {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-right: 11px;
  text-align: right;
  font-size: 12px;
  color: #ffffff;
  text-shadow: 1px 1px 2px #000;
  font-family: Georgia, Arial, serif;
}

.forum_name {
  position: relative;
  margin-top: -30px;
  height: 30px;
  width: 480px;
  margin-left: 10px;
  z-index: 2;
}

.forum_link {
  color: #fff !important;
  text-shadow: 1px 1px 2px #000;
  font-variant: small-caps !important;
  text-decoration: none;
  font-size: 16px;
  font-family: Georgia, Arial, serif;
}

.description_img {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
}

.description_img:hover {
  position: relative;
  width: 490px;
  height: 245px;
  margin-top: -245px;
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  transform: all;
  opacity: 0.2;
}

.description_txt {
  position: relative;
  width: 460px;
  height: 215px;
  padding: 15px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-size: 12px;
  font-family: Georgia, Arial, serif;
  text-align: justify;
}

/* FIN MISE EN PAGE CATEGORIES ET FORUMS - FANGS */

Les deux premières étapes sont terminées. Mais ce n'était que du copier-coller. Les deux porchaines risquent d'être un peu plus longues.


Vous allez vous rentre dans la configuration de vos catégories et forums et pour chaque titre de catégories vous allez entrer ce code:


Code:
<span class="categorie_txt">Nom de votre catégorie</span>

Et enfin vous allez vous rendre dans les description de vos forums et allez utiliser ce code:


Code:
<div class="description_txt">
       Lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet lorem impsum dolor sit amet.    
</div>
<div class="description_img">
      <img alt="**" src="URL DE L'IMAGE 490*245" />
</div>

Cette étape peut paraître longue mais elle est nécessaire.


Bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?



Si vous avez une question, je vous rappelle que cette section est disponible !


Fangs

Menu déroulant moderne (HTML & CSS3) - Lun 10 Nov 2014 - 22:41






Menu déroulant moderne

(HTML & CSS3)


Bonjour à tous ! :gentleman:

Alors, comme son nom l'indique, dans ce ls, je vais vous ai réalisé un petit menu déroulant très moderne pour vos forums et vos pages web. Il est uniquement fait à partir de HTML et de CSS3, la dernière version du CSS qui propose beaucoup de possibilités.

Ce ls est donc divisé en deux parties:

- Le codage HTML
- Le codage CSS

Sachez que ce menu déroulant, qui peut servir de barre de navigation, est totalement personnalisable ! Il suffit de changer les textes dans le HTML et de changer des paramètres dans le CSS, et pour les plus à l'aise en codage, modifier cette barre à l'infini et selon leurs envies !
Attention
Je vous rappelle que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci :toto:

Assez parlé, passons aux choses sérieuses.

Aperçu de la barre de navigation

Aperçu
Voici donc un petit aperçu de ce que cela donne:
barre de navigation ; barre au survol

Codage: HTML


Voici donc le code que vous pouvez disposer où vous voulez: dans une page web, une template ou dans un message. (Si vous publiez ce code dans une template, n'oubliez pas de la publier par la suite).

Code:

<center>
        
   <div class="barre_nav">
               
      <div class="nav_1">
                          
         <div class="nav_txt">
                    Titre 1<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />     
      </div>
               
      <div class="nav_2">
                          
         <div class="nav_txt">
                    Titre 2<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
      </div>
               
      <div class="nav_3">
                          
         <div class="nav_txt">
                    Titre 3<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />
      </div>
               
      <div class="nav_4">
                          
         <div class="nav_txt">
                    Titre 4<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br /> 
      </div>
               
      <div class="nav_5">
                          
         <div class="nav_txt">
                    Titre 5<br /><br />       
         </div><br /><a href="#">  Lien 1</a><br /><a href="#">  Lien 2</a><br /><a href="#">  Lien 3</a><br /><a href="#">  Lien 4</a><br />   
      </div>
           
   </div>
</center>


Codage: CSS


Et voici donc le code CSS qui en découle ! :)

Code:

/* DEBUT BARRE DE NAVIGATION */
.nav_txt {
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  background: #091016;
  font-size: 20px;
  height: 25px;
  text-shadow:1px 1px 2px #000000;
  border-bottom: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
}
.barre_nav a{
  text-align: center;
  font-variant: small-caps;
  font-family: Gerogia;
  color: #e6e7e7;
  font-size: 15px;
  margin-left: 5px;
  text-decoration: none !important;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:  0.2s all;
  transition:  0.2s all;
}
.barre_nav a:hover {
  text-decoration: none !important;
  letter-spacing: 2px;
  -moz-transition:  0.2s all;
  -webkit-transition:  0.2s all;
  -o-transition:  0.2s all;
  -ms-transition:  0.2s all;
  -khtml-transition:    0.2s all;
  transition:    0.2s all;
}
.barre_nav {
  width:960px; /* à adapter selon la largeur de votre forum */
  height:175px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 100px; /* à adapter selon les éléments présents au dessus de votre barre */
  overflow: hidden;
  z-index: 10;
  border-top: 1px solid #e6e7e7;
}
.nav_1 {
  width:190px;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_2 {
  width:190px;
  height:25px; 
  background: #080e13; 
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_3 {
  width:190px;
  height:25px;
  background: #080e13; 
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_4 {
  width:190px;
  height:25px;
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_5 {
  width:190px;
  height:25px; 
  background: #080e13;
  float: left;
  border: 1px solid #091016;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
  overflow: hidden;
}
.nav_1:hover {
  width:190px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_2:hover {
  width:190px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_3:hover {
  width:190px;
  height:140px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_4:hover {
  width:190px;
  height:125px;
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}
.nav_5:hover {
  width:190px;
  height:125px; 
  box-shadow: 0px 0px 3px #000000;
  -moz-transition:  0.5s all;
  -webkit-transition:  0.5s all;
  -o-transition:  0.5s all;
  -ms-transition:  0.5s all;
  -khtml-transition:  0.5s all;
  transition:  0.5s all;
}

/* FIN BARRE DE NAVIGATION */


Question ?

Si vous avez une question, je vous rappelle que cette section est disponible !

Voilà, voilà, je vous remercie. :)


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 14:13