Introduction to offsets
For a while, offsets have generally had a bad reputation for being very difficult and finicky to execute; they’re often considered one of those things that only coding wizards can even begin to think about doing. Many authors desire to use the trick, but are too intimidated by the long and easy-to-do-wrong process. Some of the most popular pages on the wiki use offsets, and have very high upvote scores from it. Some articles with amazing coding magic use offsets in order to make said magic work. It’s easy to look at such articles and think that you could never do such a thing; however this guide intends to change that.
What are offsets?
First things first, what are offsets anyway? An offset is a way to bring the reader to a different page without losing the upvotes and comments of the original page. This feature can be very useful for story elements such as article revisions following a new discovery, CSS transitions, and so forth. Click here to see how an offset works!
Offsets are a built-in Wikidot feature using a module called list-pages. The feature utilizes a special type of page on the wiki called a “fragment” page. These fragment pages are invisible to anyone without a direct link. Fragment pages are another built-in Wikidot feature that is most commonly used for offsets, though they can be used for other page types, such as themes and includes. They will not show up on the “most recent pages” list on the front page or be linked on any of the top rated pages.
How to use offsets
Alright, now that you know how offsets work and we’ve defined some vocabulary, it’s time to implement them onto your page. Where do I begin? The first thing you want to do is create what is called the “parent page.” The parent page is what the reader will stay on for the entire duration of the article, acting as the main stage for the fragments to present themselves on. The best way to visualize this is the plate analogy. Imagine that the parent page is an empty plate: on its own, you don’t have much. To give it what it needs, you need to put food on it, which are the fragment pages. The food cannot exist on its own, and it needs something to be put on — likewise for the fragments.This is where the parent page, or the plate, comes in. On their own, they can’t be used for anything. Together, however, you have one complete meal/page.
To create your parent page, all you need to do is just make a regular page. For example, the page you’re currently on is http://backrooms-wiki.wikidot.com/offset-guide. If you are on the sandbox, however, there is a wikidot glitch where you need to add “collab:” before the page for the feature to work. Without doing this, the feature will not work properly on the sandbox. Using the same example, the link I would make for the sandbox of this page would be http://backrooms-sandbox-2.wikidot.com/collab:offset-guide. Yes, this does mean that others will have the ability to edit the parent page, but this is strictly against the rules. Report any unauthorized edits to staff, and the individual will be dealt with accordingly.
Now that you have created your page, you need to make set it up for offsets. Remember, the actual content of the page will not go on here, but rather on the fragment pages, which will be touched on soon. In order to format your parent page, follow the template below:
(IF USING ONE, PUT THEME HERE)
[[module css]]
(Add any CSS you want to apply to all pages here)
[[/module css]]
[[>]]
[[module rate]]
[[/>]]
[[module ListPages category="fragment" parent="." limit="1" order="created_at" offset="@URL|0"]]
%%content%%
[[/module]]
------
[[>]]
[[collapsible show="Author(s)" hide="Hide Author(s)"]]
[[*user YOURUSERNAMEHERE]]
(ATTRIBUTE ANY IMAGES USED HERE)
[[/collapsible]]
[[/>]]
Let’s break down this template a little bit. At the top of the page, you want to include the theme you’re going to use, if you’re using one. If your page is using the default Liminal Theme or you want to change the theme for each offset, omit this part of the template. Below that is your CSS module. This will be the area that you’ll include any CSS you want to apply to all pages. Common things to put here include fonts, custom divs, and theme-related CSS, such as text color changes. If you aren’t including any css that will remain consistent across all pages, omit this part of the template. Below this is the rate module. The rate module is mandatory to include on all offsets used, meaning it’s ideal to include it on the parent page, otherwise you would have to include it individually on every fragment. Below this is the code that makes the magic happen. This code must be included in order to make the offsets function. Below that is your author collapsible. This is also mandatory to include on all offsets, meaning it’s most ideal to include on the parent page as to avoid having to redundantly copy and paste it on every fragment. Once you format the parent page, you’re ready to begin creating the fragment pages.
To make your fragment page, you want to start by adding “fragment:” to the beginning of the page name. At the end of the page name, you’re going to add a number. For the first fragment, you’re going to start with “0.” Continuing the example for this page, the first fragment will be called http://backrooms-wiki.wikidot.com/fragment:offset-guide-0. Fragment pages work exactly the same on the sandbox as well. To connect this page to the parent page, you want to go to the bottom menu, press options, then press parent, as shown in the photo below:
Once the menu shows up, you’ll type in the name of the parent page. A menu will appear asking you to select which page you want to connect the fragment to. Click on your page when it appears, and the pages will be connected. Now that you have your fragment set up, you want to begin writing the actual page content. Anything you put on fragment 0 will be what first appears when the reader opens the page. This is before any offsets or css transitions come into play. Put on offset 0 only what you want the reader to see before going to any other offsets.
NOTE: EVERY TIME YOU MAKE AN EDIT TO A FRAGMENT, YOU MUST REFRESH THE PARENT PAGE BY OPENING THE EDIT BOX AND CLICKING SAVE. A GLITCH EXISTS THAT CAN CAUSE THE ENTIRE PAGE TO IRREVERSIBLY MALFUNCTION, WHICH YOU DO NOT WANT TO RISK. REFRESH THE PARENT PAGE AFTER EVERY FRAGMENT EDIT.
From this point on, you essentially repeat this process over and over until all the desired fragments have been written. For the first offset page, the link will be http://backrooms-wiki.wikidot.com/fragment:offset-guide-1. The next offset will be http://backrooms-wiki.wikidot.com/fragment:offset-guide-2, and so forth. In order to bring readers to the next offset page, we must use yet another unique link. If everything previously mentioned was done properly, then this will work, otherwise it will bring you to a blank page. Using this page as an example yet again, the link that will bring the reader to the first offset is: http://backrooms-wiki.wikidot.com/offset-guide/offset/1. This syntax is also identical on the sandbox site. When uploading your fragments to the main site after the article is greenlit, each fragment should be tagged with the fragment tag. If you forget, staff will do it for you.
A common mistake people make is linking the fragment page instead of this special link, which will not retain the upvotes and comments, and it should not be done this way. If your page isn’t working, double-check that you’re using this special link and not the fragment. Additionally, the standard triple bracket method of linking does not work with offset links, meaning you must use single bracket links. See the wikidot syntax guide for more information if this doesn’t make sense to you.
Whew! That was a lot. Even though this looks intimidating, I promise you will get the hang of it eventually. After you get through the initial rough patch of doing it for the first time, you’ll be able to do it no sweat next time.
Troubleshooting
Listed below are some common issues and how to solve them. This process is very finicky and easy to break, meaning it is likely you will encounter problems at some point.
Upvotes and comments don’t stay the same
If your upvotes and comments aren’t retaining to the next offset, make sure you’re linking the offset and not the fragment. The link which brings you to the next offset should look something like this: http://backrooms-wiki.wikidot.com/offset-guide/offset/1 and NOT like this: http://backrooms-wiki.wikidot.com/fragment:offset-guide-1
The offset link just takes me to a dead page
If the offset link is dead, verify that there are no typos in the page link. The offset link should be identical to the parent page link, except with “/offset/1” at the end (or another number if there’s multiple offsets). If the link is still dead, make sure your syntax looks like this: [http://backrooms-wiki.wikidot.com/offset-guide/offset/1 DISPLAY TEXT] and not like this: [[[offset-guide/offset/1|DISPLAY TEXT]]]. If the link is still dead, verify that the fragment page is connected to the correct page on the wiki. If it still doesn’t work after all this, you likely forgot to refresh your parent page after an edit and fell victim to the glitch. If this happens, the page is irreversibly broken, and the code needs to be transferred to new pages.
Linking the fragment to the parent page won’t work
Are you getting this message when you’re trying to link the fragment to the parent page?
If this message appears, it means you forgot to add “collab:” to the beginning of the parent page. To amend this error, simply go down to options, then to rename, and add “collab:” before the page name. Once you do that, the fragments should successfully link to the parent page. This error only happens on the sandbox, and you don’t need to worry about it when posting the page to the main wiki after it’s greenlit.
The offset page is blank even though the fragment is connected
If this error happens, first double-check that the parent page that the fragments are linked to is correct. If it still doesn’t work, it means you posted the fragments before the parent page. When making a page with offsets, the order in which you post the pages is imperative due to how the listpages code works. Thus, you must follow this order exactly when posting the pages. The parent page must be posted FIRST before any other pages. Then, you must post the fragments in order of appearance. For example, fragment 0 must be the 2nd page posted, fragment 1 must be the 3rd, fragment 2 must be the 4th, and so on. If this order wasn’t followed when you post the page to the wiki after getting a greenlight, you have to delete all the pages and re-upload them in proper order to fix the issue.
Tip: If you want an easy way to get around this error, it’s recommended that you open the edit box for the parent page and all the fragments on every individual link, and copy-paste the code into every page from the sandbox. Once all the code has been copy-pasted to each page and all of the edit boxes are open, you can rapidly save and connect to the parent page for every fragment in seconds. Make sure that the offset links are changed to main wiki links and not sandbox links before you do this.
My offsets are in the wrong order
This is a similar situation to the above one. If your offsets are in the wrong order, it means you posted the fragment pages out of order. For example, if you posted fragment 1 before fragment 0, the page will think that fragment 1 is fragment 0, and show it first, which isn’t what you want. If you are having this issue on the sandbox, an easy fix is to just swap the source codes of both fragments. You can use the tip in the above issue in order to get around this problem when posting your greenlit page to the wiki.
Tips and tricks
Listed below are a few tips and tricks that you can utilize when making a page with offsets! Feel free to use these on your page if you desire.
Theme change
One of the best things that you’re able to do with offsets is change the theme on the page. This can be utilized for concepts such as page corruption, multi-part articles, and more!
Font toggle
While there is fancy CSS and HTML to do this, fiddling around with code is NERDY and WEIRD. Real kings use offsets. If you wanna use a difficult to read font and provide a more accessible alternative, offsets are the way to go!
Tutorial:
Password:
Another popular trick that is used with offsets is a password! MyrandFox has kindly written a special JavaScript code that will lead to a new page if you enter the proper password. This code can be used to lead the reader to a new offset as well, which helps for ideas such as a database entry or hidden supplementary section. Try it out for yourself!
Example:
Directions:
Pop-up CSS transition
Another cool trick you can do with offsets is a pop-up transition trick where a video flashes on screen for a few seconds before the page becomes visible. The trick requires some video editing know-how, but is worth it when the product is finished. Just make sure you use it sparingly and wisely, or else it may get annoying or overused.
Directions:
Conclusion
Congratulations! You’ve made it through the crash course on everything you need to know about fragments and offsets. Offsets are a very popular and impressive trick that can be useful for many different reasons. This guide will hopefully remove the stigma that offsets are impossibly difficult, and only for the CSS masters and coding nerds. If you have any further questions, feel free to DM/PM Natedagreat563 or a member of the tech team. If you’re on the Discord, feel free to ask any questions in the #tech-support channel as well. Happy coding!
Here is a link to the fragment if you wanted to see any of the source code used on this page. Just don’t edit without permission.