ページの上部に外部リンクを追加する方法についてご支援ください

開発
1

これがテーマの問題かどうかはわかりませんが、当社の Discourse ページはより大きなウェブサイトの一部となっています。ウェブサイトの外観や雰囲気が変更されており、Discourse ページをそれに合わせる方法を探っています。テーマを使用することで成功しましたが、ページ上部の外部リンクについてはまだ解決できていません。

それらは水平に表示されるべきですが、実際には垂直に表示されています。
このコードは古いテーマから取得し、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 コードを検索して、そのコードをこのコードの先頭に追加すればよいのでしょうか？
（すみません、初心者なので）
はい、3 つのリンクにはサブメニューがあります。

4

気にしないで、Catherine :+1:

それは、メニューの HTML をどこから取得しているかによります。

それは Discourse テーマですか？

もしそうなら、テーマの CSS タブに移動すれば CSS を取得できるはずです。その後、その CSS を新しいテーマにコピーするだけで済みます。そうでない場合は、手順が少し異なりますが、詳細を教えていただければお手伝いできます。

メニューのコードの保守を気にしたくない場合は、ここで目指しているものと似た、設定が簡単なテーマコンポーネントをご用意しています。

5

ジョー、お手伝いいただきありがとうございます。
古い「テーマ」の CSS フィールドは空欄になっています。
サイトの歴史についてある程度ご存じの方とお話ししたところ、すべてカスタムであると伺いました。外観や使い心地は、外部 CSS ファイルを参照することで実現されているそうです。
さらにご時間を割いていただく前に、こちらでいくつかの追加リソースを試して、少しでも進展を図ってみようと思います。

それにしても、他のより重要なタスクに対応するため、このプロジェクトは数日間お預けせざるを得ません。

進捗状況については改めてご連絡いたします。

改めてありがとうございます。
キャサリン