Author Topic: Flirts (When using images) Change  (Read 374 times)

KHDev

  • Global Moderator
  • Veteran Member
  • *****
  • Posts: 505
  • Karma: +43/-2
  • Etano Contributor (Skins & Mods)
    • KH Web Development
Flirts (When using images) Change
« on: March 02, 2017, 06:50:46 AM »
Flirts (When using images) Change

by KHDev



Heres a little modification if you use/plan to use the flirts with IMAGES ONLY!

Click to enlarge

..




Lets get started!

NOTES!
+ Ideally you should use images of equal size or square shaped.
+ When creating flirts (both initial and replies) you should only insert a image and save. Do not add any text, spaces or empty lines as this will likely break or mess up the layout.



Firstly, lets add a small bit of JS to highlight a flirt when its selected:

Open skins_site > def > flirt_send.html and add the following to the top of the file:

Code: [Select]
<script type="text/javascript">

$(function(){
$('input[name="flirt_id"]').click(function(){
if ($(this).is(':checked')){
$('label img').removeClass('flirt_selected');
var pic = 'flirt_id_';
pic += $(this).val();
var label = $('label[for="' + pic + '"] img');
$(label).addClass('flirt_selected');
}
});
});

</script>


Now, lets replace the old .flirts_list styling with the new:

Open skins_site > def > styles > flirt_send.css and replace the  old .flirts_list styling with:

Code: [Select]

ul.flirts_list {
list-style: none;
padding: 3px;
margin: 25px 0px;
clear:both;
overflow: hidden;
}
.flirts_list li {
width: 25%;
float: left;
text-align: center;
height: 160px;
overflow: hidden;
-webkit-box-shadow: inset 0px 0px 0px 1px #ececec;
-moz-box-shadow: inset 0px 0px 0px 1px #ececec;
box-shadow: inset 0px 0px 0px 1px #ececec;
margin-left: -1px;
margin-top: -1px;
padding: 10px 0px;
}

.flirts_list li label{
display: block;
width: 110px;
margin: 0px auto;
height: 110px;
}
.flirts_list li p{
display: block;
padding: 5px;
}
.flirts_list li p img{
width: 100px;
height: 100px;
display: block;
margin: 0px auto;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
border: 1px solid #FFF;
}

.flirts_list li p img:hover,
.flirts_list li p img.flirt_selected {
opacity: 0.5;
border: 1px solid #8BC34A;
}




And if you you have a responsive skin also add this to the flirt_send.css file under the new styling.

Code: [Select]
@media (max-width: 520px){
.flirts_list li {
width: 33.3333333337%;
}

.flirts_list li label{
  width: 100%;
}
.flirts_list li p img{
width: 100%;
max-width: 100px;
height: auto;
max-height: 100px;
}
}

@media (max-width: 400px){
.flirts_list li {
  width: 50%;
}
}




And that should be it :)

Get in touch if you have any issues :)


skipper

  • Active Member
  • ***
  • Posts: 93
  • Karma: +0/-0
    • ThePeepz.com
Re: Flirts (When using images) Change
« Reply #1 on: March 02, 2017, 08:46:46 PM »
 Great job KH, it looks very nice and uniformed on my site.
Thepeepz.com
Chat-Now.chatovod.com