Menübutton einfärben mit icon

  • Hallo ich versuche einen Menüpunkt mit einer Farbe zu belegen und vor den text dann ein png als icon hinzusetzen.

    Menüpunkt heisst im bespiel hier -> Chat und wurde mit einwm Externen Link im ACP angelegt und ist sichtbar.

    Im Template _menu habe ich folgende klasse eingetragen

    Code
    <a class="chat">Chat</a>

    Dann habe ich im Stile in der CSS folgendes einegtragen.

    Code
    .chat a {
        color: #ffffff;
        background-color: #3399FF;
        display: block;
        padding: 2px 8px;
        border-radius: 3px;
    }

    Der Menüpunkt wird nicht eingefärbt, im Menü habe ich dann einfach am ende stehen: Chat als Text.

    Weiss einer Rat?

    Zudem wie erwähnt sollte dann ein icon noch vorne hin.

    Danke für ein Feedback gruss Grischabock

  • Dein .chat a { beim CSS würde z.B. folgende HTML Struktur voraussetzen:

    HTML
    <div class="chat">
        <a>Chat</a>
    </div>

    Für deine tatsächlich genutzte HTML Struktur sähe das CSS dagegen wie folgt aus:

    CSS
    .chat {
    
    }

    oder

    CSS
    a.chat {
    
    }

    Für ein Icon vorne dran, würde sich z.B. mal ganz grob sowas anbieten, falls ich dein Vorhaben richtig verstehe:

    CSS
    .chat::before {
        content: url(pfad/zum/image.png);
    }

    Edit:

    Falls das alles nicht passen sollte, dann empfiehlt es sich die Anweisungen via CSS noch weiter zu konkretisieren. Dafür wäre es dann aber hilfreich zu wissen, in welchem Menü der Menüpunkt angezeigt wird (Hauptmenü? Anderes Menü? Wenn ja, wo platziert?) und an welcher Stelle im Template du das genau eingefügt hast. Damit man das ganz explizit via CSS ansprechen kann.

    Edited once, last by ReeN (August 16, 2017 at 1:56 PM).

  • Habe nun mal versucht, aber es klappt nicht. Kann es sein das ich trotzdem das falsche Template nehme?


    Code: Individuelles CSS und SCSS
    .mainMenu .boxMenu > li > a.chat {
        color: #ffffff;
        background-color: #7289da;
        display: block;
        padding: 2px 8px;
        border-radius: 3px;
    }
  • Müsste aber eigentlich funktionieren und wäre wohl auch die einfachere Variante, falls es dir nicht primär um das Basteln an Templates geht, um etwas zu lernen.

    Wie ist denn der Link deiner Chat Seite genau? Vielleicht ist der Link einfach anders und der Code von SwPotsdam greift deshalb nicht.

  • Schon irgendwie langweilig, so ohne eigene Ideen... :)

    CSS
    .box.mainMenu a[href*="discord.gg"] {
        background-repeat: no-repeat !important;
        background-color: #7289da !important;
        color: #fff !important;
        padding-left: 35px !important;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAABAlBMVEUAAABziNlwh9lziNlvg+JtkvFJluRyi95xhtlvhdhyh9p0hNt2hslpmd1ziNt9ndV3bdVxgNV7jth6g9h4jtdtgthtg9d0h9hsi+Bsjd6IetCIdthlctxme9lrhdhzh9hwfM9db+z///9ziNlsgtd3jNpqgddpf9f9/f73+PzAye5xhthmftb6+/7z9fzr7vrl6fjf4/a6xeycq+SSouGAlN1heNX4+f3p7PnO1vHEze+xvOmjsOaYqOOWpuOFl959kdx5jdttg9dxiNVcdNPu8frt7/rX3fTR2PG0v+qvvOqmueiptueMneByht1of9p6hdZshdZ6kdVuetNjetNqgNKcXhTlAAAAInRSTlMA7ovJMwkH/e7uzKagmoEvJ/37+/rNysazr6ynm5SEgzUD15bdbgAAANZJREFUGNM9z9WSwkAQBdBOAiyyC6y7dTIzxIgHd3f//19hSAHnrbuqu+6Fk1z2VRCk3xicfT/IkZvbBHCJzy2lCseU5XucL+7WrN1sBUHLC1gvA5B/pJ7j2KpqO3ad6jHIdkkZz4ptKoJk+HjlGWlIGhPEilYoaBVElyUh1R1jqdO3in1i4khPwQuxEGuNktmoIQ7JM/wQFa1B9LKMakeE/P2M39ddd66ZON388WA7v+qHBgsX1eYhc4r+0QsVWddlZb96iwP3//V0KcfnSE6UBCEtRvWPhOkhhPp2MIkAAAAASUVORK5CYII=') !important;
        background-position: 16px 16px !important;
    }

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!