Cadre du forum coupé en angle

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

Résolu Cadre du forum coupé en angle

Message par Cenobite le Jeu 25 Aoû 2016 - 23:34

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous!
Je solicite votre aide pour mon problème que voici.
Alors voilà,j'aimerais avoir les coins du cadre du forum
coupé en angle plutôt que de les avoirs arrondis.
Voici mon CSS:
Code:
/*Arrondir le cadre du forum*/
.bodyline {
background-color: #00000;
border: 4px dotted #0598e4;
box-shadow: inset 1px 1px 15px #5a94df;
border-radius: 50px;
padding-left: 50px;
padding-right: 50px;
}
.forumline {
background-color: #00000;
border: 1px dashed #0598e4;
box-shadow: inset 1px 1px 15px #5a94df;
border-radius: 15px;
padding: 10px;
}
/*Partie haute des messages*/
#haut_post{
height:40px;
width:742px;
background-image: url('http://image.noelshack.com/fichiers/2016/34/1472110733-1a.png');
background-repeat:no-repeat;
}
/*Partie centre des messages*/
#centre_post{
width:742px;
background-image: url('http://image.noelshack.com/fichiers/2016/34/1472110741-1b.png');
}
/*Partie basse des messages*/
#bas_post{
height:40px;
width:742px;
background-image: url('http://image.noelshack.com/fichiers/2016/34/1472110746-1c.png');
background-repeat:no-repeat;}
/*contenu messages */
.contenu_post{padding:10px;}
Merci!


Dernière édition par Cenobite le Dim 28 Aoû 2016 - 20:33, édité 1 fois

Cenobite
*

Masculin
Messages : 46
Inscrit(e) le : 27/10/2015

http://thezone.forumactif.com
Cenobite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre du forum coupé en angle

Message par ◦Jay◦ le Ven 26 Aoû 2016 - 16:49

Bonjour Cenobite, il faudra dans un premier temps, déterminer la largeur que vous souhaitez puis faire l'image et enfin, la couper en trois partie comme pour les messages. Voici un exemple, les images que j'ai faites pour le test :

images 1150px de large:

L'image du haut :


L'image du milieu :


L'image du bas :

Vous allez à nouveau vous rendre dans la partie templates pour en modifier 2, le premier Overall_header, recherchez :

Code:
<table class="bodylinewidth"

et remplacez par :

Code:
<div id="haut_forum"></div>
<div id="centre_forum">
   <table class="bodylinewidth"

Enregistrez et publiez.

Maintenant, dans le template overall_footer_end, recherchez :

Code:
<!-- END switch_footer_links -->
         </div>
         {PROTECT_FOOTER}
      </td>
   </tr>
</table>

et remplacez par :

Code:
<!-- END switch_footer_links -->
         </div>
         {PROTECT_FOOTER}
      </td>
   </tr>
</table>
</div>
<div id="bas_forum"></div>

À présent, il vous faut faire la partie css en fonction de l'image que vous aurez créée :

Code:
#haut_forum{
width: largeur en px;
height: hauteur en px;
background: url('url de votre image');
background-repeat:no-repeat;
margin: 0 auto;
}
#centre_forum{
width: largeur en px;
background: url('url de votre image');
background-repeat:repeat-y;
margin: 0 auto;
}
#bas_forum{
width: largeur en px;
height: hauteur en px;
background: url('url de votre image');
background-repeat:no-repeat;
margin: 0 auto;
}


Voici l'exemple avec l'image du test :

CSS:
Code:
#haut_forum{
width: 1150px;
height: 50px;
background: url('http://image.noelshack.com/fichiers/2016/34/1472141292-aaa1.png');
background-repeat:no-repeat;
margin: 0 auto;
}
#centre_forum{
width: 1150px;
background: url('http://image.noelshack.com/fichiers/2016/34/1472141297-aaa2.png');
background-repeat:repeat-y;
margin: 0 auto;
}
#bas_forum{
width: 1150px;
height: 50px;
background: url('http://image.noelshack.com/fichiers/2016/34/1472141305-aaa3.png');
background-repeat:no-repeat;
margin: 0 auto;
}

Bien à vous.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2512
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re

Message par Cenobite le Ven 26 Aoû 2016 - 22:55

Hey,Hey!
Re salut Jay! Wink
C'est presque tout bon du premier coup sauf que...
j'ai un petit problème avec le code le bas du forum
(<!-- END switch_footer_links -->).
Quand j'essais de mettre ton code,il me met un </div>
en rouge. J'ai donc pensé enlever le </div> suivant le </table>
mais ça ne fonctionne pas.
Voici mon Code overall_footer_end :
Code:
<!-- BEGIN html_validation -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table>
   <tr>
      <td>
         <div>
            <div>
               <div>
<!-- END html_validation -->
               </div>
            </div>
            <!-- BEGIN switch_footer_links -->
            <div align="center">
               <div class="gen">
                  <!-- BEGIN footer_link -->
                     <!-- BEGIN switch_separator -->&nbsp;|&nbsp;<!-- END switch_separator -->
                     <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
                  <!-- END footer_link -->
               </div>
            </div>
            <!-- END switch_footer_links -->
         </div>
         {PROTECT_FOOTER}
      </td>
   </tr>
</table> 
<div id="bas_forum"></div>
<!-- BEGIN switch_facebook_login -->
<div id="fb-root"></div>
<script type="text/javascript">
    FB.init({
      appId      : {switch_facebook_login.FACEBOOK_APP_ID},
      cookie    : true,
      xfbml      : true,
      oauth      : true,
      version    : 'v2.3'
    });

  (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>
<!-- END switch_facebook_login -->

<!-- BEGIN switch_facebook_logout_TMP -->
<script type="text/javascript">
//<![CDATA[
FB.Event.subscribe('auth.logout', function(response) {
   if ($('a#logout'))
   {
      var lien_redir = $('a#logout').attr('href');

      if ($('a#logout').attr('href') && $('a#logout').attr('href') != '')
      {
         document.location.href = 'http://{switch_facebook_logout.SERVER_NAME}/' + lien_redir;
      }
   }
});

$(document).ready( function() {
   $('a#logout').click( function() {
      FB.logout();
   } );
});
//]]>
</script>
<!-- END switch_facebook_logout_TMP -->

<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>

Merci et à+

Cenobite
*

Masculin
Messages : 46
Inscrit(e) le : 27/10/2015

http://thezone.forumactif.com
Cenobite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre du forum coupé en angle

Message par ◦Jay◦ le Sam 27 Aoû 2016 - 9:16

Oui, c'est normal, on l'a ouvert dans l'autre template.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2512
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re

Message par Cenobite le Dim 28 Aoû 2016 - 1:44

Ok merci jay,c'est tout bon!
Mais est-ce que tu pourrais m'aider pour le cadre intérieur aussi?

Un gros MERCI Jay!
À+

Cenobite
*

Masculin
Messages : 46
Inscrit(e) le : 27/10/2015

http://thezone.forumactif.com
Cenobite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre du forum coupé en angle

Message par ◦Jay◦ le Dim 28 Aoû 2016 - 6:42

Que souhaitez vous faire à l'intérieur ? Refaire le même cadre en plus petit ? Si oui, le plus simple serait de mettre le fond de forum transparent puis de modifier l'image de fond pour remettre un deuxième fond. Wink Voyez-vous ce que je veux dire ?

Actuellement, votre image de fond est comme ceci :



Donc, la faire comme ceci :



Cordialement.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2512
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re

Message par Cenobite le Dim 28 Aoû 2016 - 9:23

Re salut Jay!
Oui c'est exactement ce que je voudrais.

Merci et À+

Cenobite
*

Masculin
Messages : 46
Inscrit(e) le : 27/10/2015

http://thezone.forumactif.com
Cenobite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre du forum coupé en angle

Message par ◦Jay◦ le Dim 28 Aoû 2016 - 13:17

Et bien vous avez juste à refaire l'image de fond. scratch



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2512
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re

Message par Cenobite le Dim 28 Aoû 2016 - 18:22

Re salut Jay!
Désolé mais pour celui-là,je suis complètement largué!
En premier lieu tu me dis cela:
Si oui, le plus simple serait de mettre le fond de forum transparent puis de modifier l'image de fond pour remettre un deuxième fond. a écrit:
Heuuuuuuuu! On parle bien de mettre une image de fond en transparence ici non?
En suite,tu me dis cela:
Et bien vous avez juste à refaire l'image de fond. a écrit:
Ben...désolé mais, tu peux m'expliquer les étapes stp? Les 3 coupures je les faient comment?

Merci et À+

Cenobite
*

Masculin
Messages : 46
Inscrit(e) le : 27/10/2015

http://thezone.forumactif.com
Cenobite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre du forum coupé en angle

Message par ◦Jay◦ le Dim 28 Aoû 2016 - 18:25

Actuellement, l'image que vous avez mis en fond de forum est comme ceci :



Sauf qu'ici, c'est juste pour l'exemple, elle n'est ni à la bonne taille ni coupée en trois.

Il faudra la faire comme ceci, à la bonne taille et la couper en trois partie :




◦Jay◦
Créactif
Créactif

Masculin
Messages : 2512
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re

Message par Cenobite le Dim 28 Aoû 2016 - 18:33

Re salut Jay!
Et tu peux m'expliquer comment je coupe ça en 3 parties?
Y'a 2 cadres là!
Désolé pour le dérengement.

Merci et À+

Cenobite
*

Masculin
Messages : 46
Inscrit(e) le : 27/10/2015

http://thezone.forumactif.com
Cenobite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre du forum coupé en angle

Message par ◦Jay◦ le Dim 28 Aoû 2016 - 18:35

Comme cela :









◦Jay◦
Créactif
Créactif

Masculin
Messages : 2512
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre du forum coupé en angle

Message par ◦Jay◦ le Dim 28 Aoû 2016 - 19:48

Il faudra aussi retirer le cadre de votre forum, dans votre PA>Affichage>Images et Couleurs>Couleurs>Couleur du cadre du forum : Supprimez la couleur puis enregistrez et faites de même à Couleur intérieure du cadre du forum.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2512
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re

Message par Cenobite le Dim 28 Aoû 2016 - 20:33

Re salut Jay!
Tout est ok! Un gros MERCI pour ton aide! Wink

Cenobite
*

Masculin
Messages : 46
Inscrit(e) le : 27/10/2015

http://thezone.forumactif.com
Cenobite 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