jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2022-04-23 11:36 pm
10billionghosts) wrote2022-04-23 11:36 pm
Entry tags:
code: TAYNE: GAME INFO - a stacking faction/npc/location code
Hello again! Here's a small life update for y'all: I recently did the math and realized I was writing an AVERAGE of 21.5k words for work EACH WEEK. Extremely extremely big skull emoji, my dudes. I was blowing past nanowrimo numbers every 2.5 weeks -- no WONDER I had not space to be creative!! I've walked back my workload a little so that I can exist, and that's given me the brain power to finally start to finish up a code I've been working on for a looong while now. So, without further ado...
Say hello to the second member of the Tayne set, named for the Celery Man skit from Tim & Eric. For the first half of 2022, Canva and creative cloud were absolutely inundating anyone who visited their services with "90s-inspired design is in!!!" stuff, and finally I decided I needed to get in on the trend. That's where this 90s - 2000s explorer/browser-inspired set came from.
This second key part of the TAYNE set is TAYNE: GAME INFO, a code for locations, factions, NPCs, and other things of that nature. It is comprised of 4 distinct parts:
These parts are semi-mix-n-match. For ease of use, I'm releasing these into pre-assembled rows of two -- two location rows, two NPC rows, two large picture rows -- but each full row is interchangeable with every other full row. If you're an advanced user, you can probably also switch up the interior codes.
Since you need this no matter what let's start y'all off with THE BASE CODE:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and is mostly insanejournal friendly!
❣️ Watch out for IMG_URL, as usual, and replace it with the URL for the image you'd like to use. For the wider, stouter image, landscape-oriented images, widescreen-style gifs, and very well centered perfectly square images work best. For the rest, square images or well-centered portrait images are ideal.
❣️ As per usual, #URL_HERE should be corrected to the URL you'd like to use for a given link.
❣️ Some of these codes use title="NAME HERE" to add a label to links, be sure to change NAME HERE to whatever you want the label to be.
❣️ By default, the image is set to background-size:cover (meaning it will automatically resize) and positioned to the center both vertically and horizontally. You may need to futz with these values if you are using a non-landscape-oriented picture or gif.
❣️ This code is EXTREMELY PINK out of the box, so remember to run find-replace on all hex codes and rgb values, replacing the default colors with the ones you'd like to use. Lemme outline what the default colors are for you next...
❣️ Hex code #fa53a0 is your primary color. This is the color of the border and faux menu bars.
❣️ rgb(37, 192, 192), aka hex code #25c0c0 is your secondary color, and it is used for all of the window shadows, just with slightly changed opacity.
❣️ Hex code #ff96c7, an even lighter pink, is only used on the field sets (the name/pronouns/etc fields on the horizontal split code) to create a slightly lighter background so that text stands out.
❣️ HEX CODE #e32b80 is a darker pink used for the labels for each field set.
❣️ HEX CODE #fff is white, and it is established both at the very top of the code where it declares the font color for all text in general, and then again on each "menu bar" so that menu bar header text is always white in color.
❣️ Outside of changing the colors and the !!HEADER!! text, you'll likely want to leave the stuff in the menu bar portion of the code alone unless you've got some CSS and HTML experience.
❣️ The scroll bars are styled on this code to be narrow and colorful, but styled scroll bars unfortunately do not work in Chrome. Apologies!
❣️ This code comes with a credit at the bottom by default. Appreciate it if you leave it in, but you can delete if you want! :)
❣️ 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!
❣️ As more TAYNE codes are released, I will put together a hub page for individual parts of the TAYNE set. For now, please enjoy these pre-styled options! You can grab each sub-section below.
Say hello to the second member of the Tayne set, named for the Celery Man skit from Tim & Eric. For the first half of 2022, Canva and creative cloud were absolutely inundating anyone who visited their services with "90s-inspired design is in!!!" stuff, and finally I decided I needed to get in on the trend. That's where this 90s - 2000s explorer/browser-inspired set came from.
This second key part of the TAYNE set is TAYNE: GAME INFO, a code for locations, factions, NPCs, and other things of that nature. It is comprised of 4 distinct parts:
- The Outer Flex Grid Shell: which makes everything work.
- #1 Horizontal Split, 3-item variant: an image & a small text box for basic details; out of the box this is styled with space for 3 major "details"
- #2 Basic Content, resident variant: A single fixed-height box that has space for both blocks of text and a flex box where you can list things like "residents" or "employees" or even just provide tiny icons of additional visual inspo
- #2 Basic Content, basic: A single fixed-height box for text with no additional styling.
- #4 Image Only: A single large image that can be used alongside the other parts of this code
These parts are semi-mix-n-match. For ease of use, I'm releasing these into pre-assembled rows of two -- two location rows, two NPC rows, two large picture rows -- but each full row is interchangeable with every other full row. If you're an advanced user, you can probably also switch up the interior codes.
Since you need this no matter what let's start y'all off with THE BASE CODE:
HOW TO USE:
❣️ Mind those lj-raw tags!!
❣️ This code is mobile compatible and is mostly insanejournal friendly!
- In order to achieve full insanejournal compatibility simply find any instance of height:313px and change it to height:318px.
❣️ Watch out for IMG_URL, as usual, and replace it with the URL for the image you'd like to use. For the wider, stouter image, landscape-oriented images, widescreen-style gifs, and very well centered perfectly square images work best. For the rest, square images or well-centered portrait images are ideal.
❣️ As per usual, #URL_HERE should be corrected to the URL you'd like to use for a given link.
❣️ Some of these codes use title="NAME HERE" to add a label to links, be sure to change NAME HERE to whatever you want the label to be.
❣️ By default, the image is set to background-size:cover (meaning it will automatically resize) and positioned to the center both vertically and horizontally. You may need to futz with these values if you are using a non-landscape-oriented picture or gif.
❣️ This code is EXTREMELY PINK out of the box, so remember to run find-replace on all hex codes and rgb values, replacing the default colors with the ones you'd like to use. Lemme outline what the default colors are for you next...
❣️ Hex code #fa53a0 is your primary color. This is the color of the border and faux menu bars.
❣️ rgb(37, 192, 192), aka hex code #25c0c0 is your secondary color, and it is used for all of the window shadows, just with slightly changed opacity.
- To change this color, do a find-replace on 37, 192, 192 with the rgb values for the color you'd like to use. The google color picker (just type "color picker" into the google search bar) will set you up with the RGB value of a color, second row, left side. :)
❣️ Hex code #ff96c7, an even lighter pink, is only used on the field sets (the name/pronouns/etc fields on the horizontal split code) to create a slightly lighter background so that text stands out.
❣️ HEX CODE #e32b80 is a darker pink used for the labels for each field set.
❣️ HEX CODE #fff is white, and it is established both at the very top of the code where it declares the font color for all text in general, and then again on each "menu bar" so that menu bar header text is always white in color.
❣️ Outside of changing the colors and the !!HEADER!! text, you'll likely want to leave the stuff in the menu bar portion of the code alone unless you've got some CSS and HTML experience.
❣️ The scroll bars are styled on this code to be narrow and colorful, but styled scroll bars unfortunately do not work in Chrome. Apologies!
❣️ This code comes with a credit at the bottom by default. Appreciate it if you leave it in, but you can delete if you want! :)
❣️ 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!
❣️ As more TAYNE codes are released, I will put together a hub page for individual parts of the TAYNE set. For now, please enjoy these pre-styled options! You can grab each sub-section below.
VERSION 1: LOCATIONS
✦
quick info
✖
✦
about
✖
Here's a brief blurb about the Solar Punk Apartments. Blah blah blah blah. More sentences here. I'm talking up the exterior and interior, mentioning the amenities, conveniences, and quirks. Any NPCs that might staff the building. Yadda yadda.
Once again, this box will auto-generate a scroll bar if the content exceeds the length of the box.
Once again, this box will auto-generate a scroll bar if the content exceeds the length of the box.
RESIDENTS
✦
about
✖
So, you can also alternate the order you place the two main components of this code (labeled #1: HORIZONTAL SPLIT and #2: BASIC in the code) to create a shuffled effect. The code, by default, comes with two lines: picture on the left in the first line and picture on the right in the second line. You can mix these up however you like by copy pasting code sections.
EMPLOYEES
✦
quick info
✖
First up, we have the code pre-styled for LOCATIONS! Out of the box, this code features TWO rows: one with image on the left, and a second with image on the right. The small info box on these is styled with space for THREE labels: place name, type of location, and vacancies for players.
While this code comes out of the box with row 1 image left and row 2 image right, you can just copy paste one of the rows over and over to have all of your images/small info boxes on one side. Similarly, you can just copy-paste both rows over and over to achieve a shuffled look with multiple locations.
While this code comes out of the box with row 1 image left and row 2 image right, you can just copy paste one of the rows over and over to have all of your images/small info boxes on one side. Similarly, you can just copy-paste both rows over and over to achieve a shuffled look with multiple locations.
VERSION 2: NPCs
✦
NPC info
✖
✦
about
✖
As you can see, these work well for making NPC write ups! Include a short blurb about your major NPCs here.
Cake sweet chocolate cake wafer macaroon apple pie dragée danish jelly-o. Caramels sugar plum topping candy canes muffin. Ice cream muffin candy canes cake jelly cake pie. Candy candy fruitcake chupa chups caramels cupcake cookie.
Caramels powder macaroon wafer liquorice jujubes sweet chocolate cake halvah. Chocolate cake sweet roll sesame snaps jelly beans cheesecake.
Cake sweet chocolate cake wafer macaroon apple pie dragée danish jelly-o. Caramels sugar plum topping candy canes muffin. Ice cream muffin candy canes cake jelly cake pie. Candy candy fruitcake chupa chups caramels cupcake cookie.
Caramels powder macaroon wafer liquorice jujubes sweet chocolate cake halvah. Chocolate cake sweet roll sesame snaps jelly beans cheesecake.
✦
about
✖
Cake sweet chocolate cake wafer macaroon apple pie dragée danish jelly-o. Caramels sugar plum topping candy canes muffin. Ice cream muffin candy canes cake jelly cake pie. Candy candy fruitcake chupa chups caramels cupcake cookie.
Caramels powder macaroon wafer liquorice jujubes sweet chocolate cake halvah. Chocolate cake sweet roll sesame snaps jelly beans cheesecake.
Caramels powder macaroon wafer liquorice jujubes sweet chocolate cake halvah. Chocolate cake sweet roll sesame snaps jelly beans cheesecake.
✦
NPC info
✖
Okay, number two is styled for NPCs. What's different? Well, honestly, mainly, this one just doesn't come with a flex-grid image board on the "ABOUT" section lmao. But, hey! That makes your life a little easier, doesn't it?
VERSION 3: BIG IMAGE
✦
about
✖
Lastly, we're eliminating the smaller information box in favor of one large image. Same rules apply here as with all the other codes in this set! Painting for this box is by Joanna Braithwaite.
Chocolate cake jujubes marzipan danish cupcake sweet dragée. Lollipop ice cream oat cake candy candy canes. Biscuit jelly-o bonbon liquorice caramels icing lollipop pie. Pudding toffee apple pie bonbon jelly shortbread ice cream.
Cake pudding marzipan sweet roll cheesecake.
Chocolate cake jujubes marzipan danish cupcake sweet dragée. Lollipop ice cream oat cake candy candy canes. Biscuit jelly-o bonbon liquorice caramels icing lollipop pie. Pudding toffee apple pie bonbon jelly shortbread ice cream.
Cake pudding marzipan sweet roll cheesecake.
✦
about
✖
Chocolate cake jujubes marzipan danish cupcake sweet dragée. Lollipop ice cream oat cake candy candy canes. Biscuit jelly-o bonbon liquorice caramels icing lollipop pie. Pudding toffee apple pie bonbon jelly shortbread ice cream.
Cake pudding marzipan sweet roll cheesecake.
Cake pudding marzipan sweet roll cheesecake.
Finally, we have the Big Image code. Replacing that smaller image box with one big image.
Below this, you'll find a live preview of the whole code all together.
Below this, you'll find a live preview of the whole code all together.
✦
quick info
✖
✦
about
✖
Here's a brief blurb about the Solar Punk Apartments. Blah blah blah blah. More sentences here. I'm talking up the exterior and interior, mentioning the amenities, conveniences, and quirks. Any NPCs that might staff the building. Yadda yadda.
Once again, this box will auto-generate a scroll bar if the content exceeds the length of the box.
Once again, this box will auto-generate a scroll bar if the content exceeds the length of the box.
RESIDENTS
✦
about
✖
So, you can also alternate the order you place the two main components of this code (labeled #1: HORIZONTAL SPLIT and #2: BASIC in the code) to create a shuffled effect. The code, by default, comes with two lines: picture on the left in the first line and picture on the right in the second line. You can mix these up however you like by copy pasting code sections.
EMPLOYEES
✦
quick info
✖
✦
NPC info
✖
✦
about
✖
As you can see, these even work well for making NPC write ups! Include a short blurb about your major NPCs here.
Cake sweet chocolate cake wafer macaroon apple pie dragée danish jelly-o. Caramels sugar plum topping candy canes muffin. Ice cream muffin candy canes cake jelly cake pie. Candy candy fruitcake chupa chups caramels cupcake cookie.
Caramels powder macaroon wafer liquorice jujubes sweet chocolate cake halvah. Chocolate cake sweet roll sesame snaps jelly beans cheesecake.
Cake sweet chocolate cake wafer macaroon apple pie dragée danish jelly-o. Caramels sugar plum topping candy canes muffin. Ice cream muffin candy canes cake jelly cake pie. Candy candy fruitcake chupa chups caramels cupcake cookie.
Caramels powder macaroon wafer liquorice jujubes sweet chocolate cake halvah. Chocolate cake sweet roll sesame snaps jelly beans cheesecake.
✦
about
✖
Lastly, we're eliminating the smaller information box in favor of one large image. Same rules apply here as with all the other codes in this set! Painting for this line by Joanna Braithwaite.
Chocolate cake jujubes marzipan danish cupcake sweet dragée. Lollipop ice cream oat cake candy candy canes. Biscuit jelly-o bonbon liquorice caramels icing lollipop pie. Pudding toffee apple pie bonbon jelly shortbread ice cream.
Cake pudding marzipan sweet roll cheesecake.
Chocolate cake jujubes marzipan danish cupcake sweet dragée. Lollipop ice cream oat cake candy candy canes. Biscuit jelly-o bonbon liquorice caramels icing lollipop pie. Pudding toffee apple pie bonbon jelly shortbread ice cream.
Cake pudding marzipan sweet roll cheesecake.
no subject
When I reduce it to the number of boxes I want, it still overlaps like this, though. It looks like something is causing the About boxes from line 2 to start inside line 1 rather than responding to the flex display, but I'm having trouble figuring out which aspect of it isn't responding correctly.
no subject
1. Are you using the base outer code? Its this part:
And then you post the locations code into THAT code where indicated (items below this point / items above this point). The issue you're getting looks a lot like what happens when the outer casing code is absent.
2. There's a missing /div, which is a little more of a pita to track down.
3. Might be a browser issue 😱 Which browser are you using for those screenshots? Firefox, Chrome, or something else?
If #1 isn't the issue, would you be cool with filtering your post to me so I can have a look at it? That'll help me narrow down what the problem is. c:
no subject
Thanks for your help!!
no subject
no subject
Thanks for sharing.
no subject