Layout published by idioteque

published 1697505760
updated 1697506007

Add to Favorites

View Layouts

View Profile

Report Layout

dmessage

Tags: snippet, message, messages, purposeless, silly, i love bigfootjinx

Description:

my own message app... phone included....

disclaimer: i have never owned an iphone before, i do not know what is imessage this is dmessage

features:

create your own chat log :3 you can use this as some... q&a little thingy about yourself, or something really stupid!! you know i love the latter

change profile and contact name to whatever u like ! also... click on the profile to show a bigger pic ^_^ click away to close it!

it will scroll from bottom to top !! so older messages will be topmost. (to achieve this the scroll wheel behaves in reverse... so it might be a lot more comfortable by scrolling manually, dragging the scrollbar)

preview

11:11am

q x

balls

can you please answer to me for once

dMessage

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by idioteque (https://layouts.spacehey.com/layout?id=83140) -->

<!--- dmessage start --->
<style>
/* CUSTOMIZATION - Change case color, contact name and contact pic respectively!*/
:root {
    --case-color: gray;
    --contact-name: "bigfootjinx";
    --contact-pic: url(https://i.pinimg.com/736x/26/ed/ef/26edefdbfa06e36baf70c94c67b39b90.jpg);
}
</style><div id="dmessage"><div class="topbarorwhatever"><p>11:11am</p><p>q x</p><a class="ppprofile" href="#/"><img id="ppictuture"/><p id="contactname"> &gt;</p></a><div class="popuppy"><img id="ppictuture" src=""/><p id="bigname"></p></div></div><div id="messagescrollable"><div id="messagescontainer">
        <!---
                CHAT LOG HERE:
            use
                <p class="message-out">TYPE HERE</p>
            for a sent message (blue bubble). on TYPE HERE, change into your text 
            
            use
                <p class="message-in">TYPE HERE</p>
            for a received message (white bubble). on TYPE HERE, change into your text 
            
            you can place images inside the messages, example:
                <p class="message-in"><img src="IMAGEURL"></p>
            where IMAGEURL is your image url!
        --->
		
        <p class="message-out">balls</p>
        <p class="message-in"><img src="https://i.pinimg.com/originals/d9/b5/1b/d9b51b2a9ac0f69dc45682a07fad9c8f.gif"/></p>
		<p class="message-out">can you please answer to me for once</p>

        <!-- CHAT LOG END - do not edit below this line... rest of code ahead -->
</div></div><div id="vottomvar"><div class="messageboxxy"><span>dMessage</span></div></div></div><style>@font-face{src:url(https://dl.dropbox.com/scl/fi/44jmpsjadcy83ekitx5h2/Icons-South-St.ttf?rlkey=xlgdqf7d1egq08yvreyauv0p5&dl=0);font-family:icons}#dmessage{height:320px;width:160px;outline:black solid 1px;border:1px solid #fff;box-shadow:0 0 0 2px var(--case-color) inset,0 0 0 6px #000 inset;border-radius:25px;padding:6px;position:relative;margin:auto;box-sizing:border-box}#dmessage::after,#dmessage::before{display:block;position:absolute;left:0;right:0;margin:auto;font-family:'MS Pgothic';background:#000;border-radius:50px;box-sizing:border-box}#dmessage *{box-sizing:border-box;font-family:'MS Pgothic'}#dmessage::before{text-shadow:none!important;content:"o";top:10px;width:33%;height:16px;color:#00008b;line-height:12px;text-align:right;padding-inline:6px;font-size:10px}#dmessage::after{content:"";bottom:9px;width:35%;height:3px}.message-in:before,.message-out:before{width:20px;height:20px;background:0 0;bottom:0;z-index:-1;position:absolute;content:"";display:block}.topbarorwhatever{text-align:left!important;height:20%;width:100%;background:#ecf5fc;border-radius:18px 18px 0 0;padding:0 7px;border-bottom:1px solid #d1d4db}.topbarorwhatever p:not(#contactname){margin:6px 0!important;font-size:9px;display:inline-block; color:black!important;}.topbarorwhatever p:not(#bigname,#contactname,:first-child){float:right;margin-top:6px;font-family:icons!important;word-spacing:2px;font-size:9px}.ppprofile{width:100%;height:30px;margin:3px auto!important;text-align:center;color:#000!important;text-decoration:none!important;display:block}.popuppy #ppictuture{max-width:100%;border-radius:100%}#ppictuture{content:var(--contact-pic)}#bigname:after{content:var(--contact-name);font-family:'Ms Pgothic';font-size:20px}#contactname:before{content:var(--contact-name);font-size:8px;font-weight:400;color:#000}#contactname{margin:-2px;font-size:6px;overflow:hidden;text-overflow:ellipsis;font-weight:700;color:#4ba5f1}.ppprofile img{width:25px;height:25px;object-fit:cover;border-radius:100%}.ppprofile:focus+.popuppy{opacity:1;width:calc(100% - 12px)}.ppprofile:focus+.popuppy *{display:block!important}.popuppy *{display:none!important}.popuppy{background:#fff;opacity:0;width:0;height:calc(100% - 103.5px);position:absolute;top:67px;right:6px;margin:auto;pointer-events:none;z-index:9999;transition:.4s;text-align:center;padding:10px}#vottomvar,.popuppy img{width:100%}#messagescrollable{width:100%;height:70%;overflow-y:scroll;overflow-x:hidden;transform:rotate(180deg);direction:rtl;background:#fff;padding-top:24px}#messagescontainer{min-height:0;display:flex;flex-direction:column-reverse}#messagescrollable::-webkit-scrollbar{width:2px;background:0 0!important}.message-in,.message-out{font-size:10.5px;padding:5px;margin-inline:8px!important;word-break:break-word;border-radius:5px;position:relative;transform:rotate(180deg);text-align:left;margin-block:4px}:is(.message-in,.message-out) img{width:100%}.message-out:before{right:-19px;border-radius:0 0 0 10px;border-left:5px solid #4ba5f1;transform:rotate(-5deg)}.message-out{background:#4ba5f1;margin-right:45px!important;color:#fff}.message-in:before{left:-19px;border-radius:0 0 10px;border-right:5px solid #e9e9eb;transform:rotate(5deg)}.message-in{background:#e9e9eb;margin-left:45px!important;color:#000}#messagescrollable::-webkit-scrollbar-thumb{background:gray}#vottomvar{background:#d1d4db;height:10%;border-radius:0 0 18px 18px}.messageboxxy{width:80%;height:18px;background:#fff;border-radius:50px;transform:translateY(-39px);border:1px solid #cecece;float:right;margin-right:5px;padding:7px;cursor:text}.messageboxxy:after{content:"";background:url(data:image/png;base64,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) center/contain no-repeat;display:block;width:15px;height:13px;position:absolute;top:1px;left:-18px;opacity:.4;cursor:pointer}.messageboxxy span{display:block;font-size:10px;line-height:0;color:#cecece;user-select:none}#vottomvar:before{content:"";display:block;width:calc(100% - 2px);background:#fff;height:20px;transform:translateY(-19px)}.ppprofile:hover{background:transparent!important;border:0px!important;outline:0px!important;text-decoration:none!important;}#dmessage * {text-shadow:none!important;}</style>
<!--- dmessage end --->

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 25 comments ( View all | Add Comment )

alcachofi	1715410092 using <3 Report Comment
Silas	1713761739 Using !! Report Comment
Fo0xxyz	1712768312 USING Report Comment
Valen	1712458445 Using! Report Comment
Y͜͡i͜͡p͜͡p͜͡e͜͡e͜͡	1710280568 Using! Report Comment
l4in-1waKur4	1709882940 using Report Comment
Moeko!!!	1709846817 uussiinngg Report Comment
Cyrus	1709229997 Using !! Report Comment
Noel	1708923789 how do i make it not automatically centered? Report Comment
𝖘𝖚𝖇𝖙℮𝖝𝖙𝖔	1708048679 usingg Report Comment
☆ [star/fang] ^_^	1707705874 might use! Report Comment
Apostle	1706035100 probably going to use this :D Report Comment
inactive	1704904829 might use :3 Report Comment
craig / rody	1703854776 using ^_^ Report Comment
†⠀⠀SCYTHiDEL	1701562874 gonna b using ^__^ Report Comment
clowneryboy	1701230688 This is so cool! I love it!! Report Comment
D3AD PERS0N	1699982924 Gonna use it later ,thxx ^^ Report Comment
amelia (^_-)≡☆ (#1 izombie fan)	1699695182 might use Report Comment
inactive!!	1698497178 USINGG! Report Comment