Нужна помощь с добавлением внешних ссылок в верхней части страницы

Разработка
1

Я не уверен, является ли это проблемой темы или нет, но наши страницы Discourse являются частью более крупного веб-сайта. Дизайн и стиль веб-сайта меняются, и я пытаюсь понять, как сделать так, чтобы наши страницы Discourse соответствовали ему. Мне удалось использовать тему, за исключением внешних ссылок в верхней части страницы.

Они должны быть расположены горизонтально, но вместо этого они отображаются вертикально.
Я взял этот код из старой темы и поместил его во вкладку «Header» редактора 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="/">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">Announcements</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-analytics">Analytics</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">Employee</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-financials">Financials</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-learning">Learning</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-research">Research</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-student">Student</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">Events</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">Speakers</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">Calendar</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">Resources</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">Business Office</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-analytics-resources">Analytics</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">Employee</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-financials-resources">Financials</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-learning-resources-0">Learning</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-student-resources">Student</a>
</li>
            </ul>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/help/questions">FAQs</a>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/contact-us">Contact Us</a>
        </li>
    </ul>
  </div>
</div>
2

Код, который вы привели в своём сообщении, содержит только HTML, поэтому ожидается, что он будет отображаться в виде нестилизованного вертикального списка. Чтобы получить горизонтальный список, необходимо добавить CSS-стили для этого элемента.

Кроме того, судя по всему, это должно быть меню с подпунктами. Поэтому вам также нужно добавить JavaScript-код, обрабатывающий это, в вашу тему или компонент.

3

Привет, Джо, спасибо за ответ.

Значит, я должен найти CSS-код, чтобы сделать меню горизонтальным, а затем добавить этот код в начало этого кода?
(извините, я новичок)
И да, у трёх ссылок есть подменю.

4

Не переживайте, Кэтрин :+1:

Это зависит от того, откуда вы берёте HTML для меню.

Это тема для Discourse?

Если да, то вы можете получить CSS, перейдя на вкладку CSS в настройках темы. Вам останется только скопировать этот CSS в новую тему. Если нет, то процесс будет немного другим, и я могу помочь, если вы предоставите больше деталей.

Если вы не хотите беспокоиться о поддержке кода для меню, у нас есть легко настраиваемый компонент темы, который похож на то, чего вы пытаетесь добиться здесь:

5

Спасибо за помощь, Джо.
Поле CSS для старого «Темы»? пустое.
Я поговорила с кем-то, кто знает часть истории сайта, и он сказал, что всё сделано на заказ. Внешний вид и ощущение достигаются за счёт ссылок на внешние CSS-файлы.
Прежде чем просить вас потратить ещё больше времени на мою задачу, я попробую несколько других ресурсов здесь, чтобы немного продвинуться вперёд.

В любом случае мне нужно отложить проект на несколько дней, пока я займусь другими более важными делами.

Сообщу вам, как всё получится.

Ещё раз спасибо,
Кэтрин