Layout published by daniel

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 daniel (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 51 comments ( View all | Add Comment )

Tutrabuctorlocal!	1732135906 Using! Report Comment
•°kenzie°•	1731813982 using Report Comment
// Layla <3 //	1731163191 trying to use <3 Report Comment
!.[S1LLI3].!	1729709715 using!! (or trying to) Report Comment
Al ?⋆｡° ✮	1729373384 Using (trying) Report Comment
Diokaa	1728509288 Using! Report Comment
hayden	1727557985 using Report Comment
d5vvp	1727461421 Using! Report Comment
𝐦𝐚𝐲	1726168806 using Report Comment
ଘ( ິ> 𐢭 < )ິଓ	1725997272 using Report Comment
6ane	1725309796 omg this is so cool!! using:3 Report Comment
James_XD	1725075242 can anybody help me? idk how to add pictures Report Comment
piotrek :p	1724928441 might end up using! very cool thing Report Comment
Biitsly	1724473261 using!!! Report Comment
CedarsSanity.	1724365390 probs using!! Report Comment
Nicou ☣︎	1723950528 uzinggg Report Comment
Plushy	1723940070 Might b using :3 Report Comment
Dazi <3	1723918290 using Report Comment
AARON ALCIDE CEREZO’S MUSEUM	1723288300 Might using Report Comment
𖥻 ɢ𝙪𝚛𝒐 🐈‍⬛	1723168607 Using Report Comment