Entry tags:

code

Interactive Dating Sim

Hi all! For Valentine's day I thought I'd do something a little bit topical and make a Dreamwidth-"friendly" mini dating sim UI. There's a working demonstration of it, as well as copious notes and a generator spreadsheet if you don't want to bother sorting through the code.

Please make sure to read all the notes carefully. Feel free to also use only a single screen if you don't want it to be interactive.

Tested on: Chrome (108, 108 for iOS), Firefox(84), Safari (14.1, 16 for iOS)

NOTES:

Please do not remove the credit footer unless you have code credits somewhere else on your journal!
If you are not planning on using the spreadsheet, please disable auto-formatting or you might end up with whitespace where it doesn't belong.
This code is long, please note that the 6 sample screens is something like 9k characters and that dreamwidth entries have a maximum of 65k latin (~33k cyrillic or cn/jp/kr characters) so you will not be able to create a very long story. For that, I suggest an RPG or dating sim engine instead!

( Read more... )

Entry tags:

code

Review Chart

I thought it would be fun to write up a chart that looks like it could be used for product reviews. It could be used as a testimonial page for you or your character, or for a character business. You could also just use it as a cr chart or muselist.

I've also made it so that you can leave a single review as a comment. I've left a separate code section for that purpose, and a demo below if you scroll all the way to the comments. Please note that the review content can't be trapped in a scrollable box the way that it is on the entry code. It's also slightly wider on desktop.

Tested on: Chrome (108, 108 for iOS), Firefox(84), Safari (14.1, 16 for iOS)

NOTES:

Please do not remove the credit footer unless you have code credits somewhere else on your journal!

( Read more... )

Entry tags:

code

Midnights Splash Page

Hi again!

Since my previous midnights-style covers were a hit, I thought it would also make a good navigation overlay and decided to spin the code into a splash page. It will only work on the main page of your journal, not on singular entries. If you want the navigation to be bound to an entry instead of as an overlay, I would highly recommend using the previous cover code instead!

Also, I tried it on a couple default Dreamwidth layouts and it seemed to work just fine, but I didn't test it on every single DW layout so it may or may not behave a little bit buggy on ones I didn't test. It will not work as-written with layouts imported from livejournal or insanejournal, as far as I know. But onto the installation!

Installation

Post a new entry to your journal and copy this code:
<div class="midnights_nav"><div style="display: grid;grid-template-columns: 1fr 1fr 2fr;grid-template-rows: 1.25fr 0.75fr 2fr 0;grid-column-gap: 0px;grid-row-gap: 0px; width: min(100vw, 100vh); height: min(100vw, 100vh); background: #ece8e5"> <div style=" grid-area: 1 / 2 / 2 / 4; align-self: end; justify-self: bottom; font-size: min(10vw, 10vh);font-family: helvetica, verdana, sans serif; font-weight: 800;background: -webkit-linear-gradient(45deg, #COLOR1, #COLOR2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.05em;text-align:left; line-height: 1.2;">NAME</div> <div style="grid-area: 1 / 1 / 4 / 2; align-self: end; justify-self: left; font-family: helvetica, verdana, sans serif;font-size: min(2vw, 2vh);font-weight: 600; background: -webkit-linear-gradient(45deg, #COLOR1, #COLOR2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 1em; line-height: 95%; text-align: left;"><a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> <a href="http://shipping.dreamwidth.org">Code</a></div> <div style="grid-area: 2 / 2 / 4 / 4; background: url(BACKGROUNDURL) center center; background-size: cover;"></div><div style="grid-area: 1 / 1 / 1 / 1; font-family: helvetica, verdana, sans serif;font-size: min(3vw, 3vh);font-weight: 600; background: -webkit-linear-gradient(45deg, #COLOR1, #COLOR2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 1em;"><a href="#entry-ENTRYNUM">x</a></div></div></div> Replace COLOR1 (3 instances), COLOR2 (3 instances), NAME (1 instance), BACKGROUNDURL (1 instance), all the links, and ENTRYNUM (1 instance - instructions below on how to find the ENTRYNUM). If you choose to delete the link credit, please link back to this journal elsewhere so other people can find this code!
This should make the album cover show up as a regular entry. Go to the entry and find the numeric id of the entry in the url (http://journalname.dreamwidth.org/ENTRYNUM.html). Remember to edit the entry to replace this id.
Make sure to either forward-date this entry or sticky it so that it always shows up when you go to your journal.
Now go to organize-->customize style and under custom-css, copy the following and replace all instances of ENTRYNUM with the id from a previous step:
#entry-ENTRYNUM{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.6); z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0px; margin: 0; border: none; } #entry-ENTRYNUM * { padding: 0px; margin: 0; } #entry-ENTRYNUM .header, .footer, .poster, .userpic{ display: none; } #entry-ENTRYNUM:target{ opacity: 0; transition: visibility 0s 0.5s, opacity 0.5s linear; visibility: hidden; }

If you'd like to see a live example, please check it out here. I did test this on a chrome 108, firefox 84, safari 14.1 and ios 16.1. This will not work with IE.

I tried it on themes Caravan, Tectonic, Patsy, Leftovers, Mobility, and Abstractia. The spacing between lines on the navigation changes a little bit, but other than that it should work fine on all those layouts.

Please enjoy and happy holidays!

Entry tags:

code

Midnights-Style Covers

Introduction:

I've been seeing a lot of Midnights edits lately and I thought it would make a nice HTML code for people to use for muselists, CR charts, or just for fun. Some notes:

I tested this on chrome, firefox, safari and chrome for iOS. It will work for mobile use but it does display a bit tightly in order to help preserve the aspect ratio, so I don't recommend it if you're a heavy mobile user.
The code expects you to have Helvetica installed. It will display in Verdana and then default sans serif if you don't have Verdana, but it is meant to display best with Helvetica.
Links will work and be in the same gradient by default.

( Read more... )

Entry tags:

code,
cr chart

Code: Noctium CR Chart

( Read more... )

Entry tags:

BLM Fundraising Commissions | CLOSED

Closing thank you!!

Together, we've raised $120 for BLM organizations and I will personally be price matching $100 (which I plan to send through a price matching for a total of $200, so overall $320!!!) I couldn't have done it without your generous help. <3

Hi everyone. With all that's been going on lately in the aftermath of the murder of George Floyd, I thought I'd open up some commissions for the indeterminate future to try and help contribute. All prices listed are Base Prices, meaning you have to give at least that much to receive the item, but you are free to donate as much as you wish.

Additionally, I'll personally price match up to $100 of all donations received for these commissions and donate it to BLM, sent through my day job because they'll price match my contribution. Why am I doing it this way? Last time I submitted gift-matching with my company, it took over a month to process. I'd like to be able to give a contribution both now and later, hence commissions!

For this reason, I am not taking IOUs or placeholders! ALL PRICES IN USD, so if you send in your local currency, please just make sure it's equivalent to the price listed in USD.

( Read more... )

Entry tags:

code

simple image "borders"

Hi guys! My last post had a bunch of ott image overlays but I thought I'd pare it down a little bit. These ones I think would be particularly useful to standardize the look on images used to break up long blocks of texts or visualosity-like galleries. I tried to put each of the examples in a mock-up of how they'd look in use. This is really more like a resource cheat-sheet so you don't need to credit this journal!

navigation
thinline border | perforated border | glass print | photograph | bottom shadow | 2d shadow | stereoscope

▲
top

thinline border

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla nunc vel lacus congue semper. Vestibulum fringilla turpis ligula, ac cursus libero bibendum vitae. Phasellus sed molestie tortor. Cras tincidunt cursus eros, ut accumsan quam tincidunt nec. Maecenas placerat suscipit quam, ut malesuada lorem vestibulum ac. Vestibulum condimentum nulla eget elit facilisis, eget sodales dolor molestie. Praesent eu molestie sapien. Sed dictum dapibus lorem, sed rutrum elit egestas non. Suspendisse ut tortor odio. Mauris malesuada tincidunt elit venenatis molestie. Nulla tincidunt arcu sed tellus tincidunt, vitae vehicula quam semper. Integer ut tristique lectus. Donec cursus diam velit, vitae pretium arcu viverra ut. Aliquam a purus non dui luctus elementum sed vel mauris.

Quisque ac mi est. Integer quis ligula urna. Fusce nec mattis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eget justo a lectus vulputate vestibulum quis in urna. Nam vulputate diam nec tempor viverra. Nulla hendrerit sem ex, quis tempor nisl mollis vitae. Duis aliquam mauris fermentum nunc commodo elementum. Praesent ut tempus lacus.

If you want to change the border color, please replace #ddd.

perforated border

Etiam non neque rhoncus, iaculis arcu non, scelerisque erat. Vivamus consectetur ipsum nisl, sed tempus arcu rhoncus vulputate. Fusce egestas, sapien quis auctor lacinia, ligula justo scelerisque ex, nec iaculis turpis tortor et diam. In auctor ante eu vehicula varius. Quisque semper non lacus at sollicitudin. Curabitur felis dui, rhoncus et mi quis, semper sodales mauris. Suspendisse dapibus dui quis consequat imperdiet. In metus turpis, congue a odio at, maximus pulvinar neque. Fusce vitae mi eget turpis molestie eleifend vitae vel dui. Duis vulputate id dolor eget ornare. Vivamus egestas rutrum tortor et consequat. Mauris eu felis dictum, maximus nulla eu, pellentesque felis. Nunc eu congue felis, ut dictum turpis. Nullam vitae aliquam urna. Donec pulvinar erat orci, nec aliquam ipsum tempor id.

Nunc sapien lectus, gravida eget enim ac, eleifend sagittis quam. Suspendisse et rhoncus felis. Donec ut lectus ut sapien dignissim mattis. In hac habitasse platea dictumst. Nulla sagittis lorem in tortor laoreet sagittis. Etiam ultricies, erat id scelerisque dignissim, dui nunc euismod est, a maximus libero orci quis libero. Donec efficitur nisl non ex iaculis, vitae aliquam mi dapibus. Aenean a est neque. Donec lacinia non orci tempus condimentum.

If you want to change the border color, please replace #ddd.

glass print

photograph

bottom shadow

2d shadow

Etiam vulputate ultrices nisl, eget iaculis sapien aliquam nec. Quisque faucibus eleifend tortor, vel dapibus neque vehicula nec. Vestibulum placerat dolor eu viverra maximus.

Nulla id dui ut ex dictum ullamcorper. Aliquam consequat elit et pellentesque vulputate. Donec semper, massa eu tincidunt accumsan, velit lectus facilisis velit, in efficitur turpis mi vitae lacus. Etiam eu ante tincidunt, eleifend nibh ac, ornare ligula. Vivamus metus augue, posuere quis quam id, mollis tincidunt lectus. Cras interdum rutrum libero ac vehicula. Nunc euismod porta ultrices. Vestibulum hendrerit ex a dictum imperdiet. Integer aliquam odio quis urna facilisis consectetur. Donec ullamcorper dui vitae velit ornare, et pulvinar odio vulputate. Etiam non suscipit ipsum. Nulla non bibendum justo. Pellentesque non risus semper, imperdiet odio ut, pellentesque lectus.

stereoscope

Entry tags:

code

250x250 "image" overlays

Hey all! I've made a handful of "image overlays" that are actually background overlays for pictures or gifs that are 250x250px. You don't need to have a 250x250 picture, your picture will resize to cover or fit the container in its existing scale. All you have to do to use them is copy them and then replace IMGURL (or for the ship one, IMGURL1 and IMGURL2 with your image urls! Just in case you thought your images were a little boring and needed a little spice!

navigation

BUBBLE INSTAGRAM POLAROID SUNNY SYNTHWAVE

▲
top

bubble
I picked a light and dark gif as examples to demonstrate how it would look depending on which pic you decide to use!

instagram

polaroid pair

sunny

synthwave

I hope you guys enjoyed!

NOTES:

Please do not remove the credit signature unless you have code credits elsewhere on your journal.

Entry tags:

code

journal set: frosted glass

I made myself a muselist with this effect and I liked it so much I thought I'd make a CR chart and... it kind of spiraled from there. I hope you enjoy!

Supported Browsers: Edge (17+), Chrome (76+), Safari (9+), iOS Safari (9+), Android (80+)

NOTES:

Please do not remove the credit footer unless you have code credits somewhere else on your journal!

Navigation | Inbox | HMD | CR/Muselist

NAVIGATION.

Navigation

hmd
info
inbox
permissions
cr chart
contact

Navigation:

<center><div style="margin: 5px; min-height: 150px; width:60%; border-radius: 20px; background: url(BACKGROUNDURL) center center; background-size: cover; overflow: hidden;"><div style="width: 100%; text-align: center;  padding-bottom: 5px; padding-top: 30px;"><font style="text-transform: uppercase; font-size: 30px; font-family: arial; color: #fff; letter-spacing: 10px; text-shadow: 1px 1px 2px #000;">Navigation</font><br></div><div style="-webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important; background: rgba(255,255,255,0.2); display: inline-block; font-family: arial; text-transform: uppercase; font-size: 15px; font-family: arial; color: #fff; letter-spacing: 10px; text-shadow: 1px 1px 2px #000; padding-top: 10px; padding-bottom: 10px; width: 100%; text-align: center;"><a href="LINK1URL" style="text-decoration: none; color: #fff;">link 1</a>
<a href="LINK2URL" style="text-decoration: none; color: #fff;">link 2</a>
<a href="LINK3URL" style="text-decoration: none; color: #fff;">link 3</a>
<a href="LINK4URL" style="text-decoration: none; color: #fff;">link 4</a>
<a href="LINK5URL" style="text-decoration: none; color: #fff;">link 5</a>
<a href="LINK6URL" style="text-decoration: none; color: #fff;">link 6</a></div></div><br/></center><div align="right"><small>coded by <user name="shipping"></small></div>

Find and Replace: BACKGROUNDURL, LINK1URL, LINK2URL, LINK3URL, LINK4URL, LINK5URL, LINK6URL
Note: Do not disable Auto-Formatting on this entry, otherwise insert <br/> after each link.

INBOX.

Inbox

voice. text. video.

Inbox:

Find and replace: BACKGROUNDURL

HMD.

HMD

anon on. comments screened.

HMD:

Find and replace: BACKGROUNDURL

CR CHART/MUSELIST.

Crowley

Flash bastard. Dark glasses. Swishy hips. Troublemaker. Half of one brain cell.

aziraphale

Fusspot. Tartan socks. Soft. Bookworm. You have found the other half of this brain cell.

Container (copy once):

Character Entry (copy every time you want a new character box):

Find and replace: BACKGROUNDURL, NAME, USERICON and DESCRIPTION

Entry tags:

code,
tinder

fake tinder profile

Hey guys, so it's come to my attention lately that there's still demand for this tinder profile I made ages ago, but am no longer supporting and is honestly a convoluted mess. I thought I might make some edits and publish a 2.0 version for anyone still tempted to use it! Please find the example and the code below. Please note that due to custom dreamwidth layouts, this may not look as good above a cut. It has been tested in the latest version of chrome/ff/safari. Also, please do not edit or redistribute this code without permission.

>I want to make a single tinder profile.
>I want to post this as a meme/as a log.

SINGLE PROFILE


Aziraphale, >6000 ⌂ AZ Fell Bookshop ⌬ Friends, extremely long-term UST
Bibliophile angel seeking a partner for lunch dates or browsing old bookshops. Hobbies include thwarting evil and performing stage magic.
	×	i	♥

code by

shipping

CODE:

<center><table width="275"><tr><td colspan="5"><div style="padding: 5px; padding-bottom: 2px; border-radius: 15px;"><img src="[IMAGEURL]" width="255" height="255" style="border-radius: 10px; box-shadow: 0px 0px 15px rgba(0,0,0,0.2); "></div></td></tr><tr><td colspan="5" style="color: #777; font-size: 12px; font-family: arial;"><font style="font-size: 18px; color: #000; letter-spacing: 2px;"><b>[NAME]</b>, [AGE]</font><p style="padding: 3px;">
⌂ [JOB]
⌬ [LOOKINGFOR]</p></td></tr><tr style="border-top: 1px solid #ddd;"><td colspan="5" style="color: #777; text-align: justify; text-justify: inter-word;">
[INFORMATION]
</td></tr><tr><td></td><td width="50"><div style="box-shadow: 0px 0px 15px rgba(0,0,0,0.1); background: rgba(255,255,255,0.4); border-radius: 50px;"><center><font style="font-size: 32px; color: #fa755a"><b>×</b></font></center></div></td><td width="30"><div style="box-shadow: 0px 0px 15px rgba(0,0,0,0.1); background: rgba(255,255,255,0.4); border-radius: 50px;"><center><a href="[INFOURL]" style="text-decoration: none; "><font style="font-size: 20px; font-family: georgia; color: #2288d6"><b><i>i</i></b></font></a></center></div></td><td width="50"><div style="box-shadow: 0px 0px 15px rgba(0,0,0,0.1); background: rgba(255,255,255,0.4); border-radius: 50px;"><center><font style="font-size: 32px; color: #37f0ce;">♥</font></center></div></td><td></td></tr></table><table>
<tr><td><textarea cols=10 style="border-radius: 10px 0px;"><font style="font-size: 50px; font-family: georgia; color: #fa755a;  font-weight: bold;">×</font></textarea></td><td></td><td><textarea cols=10 style="border-radius: 0px 10px;"><font style="font-size: 50px; font-family: georgia; color: #37f0ce;">♥</font></textarea></td></tr></table>
<div align="right"><small>code by <user name="shipping"></div>

NOTES:
» Images will stretch or shrink to 255x255 square.
» Replace the following: [IMAGEURL], [NAME], [AGE], [JOB], [LOOKINGFOR] [INFORMATION], [INFOURL]. There should be no square brackets left when you are finished.
» The phone outline is only for previewing purposes and isn't included.

MEME/LOG

Here is the code used for this entire post. All you have to do is replace [EX_IMAGEURL], [EX_NAME], [EX_AGE], [EX_JOB], [EX_LOOKINGFOR], [EX_INFORMATION] and [EX_INFOURL] with stuff from your post's header example. Only replace the bracketed information with the suffix "EX_".

CODE:

<center><table width="275"><tr><td colspan="5"><div style="padding: 5px; padding-bottom: 2px; border-radius: 15px;"><img src="[EX_IMAGEURL]" width="255" height="255" style="border-radius: 10px; box-shadow: 0px 0px 15px rgba(0,0,0,0.2); "></div></td></tr><tr><td colspan="5" style="color: #777; font-size: 12px; font-family: arial;"><font style="font-size: 18px; color: #000; letter-spacing: 2px;"><b>[EX_NAME]</b>, [EX_AGE]</font><p style="padding: 3px;">⌂ [EX_JOB]<br>⌬ [EX_LOOKINGFOR]<br></p></td></tr><tr style="border-top: 1px solid #ddd;"><td colspan="5" style="color: #777; text-align: justify; text-justify: inter-word;">
[EX_INFORMATION]
</td></tr><tr><td></td><td width="50"><div style="box-shadow: 0px 0px 15px rgba(0,0,0,0.1); background: rgba(255,255,255,0.4); border-radius: 50px;"><center><font style="font-size: 32px; color: #fa755a"><b>×</b></font></center></div></td><td width="30"><div style="box-shadow: 0px 0px 15px rgba(0,0,0,0.1); background: rgba(255,255,255,0.4); border-radius: 50px;"><center><a href="#" style="text-decoration: none; "><font style="font-size: 20px; font-family: georgia; color: #2288d6"><b><i>i</i></b></font></a></center></div></td><td width="50"><div style="box-shadow: 0px 0px 15px rgba(0,0,0,0.1); background: rgba(255,255,255,0.4); border-radius: 50px;"><center><font style="font-size: 32px; color: #37f0ce;">♥</font></center></div></td><td></td></tr></table><table>
<tr><td><textarea cols=10 style="border-radius: 10px 0px;"><font style="font-size: 50px; font-family: georgia; color: #fa755a;  font-weight: bold;">×</font></textarea></td><td></td><td><textarea cols=10 style="border-radius: 0px 10px;"><font style="font-size: 50px; font-family: georgia; color: #37f0ce;">♥</font></textarea></td></tr></table></center>

<b>CODE:</b>
<br><textarea rows="5" cols="40" style="border-radius: 0px 20px;">
<center><table width="275"><tr><td colspan="5"><div style="padding: 5px; padding-bottom: 2px; border-radius: 15px;"><img src="[IMAGEURL]" width="255" height="255" style="border-radius: 10px; box-shadow: 0px 0px 15px rgba(0,0,0,0.2); "></div></td></tr><tr><td colspan="5" style="color: #777; font-size: 12px; font-family: arial;"><font style="font-size: 18px; color: #000; letter-spacing: 2px;"><b>[NAME]</b>, [AGE]</font><p style="padding: 3px;">
⌂ [JOB]
⌬ [LOOKINGFOR]</p></td></tr><tr style="border-top: 1px solid #ddd;"><td colspan="5" style="color: #777; text-align: justify; text-justify: inter-word;">
[INFORMATION]
</td></tr><tr><td></td><td width="50"><div style="box-shadow: 0px 0px 15px rgba(0,0,0,0.1); background: rgba(255,255,255,0.4); border-radius: 50px;"><center><font style="font-size: 32px; color: #fa755a"><b>×</b></font></center></div></td><td width="30"><div style="box-shadow: 0px 0px 15px rgba(0,0,0,0.1); background: rgba(255,255,255,0.4); border-radius: 50px;"><center><a href="[INFOURL]" style="text-decoration: none; "><font style="font-size: 20px; font-family: georgia; color: #2288d6"><b><i>i</i></b></font></a></center></div></td><td width="50"><div style="box-shadow: 0px 0px 15px rgba(0,0,0,0.1); background: rgba(255,255,255,0.4); border-radius: 50px;"><center><font style="font-size: 32px; color: #37f0ce;">♥</font></center></div></td><td></td></tr></table><table>
<tr><td><textarea cols=10 style="border-radius: 10px 0px;"><font style="font-size: 50px; font-family: georgia; color: #fa755a;  font-weight: bold;">×</font><&sol;textarea></td><td></td><td><textarea cols=10 style="border-radius: 0px 10px;"><font style="font-size: 50px; font-family: georgia; color: #37f0ce;">♥</font><&sol;textarea></td></tr></table>
</textarea>
<br><br>

<b>NOTES:</b><br>» Images will stretch or shrink to 255x255 square.<br> » Replace the following: [IMAGEURL], [NAME], [AGE], [JOB], [LOOKINGFOR], [INFORMATION], [INFOURL]. There should be no square brackets left when you are finished.<br><br><div align="right"><small>code by <user name="shipping">. please do not edit or redistribute this code without permission.</small></div>

COLOR REPLACERS:
Feel free to change up any of the colors (which I based off of tinder) to your preferred theme!

#777 - main font

#fa755a - ×

#2288d6 - i

#37f0ce - ♥

(heart gets recolored to red on mobile and chromebook)

Entry tags:

layout | assemble!

Layout: Assemble! by Xy @ shipping

To celebrate Endgame, I've decided to make Avengers-themed layouts! Phase 2 recolors are coming, but I thought 6 colors was a good start. This layout features a sidebar you can fill with images that shows information when you hover over the panels. The cutout shapes are unique to each recolor. The layout will resize for different resolutions. Should work on mobile, though the hover behavior will be wonky.

instructions

Go to customize journal and select Flexible Squares. If you don't have flexible squares, you need to install it first.
Then go to sidebar and select "show". The sidebar will be on the left no matter which orientation you choose.
Go to custom css and uncheck everything, replacing the block of "custom stylesheet" with whatever you like below!
You must supply your own pictures for the sidebar! They're under /*SIDEBAR BACKGROUNDS*/. Just replace all the IMAGEURLs.
Custom comment pages are not recommended or supported with this layout. Additionally, some features are missing in Safari and older versions of Firefox.
If you remove credit from the code comments, make sure to credit shipping somewhere on your journal.

( you're embarrassing me in front of the wizards )

Entry tags:

layout | android dream

Layout: Android Dream by Xy @ shipping

I saw the CSS3 Stereoscope effect and I couldn't help myself, so here's a new layout.

IMAGE PREVIEW // LIVE PREVIEW

instructions

Go to customize journal and select Flexible Squares. If you don't have flexible squares, you need to install it first.
Then go to sidebar and select "show" and make sure it's on the right.
Go to custom css and uncheck everything, replacing the block of "custom stylesheet" with whatever you like below!
If you have a blurb, you must have a default userpic set or the sidebar will overflow.
If you remove credit from the code comments, make sure to credit shipping somewhere on your journal.

( follow me! )

Entry tags:

layout | express

Layout: Express by Xy @ shipping

I've been working on this for a few days. It's my first layout, so please enjoy!

LIVE PREVIEW

instructions

Go to customize journal and select Flexible Squares. If you don't have flexible squares, you need to install it first.
Then go to sidebar and select "show" and make sure it's on the right.
Go to custom css and uncheck everything, replacing the block of "custom stylesheet" with whatever you like below!
If you remove credit from the code comments, make sure to credit shipping somewhere on your journal.

( the streets are painted rainbow )

Entry tags:

code

fauxstagram code

Decided to give Erik an instagram at

duplicitynet with a sticky header and images that resize with the window. When I was done making it I thought why not share with everyone! ♥ Originally I also tried making a gradient border for recently posted stories but that was a trainwreck and a half.

PREVIEW

Fauxstagram

▲

soaring
✓
Following
▼
...

30 posts
104 followers
62 following

Carol Danvers

code

shipping

▦ POSTS
▣ TAGGED

HEADER

Make sure to replace anything demarcated with square brackets. There are: [FAUXSTAGRAM] (for whatever you want to call the "app"), [AVATARURL], [USERNAME], [NAME] & [DESCRIPTION] as well as 3 [#] for posts, followers and following. You should not have any brackets left when you are done replacing.

<raw-code><div style="width: 100%;"><div style="position: sticky; top: -1px; padding: 15px;background: white; border-bottom: 1px solid #ddd;"><div style="height: 20px; width: 20px; border-radius: 5px; border: #000 solid 2px; display: inline-block; margin-right: 10px;"><div style="height: 10px; width: 10px; border-radius: 10px; border: 2px solid #000; margin-left: 3px; margin-top: 3px;"></div></div> <div style="border-left: 1px solid #ddd; display: inline-block; padding-left: 10px; font-size: 30px; letter-spacing: -1px; font-family: brush script mt">[FAUXSTAGRAM]</div><div style="float: right;"><a href="#top" style="color:#000; text-decoration: none; font-size: 25px;">▲</a></div></div><div style="display: inline-block"><img src="[AVATARURL]" style="float:left; margin: 40px; width: 150px; height: 150px; vertical-align: top;border-radius: 150px; border: 1px solid #ddd;"><div style=" margin-top: 40px; overflow: hidden;"><ul style="margin-left: -2px;"><li style="list-style-type: none; display: inline-block; font-size: 25px; padding: 5px;">[USERNAME]</li> <li style="list-style-type: none;  display: inline-block; height: 12px; width: 12px;background: #458eff; color: #fff; border: 1px dotted #eee; border-radius: 20px;margin-right: 15px; font-size: 12px; text-align: center; line-height: 12px; padding: 3px;">✓</li><li style="list-style-type: none;  display: inline-block;"><div style="font-size; 15px; border: 1px solid #ddd; border-radius: 5px;padding: 3px 25px;margin:5px; font-weight: bold; font-family: arial; font-size: 15px; margin-top: -2px;">Following</div></li><li style="list-style-type: none;display: inline-block;"><div style="font-size: 14px; border: 1px solid #ddd; border-radius: 5px;padding: 4px 15px;margin:5px;">▼</div></li><li style="list-style-type: none; display: inline-block; font-size: 30px; font-family: times new roman;padding: 5px;padding-left: 15px;">...</li></ul><ul style="font-size: 17px; font-family: arial; margin-left: 0px;"><li style="list-style-type: none; display: inline-block; padding-right: 30px;"><b>[#]</b> posts</li><li style="list-style-type: none; display: inline-block;  padding-right: 30px;"><b>[#]</b> followers</li><li style="list-style-type: none; display: inline-block;  padding-right: 30px;"><b>[#]</b> following</li></ul><ul style="margin-left: 0px; font-size: 15px; font-family: arial;"><b>[NAME]</b><br>[DESCRIPTION]</ul></div><div style="clear: both;"/><div align="right" style="font-size: 7px; text-transform: uppercase; letter-spacing: 2px;">code <user name="shipping"></div>
<div style="width: 100%; border-top: 1px solid #ddd; text-align: center;"><ul style="font-size: 14px; font-family: arial; margin-top: -1px;"><li style="list-style-type: none; display: inline-block; border-top: 1px solid #000; margin-right: 30px; padding-top: 10px;">▦ POSTS</li><li style="list-style-type: none; display: inline-block; margin-right: 30px; color: #aaa; padding-top: 10px;">▣ TAGGED</li></ul></div></div><div style="clear: both;"></div>

ADD IMAGES

Add one of these per image to the bottom of the code after  You will need at least 3 to start with but you can have as many as you want, and it will automatically make 3 columns*. Replace [IMAGEURL] with your image. It will automatically resize to square but originally square images will work best.

*if your viewport is extremely small, it will shrink to a 2-column layout.

OPTIONAL: FOOTER

If you want to include things underneath your Instagram post on the same entry, make sure to add this underneath all your images. Otherwise, the sticky Instagram header will automatically stop once you reach the comment section of your post.