Automated Jcink Guidebook from Thread

The following setup will allow you to create a guidebook using a thread instead of webpages. This makes it easier to edit on the front end and eliminates the need for admincp access just for lore updates. Lore mods should be a thing on some of y'alls sites, and you know it!

This project is licensed under CC BY-NC 4.0. This means that you are welcome to use it and make whatever changes you like with it, even share what you make with others, but you can not sell it or include it in paid skins.

This works by creating a new forum and assigning a skin to it. I'm going to call my skin "Guidebook." You will then create a thread in that forum to serve as the guidebook. Each post in that thread will become a tab, so long as you add the proper html to each post which will be explained in detail later. You can use dohtml in these threads and the quick edit function works. Please note that using quick edit will not create the last edited by line.

Setup HTML Template for Forum

Create a new set of HTML templates and add the following to the "post row"

<div id="tab-<!-- |pid| -->" class="guide-entry g-<!-- |g_id| -->"> <div id="pid_<!-- |pid| -->"><!-- THE POST <!-- |pid| --> --><div class='postcolor'><!-- |post| --></div><!-- |signature| --><!-- THE POST --></div> <div class="pbuttons"><span class="created">Created by: <a href="/index.php?showuser=<!-- |poster_id| -->" class="author-name"><!-- |name_prefix| --><!-- |author_name| --><!-- |name_suffix| --></a> on <!-- |post_date| -->.</span> <span id="edit-<!-- |pid| -->" class="edited"></span><!-- |delete_button| --><!-- |edit_button| --><!-- |mod_checkbox| --></div> </div> Copy CodeReset CodeContent Locked

The following are all important to the script, so please do not change them: id="tab-", class="guide-entry", class="pbuttons", and <span id="edit-<!-- |pid| -->" class="edited"></span>. You can make other changes to the structure as needed. Group id can be removed safely, but I included it for customization options.

New Skin Set

Now, create a new skin set, maybe title it Guidebook and make sure that it uses your main skin's Macro set, Stylesheet, and wrapper. Only the HTML set should be your new html template set. If you let members switch skins, be sure to hide this one and do not set it as default.

Create New Forum

Create new forum wherever you like for your guidebook. On theme, I called mine Guidebook. You won't need a redirect link for this, so it will appear like a normal forum on your index, unless you choose to hide it. Be sure that you assign the new Guidebook skin set to this forum and ensure dohtml is enabled. Because you left the wrapper and stylesheet attached it should look normal so far. The script is setup so that if a user tries to access the forum instead of your thread, it will redirect to the thread. This does mean you are making a forum for one thread, but... that's fine!

Create New Thread

While we are here, we will go ahead and create a new thread. There are a few very important parts needed in the first post of the thread.

<div id="gbook-head"><h1>Guidebook</h1></div> Copy CodeReset CodeContent Locked

Only put this in the first post. Do not repeat it. The script will add a class="tabhead#" to this div with the # being the sort number you will define below. Use css to change it per tab. For example, you could assign a different background image per tab or generate subheaders using pseudo elements. If you use quick edit, the header will appear in the post. Please refresh the page and it will appear normally.

Example of subheaders via css:

.tabhead1:after{content:'General Information';} .tabhead2:after{content:'Canon lists and stuff';} .tabhead3:after{content:'Another subheader idea';} Copy CodeReset CodeContent Locked

Please note that the quick edit function does not allow for you to add the "Edited by" line to the post. This means that you must use the full edit option if you would like the "Last updated by" line to appear.

Required

<div class="tab-link">Welcome</div> Copy CodeReset CodeContent Locked

This one defines the text of the link that appears in the sidebar. Every post will need this one or it will not appear in the list. Avoid special characters. This also serves as the way to direct link to your tab. Example index.php?showtopic=69&tab=Welcome

Required for full functionality

<div class="sort-order">1</div> Copy CodeReset CodeContent Locked

This one defines the order in which you would like the tab to appear in the list. I created this because sometimes I post things out of order but also so that it would create another anchor I could use to target in the script for customization purposes. If this is missing, the custom headers will not be possible, but it will still create the tabs in the order the posts are made.

The rest of your post can be the content you want to have in the tab using whatever structure you want, really.

Update Wrapper

Now, let's add the script to the wrapper. At the bottom of your wrapper before the /body tag, add the following:

<script> window.GUIDEBOOK_CONFIG = { forumNumber: "2", // Used for both the forum and redirection threadNumber: "69" // Thread ID }; </script> <script src="https://cherrycodes.therpgame.com/jscripts/guidebook-by-cherry.js"></script> Copy CodeReset CodeContent Locked

The forum number will be the number of the forum you just created and the thread is the same. The script will automatically redirect anyone who tried to access index.php?showforum=# based on what you put here to the thread that is your actual guidebook.

You are welcome to host the script yourself if you want to make changes, but I don't mind hosting it. Any updates to the code will be automatic for you if you use the remote hosted link, but you don't have to! The full script is below if you prefer.

Update Stylesheets

This hides part of the regular structure of a page. Some changes made be required to properly work on your skin.

body.gbook { font-family: Arial, sans-serif; } #guidebook { display: flex; width: 100%; flex-direction: column;} #gbook-head { width: 100%; padding: 15px;} #gbook-body { display: flex; width: 100%;} #guidebook-menu { width: 250px; background: #f4f4f4; padding: 10px; height: 100%; overflow-y: auto; } #guidebook-menu ul { list-style: none; padding: 0; } #guidebook-menu li { cursor: pointer; text-align: center; } #guidebook-menu li:hover { background: #bbb; } #guidebook-menu li.active { background: #888; color: white; font-weight: bold; } /* Active Tab Styling */ #guidebook-content { flex: 1; padding: 20px; } .tab-link, .sort-order { display: none; } .guide-entry { display: none; } .guide-entry.active { display: block; } body.gbook .pagination, body.gbook .goto-firstunread, body.gbook .button-large, body.gbook .tableborder { display: none; } #add-new-button { width: 100%; padding: 10px; margin-top: 10px; cursor: pointer; background: #28a745; color: white; border: none; font-size: 16px; display:none;} #add-new-button:hover { background: #218838; } .g-4 #add-new-button {display:inline;} #guidebook .edited b:before{content:'Last updated by '; font-weight:normal;} .tabhead1:after{content:'General Information';} .tabhead2:after{content:'Canon lists and stuff';} .tabhead3:after{content:'Another subheader idea';} Copy CodeReset CodeContent Locked

Be sure to update .g-4 as needed so that the add new button will be properly hidden to other users. The script can not tell if a user has access to make replies via forum settings or not. If you do not have this variable in your wrapper, add the following to make it work.

<body class="g-<!-- |g_id| -->"> Copy CodeReset CodeContent Locked

This will need styling to match your skins and the like, but I did my best to provide some basic coding to get you started.

The rest is up to you!