10billionghosts: (more like fart history am i rite)
jay, novice human ([personal profile] 10billionghosts) wrote2021-12-16 10:48 pm
  • Add Memory
  • Share This Entry
Entry tags:

code: alboe nu - a modular macro meme!





Happy Holidays! Today I've got another over-the-top code set. No, this isn't Checkmate yet lmao 😩 That's still cooking. This is A Little Bit Of Everything, Nothing Useful, or ALBOE NU for short! Buckle in, this is a long one. It spans two posts!

Alboe Nu is a modular macro-meme (thank you [insanejournal.com profile] aeris for the term), a set of individual styled cards that you can assemble into a customized spread. Visually explore your character, game, or PSL's vibe with color palettes, aesthetic boards, playlists, quotes, cr charts, "fun facts", and more.

While you can certainly dig into the code and throw together a bunch of cards yourself, extensively customizing this code is not necessarily beginner friendly. So, be sure to read the HOW TO section thoroughly. For those who don't want to try and build something from scratch, I've put together two spread templates that you can use. It should be relatively easy to copy paste the cards you DO want over the cards that are there, too.

PLEASE NOTE: this post contains JUST the full templates. There is another post with individual card codes here. Use that to further customize the templates or build your own spread from scratch!

Live previews of Alboe Nu in action can be found on this page and at [personal profile] unironickylorenfan, where it is used as a splash page.

If you like and use my content, don't hesitate to comment here and let me know! I love peeping on what others are doing with my codes. :) And if you are so inclined, you can tip me on ko-fi. Thank you and enjoy!!

ALBOE NU FEATURES A NUMBER OF PRESTYLED CODES:
  • 2 styled templates
  • 6 "face" cards with optional fake lj-cut
  • 5 mood board cards
  • 11 styled cards, including:
    • 4 navigation codes
    • 1 color palette code
    • 1 aesthetic quote card
    • 1 CR/family & friends code
    • 1 playlist code
    • 1 Q&A "fun facts" code
    • something called "the deck"
    • 1 block text card
  • 2 "double-wide" aesthetic board cards
  • 1 "magic growing card" to make your spreads work for you
HOW TO USE:

❣️ Mind the lj-raw tags!

❣️ This code is mobile friendly! At the moment, the mood board cards are finicky on insanejournal. I will have a fix for that soon!

❣️ This entry contains JUST THE TEMPLATES. If you would like to build your own card spread or customize your card spread further VISIT THE INDIVIDUAL CARD PAGE for previews, codes, and instructions.

❣️ PLEASE NOTE: Aim for spreads that are either 2 spaces, or multiples of 6:
  • On desktop, Alboe Nu stacks 3 "cards" across. "Double-wide" cards count as 2. On mobile devices, it will collapse down to 2 across (or 1 double-wide card).

  • In order to keep the code functional, you can use up 2 spaces, use cards in multiples of 6, or use the "magic growing card" at the end of your spread.

  • Double-wide cards will always need to be in the 2nd, 5th, 8th, 11th, etc. position in your layout. In other words, double-wide cards should always be the 2nd card on a line that would otherwise be 3 cards.

  • The Magic Growing Card is intended to be used as a filler at the end of your code when you don't have total a spread that is a multiple of 6. It can go into the second or third spot on a line. See the growing card's subsection for more details.
❣️ With all that in mind, I tried to comment these codes out pretty well. You can add new cards or replace old ones by copy pasting things where indicated.

❣️ Both seamless tiling patterns and cell phone wallpapers work great as backgrounds for each card. I used tess's wonderful transparent pattern directory while styling some of the cards for the examples. It's a great resource!

❣️ IMG_URL is used extensively for 'foreground' pictures.

❣️ Watch out for 'BACK_IMAGE_URL'; you can replace this with the url of an image you'd like to use as a background image. Background images generally work better if they are fewer colors.

❣️ As uzh, links are marked with #URL_HERE.

❣️ FOR THE HIDDEN LJ-CUTS ON FACE CARDS SPECIFICALLY #PAGE_URL_HERE is used. Link to the journal post, itself.

❣️ By default, all images for all mood boards are set to "background-size:cover" and their positions are centered.
  • You may find that you need to adjust the background-size value to a large percent -- between 150% and 250%, potentially -- to get best sizing results for an image. However, this may futz with how it looks on mobile, if that's a concern for you.

  • For image position, you may find you need to change 'center' to 'center top', 'center bottom', 'left', 'right', or something like that to properly position an image. Experiment to find an alignment that works for you!


❣️ Font families used on this code are "Georgia, Garamond, Serif" and "Arial, Helvetica, Sans Serif". Serif fonts are exclusively used as headers. Feel free to change these!

❣️ hex code #eee, rgba(238, 238, 238, .5), rgba(238, 238, 238, .6), and rgba(238, 238, 238, .75) are all the base background color for all solid (non image board) cards and the color used to add shading on the playlist and Q&A code. The .6 / .75 / .5 is the color's opacity. You can adjust that number up or down to make it more or less see through.

❣️ hex code #40ABBF is the primary color, which is used for backgrounds on certain cards.

❣️ hex code #36D0E4 is the secondary color, used as an accent, generally.

❣️ hex code #BF5440 is the tertiary color, generally used for outlines and some text.

❣️ Having issues with the code? Comment below and let me know. I will troubleshoot to the best of my ability, but please allow 5 - 7 days for a response.

❣️ I do intend to eventually expand this code set in the future. If you have any specific requests for cards (not just "more face cards" or "more double-wide cards"), comment here and I might whip something up.

❣️ Want to use this code as a splash page for your journal? Check out Manx's guide to making splash pages on Dreamwidth, or Tess's guide for insanejournal! I suggest either using the fake LJ-CUT or only using a 2 row spread of cards if you use this code as a splash page.

❣️ There is a credit at the bottom of this code. You can remove it if you'd like, but I'd appreciate if you leave it there!

CREDITS FOR SAMPLE SPREADS:
[insanejournal.com profile] tessisamess (transparent patterns)
Subtle Patterns (repeating patterns)
Just The Facts Ma'am by Bluesinger & Conache
Kotagauni Srinivas on Unsplash for the photo of the moon + plants
All other images and gifs from tumblr or pinterest
Colleen and Manx for suggestions for cards, Ali for the macro-meme name, and the Group Chat At Large for testing the resolution on things

TEMPLATE CODES


Past here, you'll find codes and live previews both for full spread templates. Each section will contain rules and tips specific to those featured cards. PLEASE ALSO VISIT THE INDIVIDUAL CARDS POST TO GET YOUR HANDS ON CODES FOR INDIVIDUAL CARDS AND FURTHER CUSTOMIZE THIS CODE!


- TEMPLATE 1: 2 ROWS -
#592c0f
#c2884d
#f3a712
#73a396
#534d41
#8a0a0a
CASSIAN
much better half
HARRIET
the sprite
MEREVECH


First up is a 2 row template. Out of the box, this template features predominantly graphic heavy cards:

  • FACE 2, face card with a small label and space for 2 images (foreground and background/side bar)

  • MOOD 1, a 4-image grid-based mood board

  • BORDER PALETTE, a color palette-only card

  • MOOD 4-SQ, a 2x2 mood board styled to allow text

  • DOUBLE-WIDE: HOME MOOD, a double-wide mood board with styling for a text label. While it can be used for any sort of board board, it was created with "living space" or "home" aesthetic boards in mind


HERE IS THE CODE:





HOW TO USE:
❣️ If you do not want to use the fake lj-cut, remove the 'hidden lj-cut' portion indicated in the code, itself. Then change #PAGE_URL_HERE to just #.

❣️ On the other hand, if you'd like to use the face card as a fake lj-cut, make sure to change #PAGE_URL_HERE to the URL of your journal entry!

❣️ To remove the link entirely, delete out the 'hidden lj-cut' code as indicated, and then change "a href="#PAGE_URL_HERE" to "div" and "/a" to "/div".

❣️ IMG_URL is for the larger image, while BACK_IMAGE_URL refers to the side bar.

❣️ If adding additional cards, remember to either keep your code to multiples of 6 or utilize the Magic Growing Card.


- TEMPLATE 2: 3 ROWS -
squad xii . the moon
PALETTE
#64702e
#182930
#f7f5e6
#373942
#1c3c61
#b57f97
FOLKS
FACTS
COFFEE ORDER?
Dark roast coffee w/ milk
VOICE
Soft, sweet baritone
AMORTENTIA
fireworks, sweat, cheap soap
FIGHTING STYLE
trained, MMA & savate
the moon
is a friend
for the
lonesome
to talk to.
THE DECK
☀️
🌙
⬆️
♀️
✨
🧙‍♂️
⚡
🃏
🃏
SOUNDS
Fire Flies - Gorillaz
I Walk A Little Faster - Fiona Apple
i'm not okay - Adam Melchor
Lemon Boy - The Orion Experience
When He Sees Me - Kimiko Glenn
Signal - Sylvan Esso
THAT'S WHAT I WANT - Lil Nas X
still feel. - half.alive
PLAYLIST



Template 2 uses 3 rows to give you a bit more information. Out of the box, this template features mostly customizable "info" cards:
  • FACE 1, a minimalist face card with portrait, header, subheader, and baked in fake lj-cut

  • COLORS & LINKS, a combination palette and nav code

  • BASE 1, customize as you like or paste over it with another code from the cards entry

  • QUOTE, a blank card intended for use with short quotes; you can use an image or a solid color background on this

  • DOUBLE-WIDE: MOOD 1, a basic "fit as much as you possibly can" grid-based character mood board

  • THE DECK, a card for cards; the deck features coding to graphically list off things like zodiac signs, associated god/element/tarot, etc.

  • PLAYLIST, a playlist code on a css striped background

  • MAGIC GROWING CARD, to make sure the spread works because it isn't divisble by 6


    • HERE IS THE CODE:





    HOW TO USE:
    ❣️ Get the framework from above first!! Then you can post this code into the framework.

    ❣️ If you do not want to use the fake ij-cut, just remove the portion indicated in the code, itself. You can also change #PAGE_URL_HERE to just #. On the other hand, if you'd like to use the face card as a fake lj-cut, make sure to change #PAGE_URL_HERE to the URL of your journal entry!

    ❣️ As-is, the third card in this template comes with styling for a short CR chart and a short Q&A list; you can swap these out for whatever other codes you want!

    ❣️ You do not need to replace every instance of IMG_URL with an image. If you just leave IMG_URL there and instead adjust the hex code that immediately precedes it (usually, but not always, #ccc), you can simply turn the square into a solid color box.

    ❣️ Remember to keep your total card count to multiples of three while taking into account that double-wides count as 2.


REMEMBER BUCKAROOS
if you want more cards and their individual codes, head over to the individual card hub entry!