10billionghosts | code: '98 MODULAR, a code set

'98 MODULAR

This is '98, an all-purpose modular code inspired by the nested tables designs that were popular around 1997 ~ 2000. Don't worry, there's neither a td nor a tr to be found in this code! Rather, it's made to emulate the boxes-in-boxes look and is specifically meant to be used with seamless tiling backgrounds. The wonderful background for this sample layout was made by psittacosaurus on tumblr, whose account appears to be gone. The provided link is the closest you can get to a source.

As mentioned, this code is modular. You can post as many subsections into the base as you'd like, and it'll all fit. The goal was to make a code that could be used to create a consistent style across a journal or game. This set features a number of different subsections, almost all of which are included in this hub post. I've also coded up a couple of simple examples and have made those premade templates available, as well.

If you are so inclined and have some dosh to spare, I always appreciate tips on my ko-fi for the codes I make. Otherwise, let me know if you use this code or any variations on it! I love to snoop on what others are doing, and spotting my codes in the wild really brightens my day. :)

small update, 1/28/22: i think the cast list's code may have had a small error that caused the first portrait to be slightly larger than the rest. that should be fixed now. 💜

LIVE PREVIEWS WITH CODE

SEE ALL SUBSECTIONS TOGETHER AT THE BOTTOM OF THIS POST

THE BIOSHEET . THE IC/OOC

Say hello to '98 MODULAR! A code I spent way too much time on. It draws inspiration from the nested table designs that were popular on the web 1997 - 2000, and is intended to be an all-purpose code that can style up just about any entry you might need for a journal or game.

THIS IS THE HUB PAGE FOR THE '98 MODULAR CODE SET, and you can find every (current) subsection for the code on this post. I say current because I'm not ruling out creating more subsections for this code, but at the moment I'm ready to work on a new design. At the bottom of this post, you'll find a live styled preview of every single subsection, but you may also want to visit the posts where I've specifically styled a biosheet and an event code, if you want to see the subsections used in cohesive ways.

'98 MODULAR FEATURES A NUMBER OF PRE-STYLED SUBSECTIONS:

1 blank base template
1 text-focused subsection with multiple variations
1 text-focused subsection with modular "cards"
1 text-focused "faction card" section
1 cast list
1 stat block, 1 variation
2 moodboards
1 flex image gallery

But to use it, you'll need to START WITH THE BASE OUTER CODE:

HOW TO USE:

❣️ Mind the lj-raw tags!

❣️ This code is mobile friendly and insanejournal friendly! It is SOMEWHAT comment compatible (some pieces do work well in comments), enough that I feel like it's worth tagging it as such.

❣️ USAGE POLICY: Please do not put my codes or variants based on my codes in any for-profit packages, including edits released to patreon or other services. FREELY EDIT for personal or free release use, but DO NOT CHARGE PEOPLE FOR CODES BASED ON MY CODE.

❣️ 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 gray box.

❣️ This code is FULLY MODULAR, and the code above is JUST THE OUTER BACKGROUND AND BORDER. To get the most out of this code, pick the subsection you'd like to use from below and paste its code into the base code where indicated.

❣️ As with all of my codes, any other images have been labeled with IMG_URL. If you're using a mood board or any other subsection that uses images, make sure you check and replace any instance of IMG_URL with the url for the picture you want.

❣️ Similarly, watch for any #URL_HEREs (there aren't many built into this code) and be sure to update those as appropriate to ensure your links go to the proper locations!

❣️ 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 '237, 158, 177' 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.

❣️ 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.

❣️ Extremely big thanks to

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.

SUBSECTIONS

Past here you're going to find live previews for each subsection and the codes to go with them. This is very long, and is not how the code is intended to be used -- pick and choose what you'd like to build a layout to fit your needs and customize as you see fit!

BLANK

BLANK is a totally unstyled subsection that intermediate to advanced users can work off of to create their own subsections. Use BLANK in conjunction with other codes like mood boards, CR charts, or tables/thread trackers.

HERE IS THE CODE:

TEXT

TEXT and TEXT - IMAGE FLOAT are the same subsection, but one features code for an image that'll float to the left or right of your text. TEXT has a bit of padding and styling out of the box and is intended for lots of words. You might use this as an "ABOUT ME" post on your CDJ, as a "PREMISE" or "RULES" page for your new game, or as the "HISTORY" section on your application form.

You can change the side the image is floating on by changing float:right to float:left.

HERE IS THE PLAIN TEXT CODE:

HERE IS THE TEXT WITH THE IMAGE FLOAT:

TEXT

This is a callout box. In the biosheet code, I use this as a history section, but you can use this for just about anything. You know how textbooks have little fun fact boxes where they'd elaborate on the main text? Same premise here.

This is another variation of the basic TEXT subsection featuring a floating callout box instead of an image. Functionally identical to the subsection above this one, except that you can put words into that wee box instead of pictures!

In the biosheet live preview, this section is used for the history portion of the app, and the callout box is used to list family members.

HERE IS THE CODE:

CAST

CHARACTER
NAME
username

CAST: CODE

This box is just for the CAST code. Separated the code out because a text area is not part of the core CAST code.

HERE IS THE CODE:

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(30px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">CAST</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;"><div style="margin:20px auto;padding:1%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:13px;">

<div style="width:29%;padding:30% 0 5%;background:#6f48bd url('IMG_URL')right;background-size:cover;border:5px solid #fff;outline:2px solid #6f48bd;"><div style="padding:1% 0;text-decoration:none;text-align:center;line-height:1;font-weight:bold;font-size:clamp(10px, .8vw, 15px);letter-spacing:1px;color:#fff;background:rgba(111, 72, 189, .6);">CHARACTER<br/>NAME<br/>
<a href="#URL_HERE" style="line-height:.9;text-decoration:none;font-size:clamp(5px, 1vw, 10px);color:#fff;">username</a></div></div>

<div style="width:29%;padding:30% 0 5%;background:#6f48bd url('IMG_URL')center bottom;background-size:125%;border:5px solid #fff;outline:2px solid #6f48bd;"><div style="padding:1% 0;text-decoration:none;text-align:center;line-height:1;font-weight:bold;font-size:clamp(10px, .8vw, 15px);letter-spacing:1px;color:#fff;background:rgba(111, 72, 189, .6);">CHARACTER<br/>NAME<br/>
<a href="#URL_HERE" style="line-height:.9;text-decoration:none;font-size:clamp(5px, 1vw, 10px);color:#fff;">username</a></div></div>

<div style="width:29%;padding:30% 0 5%;background:#6f48bd url('IMG_URL')center;background-size:cover;border:5px solid #fff;outline:2px solid #6f48bd;"><div style="padding:1% 0;text-decoration:none;text-align:center;line-height:1;font-weight:bold;font-size:clamp(10px, .8vw, 15px);letter-spacing:1px;color:#fff;background:rgba(111, 72, 189, .6);">CHARACTER<br/>NAME<br/>
<a href="#URL_HERE" style="line-height:.9;text-decoration:none;font-size:clamp(5px, 1vw, 10px);color:#fff;">username</a></div></div>

<div style="width:29%;padding:30% 0 5%;background:#6f48bd url('IMG_URL')center -5px;background-size:210%;border:5px solid #fff;outline:2px solid #6f48bd;"><div style="padding:1% 0;text-decoration:none;text-align:center;line-height:1;font-weight:bold;font-size:clamp(10px, .8vw, 15px);letter-spacing:1px;color:#fff;background:rgba(111, 72, 189, .6);">CHARACTER<br/>NAME<br/>
<a href="#URL_HERE" style="line-height:.9;text-decoration:none;font-size:clamp(5px, 1vw, 10px);color:#fff;">username</a></div></div>

</div></div>
</div>

CARD

While I made CARD specifically for the biosheet code as a way to list things like special abilities, you can use it for just about anything where you want to call something out in list form. In the ic/ooc example, I used this subsection to list locations. You could use this subsection on a setting page to list factions, magical species, or locations.

BTW, if you don't want plain text above the cards, you can just not type anything between the lj-raw tags.

ITEM #1

PUT YOUR TEXT HERE

ITEM #2

Each of these cards is pretty easy to pick out in the code. Just copy paste more as you need them, or delete any you don't want!

ITEM WITH IMAGE

This one comes with an image! If your text exceeds the image's height, it will wrap.

HERE IS THE CODE:

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(40px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">!!HEADER!!</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;display:flex;flex-wrap:wrap;column-gap:10px;"><div style="width:95%;margin:20px auto;clear:both;display:table;"></lj-raw>YOUR CONTENT HERE<lj-raw>

<div style="margin:0;padding:10px;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:20px 0;">

<div style="width:100%;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">ITEM #2</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:10px;">Each of these cards is pretty easy to pick out in the code. Just copy paste more as you need them, or delete any you don't want!</div></div>

<div style="width:100%"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">ITEM WITH IMAGE</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:10px;"><div style="width:40%;padding-top:40%;margin:0 10px 0 0;float:left;background:#ccc url('IMG_URL')center;background-size:cover;display:inline-block;"></div>This one comes with an image! If your text exceeds the image's height, it will wrap.<div style="clear:both;"></div></div></div>

</div></div></div></div>

FACTIONS

In the code, this particular subsection is labeled TEXT - CARD HYBRID, but let's say it's AKA FACTIONS, since that's less of a mouthful. I originally made this subsection with a faction page in mind. Images with blurbs of text divided by horizontal rules. You could easily use this subsection for things like locations or NPCs, too, though!

As with the above CARD subsection, if you don't want this body of text here at the top, just delete everything between the lj-raw tags here and leave it empty!

HEADER

Each of these cards is clearly labeled in the code as either ITEM LEFT or ITEM RIGHT to indicate which side the image is on. You can alternate them as I have here in this example, or you can have all the images be on the same side. Whatever brings you joy.

Tootsie roll tart bear claw lollipop lemon drops tootsie roll wafer gingerbread sweet. Sugar plum lemon drops muffin halvah marshmallow. Sweet cake bonbon powder halvah oat cake. Chocolate bar soufflé icing bear claw chupa chups brownie tiramisu.

HEADER

Cupcake ipsum dolor sit amet. Marshmallow macaroon dragée halvah tootsie roll chocolate bar marzipan wafer chocolate cake. Sugar plum caramels danish jelly beans gingerbread bonbon chocolate bar soufflé bear claw.

Tootsie roll tart bear claw lollipop lemon drops tootsie roll wafer gingerbread sweet. Sugar plum lemon drops muffin halvah marshmallow. Sweet cake bonbon powder halvah oat cake. Chocolate bar soufflé icing bear claw chupa chups brownie tiramisu.

Chupa chups caramels apple pie topping chupa chups. Gingerbread cheesecake pastry powder oat cake. Powder tart sweet oat cake cotton candy chocolate cake cake macaroon.

HEADER

HERE IS THE CODE:

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(30px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">!!HEADER!!</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;"><div style="width:95%;margin:20px auto;clear:both;display:table;"></lj-raw>YOUR CONTENT HERE<lj-raw>

<div style="width:50%;margin:20px auto 0;border-bottom:1px dotted #6f48bd;"></div>

<div style="margin:10px 0 0 0;line-height:.9;font-size:clamp(15px, 4vw, 20px);font-weight:700;color:#6f48bd;">HEADER</div>
<div style="min-width:150px;width:5%;height:150px;margin:0 10px 10px 0;display:inline-block;background:#ccc url('IMG_URL')center;background-size:cover;float:left;"></div>

</lj-raw>YOUR CONTENT HERE<lj-raw>
<div style="width:50%;margin:20px auto 10px;clear:both;border-bottom:1px dotted #6f48bd;"></div>

<div style="margin:10px 0 0 0;line-height:.9;font-size:clamp(15px, 4vw, 20px);font-weight:700;text-align:right;color:#6f48bd;">HEADER</div>
<div style="min-width:150px;width:5%;height:150px;margin:0 0 10px 10px;display:inline-block;background:#ccc url('IMG_URL')center top;background-size:cover;float:right;"></div>

</lj-raw>YOUR CONTENT HERE<lj-raw>
<div style="width:50%;margin:20px auto 10px;clear:both;border-bottom:1px dotted #6f48bd;"></div>

</lj-raw>YOUR CONTENT HERE<lj-raw>
<div style="width:50%;margin:20px auto 10px;clear:both;border-bottom:1px dotted #6f48bd;"></div>

</div>

</div></div>

MOOD

This is MOODBOARD 1. The text space here is optional. The base code for this subsection indicates what to delete to remove the space for text. If you're willing to dig into the code a little bit, you could also replace this basic text area with one of the other subsections, like one of the two BIOSHEET codes.

I'd recommend using this subsection either as an informational page code for things like locations and NPCs or as an ic/ooc or event code.

HERE IS THE CODE:

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(40px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">!!HEADER!!</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;text-align:justify;"><div style="height:350px;display:grid;grid-column-template:repeat(7, 1fr);grid-row-template:repeat(2, 1fr);gap:5px">

<div style="width:95%;margin:10px auto 20px;"></lj-raw>YOUR TEXT HERE<lj-raw></div>

</div></div>

MOOD 2

Here's MOODBOARD 2. Same idea as above, but the images are arranged differently.

HERE IS THE CODE:

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(30px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">!!HEADER!!</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;"><div style="height:350px;display:grid;grid-column-template:repeat(7, 1fr);grid-row-template:repeat(4, 1fr);gap:5px">

</div>

<div style="width:95%;margin:10px auto 0;"></lj-raw>YOUR CONTENT HERE<lj-raw></div>

</div></div>

MOODBOARD 3

MOODBOARD 3 - MENU STYLE 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 like using flexible galleries like this to show off things like food and drinks for in-game events, but you can get creative with it, I'm sure!

HERE IS THE CODE:

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(40px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">MENU</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;text-align:justify;"><div style="width:95%;margin:20px auto 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;align-content:flex-start;gap:15px">

</div></div>

STATS

CHARACTER NAME

!! concept line, quote, song lyric, or short summary here!!

FULL NAME

character name here

ALIAS

nicknames

BIRTH DATE

00/00/0000

AGE

PRONOUNS

answer

FIELD

answer

FIELD

answer

FIELD

answer

STATS 2

STR

DEX

INT

WIS

CON

CHA

FULL NAME

character name here

ALIAS

nicknames

BIRTH DATE

00/00/0000

AGE

PRONOUNS

answer

FIELD

answer

FIELD

answer

FIELD

answer

STATS: CODE

Didn't want to bust up the two biosheet stat codes seen above, so their codes are available right here!

HERE IS THE CODE FOR STATS 1:

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(40px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">BASICS</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;display:flex;flex-wrap:wrap;column-gap:10px;">

<div style="max-width:538px;width:100%;height:200px;display:grid;grid-column-template:repeat(7, 1fr);grid-row-template:repeat(5, 1fr);gap:10px">

<div style="grid-column-start:1;grid-column-end:7;grid-row-start:4;margin:-20px 0 0;text-align:center;"><div style="line-height:1;font-size:30px;font-weight:bold;text-shadow:-2px -2px #fff;color:#6f48bd;">CHARACTER NAME</div>

<div style="max-width:269px;width:50%;min-width:200px;margin:-5px auto 0;font-size:10px;">!! concept line, quote, song lyric, or short summary here!!</div>
<div style="width:50%;margin:10px auto 0;border-bottom:1px dotted #6f48bd;"></div></div>

</div>

<div style="width:100%;margin:0 auto 20px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;">

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">FULL NAME</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">character name</div></div>

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">ALIAS</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">nicknames</div></div>

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">BIRTH DATE</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">00/00/0000</div></div>

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">PRONOUNS</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">answer</div></div>

<div style="width:47%;min-width:245px;"><div style="font-weight:bold;font-size:10px;line-height:.9;color:#6f48bd;">FIELD</div>
<div style="background:rgba(111, 72, 189, .6);border-bottom:1px solid #6f48bd;padding:3px 10px;text-align:right;">answer</div></div>

</div>

</div></div>

HERE IS THE CODE FOR STATS 2:

<div style="margin:85px auto;"><div style="margin:0 auto;padding:3% 2% 0;line-height:.6;text-align:right;font-size:clamp(30px, 4vw, 60px);font-weight:700;color:#fff;background:#6f48bd;">BASICS</div>
<div style="margin:0 auto 25px;padding:10px;background:#fff;display:flex;flex-wrap:wrap;row-gap:10px;">

<div style="width:48%;background:#fff;border:5px solid #fff;outline:2px solid #6f48bd;"><div style="width:100%;height:100%;background:#ccc url('IMG_URL')center;background-size:cover;"></div> </div>

<div style="width:45%;margin:20px auto;padding:5px 0 0 0;display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:flex-start;gap:15px 5px;">

</div>

<div style="width:100%;margin:20px auto 20px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;">

</div>

</div></div>

(CODE)

Flat | Top-Level Comments Only

This looks great, I'll be using it!

Just want to say I've used this a couple times now and it's really great and easy to rearrange. Thank you!

Thank you! I'm honestly glad to hear that. I know some codes I've put out are REALLY dense, so I'm glad that this one is easy to use c:

this code's a joy to use, thanks so much for sharing it!

Thank you! I love what you did with the code c: Extremely cute

I love your codes! I've used this one for my OC here.

Thank you! I love it. Very pretty colors! :]

I'm 900% sure this is me being dumb, but how would you insert anchor links into the header of each section, so I can link directly to individual sections? Whenever I try, I'm messing it up. (And thank you for this, so easy to use and clear, other than the dumb thing I'm doing.)

Hey! No worries! The usual method of anchor linking (assigning an id/name to a non-anchor tag) doesn't work on in-entry codes. Not sure why this is, but it means anchor links aren't as intuitive as they should be.

Let me see if I can explain how you would do an anchor link with this code specifically. Going to try and explain this as intro-to-code-y as possible in case anyone else wants to use it for reference.

On journal entry codes, your destination point needs to be set within a named anchor tag (one of these: <a></a>). Aside from a name, the tag can otherwise be empty.
- Here's a simple example: <a name="refText"></a>. refText is just a placeholder I'm using for this explanation. You can use any string of text or numbers, simpler and more descriptive are better. Like, "rules" or "setting" or "01". Each destination point needs a unique name.

Where you place the anchor tag determines where your browser will scroll to, and placement can be a bit finicky. If you aren't too fussed about specific positioning, just place your <a name="refText"></a> anchor codes immediately after !!HEADER!!</div> part of the code you want to link to.
- I haven't tested this, but posting the anchor tags immediately after instances of <div style="margin:0 auto 25px;padding:10px;background:#fff;"> may wield better results.

SO, for the actual navigation links that users will click, you want to have your href point to '#refText' (so, if your destination point was named gary, you'll link to #gary). Like this: <a href="#refText" style="imagine pretty styling that makes a button">a link</a>.

You can use the Find feature on your browser or text editor to track down the specific strings of code I've outlined in this description. It'll make adding anchor links a whole lot easier than trying to parse the code on your own.

I am PRETTY sure that should cover it. If any of this is unclear or you're running into trouble, let me know! I'm not much of a tutorial writer, but hopefully this is helpful.

Edited 2024-02-20 17:22 (UTC)

code: '98 MODULAR, a code set

SUBSECTIONS

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject