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

Tripleye_4	1772158588 usingg, i love your layoutsss Report Comment
v0dc4Xx_xXnth4n0L	1771527899 usinggg thats so cool Report Comment
kyonnann	1770704597 using Report Comment
the goat	1770161351 using Report Comment
1DOLLAR	1769742805 usando Report Comment
AlexHolyMoly	1768894661 using Report Comment
𓏲ּ𝄢	1768534829 using Report Comment
Asha_Selva	1768027521 Using Report Comment
Bae Silva	1767778475 using Report Comment
✮✦༻𝓿𝓲𝓸𝓵𝓮𝓽༺✦✮	1767752227 using Report Comment
𝓕𝓻𝓮𝓪𝓴𝔂ASAHI/ASH!!! ☆彡 #1 Tsukasa Fan (trust)	1767543984 this is so cool! using Report Comment
enya	1767308493 using!! :3 Report Comment
roadkill	1767271790 using <3 Report Comment
Sebastian 𖤐	1765363349 uuuuusing Report Comment
Ziaek	1765028163 using Report Comment
dvlmncrby	1763708697 USINGG~ Report Comment
Naye-li ₊˚⊹ᰔ	1763052298 might use Report Comment
Fluro	1761468259 dis so awsum i might use Report Comment
Cuteorangepie	1761176163 Using it!! Report Comment
T3TANUS	1759575836 USINGG Report Comment