Besoin d'aide pour ajouter des liens externes en haut de la page

Dev
1

Je ne suis pas sûr qu’il s’agisse d’un problème de thème, mais nos pages Discourse font partie d’un site web plus vaste. L’apparence du site change et j’essaie de comprendre comment faire en sorte que nos pages Discourse s’harmonisent. J’ai réussi à utiliser un thème, sauf pour les liens externes en haut de la page.

Ils devraient être horizontaux, mais ils s’affichent verticalement.
J’ai copié ce code de l’ancien thème et l’ai placé dans l’onglet En-tête de l’éditeur CSS/HTML :

<body class"staff navigation-categories categories-list" data-gr-c-s-loaded="true">
::before
<div id="top-navbar">
    <div id="top-navbar-links">
        <div id="xg_masthead">
            <h1 id="xg_sitename" class="xj_site_name"><a id="application_name_header_link" href="http://community.uaccess.arizona.edu/"><img src="/uploads/default/original/1X/30cb387c966257871ec97c979d4759e784945fc7.png" alt="The UAccess Community Forums"></a></h1>
        </div>
    </div>
    <ul id="top-external-nav">
        <li class="top-ext--main">
            <a class="top-ext--link top-discourse-link-main" href="http://community.uaccess.arizona.edu/">Accueil</a>
        </li>
        <li class="top-ext--main" id="top-discourse-link-forums">
            <a class="top-ext--link top-discourse-link-main" href="/">Forums</a>
            <ul class="top-ext--sub" id="top-discourse-sub-forums">
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/announcements">Annonces</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-analytics">Analytique</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-budget">Budget</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-employee">Employés</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-financials">Finances</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-learning">Formation</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-research">Recherche</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-student">Étudiants</a>
                </li>
            </ul>
        </li>
        <li class="top-ext--main" id="top-discourse-link-events">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/events" target="blank">Événements</a>
            <ul class="top-ext--sub" id="top-discourse-sub-events">
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-speaker-series">Conférenciers</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/events/2016-uaccess-symposium">Symposium</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/calendar">Calendrier</a>
                </li>
            </ul>
        </li>
        <li class="top-ext--main" id="top-discourse-link-resources">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/resources">Ressources</a>
            <ul class="top-ext--sub" id="top-discourse-sub-resources">
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/business-office-resources">Bureau des affaires</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-analytics-resources">Analytique</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-budget-resources">Budget</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-employee-resources">Employés</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-financials-resources">Finances</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-learning-resources-0">Formation</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-student-resources">Étudiants</a>
                </li>
            </ul>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/help/questions">FAQ</a>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/contact-us">Contactez-nous</a>
        </li>
    </ul>
  </div>
</div>
2

Le code que vous avez dans votre publication ne contient que du HTML, il est donc normal qu’il s’affiche sous forme de liste verticale non stylisée. Pour obtenir une liste horizontale, vous devez inclure le CSS pour cet élément.

De plus, à en juger par l’apparence, il s’agit probablement d’un menu avec des sous-éléments. Vous devrez donc également ajouter le JavaScript qui gère cela à votre thème ou composant.

3

Bonjour Joe, merci pour ta réponse.

Donc, je devrais pouvoir rechercher le code CSS pour rendre le menu horizontal, puis ajouter ce code au début de celui-ci ?
(désolé, je suis débutant)
Et oui, trois des liens ont des sous-menus.

4

Pas de souci, Catherine :+1:

Cela dépend de l’endroit où vous obtenez le code HTML du menu.

S’agit-il d’un thème Discourse ?

Si oui, vous devriez pouvoir récupérer le CSS en allant dans l’onglet CSS du thème. Vous n’aurez alors qu’à copier le CSS vers le nouveau thème. Sinon, la procédure est un peu différente, et je peux essayer de vous aider si vous me donnez plus de détails.

Si vous ne souhaitez pas vous soucier de la maintenance du code du menu, nous avons un composant de thème facile à configurer qui ressemble à ce que vous essayez d’obtenir ici :

5

Merci pour votre aide, Joe.
Le champ CSS pour l’ancien « Thème » ? est vide.
J’ai parlé à quelqu’un qui connaissait une partie de l’historique du site et il m’a indiqué que tout est personnalisé. L’apparence et la sensation sont obtenues en pointant vers des fichiers CSS externes.
Avant de vous demander de consacrer encore plus de temps à ce sujet, je vais essayer quelques autres ressources de mon côté pour voir si je peux faire avancer les choses.

Je dois de toute façon mettre le projet de côté pendant quelques jours pour m’occuper d’autres tâches plus urgentes.

Je vous tiendrai au courant de l’évolution.

Merci encore,
Catherine