Welcome

Halloween Header & Navigation

Freedom

Halloween, LS codage Forumactif Templates & Eléments Header & Navigation Navigation Freedom

PHPBB2

Optimisé L'avatar et le pseudo de l'utilisateur s'adaptent automatiquement au membre

Retour

Codage navigation Freedom Halloween Forumactif

CSS

a, a:hover {
    text-decoration: none !important;
    transform: all;
    transition: .5s;
}

.clear {
    clear: both;
}

/***************************************************** BANDEAU LATERAL *****************************************************/
/* POSITION ET MISE EN FORME DE LA BARRE */
.navigation {
    position: fixed;
    top: 0;
    left: 0;
    background: url(https://i.imgur.com/ahF7Ej1.png) no-repeat, url(https://i.imgur.com/7GmRHxa.png);
    width: 150px;
    bottom: 0;
    text-align: center;
    color: #5f5e60;
    font-family: Arial;
}

/* TEXTE FREEDOM */
.navigation h2 {
    color: #626667;
    text-transform: uppercase;
    font-size: 10px;
    margin: 10px 0 5px 0;
}

/* TEXTE QUAND LA LIBERTE DEVIENT UN LUXE */
.navigation p {
    font-size: 10px;
    font-weight: bold;
    margin: 0;
}

/* CADRE AVATAR */
#avatar_menu {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 1px solid #1e1f21;
    background: #4a1e23;
    padding: 5px;
    margin: 15px auto 15px auto;
}

/* TAILLE DE LAVATAR */
#avatar_menu img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    object-fit: cover;
}

/* MISE EN FORME PSEUDO */
#pseudo_menu {
    text-transform: uppercase;
}

/* POSITION BLOC MENU */
#liens_navigation {
    margin: 80px auto auto auto;
}

/* MASQUER LES IMAGES DE LA NAVIGATION */
#liens_navigation img {
    display: none;
}

/* DISPOSITION DES LIENS DU MENU */
#liens_navigation a {
    display: block;
    margin: 0;
    padding: 0;
    line-height: .1;
    color: #626667;
}

/* COULEUR EN HOVER DES LIENS DU MENU */
#liens_navigation a:hover {
    color: #f75709;
}

Overall_Header

<!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" />
    
    <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
    
    
    <link rel="canonical" href="{switch_canonical_url.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}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>
    
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>   
    {RICH_SNIPPET_GOOGLE}

<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>

<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
    <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>

<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>

var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

$(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
                });
        });
    });
    
    //]]>
    </script>
    {GREETING_POPUP}
    
    <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>
    
    {HOSTING_JS}
    
    <script type="text/javascript">
    //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);

_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
    _gaq.push(['b._trackPageview']);

<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>

<a name="top"></a>
    {JAVASCRIPT}
  
<div class="navigation">
  	<h2>
          	Freedom
  	</h2>
  	<p>
          	Quand la liberté devient un luxe
  	</p>
  
  	<div id="avatar_menu" class="js-useravatar avatar_lateral">
  	</div>
  
  	<div id="pseudo_menu" class="js-username pseudo_lateral">
 	</div>
  	<p>
          	bienvenue
  	</p>
  
  	<div id="liens_navigation">
          	{GENERATED_NAV_BAR}
  	</div>
                                  	
</div>

<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;">
                                        
                                        <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                        
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

<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">
                                            
                                            <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>

<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}">
                                            
                                            {giefmod_index1.MODVAR}
                                                
                                                <div style="height:{SPACE_ROW}px"></div>
                                                
                                            
                                        </div>
                                    </td>
                                    <td valign="top" width="100%">

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Dans le template "profile_view_body"

Remplacez ligne 20 :

Par :

Créer une page Javascript

Dans "Modules", "Gestion des pages Javascript", activer le JS si ce n'est pas déjà fait, puis créer une nouvelle page. On y colle le code suivant (avec comme titre "Avatar navigation" par exemple) et on l'affiche sur toutes les pages.

Créer une nouvelle page Javascript

Pour le pseudo dans la navigation cette fois, reprenant l'affichage sur toutes les pages.

ATTENTION : Pensez à désactiver le profil avancé pour que le code fonctionne. "Utilisateurs & Groupes", "Profils", "Options générales", "Activer le profil avancé" : non.

Dernière modification : 25 April 2020 23 : 33.

#freedom #navigation #forumactif #codage #libreservice

Halloween