jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2021-12-15 11:19 pm
10billionghosts) wrote2021-12-15 11:19 pm
code: alboe nu - individual card previews & codes
UPDATE 12/31/23: Alboe Nu Expansion Pack #1 Released!
Alright! So, you probably came here from the ALBOE NU, a modular macro-meme post. Check that out if you haven't, yet!
On this page you will find individual codes and previews of each card in the ALBOE NU set. Use them to customize a template or build your own spread. For pre-organized templates, visit the ALBOE NU TEMPLATES entry.
IF YOU ARE BUILDING A SPREAD FROM SCRATCH, REMEMBER: you need to either only use 2 cards or build your spread in multiples of six (so, 6, 12, 24, etc.) OR use the 'growing' card as the last card in your spread. Also, keep in mind that double-wide cards count for 2 spaces.
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!!
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!
❣️ If you would like to work from a template, please check out the TEMPLATES ENTRY over here.
❣️ PLEASE NOTE: Aim for spreads that are either 2 spaces, or multiples of 6:
❣️ 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.
❣️ 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!
TO START, if you're going to build your own template from scratch, YOU NEED THE FRAMEWORK:
Everything goes into the framework where indicated. Below this point are live previews of each card as well as the code for those cards. Codes are listed in order and the details are hidden under a summary, so just click the name of the code you want to reveal the code for that style.
First up you're probably going to want a face card, so let's go!
Alright! So, you probably came here from the ALBOE NU, a modular macro-meme post. Check that out if you haven't, yet!
On this page you will find individual codes and previews of each card in the ALBOE NU set. Use them to customize a template or build your own spread. For pre-organized templates, visit the ALBOE NU TEMPLATES entry.
IF YOU ARE BUILDING A SPREAD FROM SCRATCH, REMEMBER: you need to either only use 2 cards or build your spread in multiples of six (so, 6, 12, 24, etc.) OR use the 'growing' card as the last card in your spread. Also, keep in mind that double-wide cards count for 2 spaces.
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!!
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!
❣️ If you would like to work from a template, please check out the TEMPLATES ENTRY over here.
❣️ 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.
❣️ 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!
TO START, if you're going to build your own template from scratch, YOU NEED THE FRAMEWORK:
Everything goes into the framework where indicated. Below this point are live previews of each card as well as the code for those cards. Codes are listed in order and the details are hidden under a summary, so just click the name of the code you want to reveal the code for that style.
First up you're probably going to want a face card, so let's go!
- FACE CARDS -
a little bit of subheader
CHARACTER NAME
space here for a couple sentences. put a quote, concept line, or brief bio summary right here.
FACE cards are generally meant to be the first card in your spread. Each one features a baked in fake lj-cut by default, but it can be edited out. If you intend to use one of the face cards in a position other than 1st in a spread, I strong recommend editing out the fake lj-cut. Instructions are below.
THE CODES
FACE 1 is a portrait card with styling for header and subheader
FACE 2 is a more graphic-heavy card with space for a portrait, side bar image/background, and a header/label
FACE 3 consists of a central circle surrounded by a label/header; looks nice with cell phone wallpapers
FACE 4 is a minimalist face card with a sideways header; works best with close-up portraits
FACE 5 works best with 2 close-up portraits; i made this one because i know we are all shippy trash goblins and need a shippy card
FACE 6 works best with a wider-than-it-is-tall gif and has room for a bit of extra text
❣️ Face cards don't need to be starter cards. You can use them anywhere in your spread, though I highly recommend removing the fake LJ-cut if you do.
❣️ TO REMOVE THE FAKE LJ-CUT BUT KEEP THE LINK:
❣️ You may find that you need to fiddle with the background-size, which is set to cover by default. Usually, you'll want to do a % that is over 100. 150% - 250%. However, this may cause the image to tile on mobile devices.
❣️ You may also need to adjust the background position, which by default is 'center'. After the image url, you can change 'center' to something like 'center top', 'center bottom', 'left', 'right', 'right bottom', etc. Experiment!
FACE 1 CODE
FACE 2 CODE
FACE 3 CODE
FACE 4 CODE
FACE 5 CODE
FACE 6 CODE
❣️ Face cards don't need to be starter cards. You can use them anywhere in your spread, though I highly recommend removing the fake LJ-cut if you do.
❣️ TO REMOVE THE FAKE LJ-CUT BUT KEEP THE LINK:
- delete the 'HIDDEN LJ-CUT CODE' portion of the code as indicated in the code itself.
- change #PAGE_URL_HERE to either # or whatever URL you want.
- delete the 'HIDDEN LJ-CUT CODE' portion of the code as indicated in the code itself.
- change 'a href="#PAGE_URL_HERE' to 'div' and then change '/a' to '/div'
❣️ You may find that you need to fiddle with the background-size, which is set to cover by default. Usually, you'll want to do a % that is over 100. 150% - 250%. However, this may cause the image to tile on mobile devices.
❣️ You may also need to adjust the background position, which by default is 'center'. After the image url, you can change 'center' to something like 'center top', 'center bottom', 'left', 'right', 'right bottom', etc. Experiment!
- MOOD CARDS -
HEADER
sub-header
HEADER
sub-header
#365943
#D9C39A
#68748C
OPTIONAL
LABEL
LABEL
#F2B279
#F26E22
#F23E2E
HOME
These single card mood boards can go anywhere in your spread. Use them for general "mood" aesthetics, home/living space aesthetics, friendship aesthetics, color palettes, etc. You can load them one after the other to make larger mood boards, as well.
THE CODES
MOOD 1 is a grid-based mood board with 4 image spaces
MOOD 2, is another grid-based mood board with 7 image spaces
MOOD 4-SQ is a basic 4 space mood board that's styled to also have space for a tiny bit of text
INVENTORY is a 4-image flex mood board with a header image and label
❣️ As usual, replace IMG_URL with the URL of an image you want to use. You can also leave the URL blank and simply change the hex code to use a given square as a color block.
❣️ You may find that you need to fiddle with the background-size, which is set to cover by default. Usually, you'll want to do a % that is over 100. 150% - 250%. However, this may cause the image to tile on mobile devices.
❣️ You may also need to adjust the background position, which by default is 'center'. After the image url, you can change 'center' to something like 'center top', 'center bottom', 'left', 'right', 'right bottom', etc. Experiment!
❣️ Look for 'HEADER' or 'sub-header' for text to change. Don't want the text there? Just delete those words.
❣️ On COLOR MOOD, you will also want to make sure you either change or delete the hex code text.
MOOD 1
MOOD 2
MOOD 4-SQ
COLOR MOOD
COLOR MOOD, 7 image spaces let you have a 6 color palette and 1 image, or 7 total images
- each square, large and small, is styled to hold a small amount of text
- don't forget to adjust the background color for each small square
INVENTORY
❣️ As usual, replace IMG_URL with the URL of an image you want to use. You can also leave the URL blank and simply change the hex code to use a given square as a color block.
❣️ You may find that you need to fiddle with the background-size, which is set to cover by default. Usually, you'll want to do a % that is over 100. 150% - 250%. However, this may cause the image to tile on mobile devices.
❣️ You may also need to adjust the background position, which by default is 'center'. After the image url, you can change 'center' to something like 'center top', 'center bottom', 'left', 'right', 'right bottom', etc. Experiment!
❣️ Look for 'HEADER' or 'sub-header' for text to change. Don't want the text there? Just delete those words.
❣️ On COLOR MOOD, you will also want to make sure you either change or delete the hex code text.
- NAVIGATION CARDS -
PALETTE
#64702e
#182930
#f7f5e6
#373942
#1c3c61
#b57f97
The navigation codes are largely just variants of other codes, or blank cards with link lists pasted in. However, I wanted to make sure I released a few pre-styled nav cards for ease of use.
THE CODES
4-NAV is a variant of the INVENTORY card with an image header and 4 links instead of plain images
COLORS & LINKS is a basic card featuring a 6-color palette and up to 12 links (6 or 9 looks best); it plays nicely with other codes like PLAYLIST, Q&A and CR CHART so you can mix and match those
NAVIGATE is a very simple nav with room for potentially many links; works best with an image background
NAV MOOD is just COLOR MOOD repurposed as a nav menu; text for the links should be short
❣️ The first three nav codes are really just blank template cards with 3 different types of link list pasted in. If you're an intermediate to advanced coder, it should be pretty easy to mix and match these to get something unique that you like. :)
❣️ Both IMG_URL (pictures) and BACK_IMAGE_URL (backgrounds) appear in the nav codes, so be sure to change those if you'd like pictures or leave them in place and change the hex code to use them as color blocks.
4-NAV
COLORS & LINKS
NAVIGATE
NAV MOOD
❣️ The first three nav codes are really just blank template cards with 3 different types of link list pasted in. If you're an intermediate to advanced coder, it should be pretty easy to mix and match these to get something unique that you like. :)
❣️ Both IMG_URL (pictures) and BACK_IMAGE_URL (backgrounds) appear in the nav codes, so be sure to change those if you'd like pictures or leave them in place and change the hex code to use them as color blocks.
- MISC CARDS -
SOUNDS
title - artist
title - artist
title - artist
title - artist
title - artist
title - artist
title - artist
title - artist
PLAYLIST
FACTS
COFFEE ORDER
answer
FAVORITE MOVIE
answer
VOICE
answer
HANDWRITING
answer
AMORTENTIA
answer
LOVE LANGUAGE
answer
none pizza
with
left beef
with
left beef
#592c0f
#c2884d
#f3a712
#73a396
#534d41
#8a0a0a
This simple card is styled to accept blocks of text. It holds two to three small paragraphs well. With some quick tweaking of the font size and text alignment, you could probably also use this card as another quote card.
Powder wafer wafer tiramisu jelly topping biscuit. Shortbread chupa chups gummies cake pastry sesame snaps soufflé pastry chupa chups. Pudding candy canes marshmallow gummi bears toffee.
Powder wafer wafer tiramisu jelly topping biscuit. Shortbread chupa chups gummies cake pastry sesame snaps soufflé pastry chupa chups. Pudding candy canes marshmallow gummi bears toffee.
THE DECK
☀️
🌙
⬆️
♀️
✨
🧙♂️
⚡
🃏
🃏
Pre-styled cards that do this or that, letting you explore the general vibe of your character. The first three cards are very mix-n-match friendly, while the second three do best as-is.
You can even combine multiples into one card. For example, a CR chart with just 3 faces would fit nicely with a Q&A with 4 q&as.
THE CODES
PLAYLIST is a simple playlist code that you can comfortably fit a maximum of 8 songs into; playlist is on the CSS STRIPE blank template by default
QUOTE is a simple basic blank template with an image background styled to have, like, a literary quote. Or I guess you could put like 'pee is stored in the balls' in there too whatever i'm not here to judge lads
FRAMED PALETTE is just what it says on the tin: a palette code done on the basic bordered template
SHORT STORY, a framed card formatted for a block of text.
❣️ PLAYLIST, Q&A, and CR CHART are all very mix-n-match friendly. You can even put multiple on the same card. For example, a 3-person CR chart looks nice with around 4 - 5 Q&A questions from the Q&A code.
❣️ You may also have some luck combining either the palette or the nav links from COLORS & LINKS with PLAYLIST, Q&A, and CR CHART.
You can even combine multiples into one card. For example, a CR chart with just 3 faces would fit nicely with a Q&A with 4 q&as.
PLAYLIST
Q&A
Q&A is a basic text-focused fun facts card on the standard BLANK 1 template
- comfortably fits around 6 Q&As
- Change ITEM to the question/option and answer to the answer.
- if you want to use a seamless pattern as a background rather than a solid image, delete background-size:cover; from the code
CR CHART
CR CHART is a very simple image-based CR chart
- Maximum of 12 character portraits
- Works well with icons!
- Be sure to change !!name here!! to a name or description of whoever is in the image square
- If you don't have a URL for a given square, just change #URL_HERE to #.
QUOTE
FRAMED PALETTE
SHORT STORY
THE DECK
THE DECK: incept your friends for fun and profit with this deck within a deck
- THE DECK is effectively a very small gallery/mood board. It's a flex grid where you can put card-shaped images and emoji labels.
- This code fits a maximum of 12 cards well.
- In the example, I've listed off sun, moon, rising and venus signs, element, D&D class, associated god, tarot at the beginning of the characters arc and tarot for the end of the character's arc.
- The raw code contains sun, moon, rising signs and tarot card; copy paste them to add more, and don't forget to assign emoji headers!
- Look for title="(whatever)" and fill that in with a description for each card! It'll provide a label when you mouse over it.
- Some other things you could include are Final Fantasy job class, pet, favorite food, light side or dark side of the force, or anything else you can come up with!
- You will almost certainly want to futz with the background-size value on each card. Instead of background-size:cover, try background-size:150% to start and increase from there in increments of 10 - 25%.
- The Deck is not as mix-n-match friendly. It looks and works best on a basic blank template with a solid color background.
❣️ PLAYLIST, Q&A, and CR CHART are all very mix-n-match friendly. You can even put multiple on the same card. For example, a 3-person CR chart looks nice with around 4 - 5 Q&A questions from the Q&A code.
❣️ You may also have some luck combining either the palette or the nav links from COLORS & LINKS with PLAYLIST, Q&A, and CR CHART.
- BASE CARDS -
These are all just base cards with no interior styling. If you're an intermediate+ coder, you can use these to make your own cards.
THE CODES
❣️ The base cards are not styled to nicely accept text. Please keep that in mind. If you are wanting to do something you don't see on this entry, you may have better luck working off of a "misc" card above that is closest to what you want.
BASE 1
BASE 1, a basic blank card; background set to #eee by default, but you can easily add a background image or tiling pattern.
- This card has background-size:cover by default; if you are using a seamless pattern for your background, remove background-size:cover.
CSS STRIPE
CSS STRIPE, a basic card with a striped CSS background
- I suggest keeping the stripes relatively monochromatic; too much contrast will detract from the foreground contents
NAVIGATE
BORDERED, a card with a simple border and styling to keep all contents within the border
❣️ The base cards are not styled to nicely accept text. Please keep that in mind. If you are wanting to do something you don't see on this entry, you may have better luck working off of a "misc" card above that is closest to what you want.
- DOUBLE-WIDE CARDS -
MEREVECH
Double-wide cards are all mood boards, and they all count as 2 cards for the purposes of mathing out your spread.
THE CODES
❣️ Double-wide cards count as 2 cards and should always and only go into what would be the 2nd slot on a line of 3 cards.
❣️ You may find that you need to fiddle with the background-size, which is set to cover by default. Usually, you'll want to do a % that is over 100. 150% - 250%. However, this may cause the image to tile on mobile devices.
❣️ You may also need to adjust the background position, which by default is 'center'. After the image url, you can change 'center' to something like 'center top', 'center bottom', 'left', 'right', 'right bottom', etc. Experiment!
❣️ I do intend to build more double-wide card mood boards eventually, but whew, bud. I need a break.
DOUBLE-WIDE: MOOD 1
DOUBLE-WIDE: MOOD 1, a "fit as much shit as I could" grid-based aesthetic board
DOUBLE-WIDE: HOME MOOD
DOUBLE-WIDE: HOME MOOD, a bordered and (optionally) labeled mood board intended for use as a "home" or "living space" mood board
❣️ Double-wide cards count as 2 cards and should always and only go into what would be the 2nd slot on a line of 3 cards.
❣️ You may find that you need to fiddle with the background-size, which is set to cover by default. Usually, you'll want to do a % that is over 100. 150% - 250%. However, this may cause the image to tile on mobile devices.
❣️ You may also need to adjust the background position, which by default is 'center'. After the image url, you can change 'center' to something like 'center top', 'center bottom', 'left', 'right', 'right bottom', etc. Experiment!
❣️ I do intend to build more double-wide card mood boards eventually, but whew, bud. I need a break.
- MAGICAL GROWING CARD -
Here it is! The Magical Growing Card! This simple card is intended for use as the last card in your spread when your spread total is not divisible by 6. It can go into any slot and will automatically fill what's left of the row.
To start, I haven't done anything fancy with this card, although in the future I may make new growing cards that work as mood boards or other things.
❣️ Use this card if your total spread is not a multiple of 6. For example, if you have 3 cards, 8 cards, or 14 cards, tack this onto the end to ensure everything still aligns right.
❣️ This card works best with a seamless tiling background, but a solid color background will work, too. If you're feeling frisky, you could use a high resolution image, but that may be burdensome on other people's connections, and obnoxious to get aligned properly.
❣️ Only put this card at the end of your spread. You can fit it in in other ways, but its intended use is end of the spread.
To start, I haven't done anything fancy with this card, although in the future I may make new growing cards that work as mood boards or other things.
❣️ Use this card if your total spread is not a multiple of 6. For example, if you have 3 cards, 8 cards, or 14 cards, tack this onto the end to ensure everything still aligns right.
❣️ This card works best with a seamless tiling background, but a solid color background will work, too. If you're feeling frisky, you could use a high resolution image, but that may be burdensome on other people's connections, and obnoxious to get aligned properly.
❣️ Only put this card at the end of your spread. You can fit it in in other ways, but its intended use is end of the spread.