• Страница 1 из 1
  • 1
Форум » uCoz » Мини-чат » Мини-чат v 1.0
Мини-чат v 1.0
Дмитрий Дата: Суббота, 26.05.2012, 22:54 | Сообщение # 1 | Сообщить о нерабочей теме


Аватар для Дмитрий


В сети довольно так и много различных версий мини-чата. Возможно подобная версия чата уже есть, лично я пока не встречал. Чат также разрабатывался для "укозик" и я решил им поделиться. Что хочется про него сказать, мини-чат плавно раскрывается и скрывается при нажатии на кнопку находящуюся с боку. Фону предана прозрачность. Регулируйте ее под себя (если светлый фон, то желательно малость убавить)

Установка:
[moder]После < /head>: [/moder]
Код
    <script type="text/javascript" src="http://gig-pro.ru/load-ucoz/skripts/mini-4at/8/jquery-ui-1.8.custom.min.js"></script><script type="text/javascript" src="http://gig-pro.ru/load-ucoz/skripts/mini-4at/8/mini-chat.js"></script>

[moder]В CSS: [/moder]
Код
#miniChat{     
    display:none;     
    position:realitive;     
    position:fixed;     
    bottom:73px;     
    background-color:#000;     
    width:250px;     
    height:410px;     
    border-top:1px solid #fff;     
    border-right:1px solid #fff;     
    border-bottom:1px solid #fff;     
    border-radius:0 7px 0 0;     
    background: rgba(0, 0, 0, 0.7);     
    z-index:1;     
    }     
        
    #chatCont{     
    position:absolute;     
    z-index:2;     
    width:240px;     
    height:380px;     
    margin:10px 10px 10px 0;     
    color:#999;     
    }     

    #chat{     
    position:absolute;     
    position:fixed;     
    bottom:73px;     
    cursor:pointer;     
    width:40px;     
    height:38px;     
    z-index:1;     
    }     

    .chatH{margin-left:-3px;}     
        
    .chatH:hover{margin-left:0px;}     
    /*endchat*/[code]     

    Вид материалов мини-чата:     

    [code]<style type="text/css">     
    .vBlock1{     
    border: 1px solid #333333;     
    color:#15ADFF;     
    }     
        
    .vBlock1 a:link{color:#999999;}     
    .vBlock1 a:visited{color:#999999;}     
    .vBlock1 a:hover{color:#DF8404;}     
    .vBlock1 a:active{color:#999999;}     
        
    .vBlock2{     
    border: 1px solid #3B3B3B;     
    color:#999999;     
    }     

    .vBlock2 a:link{color:#ffffff;}     
    .vBlock2 a:visited{color:#ffffff;}     
    .vBlock2 a:hover{color:#DF8404;}     
    .vBlock2 a:active{color:#ffffff;}     
    </style>     
    <div class="vBlock$PARITY$" style="padding:0 4px 5px 2px;margin-bottom:3px;">     
    <div style="float:right;font-size:8px;" title="$DATE$">$TIME$</div>     
    <div style="text-align:left;">     
    <a href="$PROFILE_URL$" title="$USERNAME$" rel="nofollow"><img alt="" src="http://s105.ucoz.net/img/icon/profile.png" width="13" border="0" style="vertical-align:-2px"/></a>     
    <a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$[/i], ';return false;"><b>$NAME$</b></a>     
    <a href="$EMAIL_JS$" title="$STR_EMAIL$">E</a>     
    <a rel="nofollow" href="$SITE$" target="_blank" title="$STR_URL$">W</a>     
    </div>     
    <div class="cMessage" style="text-align:left;">$MESSAGE$</div>     
    <br>$STR_CUSTOM1$: $CUSTOM1$     
    <br>$STR_CUSTOM2$: $CUSTOM2$     
    </div>

[moder]Форма добавления сообщений мини-чата:[/moder]
Код
<style type="text/css">     
    #jeuwu28{     
    color:#999999;     
    }     
    #mchatMsgF {     
    margin:0;     
    padding: 8px 10px;     
    font-size:16px;     
    color:#b3b3b3;     
    border:solid 1px #585858;     
    text-shadow: 1px 1px 0 #4b4b4b;     
    border-radius: 10px 10px;     
    -moz-border-radius: 10px 10px;     
    -webkit-border-radius: 10px 10px;     
    box-shadow: inset 1px 1px 3px 0 #000;     
    -moz-box-shadow: inset 1px 1px 3px 0 #000;     
    -webkit-box-shadow: inset 1px 1px 3px 0 #000;     
    background:-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);     
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));     
    }     
    #mchatBtn {     
    width:auto;     
    border:solid 1px #bababa;     
    color:#363636;     
    font-weight:bold;     
    font-size:10px;     
    border-bottom-color:#363636;     
    background:-moz-linear-gradient(0% 100% 90deg,#5f5f5f, #9e9e9e);     
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#5f5f5f));     
    box-shadow: none;     
    -moz-box-shadow: none;     
    -webkit-box-shadow: none;     
    text-shadow: 1px 1px 0 #9d9d9d;     
    border-radius: 3px ;     
    -moz-border-radius: 3px;     
    -webkit-border-radius: 3px;     
    }     
    #mchatBtn:hover {color:#ffffff;     
    cursor:pointer;}     
    #mchatRSel{     
    box-shadow: inset 1px 1px 3px 0 #000;     
    -moz-box-shadow: inset 1px 1px 3px 0 #000;     
    -webkit-box-shadow: inset 1px 1px 3px 0 #000;     
    border: none;     
    background:-moz-linear-gradient(0% 100% 90deg,#5f5f5f, #9e9e9e);     
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#5f5f5f));     
    color:#ffffff;     
    }     

    #mchatMsgF{height:55px!important;}     
.pfe{margin-top:40px;}   
    </style>     
    <div align="center"><div class="pfe"><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a></div>Доступ запрещен</div>     
    <table border="0" cellpadding="1" cellspacing="1" width="100%">     
    <tr><td>$FLD_AUTOUPD$</td>     
    <td width="70%" align="right">     
    <a href="$RELOAD_URI$" title="Обновить"><img alt="" border="0" align="absmiddle" src="http://gig-pro.ru/load-ucoz/skripts/mini-4at/8/ob.png" width="13" height="15"></a>     
    <a href="$SMILES_URI$" title="Вставить смайл"><img alt="" border="0" align="absmiddle" src="http://gig-pro.ru/load-ucoz/skripts/mini-4at/8/s.png" width="13" height="13"></a>     
    <a href="$BBCODES_URI$" title="BB-Коды"><img alt="" border="0" align="absmiddle" src="http://gig-pro.ru/load-ucoz/skripts/mini-4at/8/b.png" width="13" height="15"></a>     
    <a href="$MSGCTRL_URI$" title="Управление сообщениями"><img alt="" border="0" align="absmiddle" src="http://gig-pro.ru/load-ucoz/skripts/mini-4at/8/n.png" width="15" height="15"></a>     
    </td></tr></table>     

        
    <table border="0" cellpadding="1" cellspacing="1" width="100%">     
    <tr><td colspan="2">$FLD_NAME$</td></tr>     
    <tr><td width="50%">$FLD_EMAIL$</td><td>$FLD_URL$</td></tr>     
    </table>     
        

        
    <table border="0" cellpadding="1" cellspacing="1" width="100%">     
    <tr><td width="50%">$FLD_CUSTOM1$</td><td>$FLD_CUSTOM2$</td></tr>     
    </table>     
        

        
    <table border="0" cellpadding="1" cellspacing="1" width="100%">     
    <tr><td width="50%">$FLD_SECURE$</td><td align="right">$IMG_SECURE$</td></tr>     
    </table>     
        

    <table border="0" cellpadding="1" cellspacing="1" width="100%">     
    <tr><td width="180px" rowspan="2">$FLD_MESSAGE$</td>     
    <td align="center" valign="top"><div style="font-size:12px;">$LENGTH_COUNTER$</div></td>     
    </tr><tr><td width="50px" align="center" valign="bottom">$SUBMIT$</td></tr></table>     

[moder]В шаблон сайта после < body>: [/moder]
Код
<div id="miniChat">  
  <div id="chatCont"><div id="chatHe">$CHAT_BOX$</div></div>  
  </div>  
  <div id="chat" class="chatH"><span id="chats"><img src="http://gig-pro.ru/load-ucoz/skripts/mini-4at/8/mini-chat4.png" border="0" alt="Мини чат"></span></div>  
Прикрепления: 3601603.jpg(38.8 Kb)


From Russia With Love!
Форум » uCoz » Мини-чат » Мини-чат v 1.0
  • Страница 1 из 1
  • 1
Поиск: