jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2023-12-31 01:51 pm
10billionghosts) wrote2023-12-31 01:51 pm
Entry tags:
ALBOE NU EXPANSION #1 - modular meme cards 4 u
DR. VERITAS RATIO, as contentious as his research. A candid and self-assured Intelligentsia Guild member, who often conceals his appearance with a strange plaster sculpture. Firmly believing that intellect and creativity are not confined to geniuses, he seeks to distribute knowledge to the entire universe to cure the persistent disease named ignorance.
Happy New Year! ALBOE NU (A Little Bit of Everything, Nothing Useful) was a heavily customizable build-a-board code set I released back in 2021 featuring a couple of pre-built templates and a bunch of single cards so that you could build your own "macro meme" board. This code set is an expansion to the original, featuring a number of random cards I've made in the years since, mostly focused on custom building larger mood boards out of smaller pieces.
Whether or not you're new to ALBOE NU, I definitely recommend going thru and reading the original two posts, both to learn the ins and outs of the original code, and to see everything else that's already been released.
In this code package, you will find:
OUTER WRAPPER CODE:
HOW TO USE:
❣️ IN ORDER FOR INDIVIDUAL CARDS TO WORK PROPERLY, YOU NEED TO BE SURE TO USE THE OUTER WRAPPER! Just post new cards into the code where indicated by the code comments! It is the exact same outer wrapper as is found on the original release post.
❣️ Mind the lj-raw tags!
❣️ These code is mobile compatible, and fairly IJ friendly!
❣️ Please don't forget to check out the two original release posts, Pre-Made Templates Only and Individual Cards, both to access additional cards and to hopefully answer any questions you may have about how the code works.
❣️ ALBOE NU is built to support 3 cards across on wide screens, and two tiny squished cards across on mobile views. Additional cards will spill over into new lines. Please take this into account when adding cards!
❣️ Add as many cards as you like! For best results, you want a total number of cards that is a product of both 3 and 2 (so, 6, 12, 18, etc), but that's MATHY. SO, you can always add a MAGIC GROWING CARD (found on this post) as the last card in your spread to ensure everything looks alright.
❣️ There is a credit at the bottom of the code wrapper. I'd appreciate it if you left it in place!
❣️ As always, feel free to comment and show me what you've done with my code! If you enjoy using what I produce, please consider tipping me on ko-fi. Those tips are always greatly appreciated!
❣️ Please see below for additional, more specific instructions.
Whether or not you're new to ALBOE NU, I definitely recommend going thru and reading the original two posts, both to learn the ins and outs of the original code, and to see everything else that's already been released.
In this code package, you will find:
- 1 Simple Premade Mood/Nav Template; a mood/nav template assembled from existing parts.
- 4 "Face"/Nav Cards; cards meant to be put at the front of the deck, which feature space for at least one portrait, links, or a fake LJ-cut.
- 5 Mood Cards; mood board/mini gallery cards that can be mix-n-matched to make a mood board.
- 1 "Tumblr Screenshot" Card; (under misc cards) meant to mimic tumblr text posts.
- 1 Text message Card; (under misc cards) mock up for text conversations.
- 1 "Text Mask" Card; (under misc cards) this one's a weird one?? lmao I fully admit it's only half-realized. Basically you just get a "knock out" effect where text shows a background. It's...weird and niche, but I made it, so I'm releasing it.
HOW TO USE:
❣️ IN ORDER FOR INDIVIDUAL CARDS TO WORK PROPERLY, YOU NEED TO BE SURE TO USE THE OUTER WRAPPER! Just post new cards into the code where indicated by the code comments! It is the exact same outer wrapper as is found on the original release post.
❣️ Mind the lj-raw tags!
❣️ These code is mobile compatible, and fairly IJ friendly!
❣️ Please don't forget to check out the two original release posts, Pre-Made Templates Only and Individual Cards, both to access additional cards and to hopefully answer any questions you may have about how the code works.
❣️ ALBOE NU is built to support 3 cards across on wide screens, and two tiny squished cards across on mobile views. Additional cards will spill over into new lines. Please take this into account when adding cards!
❣️ Add as many cards as you like! For best results, you want a total number of cards that is a product of both 3 and 2 (so, 6, 12, 18, etc), but that's MATHY. SO, you can always add a MAGIC GROWING CARD (found on this post) as the last card in your spread to ensure everything looks alright.
❣️ There is a credit at the bottom of the code wrapper. I'd appreciate it if you left it in place!
❣️ As always, feel free to comment and show me what you've done with my code! If you enjoy using what I produce, please consider tipping me on ko-fi. Those tips are always greatly appreciated!
❣️ Please see below for additional, more specific instructions.
- MOOD BOARD/NAV TEMPLATE -
This is a simple two card mood/nav board featuring 10 total links. I realize this isn't practical, necessarily. It's just to show you can make a pretty nice code with even just two cards. This specific code comes with the wrapper by default, so you don't need to grab it from above for this code, only.
THE CODE
❣️ You can replace IMG_URL for every box in this code, but it is more relevant for the portrait & upper image sections.
❣️ On the [color bar] section, be sure to change #aaa, #bbb, #c2c2c2, #ddd, #eee to actually fun colors.
❣️ Change #URL_HERE to a relevant URL, and be sure to add a title to each link where indicated in the code for easier navigating.
❣️ You can replace IMG_URL for every box in this code, but it is more relevant for the portrait & upper image sections.
❣️ On the [color bar] section, be sure to change #aaa, #bbb, #c2c2c2, #ddd, #eee to actually fun colors.
❣️ Change #URL_HERE to a relevant URL, and be sure to add a title to each link where indicated in the code for easier navigating.
- FACE/NAV CARDS -
VIKTOR
healer. finder. horror.
warrior of light (ffxiv)
healer. finder. horror.
warrior of light (ffxiv)
DR. VERITAS RATIO, as contentious as his research. A candid and self-assured Intelligentsia Guild member, who often conceals his appearance with a strange plaster sculpture. Firmly believing that intellect and creativity are not confined to geniuses, he seeks to distribute knowledge to the entire universe to cure the persistent disease named ignorance.
DR. VERITAS RATIO, as contentious as his research. A candid and self-assured Intelligentsia Guild member, who often conceals his appearance with a strange plaster sculpture. Firmly believing that intellect and creativity are not confined to geniuses, he seeks to distribute knowledge to the entire universe to cure the persistent disease named ignorance.
These cards are Face or Nav cards, cards meant to be put as the first card in your spread. You can stick these anywhere in your code, though! Because they are each unique, their individual instructions can be found beneath their specific headers.
THE CODES:
INTRODUCING CODE
Introducing is a face card/aesthetic card that features space for a character portrait. There's (optional) space at the bottom for a header and sub-header.
❣️ READ THIS PART IF YOU USE THIS CARD: In order for the code to look right, you need to post the same portrait image URL twice, replacing the placeholder text IMG_PORTRAIT1 and IMG_PORTRAIT2. It should be just fine after that!
❣️ Under the [top stripe pattern] section, you can find the URL to a transparent repeating pattern already in place. Delete just the URL to remove the pattern entirely, or replace it with the URL for a different repeating pattern if you'd like.
❣️ hex code #b60000 and rgba(182, 0, 0,.8) are two different ways of writing the same color. Find-replace these in this card if you'd like to change the default red to another color.
❣️ Be sure to edit (or remove) the header and subheader text!
❣️ READ THIS PART IF YOU USE THIS CARD: In order for the code to look right, you need to post the same portrait image URL twice, replacing the placeholder text IMG_PORTRAIT1 and IMG_PORTRAIT2. It should be just fine after that!
❣️ Under the [top stripe pattern] section, you can find the URL to a transparent repeating pattern already in place. Delete just the URL to remove the pattern entirely, or replace it with the URL for a different repeating pattern if you'd like.
❣️ hex code #b60000 and rgba(182, 0, 0,.8) are two different ways of writing the same color. Find-replace these in this card if you'd like to change the default red to another color.
❣️ Be sure to edit (or remove) the header and subheader text!
SIDE-BY-SIDE CODE
SIDE-BY-SIDE is a simple single image nav that has space for a quick one sentence blurb and at least 5 links, or as little as one link.
❣️ Change IMG_URL on this one to a single image that is at least 250x350(px) for best results! It can be a gif, png, jpg, whatever.
❣️ This card uses an RGBA value for the left translucent color bar. By default it is rgba(76, 17, 135,.8). Use google color picker to easily get new RGB values (the first three numbers) for the color you'd like to use. The fourth number value controls transparency. The closer to 1 it is, the more opaque, the closer to 0, the more translucent. Keep this in mind when customizing.
❣️ hex code #7b33c4 is the background color for the nav links, and white (#fff) is the text color. Customize these as necessary.
❣️ You can add/remove links as needed where indicated in the code. By default it comes with three.
❣️ Don't forget to add a quippy lil concept line under the concept line section!
❣️ Change IMG_URL on this one to a single image that is at least 250x350(px) for best results! It can be a gif, png, jpg, whatever.
❣️ This card uses an RGBA value for the left translucent color bar. By default it is rgba(76, 17, 135,.8). Use google color picker to easily get new RGB values (the first three numbers) for the color you'd like to use. The fourth number value controls transparency. The closer to 1 it is, the more opaque, the closer to 0, the more translucent. Keep this in mind when customizing.
❣️ hex code #7b33c4 is the background color for the nav links, and white (#fff) is the text color. Customize these as necessary.
❣️ You can add/remove links as needed where indicated in the code. By default it comes with three.
❣️ Don't forget to add a quippy lil concept line under the concept line section!
COLOR BAR NAV RIGHT
COLOR BAR NAV RIGHT features one image space for a portrait, 5 boxes meant for solid colors (but u can put images in anyway), and one box meant for, like, about a small paragraph worth of aesthetic words; song lyrics, a quote, a poem, a character blurb, recipe for crab artichoke dip. whatever u want.
❣️ Be sure to replace the IMG_URL under the [portrait] section with a png, gif, jpeg, etc.
❣️ The divs under the [color bar] section CAN take additional images, but they're small and they won't show up like at all on mobile (unless you're just using transparent textures/patterns), so I suggest just changing the hex codes (#aaa, #bbb, #c2c2c2, #ddd, #eee) with an appropriate color.
❣️ So, the text area is more meant to be aesthetic than to convey relevant information. It will truncate automatically if you put more text than the space can handle. This would be a good spot for song lyrics, a quote, a short paragraph, etc.
❣️ Be sure to replace the IMG_URL under the [portrait] section with a png, gif, jpeg, etc.
❣️ The divs under the [color bar] section CAN take additional images, but they're small and they won't show up like at all on mobile (unless you're just using transparent textures/patterns), so I suggest just changing the hex codes (#aaa, #bbb, #c2c2c2, #ddd, #eee) with an appropriate color.
❣️ So, the text area is more meant to be aesthetic than to convey relevant information. It will truncate automatically if you put more text than the space can handle. This would be a good spot for song lyrics, a quote, a short paragraph, etc.
COLOR BAR NAV LEFT
COLOR BAR NAV LEFT features one image space for a portrait, 5 boxes meant for solid colors (but u can put images in anyway), and one box meant for, like, about a small paragraph worth of aesthetic words; song lyrics, a quote, a poem, a character blurb, recipe for crab artichoke dip. whatever u want.
❣️ Be sure to replace the IMG_URL under the [portrait] section with a png, gif, jpeg, etc.
❣️ The divs under the [color bar] section CAN take additional images, but they're small and they won't show up like at all on mobile (unless you're just using transparent textures/patterns), so I suggest just changing the hex codes (#aaa, #bbb, #c2c2c2, #ddd, #eee) with an appropriate color.
❣️ So, the text area is more meant to be aesthetic than to convey relevant information. It will truncate automatically if you put more text than the space can handle. This would be a good spot for song lyrics, a quote, a short paragraph, etc.
❣️ Be sure to replace the IMG_URL under the [portrait] section with a png, gif, jpeg, etc.
❣️ The divs under the [color bar] section CAN take additional images, but they're small and they won't show up like at all on mobile (unless you're just using transparent textures/patterns), so I suggest just changing the hex codes (#aaa, #bbb, #c2c2c2, #ddd, #eee) with an appropriate color.
❣️ So, the text area is more meant to be aesthetic than to convey relevant information. It will truncate automatically if you put more text than the space can handle. This would be a good spot for song lyrics, a quote, a short paragraph, etc.
- MOOD BOARD CARDS -
These single card mood boards can go anywhere in your spread. Because two sets of them are mirrors of each other, they also work well set side by side.
THE CODES:
❣️ 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!
❣️ On the COLOR BAR codes, be sure to change #aaa, #bbb, #c2c2c2, #ddd, #eee to actually fun colors.
MOOD PAIR 1
Family I am struggling to describe these in a unique informative way. I just want this release post to be done. MOOD PAIR 1 is the one that is like a C around a box.
MOOD PAIR 2
Mood Pair 2 is the one that's like a backwards C around a box. I'm sorry I am not more descriptive, if I don't get this release post done I'm gonna mcfuckin lose it lmao.
MOOD BOARD 3
This is called MOOD BOARD 3 because it's just a nice normal single card mood board, and before it existed, there were 2 other nice normal single card mood boards on the original post. Data is beautiful or whatever.
COLOR BAR (LEFT) MOOD BOARD
A simple mood board with a "color bar" -- 5 boxes that are meant to have solid colors, but can technically also have images in them, I suppose. The color bar is on the LEFT in this code.
COLOR BAR (RIGHT) MOOD BOARD
A simple mood board with a "color bar" -- 5 boxes that are meant to have solid colors, but can technically also have images in them, I suppose. The color bar is on the RIGHT in this code.
❣️ 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!
❣️ On the COLOR BAR codes, be sure to change #aaa, #bbb, #c2c2c2, #ddd, #eee to actually fun colors.
- MISC CARDS -
!!username!!
Follow
put your pithy tumblr post quote here, it can be quite lengthy and will automatically generate a scroll bar.
Tart chupa chups pudding cupcake cheesecake tootsie roll pie lemon drops toffee. Macaroon cotton candy brownie candy carrot cake topping pie ice cream. Sweet roll marzipan cake oat cake sugar plum marshmallow. Gingerbread sweet halvah tiramisu chupa chups pudding. Liquorice gummies brownie chocolate bar dessert fruitcake.
Soufflé liquorice bonbon soufflé caramels jelly-o. Gummi bears candy canes tootsie roll cake chocolate cheesecake. Sweet gummi bears lemon drops chupa chups candy canes cheesecake. Halvah jelly-o chocolate bar bonbon danish. Macaroon cupcake jelly caramels cotton candy jelly beans. Apple pie sweet toffee lemon drops dessert soufflé jujubes donut. Liquorice gummi bears candy canes carrot cake apple pie biscuit bonbon. Jujubes lollipop apple pie candy canes topping candy topping cake dragée. Macaroon macaroon ice cream danish tart danish toffee sweet roll shortbread. Lollipop muffin muffin muffin tiramisu.
Tart chupa chups pudding cupcake cheesecake tootsie roll pie lemon drops toffee. Macaroon cotton candy brownie candy carrot cake topping pie ice cream. Sweet roll marzipan cake oat cake sugar plum marshmallow. Gingerbread sweet halvah tiramisu chupa chups pudding. Liquorice gummies brownie chocolate bar dessert fruitcake.
Soufflé liquorice bonbon soufflé caramels jelly-o. Gummi bears candy canes tootsie roll cake chocolate cheesecake. Sweet gummi bears lemon drops chupa chups candy canes cheesecake. Halvah jelly-o chocolate bar bonbon danish. Macaroon cupcake jelly caramels cotton candy jelly beans. Apple pie sweet toffee lemon drops dessert soufflé jujubes donut. Liquorice gummi bears candy canes carrot cake apple pie biscuit bonbon. Jujubes lollipop apple pie candy canes topping candy topping cake dragée. Macaroon macaroon ice cream danish tart danish toffee sweet roll shortbread. Lollipop muffin muffin muffin tiramisu.
!!contact!!
Message!
Your text messages can be as long as you want, and if you include more messages than the code has space for, it'll auto generate a scroll bar.
Outgoing Message!
A slightly longer outgoing message!
One more message
!!!
Read Friday
THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG.
These miscellaneous codes don't fit into a specific category, but are rather fun cards that you can squish in anywhere. Click each box below for individual codes and instructions for those codes.
THE CODES
TUMBLR QUOTE CODE
TUMBLR QUOTE mimics the look of traditional olde style tumblr mobile view screenshots. The sort of thing you see on pinterest/reddit. This code is VERY simple, and is essentially for large bodies of text or short quotes. It will automatically generate a thin scroll bar if you paste in more text than the card can contain, so you can be as loquacious as you'd like.
❣️ Be sure to change IMG_URL, !!username!!, and #URL_HERE under the [header] section, and add your custom text under the [body] section where indicated.
❣️ Be sure to change IMG_URL, !!username!!, and #URL_HERE under the [header] section, and add your custom text under the [body] section where indicated.
TEXTING CODE
Out of the box, the TEXTING mock-up code comes with a basic CONTACTS header, an incoming message, an outgoing message, and a 'message read' note. You can add as many messages as you want. It'll auto generate a scroll bar if you exceed the height of the card.
❣️ Additional incoming and outgoing messages can be copy-pasted into the code to add more.
❣️ Outgoing messages have hex code #ebebeb for background and the default font color declared at the very top of the code (usually #000) for the font color. Feel free to change these.
❣️ Incoming messages use hex code #1184fb for background and white (#fff, declared right there in the message code) for text. Feel free to change these, as well.
❣️ Additional incoming and outgoing messages can be copy-pasted into the code to add more.
❣️ Outgoing messages have hex code #ebebeb for background and the default font color declared at the very top of the code (usually #000) for the font color. Feel free to change these.
❣️ Incoming messages use hex code #1184fb for background and white (#fff, declared right there in the message code) for text. Feel free to change these, as well.
TEXT MASK CODE
lmao okay so this one... idk............. it's a TEXT MASK, which means the text shows a hidden image. I LOVE TEXT MASKING but have never been able to use it to great effect in a journal code sob. I'm releasing this anyway because I refuse to let ANOTHER code sit in my scraps unreleased.
❣️ This particular card is released AS-IS. It's EXTREMELY niche, meant for a very short quote, lyric, or sentence, and so if it's giving you trouble, I'd suggest skipping using it. Advanced coders may be able to squeeze a bit more functionality out of it and use it as a spring board for something else. Feel free to edit it to suit your needs!
❣️ Unless you don't like the bars at the top and bottom, the only text you need to adjust is the !!QUOTE, LYRIC, OR OTHER SENTENCE HERE.!! text.
❣️ Be sure to change IMG_URL to an image (or gif, gifs work!) that meets or exceeds 250px wide by 350px tall.
❣️ This particular card is released AS-IS. It's EXTREMELY niche, meant for a very short quote, lyric, or sentence, and so if it's giving you trouble, I'd suggest skipping using it. Advanced coders may be able to squeeze a bit more functionality out of it and use it as a spring board for something else. Feel free to edit it to suit your needs!
❣️ Unless you don't like the bars at the top and bottom, the only text you need to adjust is the !!QUOTE, LYRIC, OR OTHER SENTENCE HERE.!! text.
❣️ Be sure to change IMG_URL to an image (or gif, gifs work!) that meets or exceeds 250px wide by 350px tall.
no subject
no subject
no subject