Einfliegende Beiträge, drehende Avatare und links an der Sidebar ein Strich mit einem Titel

Guten Abend, Tag oder Morgen die Damen und Herren,

in diesem Beitrag möchte ich nun fragen, wie man es schafft ein drehendes Avatar, einen einfliegenden Beitrag und eine Titelbar-Leiste links daneben (*klick hier* für Bild-Erklärung der Titelbar) zu erstellen bzw. zu programmieren. Es wäre nett, wenn gesagt werden könnte, wo diese hin müssten.

Ich bedanke mich bereits im Voraus für jede Hilfe.

Mit freundlichen Grüßen,

Quote from Sternchen

Überall zoomen, Logo zoomen und dein Avatar in Beiträgen drehen geht so.

Code

.message .messageSidebar .userAvatar > a > img {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.message .messageSidebar .userAvatar > a > img:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
.userAvatarImage{
 -webkit-transition-duration: 0.8s;
 -moz-transition-duration: 0.8s;
 -o-transition-duration: 0.8s;
 transition-duration: 0.8s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 overflow:hidden;
 }
.userAvatarImage:hover
 {
 -webkit-transform:scale(1.6);
 -moz-transform:scale(1.6);
 -o-transform:scale(1.6);
 }
.pageHeaderLogo > a > img {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.pageHeaderLogo > a > img:hover
{
-webkit-transform:scale(1.4);
-moz-transform:scale(1.4);
-o-transform:scale(1.4);
}

Display More

Danke, und wohin damit das es vei jedem Benutzer ist?

Quote from GangstaSunny

Drehender Avatar

Was genau meinst du? Das wäre durchaus mit einem stinknormalen bild.gif machbar.

Einfliegende Beiträge

Meinst du sowas https://codepen.io/kmyers/pen/PwRjyV ?

Strich Links mit Titel

Wäre ein ::after (oder ::before) mit einem content und einen border.

Code

.messageSidebar {
    border-left: 25px solid #325c84;
}

.messageSidebar:after {
    content: "Kunde";
    position: absolute;
    left: -22px;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    top: calc(50%);
    color: #fff;
}

Display More

Das ganze wäre dann vielleicht noch entsprechend zu verschönern und richtig zu positionieren.

Display More

wo muss das 3. hin mit der sidebar und einfliegende beiträge meine ich die threads die eingeflogen kommen und nicht die antworten darunter

Quote from GangstaSunny

ACP > Anpassung > Stile > (dein Stil) > Erweiterte Einstellung

Kannst du bitte möglichst detailliert erklären was du fliegen lassen willst, wann du etwas fliegen lassen willst & was du mit fliegen überhaupt meinst?

Ist auch nicht so wichtig. Danke für die Sachen dort oben . Doch verstehe ich noch nicht wie genau das mit dem Title Funktionieren soll...

Quote from Grener1

wo muss das 3. hin mit der sidebar und einfliegende beiträge meine ich die threads die eingeflogen kommen und nicht die antworten darunter

Wie mache, ich das die Sidebar nur bei bestimmten Leuten angezeigt wird bzw. bei bestimmten Rängen. Bsp: Community-Manager = Management.

Quote from Nils_Schneider

In dem du nur bestimmte Ränge diese Box sehen lässt.

Tut mir leid, doch das Bild hilft mir nicht so richtig, könntest du mir vielleicht verraten von, wo du dieses Menu hast, da es ja egt. Ein individuelles CSS-Code war.