About This File
Skin Flat IPS4.
Author: Ciko (IPB-Board.ru)
Added button up / down
Fixed chat category get out
Posted in Font Awesome Icons button
PageHeader added to the frame!
(Moderate, Post Thread) added to the frame!
Chat Rules
How to add a button to the chat
Go to: bimchatbox-chat-chatform to find:
<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>
The following add:
<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;
}
Icons in the profile menu
