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 : -45%
WHIRLPOOL OWFC3C26X – Lave-vaisselle pose libre ...
Voir le deal
339 €

    Personnaliser widgets latérale ouvrir fermer

    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Sam 14 Fév 2015 - 9:53

    Bonjour, j'aimerais savoir si vous pouvez arrondir juste les 2 côté du haut du cadre du titre "derniers sujets" et de bien cadré la listes des derniers sujets s'il vous plait.

    Schéma :
    Spoiler:


    Code CSS :
    Code:
    /* WIDGETS */

    #left /* changer par right pour le widget de droite */
    {
      position: fixed;
      top: 29;
      left: 0; /* changer par right pour le widget de droite */
      width: 235px !important;
      height: 190%;
      overflow: auto;
      border-right: 20px solid #ae3e2c; /* changer la couleur bordure - changer par border-left pour le widget de droite */
      margin-left: -235px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
        background-color :#09B8ED;
    }
    .button_widgets
    {
      position: fixed;
      z-index: 999;
      top: 50%;
      left: 0; /* changer par right pour le widget de droite */
      margin-top: -30px;
      margin-left: 0px; /* changer par margin-right pour le widget de droite */
      width: 60px;
      height: 150px;
      background-image :url("http://www.pixenli.com/images/1423/1423774461072732200.jpg");
      transition: 1s;
    }
    .button_widgets a
    {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50px;
    }
    .button_widgets .close
    {
      display: none;
    background-image :url("http://www.pixenli.com/images/1423/1423774461072732200.jpg");
    /* si vous voulez une autre image pour le close la mettre ici en background - meme taille que image de fond bouton */
    }
    #open:target #left /* changer par juste left par right pour le widget de droite */
    {
      margin-left: 0px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    #open:target .button_widgets
    {
      margin-left: 235px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    #open:target .close
    {
      display: block;
    }
    #open:target .open
    {
      display: none;
    }


    Template :
    Code:
    <!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" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
    <head>
      <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
      <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
      <meta http-equiv="content-script-type" content="text/javascript" />
      <meta http-equiv="content-style-type" content="text/css" />
      <!-- BEGIN switch_compat_meta -->
      <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
      <!-- END switch_compat_meta -->
      <!-- BEGIN switch_canonical_url -->
      <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
      <!-- END switch_canonical_url -->
      {META_FAVICO}
      {META}
      {META_FB_LIKE}
      <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
      {T_HEAD_STYLESHEET}
      {CSS}
      <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
      <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
      <script src="{JQUERY_PATH}" type="text/javascript"></script>
      <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

      <!-- BEGIN switch_fb_login -->
      <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
      <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
      <!-- END switch_fb_login -->

      <!-- BEGIN switch_ticker -->
      <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
      <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
      <!-- END switch_ticker -->

      <!-- BEGIN switch_ticker_new -->
      <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
      <script type="text/javascript">//<![CDATA[
          /* Definir le sens de direction en fonction du panneau admin */
          var tickerDirParam = "{switch_ticker.DIRECTION}";
          var slid_vert = false;
          var auto_dir = 'next';
          var h_perso = parseInt({switch_ticker.HEIGHT});

          switch( tickerDirParam )
          {
            case 'top' :
                slid_vert = true;
                break;

            case 'left':
                break;

            case 'bottom':
                slid_vert = true;
                auto_dir = 'prev';
                break;

            case 'right':
                auto_dir = 'prev';
                break;

            default:
                slid_vert = true;
          }

          $(document).ready(function() {
            var w_cont = $('#fa_ticker_container').width();

            if (w_cont > 0)
            {
                $('#fa_ticker_container').width(w_cont);

                /* Affichage de la liste */
                $('#fa_ticker_content').css('display','block');

                /* Calcul des dimensions du conteneur et des elements */
                var width_max = $('ul#fa_ticker_content').width();
                var width_item = Math.floor(width_max / {switch_ticker.SIZE});
                var height_max = h_perso;

                /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
                $('ul#fa_ticker_content li').each( function () {
                  if ($(this).height() > height_max)
                  {
                      height_max = $(this).height();
                  }
                } );

                /* Redimensionnement des elements et des images trop larges */
                $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
                  if ($(this).width() > width_item)
                  {
                  var ratio      = $(this).width() / width_item;
                  var new_height = Math.round($(this).height() / ratio);
                  $(this).height(new_height).width(width_item);
                  }
                });

                /* Redimensionnement et centrage du conteneur en mode vertical */
                if (slid_vert)
                {
                  $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
                }

                /* Initialisation du caroussel */
                $('#fa_ticker_content').jcarousel({
                      vertical: slid_vert,
                  wrap: 'circular',
                  auto: {switch_ticker.STOP_TIME},
                  auto_direction: auto_dir,
                scroll: 1,
                size: {switch_ticker.SIZE},
                height_max: height_max,
                animation: {switch_ticker.SPEED}
                });
            }
            else
            {
                $('ul#fa_ticker_content li:not(:first)').css('display','none');
                $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
            }
          });
      //]]>
      </script>
      <!-- END switch_ticker_new -->

      <script type="text/javascript">//<![CDATA[
      $(document).ready(function(){
          <!-- BEGIN switch_enable_pm_popup -->
            pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
            pm.focus();
          <!-- END switch_enable_pm_popup -->
          <!-- BEGIN switch_report_popup -->
            report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
            report.focus();
          <!-- END switch_report_popup -->
          <!-- BEGIN switch_ticker -->
            ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
          <!-- END switch_ticker -->
      });

      <!-- BEGIN switch_login_popup -->
          var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
      <!-- END switch_login_popup -->

      <!-- BEGIN switch_login_popup -->
      $(document).ready( function() {
          $(window).resize(function() {
            var windowWidth = document.documentElement.clientWidth;
            var popupWidth = $("#login_popup").width();
            var mypopup = $("#login_popup");

            $("#login_popup").css({
            "left": windowWidth/2 - popupWidth/2
                });
          });
      });
      <!-- END switch_login_popup -->
      //]]>
      </script>
      {GREETING_POPUP}
      <!-- BEGIN switch_ticker_new -->
      <style>
      .jcarousel-skin-tango .jcarousel-item {
          text-align:center;
          width: 10px;
      }

      .jcarousel-skin-tango .jcarousel-item-horizontal {
          margin-right: {switch_ticker.SPACING}px;
      }

      .jcarousel-skin-tango .jcarousel-item-vertical {
          margin-bottom: {switch_ticker.SPACING}px;
      }
      </style>
      <!-- END switch_ticker_new -->
      {HOSTING_JS}
      <!-- BEGIN google_analytics_code -->
      <script type="text/javascript">
      //<![CDATA[
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
        _gaq.push(['_trackPageview']);

        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
      //]]>
      </script>
      <!-- END google_analytics_code -->
    </head>
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
     
     
     
      <div id="navigation"><div id="navig">{GENERATED_NAV_BAR}</div></div>
     
     
     
     
     
     
      <!-- BEGIN hitskin_preview -->
      <div id="hitskin_preview" style="display: block;">
          <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
          <div class="content">
            <p>
                {hitskin_preview.L_THEME_SITE_PREVIEW}
                <br />
                <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
            </p>
          </div>
      </div>
      <!-- END hitskin_preview -->

      <!-- BEGIN switch_login_popup -->
      <div id="login_popup">
          <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
            <tr height="25">
                <td class="catLeft">
                  <span class="genmed module-title">{SITENAME}</span>
                </td>
            </tr>
            <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
                <td class="row1" align="left" valign="top">
                  <div id="login_popup_buttons">
                      <form action="{S_LOGIN_ACTION}" method="get">
                        <input type="submit" class="mainoption" value="{L_LOGIN}" />
                        <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                        <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                      </form>
                  </div>
                  <span class="genmed">{LOGIN_POPUP_MSG}</span>
                </td>
            </tr>
          </table>
      </div>
      <!-- END switch_login_popup -->

      <a name="top"></a>
      {JAVASCRIPT}
      <div id="open">
     

      <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
          <tr>
            <td class="bodyline">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                  <tr>
                      <!-- BEGIN switch_logo_left -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_left -->
                      <td align="center" width="100%" valign="middle">
                        <!-- BEGIN switch_logo_center -->
                        <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                        <br />
                        <!-- END switch_logo_center -->
                        <div class="maintitle">{MAIN_SITENAME}</div>
                        <br />
                        <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                      </td>
                      <!-- BEGIN switch_logo_right -->
                      <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                      <!-- END switch_logo_right -->
                  </tr>
                </table>


                <div style="clear: both;"></div>

                <!-- BEGIN switch_ticker_new -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                      <tr>
                        <td {CLASS_TABLE_TYPE} align="left" class="row1">
                            <div id="fa_ticker_container">
                              <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                                  <!-- BEGIN ticker_row -->
                                  <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                  <!-- END ticker_row -->
                              </ul>
                            </div>
                        </td>
                      </tr>
                  </table>
                </div>
                <!-- END switch_ticker_new -->

                <!-- BEGIN switch_ticker -->
                <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                      <tr>
                        <td {CLASS_TABLE_TYPE} align="left" class="row1">
                            <div id="fa_ticker_container">
                              <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                                  <div class="fa_ticker_content">
                                    <!-- BEGIN ticker_row -->
                                    <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                    <!-- END ticker_row -->
                                  </div>
                              </div>
                            </div>
                        </td>
                      </tr>
                  </table>
                </div>
                <!-- END switch_ticker -->

                <div id="page-body">
                  <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                      <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                        <tbody>
                            <tr>
                              <td valign="top" width="{C1SIZE}">
                                <div class="button_widgets">
     <a href="#open" class="open"></a>
     <a href="#close" class="close"></a>
     </div>
                                  <div id="{ID_LEFT}">
                                    <!-- BEGIN giefmod_index1 -->
                                    {giefmod_index1.MODVAR}
                                        <!-- BEGIN saut -->
                                        <div style="height:{SPACE_ROW}px"></div>
                                        <!-- END saut -->
                                    <!-- END giefmod_index1 -->
                                  </div>
                              </td>
                              <td valign="top" width="100%">
    <!-- BEGIN html_validation -->
                              </td>
                            </tr>
                        </tbody>
                      </table>
                  </div>
                </div>
            </td>
          </tr>
      </table>
        </div>
    </body>
    </html>
    <!-- END html_validation -->



    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Lun 16 Fév 2015 - 23:29

    Yo, pour arrondir les angles, il te suffit de mettre :
    Code:
    border-top-left-radius: XXpx; border-top-right-radius: XXpx;
    Tu mets ça dans #left et ça devrait être bon (:

    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Mar 17 Fév 2015 - 0:32

    Ca marche mais ça arrondi aussi la barre rouge qui est sur la droite... ^^



    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 17 Fév 2015 - 1:32

    Et si tu réessaie la même chose qu'A-Lice a proposé, mais en le mettant dans "#left #recent-topics" à la place de "#left"? (Il faut le rajouter, ça n'existe pas déjà).



    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Mar 17 Fév 2015 - 18:19

    ça ne marche pas onyx j'ai bien ajouté dans le css faut t il changer la template aussi ?



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 18 Fév 2015 - 19:47

    Hum, il n'y a pas de #recent-topics dans le code HTML actuel.

    Le lien de ton forum n'étant pas indiqué >-<, j'ai fouillé un peu... → http://dreamforce12031961.forum-gratuit.be/#open

    Par contre, je ne suis pas sûre de bien comprendre ton schéma... Tu veux garder le fond bleu tout derrière ou pas ? Quelque chose comme ça ?

    Personnaliser widgets latérale ouvrir fermer J8o2O1I
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 19 Fév 2015 - 3:36

    Effectivement, il me semblait que ça faisait partie du widget, mais je suis dans les patates ><

    Euh... tu peux essayer avec "#left table.forumline"?



    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Jeu 19 Fév 2015 - 10:05

    Nihil Scar Winspeare je veut effectivement garder le fond bleu mais enlever ce qui dépasse du tableau aussi



    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Jeu 19 Fév 2015 - 10:06

    le code ne marche pas Onyx.



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 21 Fév 2015 - 18:29

    reshiram44 a écrit:Nihil Scar Winspeare je veut effectivement garder le fond bleu mais enlever ce qui dépasse du tableau aussi
    Comme ceci ? https://i.imgur.com/hB3yJuN.png
    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Dim 22 Fév 2015 - 10:03

    Oui voilà Nihil Scar Winspeare comme ceci ^^



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 22 Fév 2015 - 11:22

    Ouki ouki :)
    C'est parti, n'hésite pas à poser des questions si tu ne comprends pas quelque chose

    1 / On va arrondir le haut :

    Pour cela le sélecteur est bien #left .forumline, il faut effectivement mettre les propriétés de border-radius, mais aussi rajouter un overflow: hidden;, sinon la cellule d'en-tête dépassera quand même Wink

    Ici j'ai mis un border-radius ainsi qu'une bordure verte épaisse pour que tu puisses visualiser :
    Personnaliser widgets latérale ouvrir fermer NBZCglD

    Il y a bien l'arrondi, mais la cellule d'entête dépasse. Voilà pourquoi on rajoute overflow: hidden; :)

    Le code total est donc :
    Code:
    /* Arrondi widget barre coulissante */
    #left .forumline {
    border-top-left-radius : 25px;
    border-top-right-radius : 25px;
    overflow: hidden; /* empeche le tableau de dépasser */
    border: 1px solid #000000;
    }

    Cela devrait te donner ceci :
    Personnaliser widgets latérale ouvrir fermer Ax0NHmQ




    On peut voir qu'on a une bordure en double en haut, pour l'enlever on va cibler #left .catHead avec un border: 0;

    Ca commence à être mieux !
    Personnaliser widgets latérale ouvrir fermer CNiVG2k




    Enfin, dernier détail il y a toujours une couleur de fond pour #left. Si je met le fond en vert fluo on la verra très bien :
    Personnaliser widgets latérale ouvrir fermer XqaAHSh

    Si tu ne veux pas garder cette couleur de fond, il faut l'enlever de #left (c'est la propriété background-color), et plutôt la mettre sur #left .forumline

    Ce qui te donnera :
    Personnaliser widgets latérale ouvrir fermer BTA2O5s
    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Dim 22 Fév 2015 - 12:58

    Je n'ai pas compris la 2ème et 3ème partie ce que je doit changer dans le css ou rajouter et merci de m'aider ^^



    reshiram44
    reshiram44
    MasculinAge : 25Messages : 380

    Dim 22 Fév 2015 - 13:04

    ah non voilà c'est bon j'ai réussi merci de m'avoir aider vous pouvez archivez ce sujet ^^



    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 22 Fév 2015 - 14:42

    Contente d'avoir pu t'aider :)

    Puisque le problème est résolu, pense à éditer ton premier message pour cocher l'icôner Terminé :) Personnaliser widgets latérale ouvrir fermer 405030termin

    Si tu veux, tu peux même le faire pour tes 2 autres sujets (^-^) Problème avec mon PA cadre et Ajouter un nouvelle onglet à mon PA.
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Avr 2024 - 23:30