ایجاد قوانین به چت باکس bimchatbox

[صائب کوهپایه 2592]

برای اینکه چت باکس را به این فرم در بیارید با ما همراه باشید

 

 

به مسیر زیر بروید و این کد ها را پیدا کنید

bimchatbox-chat-chatform

<button type="submit" class="ipsButton ipsButton_primary ipsButton_verySmall" data-action="chat" id="chat_button"><span class="ipsType_small"><i class="fa fa-level-down fa-rotate-90"></i></span></button>[/size][/font][/color]
[color=#282828][font=helvetica, arial, sans-serif][size=3]

حالا این کد ها را به ان اضافه کنید

<label class="btn" for="modal-1">Chat Rules</label>
<div class="modal">
  <input class="modal-open" id="modal-1" type="checkbox" hidden>
  <div class="modal-wrap" aria-hidden="true" role="dialog">
                <label class="modal-overlay" for="modal-1"></label>
                <div class="modal-dialog">
                  <div class="modal-header">
                                <h2><div class='ipsMessage ipsMessage_error'>
  Forbidden
</div></h2>
                  </div>
                  <div class="modal-body">
                                <p>1) It is forbidden to write in chat using.</p>
                                <p>2) Prohibited links to external sites.</p>
                                <p>3) Sending messages with restricted content.</p>
                  </div>
                  <div class="modal-footer">
                                <label class="btn btn-primary" for="modal-1">Close</label>
                  </div>
                </div>
  </div>
</div>

<p>1) تا <p>3) : متن قوانین دلخواه

Forbidden : اسم پیام

Chat Rules : قوانین مربوط به چت     

تا اینجا کار تمام شده حال نوبت به اضافه کردن دکمه آن میشود

 به  custom.css بروید و این کد ها را اضافه کنید 

/* =========================== */
/*     bimchatbox STYLES       */
/* =========================== */
<label class="btn" for="modal-1">Chat Rules</label>
<div class="modal">
  <input class="modal-open" id="modal-1" type="checkbox" hidden>
  <div class="modal-wrap" aria-hidden="true" role="dialog">
                <label class="modal-overlay" for="modal-1"></label>
                <div class="modal-dialog">
                  <div class="modal-header">
                                <h2><div class='ipsMessage ipsMessage_error'>
  Forbidden
</div></h2>
                  </div>
                  <div class="modal-body">
                                <p>1) It is forbidden to write in chat using.</p>
                                <p>2) Prohibited links to external sites.</p>
                                <p>3) Sending messages with restricted content.</p>
                  </div>
                  <div class="modal-footer">
                                <label class="btn btn-primary" for="modal-1">Close</label>
                  </div>
                </div>
  </div>
</div>


Go to: custom.css add to the bottom:

.modal-header h2 {
                color: #555;
                font-size: 30px;
                font-weight: normal;
                line-height: 1;  
                margin: 0;
}
.modal .btn-close {
                color: #aaa;
                cursor: pointer;
                font-size: 10px;
                text-decoration: none;
                position: absolute;
                right: 5px;
                top: 0;
}
.modal .btn-close:hover {
                color: red;
}
.modal-wrap:before {
                content: "";
                display: none;
                background: rgba(0, 0, 0, .3);
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 101;
}
.modal-overlay {
                bottom: 0;
                display: none;
                left: 0;
                position: fixed;
                right: 0;
                top: 0;
                z-index: 102;
}
.modal-open:checked ~ .modal-wrap:before,
.modal-open:checked ~ .modal-wrap .modal-overlay {
                display: block;
}
.modal-open:checked ~ .modal-wrap .modal-dialog {
                -webkit-transform: translate(-50%, 0);
                -ms-transform: translate(-50%, 0);
                -o-transform: translate(-50%, 0);
                transform: translate(-50%, 0);
                top: 20%;
}
.modal-dialog {
                background: #fefefe;
                border: none;
                border-radius: 5px;
                position: fixed;
                width: 80%;
                max-width: 500px;
                left: 50%;
                top: -100%;
                -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
                -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
                box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
                -webkit-transform: translate(-50%, -500%);
                -ms-transform: translate(-50%, -500%);
                -o-transform: translate(-50%, -500%);
                transform: translate(-50%, -500%);
                -webkit-transition: -webkit-transform 0.4s ease-out;
                -moz-transition: -moz-transform 0.4s ease-out;
                -o-transition: -o-transform 0.4s ease-out;
                transition: transform 0.4s ease-out;
                z-index: 103;
}
.modal-body {
  padding: 20px;
}
.modal-body p {
                margin: 0;
}
.modal-header,
.modal-footer {
                padding: 20px 20px;
}
.modal-header {
                border-bottom: #eaeaea solid 1px;
}
.modal-header h2 {
                font-size: 20px;
                margin: 0;
}
.modal-footer {
                border-top: #eaeaea solid 1px;
                text-align: right;
}
.modal-body img {
                max-width: 100%;
                height: auto;
}
.btn {
                background: #37474f;
                color: #fff;
                border-radius: 3px;
                cursor: pointer;
                right: 2px;
                bottom: 0px;
                display: inline-block;
                font-size: 12px;
                padding: 4px 8px;
                text-decoration: none;
                text-align: center;
                min-width: 10px;
                position: relative;
}
.btn-primary {
                background: #428bca;
                border-color: #357ebd;
                color: #fff;
}
.btn-primary:hover{
                background: #66A1D3;
}
.cbItems img {
                margin-right: 2px;
}