osDate Forum - osDate Dating Script

osDateEvo => osDateEvo Updated Files - Fixed Bugs => Topic started by: Pharg on April 21, 2018, 03:18:24 AM

Title: Who's Online template file modded now shows online button
Post by: Pharg on April 21, 2018, 03:18:24 AM
Hi Members,

The online onlineusers.tpl has changed, we now use the smallonlineprofile.tpl a New file, to show the results.

This stops having Online buttons all over the site on every single page where it's not needed to be seen.

In the templates css file, find the desktop.css and the mobile.css
In the bottom of the desktop.css add this:
Code: [Select]
.onbutton {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 0px 14px;
    border: 1px solid #20b00b;
    border-radius: 40px;
    background: #4aff4a;
    background: -webkit-gradient(linear, left top, left bottom, from(#4aff4a), to(#2acf10));
    background: -moz-linear-gradient(top, #4aff4a, #2ea32e);
    background: linear-gradient(to bottom, #4aff4a, #2ea32e);
    text-shadow: #212420 -1px 0px 1px;
    font: normal normal bold 12px arial;
    color: #ffffff;
    text-decoration: none;
}
.onbutton:hover,
.onbutton:focus {
    color: #ffffff;
    text-decoration: none;
}

.offbutton {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 0px 14px;
    border: 1px solid #c6ccc6;
    border-radius: 40px;
    background: #dce0dc;
    background: -webkit-gradient(linear, left top, left bottom, from(#dce0dc), to(#bdaebd));
    background: -moz-linear-gradient(top, #dce0dc, #bdaebd);
    background: linear-gradient(to bottom, #dce0dc, #bdaebd);
    text-shadow: #ffffff -1px 0px 1px;
    font: normal normal bold 12px arial;
    color: #857085;
    text-decoration: none;
}
.offbutton:hover,
.offbutton:focus {
    background: #ffffff;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e3d1e3));
    background: -moz-linear-gradient(top, #ffffff, #e3d1e3);
    background: linear-gradient(to bottom, #ffffff, #e3d1e3);
    color: #857085;
    text-decoration: none;
}
.module_online_detail_pics {
        height: 210px;
font-size: 12px;
font-weight: normal;
background-color: #F8FBFF;
border: 1px solid #D4E1F6;
text-align:left;
border-radius: 5px;
}

Then add this to the bottom of the mobile.css:
Code: [Select]
@media only screen and (max-width :780px) {
.onbutton {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 0px 10px;
    border: 1px solid #20b00b;
    border-radius: 30px;
    background: #4aff4a;
    background: -webkit-gradient(linear, left top, left bottom, from(#4aff4a), to(#2acf10));
    background: -moz-linear-gradient(top, #4aff4a, #2acf10);
    background: linear-gradient(to bottom, #4aff4a, #2acf10);
    text-shadow: #212420 -1px 0px 1px;
    font: normal normal bold 8px arial;
    color: #ffffff;
    text-decoration: none;
}
.onbutton:hover,
.onbutton:focus {
    color: #ffffff;
    text-decoration: none;
 }
}

@media only screen and (max-width :780px) {
.offbutton {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 0px 10px;
    border: 1px solid #c6ccc6;
    border-radius: 30px;
    background: #dce0dc;
    background: -webkit-gradient(linear, left top, left bottom, from(#dce0dc), to(#bdaebd));
    background: -moz-linear-gradient(top, #dce0dc, #bdaebd);
    background: linear-gradient(to bottom, #dce0dc, #bdaebd);
    text-shadow: #ffffff -1px 0px 1px;
    font: normal normal bold 8px arial;
    color: #857085;
    text-decoration: none;
}
.offbutton:hover,
.offbutton:focus {
    color: #857085;
    text-decoration: none;
 }
}
@media only screen and (max-width : 780px) {
.module_online_detail_pics {
height: 180px;
font-size: 10px;
font-weight: normal;
background-color: #F8FBFF;
border: 1px solid #D4E1F6;
text-align:left;
border-radius: 5px;
}
}

@media only screen and  (min-width : 200px) and (max-width :499px) {
.module_online_detail_pics {
height: 130px;
font-size: 10px;
font-weight: normal;
background-color: #F8FBFF;
border: 1px solid #D4E1F6;
text-align:left;
border-radius: 5px;

}
}


I have attached the files and some pics.