Création d'une barre latérale sur le forum

[admin]

1/ Naviguez jusqu’à ./styles/prosilver/template et ouvrez le fichier overall_header.html et trouvez cette ligne :

Code : Tout sélectionner

{$STYLESHEETS}

Juste après ajoutez :

Code : Tout sélectionner

<link href="{{ T_THEME_PATH }}/forumsidebar.css?assets_version={{ T_ASSETS_VERSION }}" rel="stylesheet">

Trouvez :

Code : Tout sélectionner

<a id="start_here" class="anchor"></a>

Juste après ajoutez :

Code : Tout sélectionner

<div class="forumcontainer">
<!-- INCLUDE forumsidebar.html -->

Fermez et enregistrez le fichier


2/ Naviguez jusqu’à ./styles/prosilver/template et ouvrez le fichier overall_footer.html et trouvez cette ligne :

Code : Tout sélectionner

<!-- EVENT overall_footer_page_body_after -->

Ajoutez juste avant :

Code : Tout sélectionner

</div>

Fermez et enregistrez le fichier


3/ Naviguez jusqu’à ./styles/prosilver/template et créez un nouveau fichier appelé forumsidebar.html, ouvrez-le et collez ce code dedans :

Code : Tout sélectionner

<aside class="forumsidebar">
    <h2 class="sidebartitle">Liens</h2>
    <ul>
        <li><a href="#">Lien personnalisé #1</a></li>
        <li><a href="#">Lien personnalisé #2</a></li>
        <li><a href="#">Lien personnalisé #3</a></li>
        <li><a href="#">Lien personnalisé #4</a></li>
        <li><a href="#">Lien personnalisé #5</a></li>
    </ul>

    <h2 class="sidebartitle">Forum</h2>
    <ul>
        <!-- IF not S_IS_BOT and (S_DISPLAY_MEMBERLIST or U_TEAM) -->
            <!-- IF S_DISPLAY_MEMBERLIST -->
                <li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li>
            <!-- ENDIF -->
            <!-- IF U_TEAM -->
                <li><a href="{U_TEAM}">{L_THE_TEAM}</a></li>
            <!-- ENDIF -->
        <!-- ENDIF -->

        <li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

        <!-- IF S_REGISTERED_USER -->
            <li><a href="{U_PROFILE}" title="{L_PROFILE}">{L_PROFILE}</a></li>
            <!-- IF U_USER_PROFILE -->
				<li><a href="{U_USER_PROFILE}" title="{L_READ_PROFILE}">{L_READ_PROFILE}</a></li>
			<!-- ENDIF -->
            <li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{CURRENT_USERNAME_SIMPLE} [ {L_LOGIN_LOGOUT} ]</a></li>
        <!-- ELSE IF not S_IS_BOT -->
            <li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
            <!-- IF S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
			    <li><a href="{U_REGISTER}">{L_REGISTER}</a></li>
		    <!-- ENDIF -->
        <!-- ENDIF -->
    </ul>

    <!-- IF S_DISPLAY_SEARCH -->
    <h2 class="sidebartitle">{L_SEARCH}</h2>
    <ul>
        <!-- IF S_REGISTERED_USER -->
            <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
        <!-- ENDIF -->
        
        <!-- IF S_USER_LOGGED_IN -->
            <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
        <!-- ENDIF -->
        
        <!-- IF S_LOAD_UNREADS -->
            <li><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></li>
        <!-- ENDIF -->
        
        <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
        <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
        <li><a href="{U_SEARCH}">{L_SEARCH}</a></li>
    </ul>
    <!-- ENDIF -->
</aside>

Fermez et enregistrez le fichier


4/ Naviguez jusqu’à ./styles/prosilver/theme et créez un nouveau fichier appelé forumsidebar.css, ouvrez-le et collez ce code dedans :

Code : Tout sélectionner

:root {
    --sidebar-width-size: 150px;
    --sidebar-title-bg-color: hsl(206, 39%, 88%);
    --sidebar-title-border-color: hsl(206, 39%, 68%);
    --sidebar-title-border-left-color: hsl(200, 87%, 48%);
}

@media screen and (min-width: 980px) {
    .forumcontainer {
        display: grid;
        grid-template-columns: var(--sidebar-width-size) auto;
        gap: 1rem;
    }
}

.sidebartitle {
    background-color: var(--sidebar-title-bg-color);
    border-color: var(--sidebar-title-border-color) var(--sidebar-title-border-color) var(--sidebar-title-border-color) var(--sidebar-title-border-left-color);
    border-style: solid;
    border-width: 1px 1px 1px 3px;
    color: hsl(0, 0%, 0%);
    margin-block: .5rem .25rem;
    padding: .25rem;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 3px;
    line-height: 1;
}

.sidebartitle:not(:first-of-type) {
    margin-top: 1rem;
}

.forumsidebar ul {
    list-style-type: none;
}

.forumsidebar li {
    margin-inline: 3px;
}

.forumsidebar a {
    font-size: 13px;
    text-wrap: balance;
}

.codebox {
    display: grid;
}

@media screen and (max-width: 980px) {
    .forumsidebar { display: none; }
}

Fermez et enregistrez le fichier


Maintenant, allez dans le PCA et purgez le cache.
Si vous souhaitez modifier un lien de la barre latérale, vous pouvez le faire à partir du fichier forumsidebar.html qui se trouve dans le dossier /template.

Source : https://debianforum.de/forum/ - https://www.phpbb.com/community/viewtop ... #p14085556