Necesito ayuda para añadir enlaces externos en la parte superior de la página

Desarrollador
1

No estoy seguro de si se trata de un problema del tema o no, pero nuestras páginas de Discourse forman parte de un sitio web más amplio. El aspecto y la sensación del sitio están cambiando y estoy tratando de averiguar cómo hacer que nuestras páginas de Discourse coincidan. He tenido éxito usando un tema, excepto en los enlaces externos en la parte superior de la página.

Deberían aparecer en horizontal, pero en su lugar se muestran en vertical.
Tomé este código del tema antiguo y lo coloqué en la pestaña Encabezado del editor de 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/">Inicio</a>
        </li>
        <li class="top-ext--main" id="top-discourse-link-forums">
            <a class="top-ext--link top-discourse-link-main" href="/">Foros</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">Anuncios</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-analytics">Análisis</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-budget">Presupuesto</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-employee">Empleados</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-financials">Finanzas</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-learning">Aprendizaje</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-research">Investigación</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-student">Estudiantes</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">Eventos</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">Ponentes</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">Recursos</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">Oficina de Negocios</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-analytics-resources">Análisis</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-budget-resources">Presupuesto</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-employee-resources">Empleados</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-financials-resources">Finanzas</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-learning-resources-0">Aprendizaje</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-student-resources">Estudiantes</a>
                </li>
            </ul>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/help/questions">Preguntas frecuentes</a>
        </li>
        <li class="top-ext--main">
            <a class="top-ext--link" href="http://community.uaccess.arizona.edu/contact-us">Contáctenos</a>
        </li>
    </ul>
  </div>
</div>
2

El código que tienes en tu publicación solo contiene HTML, por lo que es esperado que se muestre como una lista vertical sin estilos. Para tener una lista horizontal, necesitas incluir el CSS para ese elemento.

Además, por lo que parece, probablemente debería ser un menú con elementos de submenú. Por lo tanto, también necesitarías agregar el JavaScript que lo maneja a tu tema o componente.

3

Hola Joe, gracias por la respuesta.

¿Entonces debería poder buscar el código CSS para hacer que el menú sea horizontal y luego agregar ese código al principio de este?
(lo siento, soy nuevo en esto)
Y sí, tres de los enlaces tienen submenús.

4

No te preocupes, Catherine :+1:

Eso depende de dónde obtengas el HTML del menú.

¿Es ese un tema de Discourse?

Si es así, deberías poder obtener el CSS yendo a la pestaña CSS del tema. En ese caso, solo necesitarías copiar el CSS al nuevo tema. Si no lo es, el proceso es un poco diferente, y puedo intentar ayudarte si me das más detalles.

Si no quieres preocuparte por mantener el código del menú, tenemos un componente de tema fácil de configurar que es similar a lo que estás intentando lograr aquí

5

Gracias por la ayuda, Joe.
El campo CSS del antiguo “Tema” está vacío.
Hablé con alguien que conoce parte de la historia del sitio y me dijo que todo es personalizado. La apariencia y el estilo se logran apuntando a archivos CSS externos.
Antes de pedirte que dediques más tiempo a esto, voy a consultar algunos recursos más por mi parte para ver si puedo avanzar un poco.

De todos modos, tengo que dejar el proyecto de lado por unos días mientras me ocupo de otras tareas más urgentes.

Te informaré sobre cómo avanza.

Gracias de nuevo,
Catherine