Script Steam Sidebar

[DarkElite]

Bună seara , 

de unde pot face și eu rost de acest script pentru sidebar : 

https://i.imgur.com/IcF6zXU.png

 

[Coxi]

adaugi in style_css la final 

.dark-steamSidebar-wrap{
 display:block;
 position:relative;
 padding:10px;
 width:100%;
 height:auto;
 background-color:rgba(0,0,0,0.0);
 left:0;
 right:auto;
 box-sizing:border-box;
}
 .dark-steamSidebar{
 position:relative;
 width:100%;
 font-family:'Roboto', sans-serif;
 min-height:50px;
 border-radius:8px;
 background-color:#1a1a21;
 background-image:url("https://ultraplay.ro/forum/public/style_images/ultraplayro/imagesplay/STEAM GRUP.png");
 background-size:cover;
 background-repeat:no-repeat;
 background-position:center;
 padding:30px;box-sizing:border-box;
}
.dark-steamSidebar-avatar{
 position:relative;
 width:100px;
 height:70px;
 background-size:cover;
 border-radius:100%;
 margin:0 auto;
 transition:all 0.3s;
}
.dark-steamSidebar-avt-radials{
 position:absolute;
 width:100px;
 height:100px;
 top:-15px;
 left:-15px;
 transform-origin:center;
 transition:all 0.5s;
}
.dark-steamSidebar:hover .dark-steamSidebar-avt-radials{
 transform:rotate(180deg);
}
.dark-sa-rad1{
 position:absolute;
 fill:none;
 stroke-width:4px;
 stroke:#019af6;
 stroke-dasharray:30,100;
 transform-origin:center;
 transition:all 0.5s;
}
.dark-steamSidebar:hover .dark-sa-rad1{
 stroke-dasharray:74;
}
.dark-sa-rad2{
 position:absolute;
 fill:none;
 stroke-width:1.5px;
 stroke:#122cb8;
 stroke-dasharray:54;
 transform-origin:center;
 transition:all 0.5s;
}
.dark-steamSidebar:hover .dark-sa-rad2{
 stroke-dasharray:30;
}
.dark-steamSidebar-name{
 color:white;
 text-align:center;
 margin:20px 0;
 font-size:14px;
 font-weight:500;
}
.dark-steamSidebar-stat{
 position:relative
 ;width:100%;
 margin-bottom:5px; 
 padding:5px;
 font-weight:500;
 font-size:12px;
 color:white;
 box-sizing:
 border-box;
}
.dark-steamSidebar-stat:before{
 content:"";
 position:absolute;
 width:5px;
 height:0;
 top:8px;
 left:-10px;
 background:#0c68be;
 transition:all 0.1s;
}
.dark-steamSidebar-stat:hover:before{
 height:10px;
}.dark-steamSidebar-stat:after{
 content:"";
 position:absolute;
 bottom:-2px;
 left:0;
 width:100%;
 height:1px;
 background:#019af6; 
}
.dark-steamSidebar-stat-num{
 float:right;
}
.dark-steamSidebar-buttonWrap{
 position:relative;
 text-align:center;
 margin:30px 0;
}
.dark-steamSidebar-button{
 display:inline-block;
 padding:10px 20px;
 background:#019af6;
 color:white;
 font-weight:200;
 cursor:pointer;
 text-transform:uppercase;
 letter-spacing:0.5px;
 font-size:13px;
 transition:all 0.3s;
}
.dark-steamSidebar-button:hover{
 background:#fff;
 color:#019af6;
 }
.dark-steamSidebar-dn{
 color:white;
 font-size:10px;
 opacity:0.3;
 text-align:center;
 transition:all 0.3s;
 padding:0 30px;
 box-sizing:border-box;
}
.dark-steamSidebar:hover .dark-steamSidebar-dn{
 opacity:0.8;
}
.dark-steamSidebar .dark-steamSidebar-dn:hover{
 opacity:1;
}

si 2.. trebuie sa ai aceea aplicatie custom sidebar block.. parca.. crezi un block si in casuta goala pui : 

<div class="dark-steamSidebar-wrap"> <div class="dark-steamSidebar"> <div class="dark-steamSidebar-avatar" style="background-image: url( https://i.imgur.com/p13iRnf.png );"> <div class="dark-steamSidebar-avt-radials"> </div> </div> <div class="dark-steamSidebar-name"> STEAM COMMUNITY </div> <div class="dark-steamSidebar-stats"> <div class="dark-steamSidebar-stat"><font color="#fff">Members : <div class="dark-steamSidebar-stat-num"> 74 </div> </font></div><br> <div class="dark-steamSidebar-stat"><font color="#fff">Online : <div class="dark-steamSidebar-stat-num"> 30</div> </font></div><br> <div class="dark-steamSidebar-stat"><font color="#fff">In Game : <div class="dark-steamSidebar-stat-num"> 9 </div> </font></div><br> </div> <div class="dark-steamSidebar-buttonWrap"> <a href="http://steamcommunity.com/groups/aicipuisteamgroup"><div class="dark-steamSidebar-button"> View and Join </div></a> </div> </div></div>

 

[DarkElite]

Mulțumesc mult. 

[cyberdesign]

asta e inspect element , de ce nu dai varianta buna?

[DeNyS.]

1 hour ago, cyberdesign said:

asta e inspect element , de ce nu dai varianta buna?

Pentru că varianta originală costă.

[Coxi]

o am si pe aia.. ... o sa o public.. ca sa nu mai vina toti "plagiatori" da si mie

[DeNyS.]

10 hours ago, Lucas said:

o am si pe aia.. ... o sa o public.. ca sa nu mai vina toti "plagiatori" da si mie

Tot aia "plagiata" este. Atata timp cat nu ai platit autorii ei ca sa ti-o implementeze.