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.

Le Deal du moment :
Cartes Pokémon 151 : où trouver le ...
Voir le deal

    [SUJETS] Mise en forme des sujets

    Zaetsu
    Zaetsu
    MasculinAge : 28Messages : 20

    Sam 13 Juin 2015 - 21:48

    Ma demande



    Bonjour ! Alors voilà je n'arrive absolument pas à faire en sorte que mes sujets dans mes forums apparaissent comme ma page d'accueil. Je cherche à avoir un cadre comme sur ma PA, avec les bords arrondis, les mêmes couleurs...

    Je voudrais que ça ressemble à ceci :[SUJETS] Mise en forme des sujets Exneve10
    Schémas : Car pour le moment ça ne ressemble qu'à ceci... [SUJETS] Mise en forme des sujets Exneve11
    Tailles des éléments : Environ 1350 pixels de largeurs pour le background des sujets, un espace de 200 pixels pour le titre du sujet, et une hauteur de 150 pixels de hauteur pour les sujets.
    Effets voulus : Je voudrais si possible des effets arrondis du background. Comme sur les screens de mon forum que je vous ai envoyés.
    Version de votre forum : PHPBB3

    Ressources
    Je vous envoie mon CSS de PA du forum ainsi que la template des catégories du forum (qui devaient me servir aussi d'exemple pour faire ma template des sujets mais que je n'ai pas réussi à exploiter pour avoir le même rendu...)

    Code:
    /* MISE EN FORME DES CATEGORIES ET FORUMS (css)*/

    .sujets_titre
    {
      clear: both;
      height: 100px;
      margin-top: 50px;
    }
    .sujetstitre_bloc
    {
    position: relative;
    z-index: 1;
    display: block;
    width: 90%;
    height: 20px;
    margin-left: auto;
    margin-right : auto;
    background-color: #a8a8a8;
    transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -htm-transform: rotate(5deg);
    }
    .sujetstitre_content
    {
    position: absolute;
    z-index: 2;
    display: block;
    width: 950px;
    margin-left: auto;
      margin-right: auto;
      margin-top: -40px;
    text-align: center;
    padding: 2px;
      border-bottom: 3px dotted #191817;
    }
    .sujetstitre
    {
    color: #454545;
    font-family: arial;
    font-size: 26px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000000;
    }

    .topic_bloc
    {
      width: 950px;
      margin-left: auto;
      margin-right: auto;
      margin-top: -30px;
    }
    .topic
    {
    float: left;
    width: 460px;
    height: 250px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 50px;
    }
    a.topiclink
    {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      color: #454545;
      text-align: center;
    font-family: arial;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #000000;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    a.topiclink:hover
    {
      letter-spacing: 4px;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .topic_contenu
    {
      position: relative;
      z-index: 1;
      width: 98%;
      height: 90%;
      padding: 4px;
      margin-left: auto;
      margin-right: auto;
      margin-top: -8px;
      background-color: #d9d9d9;
      border-left: 1px dotted #191817;
      border-right: 1px dotted #191817;
      border-bottom: 1px dotted #191817;
      border-top: 5px solid #191817;
    }
    .description
    {
      display: block;
      width: 400px;
      margin: auto;
      height: 100px;
      overflow: hidden;
      border: 2px solid #9c9c9c;
      box-shadow: 1px 1px 1px #191817;
      -moz-box-shadow: 1px 1px 1px #191817;
      -htm-box-shadow: 1px 1px 1px #191817;
      -webkit-box-shadow: 1px 1px 1px #191817;
      -o-box-shadow: 1px 1px 1px #191817;
    }
    .description_contenu
    {
      position: absolute;
      display: block;
      width: 391px;
      height: 91px;
      overflow: auto;
      background-color: #191817;
      font-size: 10px;
      color: #9c9c9c;
      text-align: justify;
      padding: 5px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .description_contenu:hover
    {
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .icone_stats
    {
      width: 300px;
      margin: auto;
      margin-top: -30px;
    }
    .stats_lastpost
    {
      display: block;
      width: 160px;
      height: 80px;
      margin-left: 10px;
      background-color: #c8c8c8;
      border: 1px solid #b5b5b5;
      padding: 5px;
      text-align: center;
    }
    .stats
    {
      display: block;
      margin-bottom: 5px;
      border-bottom: 1px dotted #b5b5b5;
      padding-bottom: 5px;
      font-size: 10px;
      color: #8f8f8f;
    }
    .lastpost
    {
      display: block;
      font-size: 11px;
    }
    .sujets
    {
      position: relative;
      z-index: 3;
      display: block;
      height: 0;
        background: #191817;
      color: #b5b5b5;
      overflow: hidden;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .ouverture_sujets
    {
      position: relative;
      z-index: 3;
      display: block;
      float: right;
      width: 120px;
      margin-right: 20px;
      background: #191817;
      color: #b5b5b5;
      font-size: 11px;
      text-align: center;
      padding: 4px;
      -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    }
    .sujets:hover .sujets
    {
      height: 50px;
      background: #191817;
      color: #b5b5b5;
      padding: 4px;
      overflow: auto;
        transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .sujets a
    {
      color: #b5b5b5 !important;
      text-shadow: 1px 1px 0px #000000;
    }
    .sujets a:hover
    {
      color: #ffffff !important;
    }


    Template Index body et index box
    Code:
    {JAVASCRIPT}
    <!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
    <p>{CURRENT_TIME}</p>
    <br class="clear" />

    <!-- BEGIN switch_user_login_form_header -->
    <div class="panel">
       <div class="inner"><span class="corners-top"><span></span></span>
          <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
             <div class="user_login_form center">
                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label> 
                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label> 
                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
                {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
                <!-- BEGIN switch_fb_connect -->
                <span class="fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
                <!-- END switch_fb_connect -->
             </div>
          </form>
       <span class="corners-bottom"><span></span></span></div>
    </div>
    <!-- END switch_user_login_form_header -->

    <!-- BEGIN message_admin_index -->
       <div class="panel introduction">
          <div class="inner"><span class="corners-top"><span></span></span>
       <!-- BEGIN message_admin_titre -->
          <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
       <!-- END message_admin_titre -->

       <!-- BEGIN message_admin_txt -->
          <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
       <!-- END message_admin_txt -->
          <span class="corners-bottom"><span></span></span></div>
       </div>
    <!-- END message_admin_index -->

    {CHATBOX_TOP}
    {BOARD_INDEX}

    <!-- BEGIN disable_viewonline -->

       <!-- BEGIN switch_viewonline_link -->
       <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></div>
       <!-- END switch_viewonline_link -->

       <!-- BEGIN switch_viewonline_nolink -->
       <div class="h3">{L_WHO_IS_ONLINE}</div>
       <!-- END switch_viewonline_nolink -->

    <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" class="img-whois" />
    <p>{TOTAL_USERS_ONLINE}<br />
    {RECORD_USERS}

    <br />
    {LOGGED_IN_USER_LIST}

    {L_ONLINE_USERS}
    {L_CONNECTED_MEMBERS}<br />
    {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

    <br />
    <em>{LEGEND} : {GROUP_LEGEND}</em>

    </p>
    <div class="clear"></div>

       <!-- BEGIN switch_statistics_link -->
       <div class="h3"><a href="{U_STATISTICS}" rel="nofollow">{L_STATISTICS}</a></div>
       <!-- END switch_statistics_link -->

       <!-- BEGIN switch_statistics_nolink -->
       <div class="h3">{L_STATISTICS}</div>
       <!-- END switch_statistics_nolink -->

    <p class="page-bottom">
    {TOTAL_POSTS}
    </p>
    <p class="page-bottom">
    {TOTAL_USERS}
    </p>
    <p class="page-bottom">
    {NEWEST_USER}
    </p>
       <!-- BEGIN switch_chatbox_activate -->
       <div class="h3"><a href="{S_JOIN_CHAT}" target="ChatBox">{CHATBOX_NAME}</a></div>
       <div class="page-bottom">
       {TOTAL_CHATTERS_ONLINE} : 
       {CHATTERS_LIST}<br />
       </div>
          <!-- BEGIN switch_chatbox_popup -->
          <div id="chatbox_popup"></div>
          <script type="text/javascript">
          insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
          </script>
          <!-- END switch_chatbox_popup -->
       <!-- END switch_chatbox_activate -->
    <!-- END disable_viewonline -->

    {CHATBOX_BOTTOM}

    <!-- BEGIN switch_user_login_form_footer -->
    <div class="panel">
       <div class="inner"><span class="corners-top"><span></span></span>
          <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
             <div class="user_login_form center">
                <label>{L_USERNAME} : <input class="post" type="text" size="10" name="username" /></label> 
                <label>{L_PASSWORD} : <input class="post" type="password" size="10" name="password" /></label> 
                <label>{L_AUTO_LOGIN} : <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> 
                {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
                <!-- BEGIN switch_fb_connect -->
                <span class="fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                <fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button>
                <!-- END switch_fb_connect -->
             </div>
          </form>
       <span class="corners-bottom"><span></span></span></div>
    </div>
    <!-- END switch_user_login_form_footer -->

    <br style="clear:both" />

    <!-- BEGIN switch_legend -->
    <ul id="picture_legend">
       <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
       <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
       <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
    </ul>
    <!-- END switch_legend -->

    {AUTO_DST}

    <!-- BEGIN switch_fb_index_login -->
    <div id="fb-root"></div>
    <script>
        FB.init({
          appId      : {switch_fb_index_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_fb_index_login -->

    Et index box

    Code:
    <ul class="linklist">
       <!-- BEGIN switch_user_logged_in -->
       <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> • </li>
       <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a> • </li>
       <!-- END switch_user_logged_in -->
       <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
       <!-- BEGIN switch_user_logged_in -->
       <li class="rightside"><a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a></li>
       <!-- END switch_user_logged_in -->
    </ul>

    <!-- BEGIN catrow -->
       <!-- BEGIN tablehead -->
          <div class="forabg">
             <div class="inner"><span class="corners-top"><span></span></span>
             <ul class="topiclist">
                <li class="header">
                   <dl class="icon">
                      <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
                      <dd class="lastpost"><span>{L_LASTPOST}</span></dd>
                   </dl>
                </li>
             </ul>
             <ul class="topiclist forums">
       <!-- END tablehead -->

       <!-- BEGIN forumrow -->
                <li class="row">
                   <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                      <dd class="dterm">
                         <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                            <h{catrow.forumrow.LEVEL} class="hierarchy">
                            <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                            </h{catrow.forumrow.LEVEL}>
                            <br />
                            {catrow.forumrow.FORUM_DESC}

                            <!-- BEGIN switch_moderators_links -->
                               {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                            <!-- END switch_moderators_links -->
                            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                            <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                         </div>
                      </dd>
                           <dd class="lastpost">
                                <!-- BEGIN avatar -->
                                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                <!-- END avatar -->

                         <span>
                         <!-- BEGIN switch_topic_title -->
                         <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                         <!-- END switch_topic_title -->
                         {catrow.forumrow.USER_LAST_POST}
                         </span>
                      </dd>
                   </dl>
                </li>
       <!-- END forumrow -->

       <!-- BEGIN tablefoot -->
                </ul>

             <span class="corners-bottom"><span></span></span></div>
                     
          </div>
       <!-- END tablefoot -->
    <div style="height:30px;"> </div>
    <!-- END catrow -->

    <!-- BEGIN switch_on_index -->
    <ul class="linklist">
       <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a> • </li>
       <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a> •&nbsp;</li>
       <li class="last"><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
       <!-- BEGIN switch_delete_cookies -->
       <li class="rightside"><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
       <!-- END switch_delete_cookies -->
    </ul>
    <!-- END switch_on_index -->

    Donc voilà je pense ne rien avoir oublié mais s'il manque quelque chose et si quelqu'un est disposé à m'aider je suis preneur car là mon frère est parti et tout seul je n'y arrive pas du tout... Un grand merci d'avance en tous cas ♥
    • Revenir en haut
    Zaetsu
    Zaetsu
    MasculinAge : 28Messages : 20

    Dim 14 Juin 2015 - 20:37

    J'ai réussi à le faire moi-même au final, j'ai mis du temps à comprendre. scratch

    Je passe le sujet en "terminé".

    Bisous bisous.
    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Sam 27 Avr 2024 - 13:32