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

juukiii	1759870686 using!! ^^ Report Comment
T3TANUS	1759575836 USINGG Report Comment
Katharina	1759445818 it delets itself as soon as I save Report Comment
✧ iris ✧	1758537482 USING!!! I LIT AINT NEVA SEEN SHI COOLER THAN TS B4! Report Comment
gh0stinheels	1756366907 I LOVE IT!!!! Using of course! its so cool Report Comment
Rinzx	1755870289 using Report Comment
Creammocha(blk)<3	1753494477 THANK YOU usinggggg Report Comment
Z3n_R10t	1751302595 Uzing! Report Comment
˚⋅᥆rᥒgᑲᥣssm⋅˚	1750186329 i lovee itt usingg Report Comment
Rianbowgamerz:3	1749948252 I really love ur gadgets! Using Report Comment
aliiiice	1749071954 using! it's really cool!!! :33 Report Comment
angel✩🎧✮🦈	1748858823 USING!! so creative! Report Comment
official_timesisters	1747500819 using Report Comment
Sarmon(god father of "Liam 𖦹")	1747464029 USINGGGG Report Comment
literlly ramona	1746491674 using!! but for some reason all the text bubbles r blank :( Report Comment
lesado	1745697174 Using! ,'D Report Comment
lena	1745236889 usingg Report Comment
Artie	1744919648 Usingg Report Comment
Sploingledoo	1744479287 using! Report Comment
zom6iesite	1744142342 using!!! Report Comment