Hilfe beim Basteln von Rahmen für die Sidebar

  • Ich möchte gern einen Rahmen um die Sidebar bei Beiträgen von Teammitgliedern haben, so wie es hier aktuell zu finden ist.

    Dank norse , der mir in diesem Beitrag bereits mit einem Tipp geholfen hat, habe ich das nun bereits geschafft, dass ein Rahmen in der passenden Farbe bei Beiträgen von Administratoren angezeigt wird.

    CSS
    .userOnlineGroupMarking6 .messageSidebar {
        border: solid 3px $wcfHeaderMenuBackground;
        border-bottom-width: 30px;
    }

    Nun fehlt mir noch ein Logo im unteren Teil des Rahmens. Und genau daran scheitere ich jetzt...

    Ich habe mir den CSS Code hier im Woltlab Forum angeschaut und mir folgenden Code übernommen:

    Leider wird das Logo dann allerdings auf dem Stift-Symbol in der Sidebar links oben angezeigt, der mich als Autor des Themas markiert.

    Kann mir jemand dabei helfen, das Logo nach unten in den Rahmen zu bekommen?

  • Hallo,

    dann ist wohl auf .messageSidebar::after bereits durch das Plugin von Mipu der Stift gelegt worden. Habe mir das gerade bei dir angesehen und genau ist es. :D

    Mit freundlichen Grüßen

    Nanum

  • dann ist wohl auf .messageSidebar::after bereits durch das Plugin von Mipu der Stift gelegt worden.

    Oh, wusste gar nicht, dass ich dafür ein Plugin installiert habe... Wie soll denn das heißen? Finde diesbezüglich keines...

    Wie hast du es denn gelöst Nanum ? Wobei ich die Lösung direkt von Woltlab auch super finde. Was ist denn bei dir anders?

    Alexander Ebert

    Ich probiere das mal aus!

  • Hallo,

    Wie soll denn das heißen? Finde diesbezüglich keines...

    dürfte wohl dieses hier sein: https://wbbsupport.de/filebase/entry/164-threadstarter-icon/

    Wie hast du es denn gelöst Nanum ?

    Als erstes musst du deine TeamPosts oder die zu kennzeichnenden Posts nach diesem Schema markieren: https://kittmedia.com/content-entry/520

    Dann im Template messageSidebar folgenden Code auf deine Bedürfnisse angepasst unter {event name='afterCredits'} einfügen:

    Code
    <div class="DeineNeueKlasse">
        
        {assign var="groupIDs" value=$userProfile->getGroupIDs()}
        
    {if 4|in_array:$groupIDs}<a class="jsTooltip" title="Gewünschtes Tooltip" href="Gewünschter Link" target="_blank"><img src="Dein Bildlink"></a>
            {else if 8|in_array:$groupIDs}<a class="jsTooltip" title="Gewünschtes Tooltip" href="Gewünschter Link" target="_blank"><img src="Dein Bildlink"></a>{/if}
    
    </div>

    Bei den GruppenIDs natürlich nur die Gruppen, bei denen die Grafik eingeblendet werden soll.

    Die entsprechenden Änderungen müssen ggf. bei anderen Endanwendungen ebenfalls manuell getätigt werden.

    Nicht zu vergessen, dass die ganze Sache im Mobilen bei uns anders aussieht, siehe Anhang weiter oben.^^ Ganz ehrlich, ich bin einfach nicht gut darin, einen geordneten Guide zu schreiben :/ .

  • Du kannst auch einfach ::before verwenden, wenn ::after bereits anderweitig verwendet wird.

    Perfekt! Damit klappt es tatsächlich. Vielen Dank dafür. ;)

    Nein, habe dafür kein Plugin installiert. Dann würde es im Standard Woltlab Stil auch angezeigt werden. Denke, dass das beim Base Stil mit dabei ist. ;)

    Danke für die Erklärung Nanum . Bleibe aber bei der "einfachen" Markierung. ;)

  • Hallo,

    ich habe nun versucht, diesen Rahmen um die MessageSidebar mit folgendem Code hinzuzufügen:

    Zu einem gewissen Teil funktioniert das auch, nur fehlt der Rahmen um den "grau" hinterlegten Teil, wo das Avatar, der Nutzername usw. zu lesen ist (siehe Ahnhang).

    Was würde dort fehlen, oder was habe ich dort falsch gemacht. Vielen Dank für eure Hilfe.

    iPhone 15 Pro Max / Apple Watch Ultra 2 / iPad Pro 12,9" / 16’‘ MacBook Pro (M3)

  • hat er eigentlich oben alles geschrieben.

    Möchtest du kein Bild kannst du auch im content einen Text setzten.

  • Das ist sein code den ich reingesetzt habe.

    Um es genau zu nehmen, sieht mein Code aktuell so aus. ;)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!