Hilfe beim Hinzufügen externer Links oben auf der Seite benötigt

Entwickler
1

Ich bin mir nicht sicher, ob dies ein Theme-Problem ist, aber unsere Discourse-Seiten sind Teil einer größeren Website. Das Erscheinungsbild der Website ändert sich, und ich versuche herauszufinden, wie wir unsere Discourse-Seiten daran anpassen können. Ich war erfolgreich dabei, ein Theme zu verwenden, außer bei den externen Links oben auf der Seite.

Diese sollten horizontal angeordnet sein, werden aber stattdessen vertikal angezeigt.
Ich habe diesen Code aus dem alten Theme entnommen und in den Reiter „Header“ des CSS/HTML-Editors eingefügt:

<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="/">Foren</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">Mitteilungen</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-analytics">Analytik</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">Mitarbeiter</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-financials">Finanzen</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-learning">Lernen</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-research">Forschung</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="/c/uaccess-student">Studierende</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">Veranstaltungen</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">Referenten</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">Kalender</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">Ressourcen</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">Geschäftsstelle</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-analytics-resources">Analytik</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">Mitarbeiter</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-financials-resources">Finanzen</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-learning-resources-0">Lernen</a>
                </li>
                <li class="top-ext--sub-item">
                    <a class="top-ext--link" href="http://community.uaccess.arizona.edu/uaccess-student-resources">Studierende</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">Kontakt</a>
        </li>
    </ul>
  </div>
</div>
2

Der Code in deinem Beitrag enthält nur HTML, daher ist es zu erwarten, dass er als unformatierte vertikale Liste angezeigt wird. Um eine horizontale Liste zu erhalten, musst du das CSS für dieses Element einfügen.

Außerdem sieht es so aus, als ob es sich um ein Menü mit Untermenüpunkten handeln sollte. Daher müsstest du auch das JavaScript, das dies steuert, zu deinem Theme bzw. deiner Komponente hinzufügen.

3

Hallo Joe, danke für die Antwort.

Ich sollte also in der Lage sein, den CSS-Code zu finden, um das Menü horizontal darzustellen, und diesen Code dann oben an diesen Code anfügen?
(Entschuldigung, ich bin noch neu)
Und ja, drei der Links haben Untermenüs.

4

Kein Problem, Catherine :+1:

Das hängt davon ab, woher du das HTML für das Menü beziehst.

Ist das ein Discourse-Theme?

Falls ja, solltest du den CSS-Code daraus beziehen können, wenn du zur Registerkarte CSS des Themes gehst. Du müsstest dann nur den CSS-Code in das neue Theme kopieren. Falls nicht, ist der Vorgang etwas anders, und ich kann versuchen zu helfen, wenn du mir mehr Details gibst.

Wenn du dich nicht um die Wartung des Codes für das Menü kümmern möchtest, haben wir eine einfach zu konfigurierende Theme-Komponente, die dem ähnelt, was du hier erreichen möchtest.

5

Vielen Dank für die Unterstützung, Joe.
Das CSS-Feld für das alte „Theme