Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB

Membres connectés récemment
Voir tous les membres

[PHPBB2] Problème avec header de fond aléatoire

 :: Astuces Forumactif :: Les sujets résolus

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

Sujet résolu [PHPBB2] Problème avec header de fond aléatoire

1
rchelgreen
rchelgreen
https://alissinunderland.forumactif.com/

Messagerchelgreen Lun 29 Mar 2021 - 15:39

  • Version du forum :
    PHPBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Chrome
Bonjour  [PHPBB2] Problème avec header de fond aléatoire 1f600 

Alors j'ai quelques soucis avec un header de fond de page aléatoire.

Premièrement, afin que le fond s'adapte à toutes les résolutions d'écrans, j'ai ajouté un code dans mon CSS pour qu'il s'adapte, mais le header de fond s'agrandit et donc, il n'est plus dans les bonnes dimensions soit de (1365x417). Voici une partie de mon CSS :
Code:

/*********************************************************************** BANNIÈRE ALÉATOIRE ***********************************************************************/


body {
background-repeat: no-repeat;
background-attachment: scroll;
}

.ban1 { background-image: url('https://images2.imgbox.com/5f/61/2SUcAtz2_o.png'); }
.ban2 { background-image: url('https://images2.imgbox.com/e8/2e/siEZT1j2_o.png'); }


body {
        .ban1 { background-image: url('https://images2.imgbox.com/76/9a/2aQkzKBm_o.png');
  background-size:100% ;
  background-repeat:no-repeat ;}
        .ban2 { background-image: url('https://images2.imgbox.com/5c/ca/Y2nn1PxC_o.png');
  background-size:100% ;
  background-repeat:no-repeat ;}
}

.bodylinewidth{margin-top:20% ; }


Et ce que j'ai mis dans la description du site après avoir suivi un tuto pour les bannières aléatoires :

Code:
<script type=text/javascript> var banListe=['1','2']; document.write('<body class=ban' + banListe[Math.floor(Math.random()*banListe.length)] +'>'); </script>


Deuxièmement, il y a une partie du cadre du forum qui est par-dessus le header de fond. J'ai tenté le moyen le plus simple en retirant la couleur du cadre, mais le problème c'est que je souhaite la garder  [PHPBB2] Problème avec header de fond aléatoire 1f610 

Et dernier petit problème, j'aimerais aussi supprimer l'espace sur l'image ci-dessous : 

Spoiler:

Je fais toutes les modifications sur mon forum test avant de les apporter sur mon forum donc voici le lien https://forumtestyoyo.forumactif.com



Merci à l'avance pour l'aide, c'est très apprécié  [PHPBB2] Problème avec header de fond aléatoire 1f604


Dernière édition par rchelgreen le Lun 29 Mar 2021 - 19:46, édité 1 fois

Milouze14 aime ce message

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

2
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 29 Mar 2021 - 16:57

Coucou Roxanne,
hum pourquoi mettre un doublon, les images doivent être être déposées ainsi dans ta feuille de style:
Code:
    .ban1 { background-image: url('https://images2.imgbox.com/5f/61/2SUcAtz2_o.png'); }
    .ban2 { background-image: url('https://images2.imgbox.com/e8/2e/siEZT1j2_o.png'); }

Et surtout ne pas les répéter ainsi:
Code:

    body {
            .ban1 { background-image: url('https://images2.imgbox.com/76/9a/2aQkzKBm_o.png');
      background-size:100% ;
      background-repeat:no-repeat ;}
            .ban2 { background-image: url('https://images2.imgbox.com/5c/ca/Y2nn1PxC_o.png');
      background-size:100% ;
      background-repeat:no-repeat ;}
    }


Pourquoi ne pas utiliser l'identique mais avec le logo, vu la taille des images tu devrais avoir a quelque chose près le même rendu:

Il faudra mettre une image d'office pour ton logo:


Affichage/Images et couleurs/Gestion des images/Mode avançé

   Général / navigation ==> Logo du forum :


Supprimes ceci dans ta feuille de style:
Code:
/*********************************************************************** BANNIÈRE ALÉATOIRE ***********************************************************************/


body {
background-repeat: no-repeat;
background-attachment: scroll;
}

.ban1 { background-image: url('https://images2.imgbox.com/5f/61/2SUcAtz2_o.png'); }
.ban2 { background-image: url('https://images2.imgbox.com/e8/2e/siEZT1j2_o.png'); }


body {
        .ban1 { background-image: url('https://images2.imgbox.com/76/9a/2aQkzKBm_o.png');
  background-size:100% ;
  background-repeat:no-repeat ;}
        .ban2 { background-image: url('https://images2.imgbox.com/5c/ca/Y2nn1PxC_o.png');
  background-size:100% ;
  background-repeat:no-repeat ;}
}

Puis le script dans la description.

Ensuite ce script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.


Déposer ceci:

Code:

$(function() {
  var a = [
    "https://images2.imgbox.com/5f/61/2SUcAtz2_o.png",
    "https://images2.imgbox.com/e8/2e/siEZT1j2_o.png",
 
  ];
 
  $("#i_logo").attr("src", a[Math.floor(Math.random() * a.length)])
});

Penser a cliquer sur le bouton Valid

Pour le décalage modifies la valeur 20 par 23 dans ta css ici:
Code:
.bodylinewidth{margin-top:20% ; }


Ensuite on peut déplacer le logo dans le template overall_header si besoin.
Merci de me le fournir dans ce cas hinhin .

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

3
rchelgreen
rchelgreen
https://alissinunderland.forumactif.com/

Messagerchelgreen Lun 29 Mar 2021 - 17:34

Alors d'abord merci pour la réponse rapide  hinhin

Ensuite, j'ai testé ce que tu m'as dit, mais le résultat n'est pas vraiment celui souhaité et en plus, il y a une énorme marge entre le cadre du forum et le header... 

Spoiler:

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

4
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 29 Mar 2021 - 17:36

Ok mais justement, ma question sans réponse:

Ensuite on peut déplacer le logo dans le template overall_header si besoin.

Tu désires avoir la barre de navigation à quel endroit ?

Voir le résultat (c'est moche mais c'est un forum de tests) lOL

https://testdesforums.1fr1.net/

Mais je me suis rapproché au maximum du haut de ton forum clin oeil .

On peut aussi supprimer le lien sur la bannière (logo) .

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

5
rchelgreen
rchelgreen
https://alissinunderland.forumactif.com/

Messagerchelgreen Lun 29 Mar 2021 - 18:51

Désolé je n'ai pas vu ta question  [PHPBB2] Problème avec header de fond aléatoire 1f636 

Alors j'aime bien le résultat sur le forum test avec la barre de navigation en haut  [PHPBB2] Problème avec header de fond aléatoire 1f604 
EDIT : en fait, je voulais peut-être intégrer ma barre de navigation à la toolbar en haut, c'est possible ?
Voici mon 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>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Great Vibes' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Special Elite' rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Indie Flower" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Six+Caps&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Rochester&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Sue+Ellen+Francisco&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montez&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">
    <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>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  
    {RICH_SNIPPET_GOOGLE}

    <!-- BEGIN switch_fb_login -->
    <script src="https://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="{JQUERY_DIR}ticker/ticker.css" />
    <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
    <!-- END switch_ticker -->

    <!-- BEGIN switch_ticker_new -->
    <script src="{JQUERY_DIR}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');
        if(pm != null) { 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}');
        if(report != null) { report.focus(); }
        <!-- END switch_report_popup -->
        <!-- BEGIN switch_ticker -->
        $(document).ready(function() {              
            Ticker.start({
                height : {switch_ticker.HEIGHT},
                spacing : {switch_ticker.SPACING},
                speed : {switch_ticker.SPEED},
                direction : '{switch_ticker.DIRECTION}',
                pause : {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[
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', '{G_ANALYTICS_ID}', 'auto');
    ga('send', 'pageview');
    ga('set', 'anonymizeIp', true);

    <!-- BEGIN google_analytics_code_bis -->
    ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
    ga('bis.send', 'pageview');
    ga('bis.set', 'anonymizeIp', true);
    <!-- END google_analytics_code_bis -->
    //]]>
    </script>
    <!-- END google_analytics_code -->


<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
  <!--============== R-max ========================-->
  <table id="nav_bar_1" cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table><br>
  <!--============== fin R-max =========================-->
    <!-- BEGIN hitskin_preview -->
    <div id="hitskin_preview" style="display: block;">
        <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
        <div class="content">
            <p>
                {hitskin_preview.L_THEME_SITE_PREVIEW}
                <br />
                <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{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" style="z-index: 10000 !important;">
        <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 class="navtop"></div>
  <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>
  <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
          <tr>
            <td class="bodyline">

              

                <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 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 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 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>
<!-- END html_validation -->

Et non le lien sur la bannière ça me convient  [PHPBB2] Problème avec header de fond aléatoire 1f60a

Milouze14 aime ce message

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

6
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 29 Mar 2021 - 18:58

Oki merci,

dernière question , à quoi sert cette div:
Code:
<div class="navtop"></div>

As tu déposé l image dans ton PA pour le logo ?
Si, c'est le cas supprimes la impeccable .

Pour intégrer la barre sur la toolbar, pourquoi pas mais faudra réduire considérablement l'espace et la police.
Mais je regarde tout çà clin oeil

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

7
rchelgreen
rchelgreen
https://alissinunderland.forumactif.com/

Messagerchelgreen Lun 29 Mar 2021 - 19:10

Bonne question, je crois que c'est un élément que j'ai sans doute oublier de supprimer en modifiant le template  [PHPBB2] Problème avec header de fond aléatoire 1f610 

Non j'ai seulement mis les codes donnés, je n'avais pas encore mis l'image donc je ne m'en occupe plus finalement  [PHPBB2] Problème avec header de fond aléatoire 1f600 

Ça me va pour la police et tout le reste, mais j'aimerais bien qu'elle soit avec la toolbar dans ce cas. 


Merci beaucoup  Merci

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

8
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 29 Mar 2021 - 19:19

Alors super MDR .

Voir le fofo avec les modifications:
https://testdesforums.1fr1.net/

J'ai donc supprimé cette div et ajouté la barre de navigation sur la toolbar via la css .

Remplaces le contenu de ton template par celui-ci:

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>
      <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Great Vibes' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Special Elite' rel='stylesheet' type='text/css'>
        <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Indie Flower" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Six+Caps&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Rochester&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Sue+Ellen+Francisco&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Montez&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">
        <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>
        <!-- BEGIN switch_recent_jquery -->
        <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
        <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
        <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
        <!-- END switch_recent_jquery -->
        <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  
        {RICH_SNIPPET_GOOGLE}

        <!-- BEGIN switch_fb_login -->
        <script src="https://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="{JQUERY_DIR}ticker/ticker.css" />
        <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
        <!-- END switch_ticker -->

        <!-- BEGIN switch_ticker_new -->
        <script src="{JQUERY_DIR}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');
            if(pm != null) { 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}');
            if(report != null) { report.focus(); }
            <!-- END switch_report_popup -->
            <!-- BEGIN switch_ticker -->
            $(document).ready(function() {              
                Ticker.start({
                    height : {switch_ticker.HEIGHT},
                    spacing : {switch_ticker.SPACING},
                    speed : {switch_ticker.SPEED},
                    direction : '{switch_ticker.DIRECTION}',
                    pause : {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[
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', '{G_ANALYTICS_ID}', 'auto');
        ga('send', 'pageview');
        ga('set', 'anonymizeIp', true);

        <!-- BEGIN google_analytics_code_bis -->
        ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
        ga('bis.send', 'pageview');
        ga('bis.set', 'anonymizeIp', true);
        <!-- END google_analytics_code_bis -->
        //]]>
        </script>
        <!-- END google_analytics_code -->


    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
        <!-- BEGIN hitskin_preview -->
        <div id="hitskin_preview" style="display: block;">
            <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
            <div class="content">
                <p>
                    {hitskin_preview.L_THEME_SITE_PREVIEW}
                    <br />
                    <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{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" style="z-index: 10000 !important;">
            <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}
<table id="M14_nav_barre"width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td></tr>
</table>
                      
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td align="center"><a href="{U_INDEX}"><img loading="lazy" src="https://images2.imgbox.com/5f/61/2SUcAtz2_o.png" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a></td></tr>
</table>  
      <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
              <tr>
                <td class="bodyline">

                  

                    <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 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 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 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>
    <!-- END html_validation -->


Penses a enregistrer puis à valider en cliquant respectivement sur   Enregistr puis Ajout


Ensuite tu dois avoir un style dans ta C.S.S qui doit resembler à ceci:
Code:
a.mainmenu {
    font-family: roboto condensed;
    font-size: 14px;
    font-weight: 700;
    margin: 5px;
    text-transform: uppercase;
}

Remplaces la valeur 5 du margin par la valeur 1 :
Cela va nous premettre de minimiser l'espace.


Puis ajoutes ceci:
Code:
img#i_logo{width:100%;}
table#M14_nav_barre{position: fixed;top:2px;z-index:99999!important;}
table#M14_nav_barre a.mainmenu img{display:none;}

Puis le script fournit ici:
https://www.milouze14.com/t32969-phpbb2-probleme-avec-header-de-fond-aleatoire#629089

Code:

    $(function() {
      var a = [
        "https://images2.imgbox.com/5f/61/2SUcAtz2_o.png",
        "https://images2.imgbox.com/e8/2e/siEZT1j2_o.png",
    
      ];
    
      $("#i_logo").attr("src", a[Math.floor(Math.random() * a.length)])
    });


Et voilou   hinhin

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

9
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 29 Mar 2021 - 19:36

Penses a supprimer ce style dans ta c.s.s:
Code:
.bodylinewidth {
    margin-top: 23%;
}

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

10
rchelgreen
rchelgreen
https://alissinunderland.forumactif.com/

Messagerchelgreen Lun 29 Mar 2021 - 19:40

Parfait c'est modifié pour l'espace entre la bannière et la P.A.
Par contre j'ai un problème avec le Bienvenue "pseudo" et les notifications de la toolbar, je n'arrive plus à cliquer dessus  [PHPBB2] Problème avec header de fond aléatoire 1f636

EDIT : Finalement tout fonctionne, merci infiniment pour ton aide, c'est très apprécié et toujours très rapide  Merci

Milouze14 aime ce message

Sujet résolu Re: [PHPBB2] Problème avec header de fond aléatoire

11
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 29 Mar 2021 - 19:52

De rien chère amie,



@rchelgreen

hum, petite rectification:
Dans ton template recherches ceci:
Code:
<table id="M14_nav_barre" width="100%"

Supprimes le :
Code:
width="100%"


Puis remplaces dans ta c.s.s ceci:
Code:
table#M14_nav_barre{position: fixed;top:2px;z-index:99999!important;}

Par:
Code:
table#M14_nav_barre
{
  position: fixed;
    width: 60%;
    margin-left: 20%;
    top: 2px;
    z-index: 99999!important;
}




Hello


Sujet résolu et déplacé dans le forum adéquate  

A bientôt pour une prochaine demande  clin oeil

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Sujets similaires
» [PHPBB2] Problème avec le messenger
» [PhpBB2] Problème avec forumactif messenger
» [PhpBB2] Problème encodage avec un script
» [PHPBB2] Gros problème avec mon portail
» [PHPBB2] Problème avec permissions MOD sur un code JS

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Astuces Forumactif :: Astuces Forumactif :: Les sujets résolus

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit