Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Wygląd shoutbox'a ala ipb

Szukam  Założony przez  Crouch.

Witam.
Jak uzyskać efekt sb aby wyglądał tak jak na ss'y?


Załączone pliki Miniatury
   
Zamień zawartość swojego nelson.css na to:
.logo img:hover {
    transition: all 0.6s;
    margin-left: -20px;
}


.stopka2 {
    text_align: center;
}

.navmenu {
    cursor: context-menu;
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    text-align: center;
    background: #141414;
    width: 100%;
    border-bottom: 1px solid #141414;
    border-top: 3px solid #124880;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    transition: all 0.5s;
}

.navmenu a {
    text-decoration: none;
    color: inherit;
}

.navmenu li {
    height: 100%;
    text-align: center;
    padding: 0px 0px;
    margin: 0px;
    display: inline-block;
    width: 14%;
    background: #141414;
    transition: all 0.5s;
}

.navmenu li div {
      margin: 0px;
    padding: 30px 0px;
    cursor: pointer;
    background: #141414;
    width: 94%;
    color: #898989;
    font-size: 12px;
    font-weight: bold;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.navtxt {
    color: white;
    margin-left: -30px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    font-weight: 300;

}

.navmenu li div i {
    font-size: 24px;
    line-height: 15px;
    vertical-align: middle !important;
      
}

.navmenu li div:hover {
    border-bottom: 2px solid #124880;
    background: #1d1d1d;
    background-position: center;
    width: 100%;
  
}

.navmenu a:hover
.navtxt {
    margin-left: 0px;
    opacity: 1;
    pointer-events: auto;

}

.navmenu:hover {
    box-shadow: 0 0 20px #124880;
}

.stopka_info {
    background: #222 none repeat scroll 0% 0%;
    border: 1px solid #113059;
    height: 200px;
    opacity: 0.9;
    font-weight: bold;
}

.logo_info {
    display: block;
    padding: 25px 0px 0px 15px;
    width: 230px;
    margin-left: -20px;
    opacity: 1;
}

.onas {
    display: block;
    padding: 15px 0px 0px 15px;
    width: 137px;
    margin-left: 450px;
    opacity: 1;
    margin-right: 30px;
    margin-top: -165px;
}

.fb_info {
    display: block;
    padding: 15px 0px 0px 15px;
    width: 137px;
    margin-left: 250px;
    opacity: 1;
    margin-right: 30px;
    margin-top: -165px;
}

.dolacz {
    margin-left: -60px;
}

.autor {
    display: block;
    padding: 230px 0px 0px 15px;
    width: 280px;
    margin-left: 190px;
    opacity: 1;
    margin-right: 30px;
    margin-top: -165px;
}

.skin {
    display: block;
    width: 200px;
    margin-left: 206px;
    opacity: 1;
    margin-right: 30px;
    margin-top: -195px;
}


.top_posters {  
    background: #505050; none repeat scroll 0% 0%;
  
    float: right;
    margin-right: 5px;
    margin-top: -2px;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 1px 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 20%;
}

.top_online {
    background: #505050; none repeat scroll 0% 0%;
  
    float: right;
    margin-right: 5px;
    margin-top: -2px;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 1px 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.top_reputacja {
    background: #134476 none repeat scroll 0% 0%;
  
    float: right;
    margin-right: 5px;
    margin-top: -2px;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 1px 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
  
    text-transform: uppercase;
}

.last_post_avatar {
    max-height: 40px;
    max-width: 40px;
    float: left;
    margin: 5px;
    border-radius: 50%;
}

.sponsors {
    background: #1d1d1d;
    border: 1px solid #303030;
    -webkit-box-shadow: inset rgba(0,0,0,0.4) 0px 1px 6px;
    -moz-box-shadow: inset rgba(0,0,0,0.4) 0px 1px 6px;
    box-shadow: inset rgba(0,0,0,0.4) 0px 1px 6px;
    text-shadow: rgba(0,0,0,0.8) 0px -1px 0px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #ddd;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    line-height: 140%;
    margin-bottom: 10px;
    padding: 10px;
}

#registerdiv {
position: fixed;
bottom: 10px;
line-height: 16px;
right: 10px;
z-index: 30000;
opacity: 0.8;
width: 260px;
height: auto;
background: #cf3737;
color: #fff;
text-shadow: rgba(0,0,0,0.3) 0px -1px 0px;
padding: 10px;
text-decoration: none;
font-size: 11px;
font-family: Tahoma;
border: 1px solid #771b1b;
box-shadow: rgba(0,0,0,0.3) 0px 1px 4px, inset #f66c6c 0px 1px 0px;
border-radius: 3px;
font-weight: normal;
}

#registerdiv:hover {
opacity: 1;
}

.head_baner {
    float: right;
    margin-top: 50px;
}

@-webkit-keyframes spaceboots {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover,
.shake:focus {
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 0.8s;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
.shake {
    display:inline-block
}

.autor_stats {
    background: #222 none repeat scroll 0% 0%;
    border: 1px solid #363636;
    margin-top: 7px;
    display: inline-block;
    height: 17px;
    line-height: 16px;
    padding: 2px 8px;
    font-size: 11px;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    margin-left: 12px;
    width: 85%;
}

.gorna_belka {
     background: #282828 url(/public/style_css/css_61/#) repeat-x 0 0;
     text-shadow: 0px 1px 1px rgba(0,0,0,0.4);
    -moz-box-shadow: rgba(0,0,0,0.15) 0px 1px 3px;
    -webkit-box-shadow: rgba(0,0,0,0.15) 0px 1px 3px;
     box-shadow: rgba(0,0,0,0.15) 0px 1px 3px;
     color: #fff;
    
     height: 38px;
     width: 100%;
     margin-bottom: 1px;

}

::-webkit-scrollbar {  
        width: 3px;
      
}

::-webkit-scrollbar-track {  
        background-color: #498538;
}

::-webkit-scrollbar-thumb {  
        background-color: #498538;
        border-left: 0px solid #262626;
        border-right: 0px solid #262626;
      
}

::-webkit-scrollbar-thumb:hover {  
        background-color: #B12034;
        border-left: 0px solid #363636;
        border-right: 0px solid #363636;
        
}

.dzwonek {
    margin-top: 9px;
}

.koperta {
    margin-top: 14px;
}

.admin {
    margin-top: 8px;
}

.mod {
    margin-top: 8px;
}

.adres_ip {
    background: #222 none repeat scroll 0% 0%;
    border: 1px solid #C000E7;
    float: right;
    margin-right: 5px;
    margin-top: 7px;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.gt {
    background: #222 none repeat scroll 0% 0%;
    border: 1px solid #A11F31;
    margin-right: 5px;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.dzial {
    background: #222 none repeat scroll 0% 0%;
    border: 1px solid #A11F31;
    margin-right: 5px;
    
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.polacz {
    background: #222 none repeat scroll 0% 0%;
    border: 1px solid #A11F31;
    margin-right: 5px;
    
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 3px;


}

.numer {
    
    background: #222 none repeat scroll 0% 0%;
    border: 1px solid #A22032;
    float: right;
    margin-top: 0px;
    display: inline-block;
    height: 16px;
    line-height: 16px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    margin-right: 4px;
}


/* DVZ Shoutbox */
#shoutbox { margin-bottom: 10px; border: solid 2px rgba(0,0,0,0.1); }

#shoutbox .head {
background: url(../../../images/skillgame/maintitle.png) repeat-x top;
    text-shadow: rgba(0,0,0,0.4) 3px -1px 11px;
    padding: 14px;
    border-radius: 0px 0px 0px 0px;
    margin-bottom: -5px;
    border-bottom: 0px solid #0260A7;
    font-variant: small-caps;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
}

#shoutbox .head a {
    color: white;
}
#shoutbox.front .head { cursor: pointer; background: url(../../../images/skillgame/maintitle.png) repeat-x top; }
#shoutbox .head .right { float: right; margin: 0; font-size: 13px; }
#shoutbox.collapsed .head { opacity: 0.9; }
#shoutbox.collapsed .body { display: none; }

#shoutbox .panel { border-top: solid 2px rgba(0,0,0,0.1); }
#shoutbox input.text { margin: 0; padding: 10px 5px; width: 100%; box-sizing: border-box; border: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08); font-family: Arial, sans-serif; font-size: 12px; color: #000; }
#shoutbox .minposts, #shoutbox .blocked { padding: 6px; font-size: 11px; }
#shoutbox .panel.minposts { background: #FFFED8; color: #727250; }
#shoutbox .panel.blocked { background: #FCEFEF; color: #543A3A; }
#shoutbox .panel p { margin: 0; }

#shoutbox .window { border: 9px solid #212121; overflow-y: scroll; }
#shoutbox .data { display: table; width: 100%; border-top: solid 2px rgba(0,0,0,0.1); font-family: Arial, sans-serif; font-size: 12px; }
#shoutbox.front .data { border-top: none; }

#shoutbox .entry { display: table-row !important; width: 100%; transition: background-color 0.2s; }
#shoutbox .entry:nth-child(even) { background-color: rgba(0,0,0,0.01); }
#shoutbox .entry.new { background-color: rgba(255,255,100,0.1); }
#shoutbox .entry > div {}
#shoutbox .entry:last-child > div { border-bottom: none; }
#shoutbox .avatar {
    margin: 0;
    float: none;
}

#shoutbox .entry > div {display: table-cell;padding: 7px;box;border-bottom: 2px solid #484848;vertical-align: middle;}

#shoutbox .avatar img { margin: 0 auto; vertical-align: middle; max-height: 20px; max-width: 20px; box-shadow: 0 0 2px rgba(0,0,0,0.1); cursor: pointer; border: 1px solid #1B368A; }
#shoutbox .user {text-align: right;white-space: nowrap;}
#shoutbox .text { width: 100%; color: #F5F5F5; }
#shoutbox .info { font-size: 11px; color: #AAA; white-space: nowrap; text-align: right; }
#shoutbox .mod { padding: 6px 8px; font-size: 9px; font-weight: bold; color: #AAA; text-decoration: none; }
#shoutbox .mod:nth-of-type(2) { margin-right: 5px; border-left: solid 1px rgba(0,0,0,0.1); }
#shoutbox  .ip { margin-right: 10px; color: #CECECE; }

.message {
    background: #8ca54d;
    padding: 0 10px;
    color: #fff;
    text-shadow: rgba(0,0,0,0.2) 0px -1px 0px;
    font-size: 12px;
    display: table-caption;
}



.sbthead {
    background: #295AC7 url(http://i.imgur.com/3UFTyGD.png);
    text-shadow: rgba(0,0,0,0.4) 3px -1px 11px;
    padding: 11px;
    border-radius: 1px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: -5px;
    border-bottom: 0px solid #0260A7;
    font-family: Calibri;
    height: 27px;
}

.tekst {
    line-height: 10px;
}

.archiwe {
    line-height: 10px;
}
„Lecz biorę całą odpowiedzialność na siebie. Być może się pomyliłem. Ale przecież mylić się jest rzeczą ludzką.”
Dzięki pomogło lecz jeszcze nie jest ten efekt.


Załączone pliki Miniatury
   



Użytkownicy przeglądający ten wątek:

2 gości