Serve aiuto per aggiungere link esterni in alto nella pagina

Sviluppatore
1

Non sono sicuro che si tratti di un problema del tema, ma le nostre pagine Discourse fanno parte di un sito web più ampio. L’aspetto e il feeling del sito stanno cambiando e sto cercando di capire come far sì che le nostre pagine Discourse siano coerenti. Sono riuscito a utilizzare un Tema, tranne che per i link esterni in alto nella pagina.

Dovrebbero essere orizzontali, ma invece appaiono in verticale.
Ho preso questo codice dal vecchio tema e l’ho inserito nella scheda Intestazione dell’editor 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/">Home</a>
</li>
        <li class="top-ext--main" id="top-discourse-link-forums">
            <a class="top-ext--link top-discourse-link-main" href="/">Forum</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">Annunci</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-analytics">Analisi</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-budget">Bilancio</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-employee">Dipendenti</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-financials">Finanziari</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-learning">Apprendimento</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-research">Ricerca</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-student">Studenti</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">Eventi</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">Relatori</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/events/2016-uaccess-symposium">Simposio</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/calendar">Calendario</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">Risorse</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">Ufficio Affari</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-analytics-resources">Analisi</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-budget-resources">Bilancio</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-employee-resources">Dipendenti</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-financials-resources">Finanziari</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-learning-resources-0">Apprendimento</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-student-resources">Studenti</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">Contattaci</a>
        </li>
    </ul>
  </div>
</div>
2

Il codice presente nel tuo post contiene solo HTML, quindi è normale che venga visualizzato come un elenco verticale senza stili. Per ottenere un elenco orizzontale, devi includere il CSS per quell’elemento.

Inoltre, a giudicare dall’aspetto, probabilmente dovrebbe trattarsi di un menu con voci di sottomenu. Quindi, dovresti anche aggiungere al tuo tema o componente lo JavaScript che gestisce questa funzionalità.

3

Ciao Joe, grazie per la risposta.

Quindi dovrei essere in grado di cercare il codice CSS per rendere il menu orizzontale e poi aggiungere quel codice all’inizio di questo codice?
(scusa, sono un principiante)
E sì, tre dei link hanno dei sottomenu.

4

Nessun problema, Catherine :+1:

Dipende da dove stai ottenendo l’HTML per il menu.

È un tema Discourse?

Se sì, dovresti essere in grado di ottenere il CSS andando alla scheda CSS del tema. Dovrai solo copiare il CSS nel nuovo tema. Se non lo è, il processo è un po’ diverso e posso provare ad aiutarti se mi dai più dettagli.

Se non vuoi preoccuparti di mantenere il codice per il menu, abbiamo un componente di tema facile da configurare che è simile a ciò che stai cercando di ottenere qui

5

Grazie per l’aiuto, Joe.
Il campo CSS per il vecchio “Theme”? è vuoto.
Ho parlato con qualcuno che conosceva parte della storia del sito e mi ha detto che è tutto personalizzato. L’aspetto e la sensazione generale sono ottenuti puntando a file CSS esterni.
Prima di chiederti di dedicarmi altro tempo, proverò alcune altre risorse da questa parte per vedere se riesco a fare un po’ di progressi.

In ogni caso, devo mettere da parte il progetto per qualche giorno mentre mi occupo di altri compiti più urgenti.

Ti farò sapere come va.

Grazie ancora,
Catherine