10billionghosts: (liam)
jay, novice human ([personal profile] 10billionghosts) wrote2022-01-14 03:20 pm
  • Add Memory
  • Share This Entry
Entry tags:

code: eggshell - a loyalty card code




I got sidetracked on my quest to design some styled comment codes, and the result is this: EGGSHELL, a set of loyalty/business card codes.

Here's what's included in this pack:
  • LOYALTY CARD x5; a basic loyalty card mock-up with 5 spaces, a header, sub-header, and footer.

  • LOYALTY CARD x5 - LINK; as above, but each of the 5 spaces is a link. Intended for use as a very small nav code.

  • BUSINESS CARD; styled to resemble a business card, the three emoji symbols are links. Also intended for use as a small nav code.

  • LOYALTY CARD x10; an alternate loyalty card with 10 spaces.

  • LOYALTY CARD x10 - LINK; as above, but each square is a link.

  • SOCIAL LINK; intended for use as a CR chart.

Use this code for funsies, as a CR chart, a very small splash or nav code for your journal, or even incorporate it into games! I've styled one of the example codes as a sort of log/activity tracker. Think of it like an alternate version of log bingo. Please note that these codes will not work in comments, because comments ignore fixed height settings for divs.

In order to simulate a stamp effect, these codes utilize customizable emojis from the website iconify.design, and a specific css styling -- transform: rotate(##deg) -- to make the "stamps" look crooked. I've explained how this functions, and how to customize it, in each subsection.

HOW TO USE (GENERAL):

❣️ Make sure you read everything! Each card comes with its own specific instructions, and some require a bit more than others. The below how-to info is broadly applicable to all the cards.

❣️ Mind those lj-raw tags!!

❣️ This code is mobile compatible and insanejournal friendly!

❣️ This code is styled as-is to be posted as a single card per line.

❣️ If you would like to post multiple cards on one entry, and want them to appear as multiple per line, scroll to the bottom of this post. I've included instructions for how to put the cards into a flex grid down there.

❣️ #URL_HERE should be corrected to the url you'd like a given link to connect to!

❣️ BACK_IMG_URL_1 and BACK_IMG_URL_2 can OPTIONALLY be replaced if you'd like something to have an image background. If you want a solid color background, do not replace this text and instead alter the hex code that precedes it.

❣️ hex code #fff is white. It is used as the "base" color for backgrounds and the interiors of loyalty card circles/squares.

❣️ hex code #729ae0 is the primary color for all cards, and is used as a background color.

❣️ hex code #13336b is the secondary color for all cards and is used for font colors.

❣️ Both serif and sans serif fonts are used in these cards. If you'd like to change the font for a particular card, look for font-family and alter that to the font you'd like to use. Please note that you'll need to use websafe fonts.

❣️ LOYALTY CARD STAMPS:
  • By default, each code comes with a basic styled star or heart "stamp" to mark a filled square/circle.

  • The stamps are set to background-size:contain by default. This means that the emoji will always scale to fit within the confines of its container. You may find that it's a bit more aesthetically pleasing to set certain emojis to a percent less than 100, like, background-size:60% or background-size:90%. Feel free to play around with it.

  • If you'd like to use a custom "stamp" to mark a box as filled:

    • Head over to iconify.design's Emoji One (Monotone) page and select the icon you want to use.

    • From there, use this image to guide you through customizing and getting the URL you need.

    • Paste the URL over either the 'STAMP_URL' filler text, or an existing emoji URL.

    • Don't forget to credit these folks. :)

  • If you would like to just change the color of a given stamp, you can do so by changing the last 6 numbers of that '%23######' value at the end of the emoji URL into the 6 numbers for the hex code you want to use. Do not remove the %23 or it will not work.

  • If you want to forego the stamps entirely and just fill the blocks in, just delete the url for the stamp and change the preceding hex code to whatever color you'd like.
❣️ These codes do come with a credit out of the box, which you can easily remove if you want.

❣️ If you like what I'm producing and have some dosh to spare, consider donating to my ko-fi! It's greatly appreciated. :)

Codes below this point!


LOYALTY CARD
get your 6th ass-kicking free!
bottom text
STAR TOURS
60% off your 6th cosmic trip!
visit us at GAME NAME

LOYALTY x5 comes in two flavors: basic and linked. On linked, each of the five squares is styled to be a link whether or not it has a stamp in it.

HERE'S THE BASIC CODE:




HERE'S THE LINKED CODE:



HOW TO USE:

❣️ These codes are pretty straightforward, but I would suggest using an image background either ONLY for the border or ONLY for the interior square.

❣️ By default, both of these codes come with a gold star stamp that is not rotated at all, and the very first circle in the code contains the URL for that. You can remove it or change it per the guide up at the top of this post.

❣️ You can rotate the stamp with the transform: rotate(0deg) styling. Change 0deg to a positive or negative value (so, -15deg or 60deg, for example) to rotate the emoji stamp.
  • NOTE: You won't be able to number the squares if you set transform: rotate to anything other than 0deg, because it will rotate the entire contents of the div.
❣️ You've got a few customizable text areas here: !!HEADER!!, !!subheader!!, and !!footer!!. The subheader and footer are set to small caps by default, you can change this by removing "font-variant:small-caps;"

❣️ On the linked code, the footer is also a link, but you can remove the link by just deleting href="#URL_HERE" from that particular part of the code.

❣️ Don't forget to change !!name!! to a description of the link, such as "profile" "dropbox" etc.


CHARACTER NAME
sub-title

BUSINESS CARD's simplicity means it comes in just one style. The base template has three emojis coded to be three links -- drobox, profile, and game.

HERE IS THE CODE FOR BUSINESS CARD:



HOW TO USE:

❣️ Follow the "LOYALTY CARD STAMPS" guide above to change the three emojis on this card. Exact same process!

❣️ For this card only, the emoji stamps are set to black by default, rather than to the secondary hex code color.

❣️ The code has preset the title of each link to "contact", "profile", and "game" respectively. You can change those by looking for title=" in the code.


activity!
every 5 logs, get a mini-plot!
1 2 3 4 ♡
6 7 8 9 ♡
thank you
for being a friend!
1
2
3
4
♡
6
7
8
9
♡
LOYALTY CARD x10 comes in two flavors: linked boxes, and unlinked boxes.

HERE'S THE LINKED CODE:




HERE'S THE UNLINKED CODE:



HOW TO USE:
❣️ By default, this code is styled to have an image background and a transparent solid color inner square. If you want an opaque inner square, change rgba(19, 51, 107, .8) to just the hex code of the color you would like to use.

❣️ If you do want a transparent inner square, you can change the color by using altering the RGB value of rgba(19, 51, 107, .8). Here's how:
  • Use Google's color picker or another color picker (like W3Schools) that allows you to see the rgb value.

  • Change only the first three numbers of rgba(19, 51, 107, .8).

  • If you'd like to adjust the opacity of the inner square, that is what the 4th number is for. A higher number is more opaque.
❣️ By default, both of these codes come with a heart stamp. The very first circle in the code contains the URL for that. You can remove it or change it per the guide up at the top of this post.

❣️ These squares do not come with a rotate option.

❣️ Other than that, LOYALTY CARD x10 is pretty much the same as LOYALTY CARD x5, code-wise.


CHARACTER
NAME
subtitle here
SOCIAL LINK is a small CR chart code. This card, unlike the others, comes in a flex grid, so that you can stack up to 2 across. There are instructions for formatting the other cards properly in a flex grid, as well.

HERE'S THE LINKED CODE:




HOW TO USE:

❣️ As mentioned, this particular card comes in a flex grid. Pasting multiple cards in will allow them to stack 2 across instead of just 1.

❣️ By default, this card comes with two styled stamps: a broken heart, and a regular heart. You can customize your own stamps using the guide at the top of this entry.

❣️ On this particular card, the background-size value on the stamps has been set to 90% by default. You can adjust the size of the stamp by increasing or decreasing the percent or setting the value to contain.

❣️ IMG_URL will change the portrait picture.

❣️ #URL_HERE is in place to link to the named character's journal or profile, if you'd like. You can remove the link by deleting href=#URL_HERE".

WANT TO USE THIS FLEX GRID FOR OTHER CARD STYLES?

❣️ The code above comes with a flex grid "wrapper". It comes with clear commented marking for where additional cards go. You can use this wrapper and paste multiple cards into it as indicated in the code.

❣️ THIS PART IS IMPORTANT, THOUGH: each individual card comes with lj-raw and /lj-raw tags. Remove those from the individual cards when you paste them into the flex grid wrapper to avoid causing any formatting issues.

❣️ Cards will stack 2 across on desktop and collapse down to one per line on mobile.