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,

    beim Base Stil mit dabei ist

    hehe. Damit hast du dann alle Pseudeselektoren belegt^^. Mir gings ja auch nur um den Rahmen, der ließ sich rein mit CSS so wie es jetzt ist leider nicht abbilden. :cursing:

    Mit freundlichen Grüßen


    Nanum

  • 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.

    Notfallsanitäter

    iPhone 12 Pro Max / Apple Watch Series 6 / iPad Pro


  • hat er eigentlich oben alles geschrieben.


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

  • hat er eigentlich oben alles geschrieben.

    Genau. Das stimmt zu 99%. :)

    Wobei userOnlineGroupMarking4 durch die eigene Gruppen-ID geändert werden müsste. Bei mir ist das z.B. userOnlineGroupMarking6 & userOnlineGroupMarking7.

  • enau. Das stimmt zu 99%. :)

    Wobei userOnlineGroupMarking4 durch die eigene Gruppen-ID geändert werden müsste. Bei mir ist das z.B. userOnlineGroupMarking6 & userOnlineGroupMarking7.

    das setze ich mal voraus das er es weiß

  • Das ist sein code den ich reingesetzt habe.

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