نحتاج مساعدة في إضافة روابط خارجية في أعلى الصفحة

مطور
1

لا أدري ما إذا كانت هذه مشكلة تتعلق بالقالب أم لا، لكن صفحات Discourse لدينا جزء من موقع ويب أكبر. يتغير مظهر وملمس الموقع، وأنا أحاول معرفة كيفية جعل صفحات Discourse لدينا متوافقة معه. لقد نجحت في استخدام قالب، باستثناء الروابط الخارجية في أعلى الصفحة.

يجب أن تكون هذه الروابط أفقية، لكنها تظهر عمودية بدلاً من ذلك.
لقد أخذت هذا الكود من القالب القديم ووضعته في تبويب الرأس (Header) ضمن محرر 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/">الرئيسية</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

لا تقلقي يا كاثرين :+1:

يعتمد ذلك على مصدر كود HTML الخاص بالقائمة.

هل هذه سمة من نوع Discourse؟

إذا كانت كذلك، فيجب أن تتمكن من الحصول على كود CSS منها إذا انتقلت إلى علامة التبويب CSS في السمة. حينها ستحتاج فقط إلى نسخ كود CSS إلى السمة الجديدة. أما إذا لم تكن كذلك، فإن العملية مختلفة قليلاً، ويمكنني محاولة المساعدة إذا زودتني بمزيد من التفاصيل.

إذا كنتِ لا ترغبين في القلق بشأن صيانة كود القائمة، فإننا نوفر مكون سمة سهل التكوين يشبه ما تحاولين تحقيقه هنا

5

شكرًا لك على المساعدة، جو.
حقل CSS الخاص بـ “المظهر” القديم فارغ.
تحدثت مع شخص يعرف بعض تاريخ الموقع، وقد أفاد بأن كل شيء مخصص. ويتم تحقيق المظهر والشعور من خلال الإشارة إلى ملفات CSS خارجية.
قبل أن أطلب منك قضاء المزيد من الوقت معي، سأحاول استخدام بعض الموارد الإضافية من جهتي لأرى ما إذا كان بإمكاني إحداث تقدم.

على أي حال، سأعلق المشروع لبضعة أيام بينما أتعامل مع مهام أخرى أكثر إلحاحًا.

سأخبرك بكيفية سير الأمور.

شكرًا مرة أخرى،
كاثرين