Hilfe beim Basteln von Rahmen für die Sidebar

PoooMukkel · Sep 6th 2017

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:

CSS

.userOnlineGroupMarking6 .messageSidebar::after {
    background-image: url("#{$style_image_path}BannerMobile.png");
    background-size: cover;
    bottom: -23px;
    content: "";
    height: 20px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 102px;
}

Display More

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?

Nanum · Sep 6th 2017

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.

**Alexander Ebert** · Sep 6th 2017

Quote from PoooMukkel

.userOnlineGroupMarking6 .messageSidebar::after

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

Nanum · Sep 6th 2017

Hallo,

ich finde meine Lösung des ganzen sowieso besser. Ist zwar komplizierter, dafür lässt sich aber auch ein andersfarbiger / verschiedenfarbiger Rahmen verwenden.

PoooMukkel · Sep 6th 2017

Quote from 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!

Nanum · Sep 6th 2017

Hallo,

Quote from PoooMukkel

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

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

Quote from PoooMukkel

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 .

PoooMukkel · Sep 6th 2017

Quote from Alexander Ebert

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

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

Quote from Nanum

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

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.

Nanum · Sep 6th 2017

Hallo,

Quote from PoooMukkel

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.

PoooMukkel · Sep 6th 2017

So sieht das nun bei mir übrigens aus:

Denke, dass das so in Ordnung ist.

Danke euch allen!

Marvin · Oct 6th 2017

Hallo,

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

Code

.userOnlineGroupMarking4 .messageSidebar::after {
        border: solid 1px $wcfHeaderMenuBackground;
    border-bottom-width: 30px;
    background-size: cover;
    bottom: -23px;
    color: #FFFFFF;
    content: "Team";
    height: 20px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
}

Display More

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.

mystery2072 · Oct 6th 2017

Quote from PoooMukkel

So sieht das nun bei mir übrigens aus:

Denke, dass das so in Ordnung ist.

Danke euch allen!

Display More

Kannst du mal den Css Code einfügen hier gefällt mir sehr gut

ZeroGravity · Oct 6th 2017

Ich habs hiermit gemacht

Code

.userOnlineGroupMarking12 .messageSidebar {border: solid 3px #c71585;}

mystery2072 · Oct 6th 2017

haste mal den genauen code?

skywaker67 · Oct 6th 2017

Code

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

.userOnlineGroupMarking4 .messageSidebar::after {
    background-image: url("#{$style_image_path}dein bild name");
    background-size: cover;
    bottom: -23px;
    content: "";
    height: 20px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 102px;
    color: #ffffff;
}

Display More

hat er eigentlich oben alles geschrieben.

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

PoooMukkel · Oct 6th 2017

Quote from skywaker67

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.

skywaker67 · Oct 6th 2017

Quote from PoooMukkel

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ß

mystery2072 · Oct 7th 2017

das hab ich ja alles gemacht

Irgendwie haut der Rahmen aber nicht ganz hin, des habe ich ja nach deinem Code gefragt PoooMukkel

skywaker67 · Oct 7th 2017

Quote from mystery2072

des habe ich ja nach deinem Code gefragt PoooMukkel

Das ist sein code den ich reingesetzt habe.

Darklord · Oct 7th 2017

Funktioniert ohne Probleme, klasse PoooMukkel

PoooMukkel · Oct 7th 2017

Quote from skywaker67

Das ist sein code den ich reingesetzt habe.

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

CSS

/* Messagesidebar Rahmen für Teammitglieder auf dem Desktop */
@include screen-lg {
    .userOnlineGroupMarking6 .messageSidebar, .userOnlineGroupMarking7 .messageSidebar {
        border: solid 2px $wcfHeaderMenuBackground;
        border-bottom-width: 30px;
    }

    .userOnlineGroupMarking6 .messageSidebar::before, .userOnlineGroupMarking7 .messageSidebar::before {
        background-image: url("#{$style_image_path}MeinKleinesBanner.png");
        background-size: cover;
        bottom: -23px;
        content: "";
        height: 20px;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        width: 120px;
    }
}

Display More

Hilfe beim Basteln von Rahmen für die Sidebar

Participate now!

Share