jay, novice human (![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
10billionghosts) wrote2021-11-07 09:46 am
10billionghosts) wrote2021-11-07 09:46 am
Entry tags:
live preview & code: '98 EVENT, an ic/ooc code made with '98
WHAT'S UP?
Sun sparkles across the Greentooth River today with temperatures climbing up into the seventies by noon. It's a great reprieve from such a rainy April, and just in time for Elflock Falls' first Community Market of the spring!
This MOODBOARD 1 subsection comes with the above image board and a space for text as seen here. For this particular example, I'd use this text space to set the stage for an event like a party or, in this case, a farmer's market. MOODBOARD 2 also works really well in place of this one for an event code. You can find it over on the '98 hub post.
This MOODBOARD 1 subsection comes with the above image board and a space for text as seen here. For this particular example, I'd use this text space to set the stage for an event like a party or, in this case, a farmer's market. MOODBOARD 2 also works really well in place of this one for an event code. You can find it over on the '98 hub post.
MENU
MOODBOARD 3 is less an aesthetic board specifically and more just a flex grid image gallery. You can add as many pictures as you'd like by copy pasting the individual picture code and changing IMG_URL.
I love to use boards like this in events to show what sort of food or drink is being offered at parties, but there are plenty of things you can use this board for. The code comes with this space for text, but you can delete it if you don't want it.
I love to use boards like this in events to show what sort of food or drink is being offered at parties, but there are plenty of things you can use this board for. The code comes with this space for text, but you can delete it if you don't want it.
TAROT
This is a variant of the basic TEXT subsection that includes a floating image. It's set up so that text will wrap around the image. You can adjust the side the image floats on by changing float:left to float:right. Want to adjust the size? Change the width:##% and padding-top:##% values. I suggest sticking with percents, rather than pixels, as using pixels will almost certainly mess up how this code scales on mobile.
You could use this section for more descriptions, locations, or a rules section. For this particular example, I'm using this subsection to call out a fill-out-a-form game for this hypothetical event: get a tarot reading for your character from a traveling tarot reader. I've styled a very simple textarea code below. Just remember to update the border and background colors so that it matches the rest of your layout!
You could use this section for more descriptions, locations, or a rules section. For this particular example, I'm using this subsection to call out a fill-out-a-form game for this hypothetical event: get a tarot reading for your character from a traveling tarot reader. I've styled a very simple textarea code below. Just remember to update the border and background colors so that it matches the rest of your layout!
LOCATIONS
The length of Elflock Falls’ Riverwalk is lined with tents and stalls today selling all manner of goods and services. Take a peek and see what you find!
A brass band is playing from a little barge anchored just off shore of the riverfront amphitheater, and music echoes through the valley, but the best place to listen is right here.
Questions, comments, concerns?
This is an event code made with the '98 MODULAR CODE set. The example uses a background from graphicsurf by Denis and was customized by me for this specific sample. If you don't want to make any tweaks to this code and would just like to reuse this example, I've included a full base code below.
'98 draws inspiration from the nested table designs that were popular on the web 1997 - 2000 and is intended to be an all-purpose code to style up just about any entry you might need for a journal or game. THIS CODE IS JUST AN EVENT OR IC/OOC CODE, and if you'd like to get other styles from this set or see more examples of how it can be used, head over to the '98 MODULAR CODE hub entry. Otherwise, let's get to the code.
HERE IS THE BASE CODE:
HOW TO USE:
❣️ Mind the lj-raw tags!
❣️ This code is mobile friendly and insanejournal friendly!
❣️ This code is designed to be used with a seamless, tiling background. You will want to replace IMG_URL_TILING_BACKGROUND with the URL of whatever tiling background you'd like. I've added some tips for finding/using tiling backgrounds to the very bottom of this HOW TO list.
❣️ The as-is code comes with a couple of mood boards. To update those, look for IMG_URL and replace each instance of this with the images you'd like to use.
❣️ There are several spots for links in this code, mostly in the LOCATIONS section. You can change any #URL_HERE to the correct URL to get those functional. Otherwise, they'll just refresh the page you're on when clicked.
❣️ hex code #4e3188 is the code for the outer border and background. It shows up twice in this code. I recommend picking a color that is the base color of your repeating background. There are tons of ways to eyedropper that hex code -- firefox comes with an eyedropper tool out of the box (File > More Tools > Eyedropper).
❣️ hex code #6f48bd is your main accent color, and shows up most prominently in the headers of each subsection. It's used a TON in this layout. Make sure you find-replace every instance of this hex code when customizing this code. I suggest using a color that compliments the seamless background but stands out from it, as well.
❣️ rgba(111, 72, 189, .6) is also your main accent color. It's '#6f48bd' just represented a different way and set to 60% opacity (that's what the .6 is). To change this value, plug your main accent color's hex code into a color picker, then copy just the three numbers in whatever rgb(##, ##, ##) generates. Then back in the code, find and replace '111, 72, 189' with those three numbers.
❣️ hex code #301666 is the base font color for body text. It is declared once at the very top of the code. Change this to change the color of most of the text. I recommend using either #000 for black or a color that is a very dark version of your main accent color.
❣️ hex code #fff is just white. That's your header text, body backgrounds, etc.
❣️ '98 is a fully modular set. Each subsection is clearly marked by comments in the code. Any subsection can be replaced with any other subsection, and they can all be reordered as you see fit! Don't be afraid to customize this code!
❣️ I don't ordinarily include a credit in my code, but this one does have one at the very bottom. I'd love if you kept it in there, but you can delete it if you want. NBD.
❣️ TIPS FOR TILING BACKGROUNDS:thisismanx who was consistently harassed to test this code because her phone screen is tinier than mine and trying to make shit mobile compatible is a chore.
I love to see what people have done with my code, so drop me a comment with a link if you're using any of the '98 code set in a way you think is neat! If you're feeling generous, you can also donate to my ko-fi! I'm a freelancer, and while I will always provide free codes, we live in end-stage capitalist hell, so $$ is a big motivator.
This code is compatible with insanejournal.
'98 draws inspiration from the nested table designs that were popular on the web 1997 - 2000 and is intended to be an all-purpose code to style up just about any entry you might need for a journal or game. THIS CODE IS JUST AN EVENT OR IC/OOC CODE, and if you'd like to get other styles from this set or see more examples of how it can be used, head over to the '98 MODULAR CODE hub entry. Otherwise, let's get to the code.
HERE IS THE BASE CODE:
HOW TO USE:
❣️ Mind the lj-raw tags!
❣️ This code is mobile friendly and insanejournal friendly!
❣️ This code is designed to be used with a seamless, tiling background. You will want to replace IMG_URL_TILING_BACKGROUND with the URL of whatever tiling background you'd like. I've added some tips for finding/using tiling backgrounds to the very bottom of this HOW TO list.
❣️ The as-is code comes with a couple of mood boards. To update those, look for IMG_URL and replace each instance of this with the images you'd like to use.
❣️ There are several spots for links in this code, mostly in the LOCATIONS section. You can change any #URL_HERE to the correct URL to get those functional. Otherwise, they'll just refresh the page you're on when clicked.
❣️ hex code #4e3188 is the code for the outer border and background. It shows up twice in this code. I recommend picking a color that is the base color of your repeating background. There are tons of ways to eyedropper that hex code -- firefox comes with an eyedropper tool out of the box (File > More Tools > Eyedropper).
❣️ hex code #6f48bd is your main accent color, and shows up most prominently in the headers of each subsection. It's used a TON in this layout. Make sure you find-replace every instance of this hex code when customizing this code. I suggest using a color that compliments the seamless background but stands out from it, as well.
❣️ rgba(111, 72, 189, .6) is also your main accent color. It's '#6f48bd' just represented a different way and set to 60% opacity (that's what the .6 is). To change this value, plug your main accent color's hex code into a color picker, then copy just the three numbers in whatever rgb(##, ##, ##) generates. Then back in the code, find and replace '111, 72, 189' with those three numbers.
❣️ hex code #301666 is the base font color for body text. It is declared once at the very top of the code. Change this to change the color of most of the text. I recommend using either #000 for black or a color that is a very dark version of your main accent color.
❣️ hex code #fff is just white. That's your header text, body backgrounds, etc.
❣️ '98 is a fully modular set. Each subsection is clearly marked by comments in the code. Any subsection can be replaced with any other subsection, and they can all be reordered as you see fit! Don't be afraid to customize this code!
❣️ I don't ordinarily include a credit in my code, but this one does have one at the very bottom. I'd love if you kept it in there, but you can delete it if you want. NBD.
❣️ TIPS FOR TILING BACKGROUNDS:
- Hey, first and foremost, be chill and don't steal a tiling background. Do your research and make sure that whatever tiling background you're using is free to use, and credit the maker if they want credit!
- Next up, when you hotlink your tiling background, do it from a reliable source that you've uploaded yourself. Use imgur, tumblr, or your own space. Don't hotlink from the creator's site, and for completely different reasons, don't hotlink from pinterest unless you don't care if the background winds up a little blurry.
- Alright, now that the cop shit is out of the way, where do you get repeating patterns?
- Colourlovers is a go-to resource, but after coming under new ownership, it appears the site is broken and has been left to languish with no fixes. While there won't be any NEW patterns, necessarily, there's a wealth of older ones, still.
- The irreplaceable tessisamess on IJ has provided a repeating pattern directory, as well as a general list of image resources they use.
- Seamless-Patterns on Tumblr has more complex patterns that work well with this code. This tumblr is an aggregator, so remember to follow the source so you know who to credit!
- You can make your own patterns with a free app like canva even if you don't have access to procreate/photoshop/etc.
- DON'T use pinterest to find seamless backgrounds unless you love suffering. Not only does pinterest compress images, a real source can be borderline impossible to find, and there's like a 90% chance that a "seamless" background you found on pinterest is absolutely not seamless at all.
- While sites like Spoonflower obviously feature products that use seamless designs, any image you lift from that site isn't going to be seamless. Images from custom fabric/product shops are typically cropped in a way that disrupts the seamless tiling.
- Want to change the scaling on your tiling background? At the top of the code, after 'background:#4e3188 url('IMG_URL_TILING_BACKGROUND')center;' you can add background-size:###%; and change the ### to a number value to adjust how big or small the background scales.
thisismanx who was consistently harassed to test this code because her phone screen is tinier than mine and trying to make shit mobile compatible is a chore.I love to see what people have done with my code, so drop me a comment with a link if you're using any of the '98 code set in a way you think is neat! If you're feeling generous, you can also donate to my ko-fi! I'm a freelancer, and while I will always provide free codes, we live in end-stage capitalist hell, so $$ is a big motivator.
This code is compatible with insanejournal.
no subject