Runboard.com
Слава Україні!
Runboard Extra Chat Room Support Search Facebook

Runboard.com       Sign up learn about it | Sign in lost password?

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

 


Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
Reply Quote
Overlapping smilies?


Is there some way to make it so that the smilies would overlap each other? I am thinking of smilies that would look like jigsaw puzzle pieces or hexagon shapes that could be fitted together using the smilies...

---

Advertise Boards On TRDConceptsDE
11/11/2014, 3:55 pm Link to post Email Pastor Rick   PM Pastor Rick Blog
 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
Reply Quote
Re: Overlapping smilies?


Do you mean in the clickable smileys area? That could be a good idea for people who have several different sizes of smileys. emoticon

You could use the custom language set to put them in a div (possibly using the CLS portion of the scrolling smileys hack), give that div relative positioning, and absolutely position each smiley.

To see what I have in mind, paste this into Notepad, save it with an .html extension, then open it in your browser:

<!doctype html>
<html>
<head>
<title>Absolutely Positioned Smileys</title>

<style type="text/css">
.smileys {
   width: 400px;
   height: 400px;
   position: relative; /* So smileys will be positioned in relation to this div */
   background: #ff0; /* Just so you see where the div is */
}
.smileys img {
   position: absolute; /* Affects all images in the smileys div */
   background: #ccc; /* So you can see what the image covers */
}
.smileys img[src$='yay.gif'] { top: 50px; left: 100px; }
.smileys img[src$='firefox.gif'] { top: 50px; left: 116px; }
.smileys img[src$='strike.gif'] { top: 60px; left: 85px; }
.smileys img[src$='hello.gif'] { top: 70px; left: 120px; }

</style>
</head>
<body>

<div class="smileys">

<a href="#"><img src="http://rbbt.net/runboard_extra/smiley/yay.gif" alt=""></a>
<a href="#"><img src="http://rbbt.net/runboard_extra/smiley/firefox.gif" alt=""></a>
<a href="#"><img src="http://rbbt.net/runboard_extra/smiley/strike.gif" alt=""></a>
<a href="#"><img src="http://rbbt.net/runboard_extra/smiley/hello.gif" alt=""></a>

</div>
</body>
</html>


Edit to add sample:

Image

Last edited by Lesigner Girl, 11/11/2014, 9:59 pm


---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
11/11/2014, 6:02 pm Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 


Reply





You are not logged in (login)