Preciso de ajuda para adicionar links externos no topo da página

Dev
1

Não tenho certeza se isso é um problema do tema ou não, mas nossas páginas do Discourse fazem parte de um site maior. A aparência e o estilo do site estão mudando, e estou tentando descobrir como fazer com que as páginas do Discourse se harmonizem. Consegui usar um Tema com sucesso, exceto pelos links externos no topo da página.

Eles deveriam estar dispostos horizontalmente, mas, em vez disso, estão aparecendo verticalmente.
Copiei este código do tema antigo e o inseri na aba Cabeçalho do 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="/">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

O código que você tem em sua postagem contém apenas HTML, então é esperado que ele seja exibido como uma lista vertical sem estilos. Para ter uma lista horizontal, você precisa incluir o CSS para esse elemento.

Além disso, pelo que parece, provavelmente deveria ser um menu com itens de submenu. Portanto, você também precisaria adicionar o JavaScript que lida com isso ao seu tema/componente.

3

Oi Joe, obrigado pela resposta.

Então, eu deveria conseguir procurar o código CSS para deixar o menu horizontal e, em seguida, adicionar esse código no topo deste código?
(desculpe, sou iniciante)
E sim, três dos links têm submenus.

4

Sem problemas, Catherine :+1:

Isso depende de onde você está obtendo o HTML do menu.

Esse é um tema do Discourse?

Se for, você deve conseguir obter o CSS dele acessando a aba CSS do tema. Nesse caso, você só precisará copiar o CSS para o novo tema. Se não for, o processo é um pouco diferente, e posso tentar ajudar se você me der mais detalhes.

Se você não quiser se preocupar em manter o código do menu, temos um componente de tema fácil de configurar que é semelhante ao que você está tentando alcançar aqui:

5

Obrigada pela ajuda, Joe.
O campo CSS do antigo “Tema” está vazio.
Falei com alguém que conhece parte da história do site e ele disse que tudo é personalizado. A aparência e a sensação são alcançadas apontando para arquivos CSS externos.
Antes de pedir que você gaste mais tempo comigo, vou tentar alguns recursos adicionais aqui para ver se consigo avançar um pouco.

De qualquer forma, preciso deixar o projeto de lado por alguns dias enquanto cuido de outras tarefas mais urgentes.

Vou te manter informada sobre como vai.

Obrigada novamente,
Catherine