Web chat Mini in stile Facebook

« Older   Newer »
 
  Share  
.
  1.     +1   -1
     
    .
    Avatar

    FOOLY COOLY

    Group
    Admin
    Posts
    14,828
    Reputation
    +2

    Status
    Ghost

    WebChat Mini in stile Facebook


    Trasforma la Webchat nella classica chat di Facebook



    763ffwebchatfacebook




    Installazione:

    Andate in : Amministrazione > Grafica > Codice HTML > Codice HTML che sarà mostrato in FONDO a tutte le pagine >
    e copiate questo codice:

    HTML
    <!-- WebChat Mini Aperta -->
    <script type="text/javascript">window.chatShowOnStart = true;</script>
    <script type="text/javascript" src="http://irc.forumfree.it/chat/Scripts/Protocol.js"></script>
    <script type="text/javascript" src="http://irc.forumfree.it/chat/Scripts/ChatEngine.js"></script>


    (Realizzato da Hannibal Smith)

    HTML
    <script type="text/javascript">window.chatShowOnStart = true;</script>


    CSS:
    Amministrazione > Grafica > Colori e Stili >
    CODICE
    /* WebChat Mini in stile Facebook By FFMagazine */
    #chat_show, #chat_main {width: 240px!important; background: #EBEEF4 !important; box-shadow: 0 0 2px rgba(0, 0, 0, .5) !important; border-radius: 2px !important}
    .chat_start_button, .chat_start_button:hover {color: #333 !important}
    #chat_window, #chat_status {width: 240px !important}
    .chat_page {position: absolute; width: 420px !important; right: 340px; top: -30px; box-shadow: 0 0 3px rgba(0, 0, 0, .5) !important; height: 431px !important; background: #FFF; display: none}
    #chat_window {top: 30px; box-shadow: none !important}
    #chat_main {height: 430px !important; z-index: 9 !important}
    #chat_status {background: #FFF !important; box-shadow: none !important}
    #chat_friends_header {border-bottom: 1px solid #C4C4C4; border-top: 0; background: #EBEBEB; background: -moz-linear-gradient(top, #F6F6F6 0%, #EBEBEB 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F6F6F6), color-stop(100%, #EBEBEB)); background: -webkit-linear-gradient(top, #F6F6F6 0%, #EBEBEB 100%); background: -o-linear-gradient(top, #F6F6F6 0%, #EBEBEB 100%); background: -ms-linear-gradient(top, #F6F6F6 0%, #EBEBEB 100%); background: linear-gradient(to bottom, #F6F6F6 0%, #EBEBEB 100%); filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#F6F6F6', endColorstr='#EBEBEB', GradientType=0)}
    #chat_audio_button {position: absolute !important; right: 6px; top: 32px; z-index: 1; float: none !important}
    .chat_unread_messages {background-color: rgba(151, 210, 224, .4) !important; right: 0 !important; border-radius: 0 !important}
    .chat_nick_list a {color: #333 !important}
    .chat_nick_list a:hover {color: #333 !important}
    .chat_friend_offline_list a {color: #848484 !important}
    #chat_conversations {width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; right: -90px}
    #chat_hide > .chat_start_button > span::after {content: '' !important; background: url(http://digilander.libero.it/ffmagazine/webchat_fb/sprite_fb.png) no-repeat !important; padding: 8px 9px !important; display: inline-block; background-position: -155px 1px !important}
    #chat_show {text-align: right !important}
    #chat_show > .chat_start_button {margin-right: 8px}
    #chat_show > .chat_start_button > span::after {content: '' !important; background: url(http://digilander.libero.it/ffmagazine/webchat_fb/sprite_fb.png) no-repeat !important; padding: 8px 9px !important; display: inline-block; background-position: -169px 1px !important}
    #chat_friends_header p::before {content: '' !important; background: url(http://digilander.libero.it/ffmagazine/webchat_fb/sprite_fb.png) no-repeat !important; padding: 8px 9px !important; display: inline-block; background-position: -18px 1px !important}
    .chat_conversation_input_options_emoticons_box {bottom: 45px !important; right: 0 !important; left: auto !important; padding: 0 !important; border: 1px solid #3B5998 !important; border-bottom: 2px solid #293E6A !important; width: 270px !important; box-shadow: none !important; border-radius: 0 !important; background: #FFF !important}
    .chat_conversation_input_options_emoticons_box > ul {padding: 0}
    .chat_time {background: none !important; color: #999 !important} .chat_nick {color: #333 !important; font-weight: bold; font-size: 16px !important}
    .chat_conversation_main::-webkit-scrollbar-thumb, #chat_friends_list::-webkit-scrollbar-thumb {border-radius: 15px; border: 1px solid #999 !important; box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.35); background: -webkit-linear-gradient(left, #CCC 0%, #999 100%)}
    #chat_friends_list::-webkit-scrollbar-track, .chat_conversation_main::-webkit-scrollbar-track {background-color: #FFF !important; border: 0 !important}
    #chat_friends_list > div:hover {background-color: #E0E4EE !important}
    .chat_conversation_input {border-top: 1px solid rgba(0, 0, 0, .3)}
    .chat_conversation_input > textarea {border: 0 !important; outline: none !important}
    .chat_conversation_header {background: #6D84B4; border: 1px solid #3D5A99}
    .chat_conversation_header span {color: #FFF !important; font-weight: bold; font-size: 14px !important; line-height: 36px !important; height: 37px !important; margin: 0 !important; padding-left: 10px !important}
    .chat_conversation_main:before {display: none}
    .chat_discussion {padding: 5px !important}
    #chat_friends {padding-top: 0 !important}
    .chat_friend_list > .chat_avatar {border-radius: 0}
    #chat_friends_header p {font-size: 11pt !important; padding-left: 10px}
    .chat_conversation_input_options {height: 45px !important; width: 30px !important}
    .chat_conversation_input_options:active {background: #6D84B4}
    .chat_conversation_input_options_emoticons {background: url("http://digilander.libero.it/ffmagazine/webchat_fb/sprite_fb.png")no-repeat !important; background-position: -37px -1px !important;
    width: 14px !important; height: 14px !important; margin: 14px 7px}
    .chat_conversation_input_options_emoticons:active {background-position: -51px -1px !important}
    .chat_conversation_close {margin: 0 !important; height: 38px; width: 28px}
    .chat_conversation_close:hover {background: #4A6399}
    .chat_conversation_close span {background: url("http://digilander.libero.it/ffmagazine/webchat_fb/sprite_fb.png")no-repeat !important; padding: 5px !important; height: 1px !important; background-position: -67px -2px !important; font-size: 0 !important; margin: auto !important}
    .chat_conversation_close:hover span {background-position: -78px -2px !important; font-size: 0 !important}
    .chat_conversation_toolbox {position: absolute; right: 30px}
    .chat_conversation_toolbox > li {border-radius: 0!important; padding: 0 !important; margin-left: 0 !important; background: transparent !important; border: 0 !important; height: 38px;
    width: 28px; text-align: center; vertical-align: middle; line-height: 35px}
    .chat_conversation_toolbox > li:hover {background: #4A6399 !important}
    .chat_conversation_toolbox_profile_forumfree a,
    .chat_conversation_toolbox_profile_forumcommunity a,
    .chat_conversation_toolbox_profile_blogfree:hover a, .chat_conversation_toolbox_ignore a {font-size: 0 !important;
    background: url(http://digilander.libero.it/ffmagazine/webchat_fb/sprite_fb.png) no-repeat; height: 14px; width: 14px; padding: 9px; margin: auto; background-position: -89px 3px}
    .chat_conversation_toolbox_profile_forumfree:hover a,
    .chat_conversation_toolbox_profile_forumcommunity:hover a,
    .chat_conversation_toolbox_profile_blogfree:hover a {background-position: -107px 3px}
    .chat_conversation_toolbox_ignore a {background-position: -124px 2px !important; padding: 8px !important}
    .chat_conversation_toolbox_ignore:hover a {background-position: -138px 2px}
    .chat_discussion a, .chat_contacts_incoming a {color: #6D84B4 !important}
    .chat_discussion a:hover, .chat_contacts_incoming a:hover {color: #3D5A99 !important}
    #chat_contacts_manager {text-align: center}
    #chat_contacts_requests, #chat_contacts_incomings {text-align: left !important}
    #chat_contacts_request_button {width: 50% !important;
    margin: 5px auto !important;
    background: #D5D5D5 !important;
    color: #666 !important}
    #chat_contacts_request_button:hover {width: 50% !important;
    margin: 5px auto !important;
    background: #CCC !important;
    color: #666 !important}
    #chat_contacts_incomings_header > span:before,
    #chat_contacts_requests_header > span:before {content: '' !important; background: url(http://digilander.libero.it/ffmagazine/webchat_fb/sprite_fb.png) no-repeat !important; padding: 9px !important; display: inline-block; background-position: -188px 4px !important; margin: 0 5px !important}
    #chat_request_counter {color: #3D5A99 !important}
    #chat_contacts_manager h3 {color: #FFF !important}
    #chat_friends_header {padding: 0 !important}
    #chat_hide, #chat_contacts_manager h3 {background: #6D84B4; padding-right: 9px; border: 1px solid #3D5A99; margin-right: 0 !important; padding-bottom: 1px}
    #chat_hide .chat_start_button {color: #FFF !important}
    .chat_conversation_active {background: #E0E4EE !important}
    .chat_conversation_input_options_emoticons_box > ul > li {
    display: inline-block !important; float: none !important;}
    #chat_notification {right: 14px !important; bottom: 8px !important}
    #chat_notify_message {right: 245px !important}
    .chat_message_avatar {display: block !important; width: 30px !important; height: 30px !important; border-radius: 2px}


    Potete copiarlo in qualsiasi parte del css, anche se vi suggerisco di copiarlo in fondo alla pagina

    Aggiungere Emoticon:
    Ho selezionato un pack di circa 35 emoticon, per applicarle alla vostra webchat, fate cosi:

    Amministrazione > Grafica > Codice HTML > Codice HTML che sarà mostrato in FONDO a tutte le pagine >
    prima del codice della webchat inserite questo:

    HTML
    <script type="text/javascript">emoticons = Object.freeze({
    'xD': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/3.png',
    ':P': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/4.png',
    ';*': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/6.png',
    'u.u': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/10.png',
    '-.-': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/11.png',
    ':(': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/12.png',
    '<_<': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/13.png',
    ':D ': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/14.png',
    ':(': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/15.png',
    'o_O': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/16.png',
    '*_*': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/17.png',
    ':love:': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/18.png',
    ':love+:': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/19.png',
    ':furious:': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/20.png',
    'zZ': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/21.png',
    'cacca': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/24.png',
    ':cry:': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/27.png',
    ':cry_sed:': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/28.png',
    '0__0': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/29.png',
    'X.X': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/30.png',
    ':malato:': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/33.png',
    ':angry:': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/34.png',
    ':+1:': 'http://digilander.libero.it/ffmagazine/webchat_fb/emoticon/35.png',
    });</script>


    CITAZIONE

    WebChat Mini in stile Facebook Realizzata da Klo del ForumFreeMagazine
    Guida realizzata sotto una licenza CreativeCommons 3.0

     
    Top
    .
0 replies since 15/8/2013, 14:33   9 views
  Share  
.