페이지 상단에 외부 링크 추가하는 법이 궁금해요

개발
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>
    <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/">홈</a>
</li>
        <li class="top-ext--main" id="top-discourse-link-forums">
            <a class="top-ext--link top-discourse-link-main" href="/">포럼</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">공지사항</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-analytics">분석</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-budget">예산</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-employee">직원</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-financials">재정</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-learning">학습</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-research">연구</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-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">이벤트</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">강연자</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/events/2016-uaccess-symposium">심포지엄</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/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">리소스</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">경영지원</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-analytics-resources">분석</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-budget-resources">예산</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-employee-resources">직원</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-financials-resources">재정</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-learning-resources-0">학습</a>
</li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-student-resources">학생</a>
</li>
            </ul>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/help/questions">자주 묻는 질문</a>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/contact-us">문의하기</a>
        </li>
    </ul>
  </div>
</div>
2

게시물에 포함된 코드는 HTML만 포함되어 있어, 스타일이 적용되지 않은 세로 목록으로 표시되는 것이 정상입니다. 가로 목록으로 표시하려면 해당 요소에 대한 CSS를 포함해야 합니다.

또한, 아마도 하위 메뉴 항목이 있는 메뉴일 가능성이 높습니다. 따라서 테마/컴포넌트에 이를 처리하는 JavaScript도 추가해야 합니다.

3

조, 답변 감사합니다.

그러면 메뉴를 가로로 만들 수 있는 CSS 코드를 찾아서, 이 코드 맨 위에 추가하면 되는 건가요?
(죄송합니다. 저는 초보입니다)
그리고 네, 링크 세 개에 서브메뉴가 있습니다.

4

걱정 마세요, Catherine :+1:

메뉴의 HTML을 어디서 가져오느냐에 따라 달라집니다.

그것이 Discourse 테마인가요?

그렇다면 테마의 CSS 탭에서 CSS를 가져올 수 있어야 합니다. 그런 경우 새 테마에 CSS만 복사하면 됩니다. 그렇지 않다면 과정이 조금 다르며, 더 자세한 정보를 주시면 도움을 드릴 수 있습니다.

메뉴 코드를 유지보수하는 것에 신경 쓰지 않으시다면, 여기서 시도하고 계신 것과 유사한 기능을 제공하며 설정이 쉬운 테마 구성 요소를 가지고 있습니다.

5

조, 도움 주셔서 감사합니다.
이전 "테마"의 CSS 필드는 비어 있습니다.
사이트의 역사를 어느 정도 아는 사람과 이야기해 봤는데, 전부 커스텀이라고 했습니다. 그리고 외관과 느낌은 외부 CSS 파일을 참조하여 구현하고 있다고 하더군요.
더 이상 당신의 시간을 빼앗기 전에, 제가 이쪽에서 몇 가지 자료를 더 찾아보겠습니다. 조금이라도 진전이 있을지 확인해 보고 싶어요.
어쨌든 며칠 동안은 다른 더 시급한 업무를 처리해야 해서 이 프로젝트를 잠시 중단해야 합니다.
결과가 어떻게 나오는지 알려드리겠습니다.
다시 한번 감사합니다.
캐서린