6 | in noir
VALEN T.
Member
mobile-friendly
instagram
hidden scroll
ic code
better on dark
keep credit
[class="1"]height: calc(100% - 10px); width: 100%; background: #752F32; position: relative; margin-top: 5px; color: #F6F3E3; overflow-y: auto; box-sizing: border-box; padding: 0 10px 0 10px; font-size: 12px; text-align: justify; display: none; z-index: 2;[/class]
[class="2"]height: 100%; width: 100%; background: #752F32; color: #F6F3E3; box-sizing: border-box; padding: 5px 10px 5px 10px; font-size: 160%; text-align: center; font-weight: bolder; display: flex; align-items: center; flex-direction: column; justify-content: center; letter-spacing: 2px; transition: 0.2s all ease-out; cursor: pointer; position: absolute; z-index: 1;[/class]
[div class="2"]
in noir
click !
[class name="2" state="hover"]
text-shadow: 4px 4px 2px black;
[/class]
[class="op0"]opacity: 0;[/class]
[script class="2" on="click"]
fadeIn 1800 1
addClass op0 2
[/script]
[div class="1"]
[class="back"]font-weight: bold; cursor: pointer; display: inline-block;[/class]
[script class="back" on="click"]
fadeOut 200 1
removeClass op0 2
[/script]
click !
[div class="back"]back
if you need help w the code / smth's not working right / you have questions then don't hesitate to reach out to me okay ? i'll help you to the best of my abilities
alright alright hello !
Y'ALL THIS IS THE FIRST IC CODE I'VE POSTED ADHKSDSDS
it's kinda fucked up tho :/ like...jank level 2000 BUT don't worry, i've left
[COMMENT]
s here and there to aid you through the process
the code:
•
click/tap "View all 6 comments" or "more" on the bottom to view the actual IC post
•
click/tap on the " " on the top left (next to the "Comments") to return to Instragram-post page
additionally:
•
you can like and unlike the actual Instagram post
•
you can bookmark the Instagram post too
i did leave a blank template for anyone who wants to use the code
don't remove the credit thanks [/div] [/div] [/div]
#FF4956
#ffffff
#ededed
#bdbdbd
#000000
[class="container1"] max-width: 350px; height: 61px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background1"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="phonebar"] color: black; width: 100%; height: 20px; display: flex; align-items: center; background: #ededed; [/class] [class="igbar"] color: black; width: 100%; height: 40px; display: flex; align-items: center; background: #ededed; [/class] [class="igbar_2"] color: black; width: 100%; height: 40px; display: flex; align-items: center; background: #ededed; [/class] [class="back"] font-size: 17px; line-height: 17px; cursor: pointer; display: inline-block; [/class] [class="container2"] max-width: 350px; height: 539px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background2"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="postbar"] color: black; width: 100%; height: 50px; display: flex; align-items: center; background: white; [/class] [class="post"] --instagram-post: url('https://i.pinimg.com/564x/33/15/cc/3315cc8076e742c82113fcaf59ba75bf.jpg'); width: 100%; height: 350px; background: var(--instagram-post); background-size: cover; background-position: center; [/class] [class="postoptions"] color: black; width: 100%; height: 40px; display: flex; align-items: center; background: white; [/class] [class="whiteheart"] width: 23px; height: 21px; background: url('https://i.imgur.com/MnrUy3i.png'); background-size: cover; background-position: top; background-repeat: no-repeat; cursor: pointer; position: relative; margin-left: -23px; [/class] [class="redheart"] width: 23px; height: 21px; background: url('https://i.imgur.com/StDpI98.png'); background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; position: relative; [/class] [class="whitebookmark"] height: 22px; width: 22px; background: url('https://i.imgur.com/KhQx69o.png'), white; background-size: cover; background-position: center; position: relative; float: right; cursor: pointer; margin-right: -22px; [/class] [class="blackbookmark"] height: 22px; width: 22px; background: url('https://i.imgur.com/puDUxns.png'), white; background-size: cover; background-position: center; position: relative; float: right; cursor: pointer; [/class] [class="likes"] color: black; width: 100%; height: 20px; background: white; position: relative; box-sizing: border-box; padding-left: 10px; [/class] [class="likesbefore"] position: absolute; font-weight: bold; font-size: 12px; line-height: 12px; background: white; [/class] [class="likesafter"] position: absolute; font-weight: bold; font-size: 12px; line-height: 12px; background: white; [/class] [class="caption"] color: black; width: 100%; min-height: 40px; background: white; position: relative; box-sizing: border-box; padding: 0 10px 0 10px; font-size: 12px; [/class] [class="comments"] color: #969696; width: 100%; height: auto; background: white; position: relative; box-sizing: border-box; padding: 5px 10px 10px 10px; font-size: 13px; [/class] [class="viewcomments"] cursor: pointer; display: inline-block; transition: 0.2s all ease-out; [/class] [class="more"] cursor: pointer; display: inline-block; transition: 0.2s all ease-out; color: #969696; [/class] [class="container3"] max-width: 350px; height: 539px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background3"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="details"] color: black; width: 100%; min-height: 600px; background: white; font-size: 12px; box-sizing: border-box; padding: 10px; [/class] [class="credit"] color: #3c8be6; transition: 0.2s all ease-out; display: inline-block; cursor: pointer; [/class] [class="container4"] max-width: 350px; height: 42px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background4"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="bottombar"] width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; background: #ededed; box-sizing: border-box; padding: 0 25px 0 25px; [/class] [class="container5"] max-width: 350px; height: 42px; background: transparent; margin: auto; overflow: hidden; [/class] [class="background5"] max-width: 350px; height: auto; background: white; cursor: default; overflow: hidden; [/class] [class="bottombar_2"] width: 100%; height: 40px; display: flex; align-items: center; justify-content: space-between; background: #ededed; box-sizing: border-box; padding: 0 15px 0 15px; [/class] [class="hidden1"] width: 200%; height: 100%; overflow: hidden; position: relative; background: transparent; [/class] [class="hidden2"] width: 100%; height: 100%; overflow: auto; background: transparent; [/class] [class="hidden3"] box-sizing: border-box; width: 50%; height: auto; cursor: default; background: white; [/class] [class="none"] display: none; [/class] [class="border"] background: #bdbdbd; width: 100%; height: 2px; [/class] [script class="whiteheart" on="click"] hide whiteheart hide likesbefore [/script] [script class="redheart" on="click"] show whiteheart show likesbefore [/script] [script class="whitebookmark" on="click"] hide whitebookmark [/script] [script class="blackbookmark" on="click"] show whitebookmark [/script] [class name="viewcomments" state="hover"] color: #4d4d4d; [/class] [script class="viewcomments" on="click"] hide container2 hide container4 hide igbar show none [/script] [class name="more" state="hover"] color: #4d4d4d; [/class] [script class="more" on="click"] hide container2 hide container4 hide igbar show none [/script] [script class="back" on="click"] hide none show igbar show container2 show container4 [/script] [class name="credit" state="hover"] color: #154985; [/class] [class="a"] flex: 1; background: transparent; box-sizing: border-box; padding-left: 5px; [/class] [class="b"] display: flex; align-items: center; position: relative; [/class] [class="signal"] font-size: 12px; line-height: 12px; position: relative; margin-right: 5px; [/class] [class="mobnetwrk"] font-size: 11px; line-height: 11px; position: relative; margin-right: 5px; font-weight: 700; [/class] [class="wifi"] font-size: 11px; line-height: 11px; [/class] [class="time"] flex: 1; background: transparent; text-align: center; font-size: 11px; line-height: 11px; font-weight: 800; [/class] [class="c"] flex: 1; background: transparent; text-align: right; box-sizing: border-box; padding-right: 5px; [/class] [class="d"] display: flex; align-items: center; justify-content: flex-end; [/class] [class="percentage"] font-size: 11px; line-height: 11px; position: relative; margin-right: 5px; font-weight: 700; [/class] [class="battery"] font-size: 14px; line-height: 14px; position: relative; margin-right: 5px; [/class] [class="charging"] font-size: 12px; line-height: 12px; [/class] [class="photo"] flex: 1; text-align: center; font-weight: 800; font-size: 14px; line-height: 14px; [/class] [class="e"] flex: 1; box-sizing: border-box; padding-right: 15px; [/class] [class="refresh"] height: 17px; width: 17px; background: url('https://i.imgur.com/UWxahMS.png'); background-size: cover; background-position: center; background-repeat: no-repeat; float: right; [/class] [class="kcab"] flex: 1; box-sizing: border-box; padding-left: 15px; font-size: 17px; line-height: 17px; [/class] [class="k"] flex: 1; box-sizing: border-box; padding-left: 15px; [/class] [class="dm"] height: 15px; width: 17px; background: url('https://i.imgur.com/KC5AisA.png'); background-size: cover; background-position: center; position: relative; float: right; [/class] [class="f"] flex: 2; box-sizing: border-box; padding-left: 10px; position: relative; [/class] [class="bigpfp"] --insta-profile-picture: url('https://wallpapercave.com/wp/wp2139824.jpg'); height: 30px; width: 30px; border-radius: 100%; background: var(--insta-profile-picture); background-size: 150%; background-position: 30% 15%; position: relative; margin-right: 10px; [/class] [class="ellipsis"] flex: 1; text-align: right; box-sizing: border-box; padding-right: 10px; font-size: 12px; line-height: 12px; [/class] [class="commentsign"] width: 23px; height: 21px; background: url('https://i.imgur.com/gPrjlBZ.png'); background-size: cover; background-position: center; position: relative; margin-left: 11px; [/class] [class="dmsign"] height: 20px; width: 23px; background: url('https://i.imgur.com/KC5AisA.png'), white; background-size: cover; background-position: center; position: relative; margin-left: 10px; [/class] [class="g"] flex: 1; border-box; padding-right: 8px; position: relative; [/class] [class="h"] display: flex; position: relative; [/class] [class="username"] display: inline-block; font-weight: bold; position: relative; margin-right: 5px; [/class] [class="ago"] font-variant: small-caps; [/class] [class="j"] position: relative; margin-bottom: 25px; display: flex; align-items: flex-start; box-sizing: border-box; border-bottom: 1px solid #ededed; padding-bottom: 25px; [/class] [class="notherpfp"] --insta-profile-picture: url('https://wallpapercave.com/wp/wp2139824.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--insta-profile-picture); background-size: 150%; background-position: 30% 15%; position: relative; margin-right: 10px; [/class] [class="i"] flex: 1; [/class] [class="l"] position: relative; margin-bottom: 25px; display: flex; align-items: flex-start; [/class] [class="mdpfp"] --profile-picture-for-mood: url('https://i.pinimg.com/564x/3b/0e/d8/3b0ed845791b0ac055cdfe865411dbfd.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-mood); background-size: 130%; background-position: 50% 45%; position: relative; margin-right: 10px; [/class] [class="mntnspfp"] --profile-picture-for-mentions: url('https://i.pinimg.com/564x/23/98/f4/2398f43a4173e4a43c36824b67e72d8e.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-mentions); background-size: 110%; background-position: 50% 45%; position: relative; margin-right: 10px; [/class] [class="ntrctnspfp"] --profile-picture-for-interactions: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSusuwiU_5fiQVONgt2yGes0TCAKWr2-HCmRfM4y9_ZXQ_RPxYd&s'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-interactions); background-size: 130%; background-position: 100% 45%; position: relative; margin-right: 10px; [/class] [class="lctnpfp"] --profile-picture-for-location: url('https://i.pinimg.com/564x/69/0b/5f/690b5f63587bc66f2280da24516e2da0.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-location); background-size: 120%; background-position: 0 50%; position: relative; margin-right: 10px; [/class] [class="tftpfp"] --profile-picture-for-outfit: url('https://i.pinimg.com/564x/7f/cc/1b/7fcc1b6ed02b6498fc85b6cb1faf13a0.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-outfit); background-size: 150%; background-position: 110% 65%; position: relative; margin-right: 10px; [/class] [class="pstpfp"] --profile-picture-for-your-text-post: url('https://i.pinimg.com/564x/9f/40/8c/9f408ce0f8828656042f01803e494904.jpg'); height: 25px; width: 25px; border-radius: 100%; background: var(--profile-picture-for-your-text-post); background-size: 150%; background-position: 50% 65%; position: relative; margin-right: 10px; [/class] [class="line"] height: 1px; width: 100%; background: #bdbdbd; [/class] [class="home"] height: 21px; width: 20px; background: url('https://i.imgur.com/zfaceu8.png'); background-size: cover; background-position: center; [/class] [class="search"] height: 21.5px; width: 21px; background: url('https://i.imgur.com/K1jPpBO.png'); background-size: cover; background-position: center; [/class] [class="add"] height: 22px; width: 22px; background: url('https://i.imgur.com/jwKfqZH.png'); background-size: cover; background-position: center; [/class] [class="m"] height: 20px; width: 22px; background: url('http://icons.iconarchive.com/icons/iconsmind/outline/512/Heart-2-icon.png'); background-size: cover; background-position: center; [/class] [class="circlea"] height: 25px; width: 25px; border-radius: 100%; background: black; display: flex; align-items: center; justify-content: center; [/class] [class="circleb"] height: 23px; width: 23px; border-radius: 100%; background: rgba(237, 237, 237, 1); display: flex; align-items: center; justify-content: center; [/class] [class="circlec"] height: 21px; width: 21px; border-radius: 100%; background: url('https://wallpapercave.com/wp/wp2139824.jpg'); background-size: 150%; background-position: 30% 15%; [/class] [class="ddcmmnt"] height: 30px; background: transparent; border-radius: 20px; box-sizing: border-box; border: 1px solid #bdbdbd; display: flex; align-items: center; font-size: 12px; color: #bdbdbd; padding: 0 10px 0 10px; overflow: hidden; cursor: auto; [/class]
code by
VALEN T.
[div class="container1"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background1"]
[div class="phonebar"]
[div class="a"]
[div class="b"]
[div class="signal"][/div]
[div class="mobnetwrk"]vodafone[/div]
[div class="wifi"][/div]
[/div]
[/div]
[div class="time"]2:46 P.M.[/div]
[div class="c"]
[div class="d"]
[div class="percentage"]100%[/div]
[div class="battery"][/div]
[div class="charging"][/div]
[/div]
[/div]
[/div]
[div class="igbar"]
[div class="kcab"][/div]
[div class="photo"]Photo[/div]
[div class="e"][div class="refresh"][/div][/div]
[/div]
[div class="none"]
[div class="igbar_2"]
[div class="k"][div class="back"][/div][/div]
[div class="photo"]Comments[/div]
[div class="e"][div class="dm"][/div][/div]
[/div]
[/div]
[div class="border"][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="container2"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background2"]
[div class="postbar"]
[div class="f"]
[div class="b"]
[div class="bigpfp"][/div]
[div class="charging"]fickle_abstraction[/div]
[/div]
[/div]
[div class="ellipsis"][/div]
[/div]
[div class="post"][/div]
[div class="postoptions"]
[div class="f"]
[div class="b"]
[div class="redheart"][/div]
[div class="whiteheart"][/div]
[div class="commentsign"][/div]
[div class="dmsign"][/div]
[/div]
[/div]
[div class="g"]
[div class="blackbookmark"][/div]
[div class="whitebookmark"][/div]
[/div]
[/div]
[div class="likes"]
[div class="h"]
[div class="likesafter"]57,692,566 likes[/div]
[div class="likesbefore"]57,692,565 likes[/div]
[/div]
[/div]
[div class="caption"]
[div class="username"]fickle_abstraction[/div]
❝ i left my girl back home ![VALEN T.](/data/avatars/s/68/68743.jpg?1601459827)
i don't love her no more ❞... [div class="more"]more[/div] [/div] [div class="comments"] [div class="viewcomments"]View all 6 comments[/div] [div class="ago"]9 minutes ago[/div] [/div] [/div] [/div] [/div] [/div] [/div] [div class="none"] [div class="container3"] [div class="hidden1"] [div class="hidden2"] [div class="hidden3"] [div class="background3"] [div class="details"] [div class="j"] [div class="notherpfp"][/div] [div class="i"] [div class="username"]fickle_abstraction[/div] ❝ i left my girl back home
i don't love her no more ❞
![VALEN T.](/data/avatars/s/68/68743.jpg?1601459827)
Aliquam sollicitudin finibus purus, sed sodales enim cursus vel. Donec quis elit tellus. Cras non lobortis tortor. Suspendisse potenti. Morbi ac commodo nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Sed nec semper enim. Nam non dolor et lectus varius commodo. Proin iaculis, sem et vestibulum elementum, eros lectus placerat dolor, non mollis magna arcu eget justo. Nunc sed ullamcorper arcu. Nulla sodales, justo non varius gravida, massa orci tincidunt nisl, id cursus odio magna vel lacus. Duis venenatis turpis egestas libero finibus, nec imperdiet turpis lacinia. Mauris faucibus, neque vel eleifend rhoncus, nunc purus commodo urna, at tempus mi odio at lorem.
Integer ac pharetra tortor. Donec sed ultricies felis. Etiam tincidunt sit amet justo sit amet eleifend. Aliquam erat volutpat. Quisque quis massa enim. Sed ut venenatis orci. Fusce ac ultricies quam. Integer interdum ullamcorper ex, eget scelerisque est vestibulum eget. Duis interdum porttitor varius. Donec vestibulum vulputate ex ac rhoncus. Morbi eu consequat sapien, sed pellentesque mauris.
Aliquam efficitur at nulla ac congue. Donec at leo quam. Quisque ut tincidunt nunc. Integer ac odio ac dui tristique convallis. Maecenas sodales sapien commodo egestas finibus. Nulla sodales efficitur quam. Aliquam vitae sapien eu nulla volutpat dapibus eu malesuada turpis. Mauris neque urna, commodo eget vestibulum sit amet, sagittis sit amet libero. Maecenas pharetra laoreet arcu, et porttitor urna sollicitudin eu.
Praesent ut orci ut ipsum tristique imperdiet. Cras vitae sem sed est porta porttitor. Nullam vel purus convallis, vestibulum nunc vel, condimentum leo. Curabitur a leo a magna rhoncus ornare. Sed quis enim enim. Quisque in ornare orci. Quisque vehicula justo eget tortor suscipit volutpat. Suspendisse potenti. Cras vulputate nisi quis est facilisis sagittis. Donec convallis, lectus non dictum tempor, dolor elit sodales erat, vitae iaculis lectus purus vel purus. [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [/div] [div class="container4"] [div class="hidden1"] [div class="hidden2"] [div class="hidden3"] [div class="background4"] [div class="border"][/div] [div class="bottombar"] [div class="home"][/div] [div class="search"][/div] [div class="add"][/div] [div class="m"][/div] [div class="circlea"][div class="circleb"][div class="circlec"][/div][/div][/div] [/div] [div class="line"][/div] [/div] [/div] [/div] [/div] [/div] [div class="none"] [div class="container5"] [div class="hidden1"] [div class="hidden2"] [div class="hidden3"] [div class="background5"] [div class="border"][/div] [div class="bottombar_2"] [div class="bigpfp"][/div] [div class="i"][div class="ddcmmnt"]Add a comment...[/div][/div] [/div] [div class="line"][/div] [/div] [/div] [/div] [/div] [/div] [/div]
don't forget to add
don't forget to read the COMMENTs i've left ! they explain all the things i thought could potentially confuse someone
after you've ctrcl c + v-ed the code in your workshop (or wherever) here's a few things to search for + fill out:
the full, original code (with my input values) can be found on this website
you will find the blank template on this website and in this spoiler:
[br][/br]
for line breaksdon't forget to read the COMMENTs i've left ! they explain all the things i thought could potentially confuse someone
after you've ctrcl c + v-ed the code in your workshop (or wherever) here's a few things to search for + fill out:
- --insta-profile-picture: url('URL');
- --instagram-post: url('URL');
- --profile-picture-for-mood: url('URL');
- --profile-picture-for-mentions: url('URL');
- --profile-picture-for-interactions: url('URL');
- --profile-picture-for-location: url('URL');
- --profile-picture-for-outfit: url('URL');
- --profile-picture-for-your-text-post: url('URL');
- MOBILE-NETWORK-NAME-HERE
- TIME-IN-12/24-HOUR-CLOCK-FORMAT-HERE
- BATTERY-%-HERE
- BATTERY-ICON
- CHARACTER_NAME_OR_ROLE_HERE
- # + 1 likes
- # likes
- minutes ago
- YOUR-USER-CODE-HERE
- #YOUR_USERNAME_HERE
- #YOUR_CHARACTER'S_NAME_HERE
- INSTAGRAM CAPTION HERE
- YC'S MOOD HERE
- MENTIONS HERE
- INTERACTIONS AND TAGS HERE
- LOCATION HERE
- YC'S-OUTFIT'S-PICTURE'S-LINK-HERE
- SOME WORDS HERE, I SUPPOSE
- THE IC POST GOES HERE
- background-size: COVER | #% | #px | ETC;
- background-position: CENTER | #% #% | #px #px | ETC;
the full, original code (with my input values) can be found on this website
you will find the blank template on this website and in this spoiler:
Code:
[nobr]
[class="container1"]
max-width: 350px;
height: 61px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background1"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the top part of the code (i.e. the phone + insta bar)[/COMMENT]
[class="phonebar"]
color: black;
width: 100%;
height: 20px;
display: flex;
align-items: center;
background: #ededed;
[/class]
[class="igbar"]
color: black;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background: #ededed;
[/class]
[class="igbar_2"]
color: black;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background: #ededed;
[/class]
[class="back"]
font-size: 17px;
line-height: 17px;
cursor: pointer;
display: inline-block;
[/class]
[COMMENT]these ^^^ are the contents of container + background 1[/COMMENT]
[class="container2"]
max-width: 350px;
height: 539px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background2"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the instagram part of the code (the insta post + likes etc)[/COMMENT]
[class="postbar"]
color: black;
width: 100%;
height: 50px;
display: flex;
align-items: center;
background: white;
[/class]
[class="post"]
--instagram-post: url('URL');
width: 100%;
height: 350px;
background: var(--instagram-post);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
[/class]
[class="postoptions"]
color: black;
width: 100%;
height: 40px;
display: flex;
align-items: center;
background: white;
[/class]
[class="whiteheart"]
width: 23px;
height: 21px;
background: url('https://i.imgur.com/MnrUy3i.png');
background-size: cover;
background-position: top;
background-repeat: no-repeat;
cursor: pointer;
position: relative;
margin-left: -23px;
[/class]
[class="redheart"]
width: 23px;
height: 21px;
background: url('https://i.imgur.com/StDpI98.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
position: relative;
[/class]
[class="whitebookmark"]
height: 22px;
width: 22px;
background: url('https://i.imgur.com/KhQx69o.png'), white;
background-size: cover;
background-position: center;
position: relative;
float: right;
cursor: pointer;
margin-right: -22px;
[/class]
[class="blackbookmark"]
height: 22px;
width: 22px;
background: url('https://i.imgur.com/puDUxns.png'), white;
background-size: cover;
background-position: center;
position: relative;
float: right;
cursor: pointer;
[/class]
[class="likes"]
color: black;
width: 100%;
height: 20px;
background: white;
position: relative;
box-sizing: border-box;
padding-left: 10px;
[/class]
[class="likesbefore"]
position: absolute;
font-weight: bold;
font-size: 12px;
line-height: 12px;
background: white;
[/class]
[class="likesafter"]
position: absolute;
font-weight: bold;
font-size: 12px;
line-height: 12px;
background: white;
[/class]
[class="caption"]
color: black;
width: 100%;
min-height: 40px;
background: white;
position: relative;
box-sizing: border-box;
padding: 0 10px 0 10px;
font-size: 12px;
[/class]
[class="comments"]
color: #969696;
width: 100%;
height: auto;
background: white;
position: relative;
box-sizing: border-box;
padding: 5px 10px 10px 10px;
font-size: 13px;
[/class]
[class="viewcomments"]
cursor: pointer;
display: inline-block;
transition: 0.2s all ease-out;
[/class]
[class="more"]
cursor: pointer;
display: inline-block;
transition: 0.2s all ease-out;
color: #969696;
[/class]
[COMMENT]these ^^^ are the contents of container + background 2[/COMMENT]
[class="container3"]
max-width: 350px;
height: 539px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background3"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the comment section part of the code (the mood + mentions + interactions etc)[/COMMENT]
[class="details"]
color: black;
width: 100%;
min-height: 600px;
background: white;
font-size: 12px;
box-sizing: border-box;
padding: 10px;
[/class]
[class="credit"]
color: #3c8be6;
transition: 0.2s all ease-out;
display: inline-block;
cursor: pointer;
[/class]
[COMMENT]these ^^^ are the contents of container + background 3[/COMMENT]
[class="container4"]
max-width: 350px;
height: 42px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background4"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the "options" part of the insta page (the home + search + add + likes + profile bar)[/COMMENT]
[class="bottombar"]
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
background: #ededed;
box-sizing: border-box;
padding: 0 25px 0 25px;
[/class]
[COMMENT]these ^^^ are the contents of container + background 4[/COMMENT]
[class="container5"]
max-width: 350px;
height: 42px;
background: transparent;
margin: auto;
overflow: hidden;
[/class]
[class="background5"]
max-width: 350px;
height: auto;
background: white;
cursor: default;
overflow: hidden;
[/class]
[COMMENT]these 2 ^^^ are for the bottom part of the comment section (the "add a comment" part)[/COMMENT]
[class="bottombar_2"]
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
background: #ededed;
box-sizing: border-box;
padding: 0 15px 0 15px;
[/class]
[COMMENT]these ^^^ are the contents of container + background 5[/COMMENT]
[class="hidden1"]
width: 200%;
height: 100%;
overflow: hidden;
position: relative;
background: transparent;
[/class]
[class="hidden2"]
width: 100%;
height: 100%;
overflow: auto;
background: transparent;
[/class]
[class="hidden3"]
box-sizing: border-box;
width: 50%;
height: auto;
cursor: default;
background: white;
[/class]
[class="none"]
display: none;
[/class]
[class="border"]
background: #bdbdbd;
width: 100%;
height: 2px;
[/class]
[COMMENT]a few miscellaneous classes ^^^[/COMMENT]
[script class="whiteheart" on="click"]
hide whiteheart
hide likesbefore
[/script]
[script class="redheart" on="click"]
show whiteheart
show likesbefore
[/script]
[script class="whitebookmark" on="click"]
hide whitebookmark
[/script]
[script class="blackbookmark" on="click"]
show whitebookmark
[/script]
[class name="viewcomments" state="hover"]
color: #4d4d4d;
[/class]
[script class="viewcomments" on="click"]
hide container2
hide container4
hide igbar
show none
[/script]
[class name="more" state="hover"]
color: #4d4d4d;
[/class]
[script class="more" on="click"]
hide container2
hide container4
hide igbar
show none
[/script]
[script class="back" on="click"]
hide none
show igbar
show container2
show container4
[/script]
[class name="credit" state="hover"]
color: #154985;
[/class]
[COMMENT]^^^ scripts and other functions[/COMMENT]
[class="a"]
flex: 1;
background: transparent;
box-sizing: border-box;
padding-left: 5px;
[/class]
[class="b"]
display: flex;
align-items: center;
position: relative;
[/class]
[class="signal"]
font-size: 12px;
line-height: 12px;
position: relative;
margin-right: 5px;
[/class]
[class="mobnetwrk"]
font-size: 11px;
line-height: 11px;
position: relative;
margin-right: 5px;
font-weight: 700;
[/class]
[class="wifi"]
font-size: 11px;
line-height: 11px;
[/class]
[class="time"]
flex: 1;
background: transparent;
text-align: center;
font-size: 11px;
line-height: 11px;
font-weight: 800;
[/class]
[class="c"]
flex: 1;
background: transparent;
text-align: right;
box-sizing: border-box;
padding-right: 5px;
[/class]
[class="d"]
display: flex;
align-items: center;
justify-content: flex-end;
[/class]
[class="percentage"]
font-size: 11px;
line-height: 11px;
position: relative;
margin-right: 5px;
font-weight: 700;
[/class]
[class="battery"]
font-size: 14px;
line-height: 14px;
position: relative;
margin-right: 5px;
[/class]
[class="charging"]
font-size: 12px;
line-height: 12px;
[/class]
[class="photo"]
flex: 1;
text-align: center;
font-weight: 800;
font-size: 14px;
line-height: 14px;
[/class]
[class="e"]
flex: 1;
box-sizing: border-box;
padding-right: 15px;
[/class]
[class="refresh"]
height: 17px;
width: 17px;
background: url('https://i.imgur.com/UWxahMS.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
float: right;
[/class]
[class="kcab"]
flex: 1;
box-sizing: border-box;
padding-left: 15px;
font-size: 17px;
line-height: 17px;
[/class]
[class="k"]
flex: 1;
box-sizing: border-box;
padding-left: 15px;
[/class]
[class="dm"]
height: 15px;
width: 17px;
background: url('https://i.imgur.com/KC5AisA.png');
background-size: cover;
background-position: center;
position: relative;
float: right;
[/class]
[class="f"]
flex: 2;
box-sizing: border-box;
padding-left: 10px;
position: relative;
[/class]
[class="bigpfp"]
--insta-profile-picture: url('URL');
height: 30px;
width: 30px;
border-radius: 100%;
background: var(--insta-profile-picture);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="ellipsis"]
flex: 1;
text-align: right;
box-sizing: border-box;
padding-right: 10px;
font-size: 12px;
line-height: 12px;
[/class]
[class="commentsign"]
width: 23px;
height: 21px;
background: url('https://i.imgur.com/gPrjlBZ.png');
background-size: cover;
background-position: center;
position: relative;
margin-left: 11px;
[/class]
[class="dmsign"]
height: 20px;
width: 23px;
background: url('https://i.imgur.com/KC5AisA.png'), white;
background-size: cover;
background-position: center;
position: relative;
margin-left: 10px;
[/class]
[class="g"]
flex: 1;
border-box;
padding-right: 8px;
position: relative;
[/class]
[class="h"]
display: flex;
position: relative;
[/class]
[class="username"]
display: inline-block;
font-weight: bold;
position: relative;
margin-right: 5px;
[/class]
[class="ago"]
font-variant: small-caps;
[/class]
[class="j"]
position: relative;
margin-bottom: 25px;
display: flex;
align-items: flex-start;
box-sizing: border-box;
border-bottom: 1px solid #ededed;
padding-bottom: 25px;
[/class]
[class="notherpfp"]
--insta-profile-picture: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--insta-profile-picture);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="i"]
flex: 1;
[/class]
[class="l"]
position: relative;
margin-bottom: 25px;
display: flex;
align-items: flex-start;
[/class]
[class="mdpfp"]
--profile-picture-for-mood: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-mood);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="mntnspfp"]
--profile-picture-for-mentions: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-mentions);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="ntrctnspfp"]
--profile-picture-for-interactions: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-interactions);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="lctnpfp"]
--profile-picture-for-location: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-location);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="tftpfp"]
--profile-picture-for-outfit: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-outfit);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="pstpfp"]
--profile-picture-for-your-text-post: url('URL');
height: 25px;
width: 25px;
border-radius: 100%;
background: var(--profile-picture-for-your-text-post);
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
position: relative;
margin-right: 10px;
[/class]
[class="line"]
height: 1px;
width: 100%;
background: #bdbdbd;
[/class]
[class="home"]
height: 21px;
width: 20px;
background: url('https://i.imgur.com/zfaceu8.png');
background-size: cover;
background-position: center;
[/class]
[class="search"]
height: 21.5px;
width: 21px;
background: url('https://i.imgur.com/K1jPpBO.png');
background-size: cover;
background-position: center;
[/class]
[class="add"]
height: 22px;
width: 22px;
background: url('https://i.imgur.com/jwKfqZH.png');
background-size: cover;
background-position: center;
[/class]
[class="m"]
height: 20px;
width: 22px;
background: url('http://icons.iconarchive.com/icons/iconsmind/outline/512/Heart-2-icon.png');
background-size: cover;
background-position: center;
[/class]
[class="circlea"]
height: 25px;
width: 25px;
border-radius: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
[/class]
[class="circleb"]
height: 23px;
width: 23px;
border-radius: 100%;
background: rgba(237, 237, 237, 1);
display: flex;
align-items: center;
justify-content: center;
[/class]
[class="circlec"]
height: 21px;
width: 21px;
border-radius: 100%;
background: url('https://wallpapercave.com/wp/wp2139824.jpg');
background-size: COVER | #% | #px | ETC;
background-position: CENTER | #% #% | #px #px | ETC;
[/class]
[class="ddcmmnt"]
height: 30px;
background: transparent;
border-radius: 20px;
box-sizing: border-box;
border: 1px solid #bdbdbd;
display: flex;
align-items: center;
font-size: 12px;
color: #bdbdbd;
padding: 0 10px 0 10px;
overflow: hidden;
cursor: auto;
[/class]
[div="max-width: 350px; font-size: 8px; text-align: left; margin: auto;"]code by @fudgecakez[/div]
[div class="container1"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background1"]
[div class="phonebar"]
[div class="a"]
[div class="b"]
[div class="signal"][fa]fa-signal[/fa][/div]
[div class="mobnetwrk"][font='Open Sans'] MOBILE-NETWORK-NAME-HERE [/font][/div]
[div class="wifi"][fa]fa-wifi[/fa][/div]
[/div]
[/div]
[div class="time"][font='Open Sans'] TIME-IN-12/24-HOUR-CLOCK-FORMAT-HERE [/font][/div]
[div class="c"]
[div class="d"]
[div class="percentage"][font='Open Sans'] BATTERY-%-HERE [/font][/div]
[div class="battery"] BATTERY-ICON [/div]
[div class="charging"][fa]fa-bolt[/fa][/div]
[/div]
[/div]
[/div]
[COMMENT]so y'all see that "BATTERY-ICON" ?
there are a few other options available that you can substitute in for it:
[fa]fa-battery-empty[/fa]
[fa]fa-battery-quarter[/fa]
[fa]fa-battery-half[/fa]
[fa]fa-battery-three-quarters[/fa]
[fa]fa-battery-full[/fa][/COMMENT]
[div class="igbar"]
[div class="kcab"][fa]fa-chevron-left[/fa][/div]
[div class="photo"]Photo[/div]
[div class="e"][div class="refresh"][/div][/div]
[/div]
[div class="none"]
[div class="igbar_2"]
[div class="k"][div class="back"][fa]fa-chevron-left[/fa][/div][/div]
[div class="photo"]Comments[/div]
[div class="e"][div class="dm"][/div][/div]
[/div]
[/div]
[div class="border"][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="container2"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background2"]
[div class="postbar"]
[div class="f"]
[div class="b"]
[div class="bigpfp"][/div]
[div class="charging"][font='Open Sans'][B] CHARACTER_NAME_OR_ROLE_HERE [/B][/font][/div]
[/div]
[/div]
[div class="ellipsis"][fa]fa-ellipsis-h[/fa][/div]
[/div]
[div class="post"][/div]
[div class="postoptions"]
[div class="f"]
[div class="b"]
[div class="redheart"][/div]
[div class="whiteheart"][/div]
[div class="commentsign"][/div]
[div class="dmsign"][/div]
[/div]
[/div]
[div class="g"]
[div class="blackbookmark"][/div]
[div class="whitebookmark"][/div]
[/div]
[/div]
[div class="likes"]
[div class="h"]
[div class="likesafter"][font='Open Sans'] # + 1 likes [/font][/div]
[div class="likesbefore"][font='Open Sans'] # likes [/font][/div]
[/div]
[/div]
[COMMENT]here ^^^ if your "#" of likes are 10, then your "# + 1" of likes should be 11[/COMMENT]
[div class="caption"]
[div class="username"][font='Open Sans'] CHARACTER_NAME_OR_ROLE_HERE [/font][/div]
[font='Open Sans']
INSTAGRAM CAPTION HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS...
[div class="more"]more[/div]
[/font]
[/div]
[COMMENT]don't remove that "..." there ^^^[/COMMENT]
[div class="comments"]
[div class="viewcomments"][font='Open Sans']View all 6 comments[/font][/div]
[div class="ago"][font='Open Sans'] [SIZE=2]#[/SIZE] minutes ago [/font][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="none"]
[div class="container3"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background3"]
[div class="details"]
[font='Open Sans']
[div class="j"]
[div class="notherpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans'] CHARACTER_NAME_OR_ROLE_HERE [/font][/div]
[font='Open Sans']
INSTAGRAM CAPTION HERE. DON'T FORGET TO ADD [br][/br] FOR LINE-BREAKS
[br][/br]
[user=YOUR-USER-CODE-HERE][div class="credit"] #YOUR_USERNAME_HERE [/div][/user]
[div class="credit" style="cursor: default;"] #YOUR_CHARACTER'S_NAME_HERE [/div]
[/font]
[/div]
[/div]
[COMMENT]here ^^^ the "#" does not mean you have to replace it with a number. that's literally just being used as an instagram hashtag.
for the "YOUR-USER-CODE-HERE" part, the easiest way to find out yours is by tagging yourself > posting reply > clicking "reply" or "quote" on the post > viewing the quoted text on the rich-text-editor > there, it should say what your user code is[/COMMENT]
[div class="l"]
[div class="mdpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']mood[/font][/div]
YC'S MOOD HERE
[/div]
[/div]
[div class="l"]
[div class="mntnspfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']mentions[/font][/div]
MENTIONS HERE
[/div]
[/div]
[div class="l"]
[div class="ntrctnspfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']interactions[/font][/div]
INTERACTIONS AND TAGS HERE
[/div]
[/div]
[div class="l"]
[div class="lctnpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']location[/font][/div]
LOCATION HERE
[/div]
[/div]
[div class="l"]
[div class="tftpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']outfit[/font][/div]
[url="YC'S-OUTFIT'S-PICTURE'S-LINK-HERE"]SOME WORDS HERE, I SUPPOSE[/url]
[/div]
[/div]
[div class="l"]
[div class="pstpfp"][/div]
[div class="i"]
[div class="username"][font='Open Sans']post[/font][/div]
THE IC POST GOES HERE. DON'T FORGET TO ADD [br][/br] FOR LINE BREAKS.
[/div]
[/div]
[/font]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="container4"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background4"]
[div class="border"][/div]
[div class="bottombar"]
[div class="home"][/div]
[div class="search"][/div]
[div class="add"][/div]
[div class="m"][/div]
[div class="circlea"][div class="circleb"][div class="circlec"][/div][/div][/div]
[/div]
[div class="line"][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[div class="none"]
[div class="container5"]
[div class="hidden1"]
[div class="hidden2"]
[div class="hidden3"]
[div class="background5"]
[div class="border"][/div]
[div class="bottombar_2"]
[div class="bigpfp"][/div]
[div class="i"][div class="ddcmmnt"]Add a comment...[/div][/div]
[/div]
[div class="line"][/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/div]
[/nobr]
Last edited: