10billionghosts: (ramza)
jay, novice human ([personal profile] 10billionghosts) wrote2023-12-11 04:56 pm
  • Add Memory
  • Share This Entry
Entry tags:

code: TRAILBLAZE IT - a Honkai Star Rail text message mock up

Bingo Bongo Gentleman's Association
Short king delivery service
Name
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Name
Lorem ipsum dolor sit amet.
Name
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Name




Hello folks! Today's code, Trailblaze It is a text message code based on the DM/group chat UI for the game Honkai Star Rail. HSR's UI elements are all really wonderful and inspiring, and I've wanted to make a text message code for a while now.

Here's what you'll get in this set:
  • A simple pre-styled code with incoming & outgoing messages and a sticker.

  • The basic outer wrapper with nothing loaded in, for editing.

  • Styled incoming and outgoing text codes.

  • "Sticker" code for incoming and outgoing messages; insert a transparent png or gif of your choice.

  • "Photo" code for incoming and outgoing messages; for (landscape) pictures and photos.
Since there are a bunch of little codes to pick through, you can grab each one at the bottom of this post. I've marked this as a set because it's my hope to make a few more HSR-inspired codes at some point, so stay tuned for that!

HOW TO USE

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ By default, this code is set so that the area where the text messages are will generate a scroll bar. This is to keep with the styling in game. If you would like the code to scale height-wise with more content, find and delete "overflow:auto" from the code.

❣️ The menu closing "X" in the header is totally optional. Delete it if you don't want it or change it to whatever you'd like.

❣️ All messages should be loaded in where indicated in the code (within the NEW CONTENT HERE comments).

❣️ Make sure you replace any instance of IMG_URL with an appropriate image. [portrait]s and [image]s will resize to appropriately fit the space given. [sticker]s will size down to 25% of the window size.

❣️ The [sticker] code can be used as a standalone message or pasted directly beneath a [message] in the code, as shown in the example. For best results, stickers should be gifs or transparent pngs.

❣️ Want to change the colors? Be sure to use find-replace to update them. Here's a breakdown of each hex code:
  • hex code #1f1f1f - primary text color, declared at top of code.

  • hex code #d5d5d5 - light gray "background" color, declared at least twice. use find-replace to update.

  • hex code #acacad - this is just the divider line between the header and body

  • hex code #5f5f5f - secondary header text color, find-replace this once you're done otherwise editing the code.

  • hex code #ebebeb - off-white. background for incoming texts.

  • hex code #d4ba8b - background for outgoing texts.
❣️ This code comes with a credit by default. Appreciate it if you leave it in, but you can delete if you want! :) It's at the top of the code this time, but it's still clearly marked.

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!


CODE FOR BASIC TEXT MESSAGE:



This is a basic ready-out-the-box code featuring the code for one incoming and one outgoing message and an (optional) incoming sticker. A good place to start.

CODE FOR JUST THE OUTER WRAPPER:



This is JUST THE OUTER "window" with no messages inside. Good if you'd like to get wild with what you put in here or edit the code in any way.

CODE FOR INCOMING & OUTGOING MESSAGES:

INCOMING (on the left)


OUTGOING (on the right)


You can already grab these from the out-the-box ready code, but I wanted to include them individually as well.

CODE FOR INCOMING & OUTGOING STICKERS:

INCOMING (on the left)


OUTGOING (on the right)


This code is for STICKERS and is best used in tandem with transparent pngs, animated gifs, or other small images. You can also insert [message] or [photo] codes directly above or below the sticker to achieve an effect similar to the example at the top of this post.

CODE FOR INCOMING & OUTGOING PHOTOS:

INCOMING (on the left)


OUTGOING (on the right)


This code will insert a landscape oriented "photo" into the message. You can mess with the width and height values to change the aspect ratio so that it's easier to use for like, selfie shots and stuff.