├── .github
    └── workflows
    │   └── static.yml
├── .vscode
    └── sitemap-generator.json
├── LICENSE
├── README.md
├── changelog.html
├── css
    ├── cards.css
    ├── coco.css
    ├── donations.css
    ├── frontPage.css
    ├── guideColors.css
    ├── header.css
    ├── images.css
    ├── navigationArrows.css
    ├── popup.css
    ├── progressBar.css
    ├── sidebar.css
    ├── styles.css
    └── textIcons.css
├── essentials.html
├── faq.html
├── files
    ├── 3.3.3a Hotfix.7z
    ├── DirectX Remover.7z
    ├── TTW Changelog.7z
    └── Vanilla UI Plus Fallout 3 9.48.7z
├── finish.html
├── fo3.html
├── img
    ├── Coco
    │   ├── Blockquote.webp
    │   ├── Full 1 Extended.webp
    │   ├── Full 1.webp
    │   ├── Full 2.webp
    │   ├── Head Logo Alt 2.webp
    │   ├── Head Logo Alt.webp
    │   ├── Head Logo Extended.webp
    │   ├── Head Logo.webp
    │   └── Head.webp
    ├── MO2
    │   ├── Connect.webp
    │   ├── Executables.webp
    │   ├── Folders.webp
    │   ├── Install Archive.webp
    │   ├── Install Path.webp
    │   ├── Instance.webp
    │   ├── Profile Settings.webp
    │   ├── Settings.webp
    │   ├── Start Menu.webp
    │   └── Tools.webp
    ├── Others
    │   ├── Background.webp
    │   ├── Card.webp
    │   ├── CardFO3.webp
    │   ├── Download Example.webp
    │   ├── Dynamic Backgrounds
    │   │   ├── 0.webp
    │   │   ├── 12.webp
    │   │   ├── 17.webp
    │   │   ├── 20.webp
    │   │   ├── 23.webp
    │   │   ├── 7.webp
    │   │   └── 9.webp
    │   ├── File Extensions.webp
    │   ├── Install TTW.webp
    │   ├── Root Folder.webp
    │   ├── Start Game.webp
    │   ├── Start Launcher.webp
    │   ├── Steam Library Tool Setup.webp
    │   └── Steam Location Pick.webp
    └── UI
    │   ├── Arrow.svg
    │   ├── Chevron Down.svg
    │   ├── Download.svg
    │   ├── Maximize.svg
    │   ├── Minimize.svg
    │   ├── Navigation.svg
    │   └── Open.svg
├── index.html
├── intro.html
├── js
    ├── imageViewer.js
    ├── javascript.js
    ├── popup.js
    └── responsiveTitle.js
├── mo2.html
├── setup.html
├── sitemap.xml
└── ttw.html


/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["main"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20 | concurrency:
21 |   group: "pages"
22 |   cancel-in-progress: false
23 | 
24 | jobs:
25 |   # Single deploy job since we're just deploying
26 |   deploy:
27 |     environment:
28 |       name: github-pages
29 |       url: ${{ steps.deployment.outputs.page_url }}
30 |     runs-on: ubuntu-latest
31 |     steps:
32 |       - name: Checkout
33 |         uses: actions/checkout@v3
34 |       - name: Setup Pages
35 |         uses: actions/configure-pages@v3
36 |       - name: Upload artifact
37 |         uses: actions/upload-pages-artifact@v3
38 |         with:
39 |           # Upload entire repository
40 |           path: '.'
41 |       - name: Deploy to GitHub Pages
42 |         id: deployment
43 |         uses: actions/deploy-pages@v4
44 | 


--------------------------------------------------------------------------------
/.vscode/sitemap-generator.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "sitemap.xml": {
 3 |     "Protocol": "https",
 4 |     "DomainName": "thebestoftimes.moddinglinked.com",
 5 |     "Root": "./",
 6 |     "IncludeExt": [
 7 |       ".html",
 8 |       ".php"
 9 |     ],
10 |     "Exclude": [],
11 |     "TagsToInclude": [
12 |       "priority",
13 |       "lastmod"
14 |     ],
15 |     "DefaultChangeFrequency": "monthly",
16 |     "TabCharacters": "\t",
17 |     "bIncludeWWW": false,
18 |     "bRemoveFileExtentions": false,
19 |     "bUseTrailingSlash": false,
20 |     "bAutomaticallyUpdateSitemap": true,
21 |     "bMinimized": false
22 |   }
23 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) TheBestofTimes
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [The Best of Times](https://thebestoftimes.moddinglinked.com/)
2 | 
3 | [![LICENSE](https://img.shields.io/badge/license-MIT-informational.svg)](https://github.com/h5bp/html5-boilerplate/blob/master/LICENSE.txt)
4 | 
5 | ### The official installation guide for Tale of Two Wastelands.
6 | 
7 | This guide will instruct you on how to properly install Tale of Two Wastelands, a total conversion mod for Fallout: New Vegas that merges the games of Fallout 3 and New Vegas together! All essential mods required for performance and stability will also be installed. The guide is highly accessible for everyone, no matter your modding experience. It is still incredibly important that you read all the instructions very carefully, even if you believe you are experienced enough to skip them. There are many small instructions that are vital for your game to function, and could be easily missed if you aren't careful. Although you don't need any modding experience to use this guide, it is expected for you to be relatively experienced with operating a computer in general.


--------------------------------------------------------------------------------
/changelog.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <link rel="icon" href="img/Coco/Head Logo.webp">
  9 | 
 10 |     <title>Changelog | The Best of Times</title>
 11 | 
 12 |     <meta name="keywords" content="
 13 |     Mod, Modding, Mods, Guide, Mod Guide, Modding Guide, Resource, Resources,
 14 |     Stable, Stability, Performance, Fix, Fixes, FPS,
 15 |     Fast, Easy, Beginner,
 16 |     Nexus, Nexus Mods, NexusMods,
 17 |     Wabbajack, WJ, Installer,
 18 |     Mod Manager, Mod Organizer, MO2,
 19 |     Fallout, The Elder Scrolls, Bethesda, Bethesda Game Studios, BGS,
 20 |     Fallout New Vegas, Fallout NV, New Vegas, FNV, 
 21 |     Fallout 4, FO4,
 22 |     Tale of Two Wastelands, TTW,
 23 |     Skyrim Special Edition, Skyrim SE, SSE">
 24 | 
 25 |     <meta name="description" content="Catalog of all changes made to the guide.">
 26 |     <meta http-equiv='content-language' content='en-us'>
 27 |     <meta name="twitter:card" value="summary_large_image">
 28 |     <meta property="og:site_name" content="ModdingLinked">
 29 |     <meta property="og:title" content="The Best of Times">
 30 |     <meta property="og:type" content="article">
 31 |     <meta property="og:url" content="https://thebestoftimes.moddinglinked.com">
 32 |     <meta property="og:image" content="https://thebestoftimes.moddinglinked.com/img/Others/Card.webp">
 33 |     <meta property="og:description" content="Catalog of all changes made to the guide.">
 34 | 
 35 |     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#202524">
 36 |     <meta name="darkreader-lock">
 37 |     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
 38 |     <meta http-equiv='expires' content='0'>
 39 |     <meta http-equiv='pragma' content='no-cache'>
 40 |     <meta http-equiv='clear-site-data' content='cache'>
 41 | 
 42 |     <script src="js/popup.js"></script>
 43 |     <script src="js/javascript.js"></script>
 44 |     <script src="js/responsiveTitle.js"></script>
 45 | 
 46 |     <link rel="stylesheet" href="css/styles.css">
 47 |     <link rel="stylesheet" href="css/cards.css">
 48 |     <link rel="stylesheet" href="css/header.css">
 49 |     <link rel="stylesheet" href="css/navigationArrows.css">
 50 |     <link rel="stylesheet" href="css/progressBar.css">
 51 |     <link rel="stylesheet" href="css/guideColors.css">
 52 |     <link rel="stylesheet" href="css/sidebar.css">
 53 |     <link rel="stylesheet" href="css/popup.css">
 54 |     <link rel="stylesheet" href="css/images.css">
 55 | </head>
 56 | 
 57 | <body class="theme">
 58 |     <div class="progress-container">
 59 |         <div class="progress-bar"></div>
 60 |     </div>
 61 | 
 62 |     <div class="container">
 63 |         <div class="header">
 64 |             <div class="headerMenu" onclick="toggleNav()">
 65 |                 <img src="./img/UI/Navigation.svg" id="navButton">
 66 |             </div>
 67 |             <div class="headerTitle">
 68 |                 <img src="./img/Coco/Head Logo.webp" alt="Logo" id="logo">
 69 |                 <a href="./index.html" id="headerTitle">The Best of Times</a>
 70 |             </div>
 71 |             <div class="guideLinks" id="headerLinks">
 72 |                 <a href="https://vivanewvegas.moddinglinked.com" target="_blank" rel="nofollow">Fallout: New Vegas</a>
 73 |                 <a href="https://themidnightride.moddinglinked.com" target="_blank" rel="nofollow">Fallout 4</a>
 74 |                 <a href="https://dragonbornsfate.moddinglinked.com" target="_blank" rel="nofollow">Skyrim SE</a>
 75 |             </div>
 76 |         </div>
 77 |         <div class="sidebar left-sidebar">
 78 |             <p class="pageLinks">
 79 |                 <a href="./index.html" title="Home">
 80 |                     Home
 81 |                 </a>
 82 | 
 83 |                 <a href="./intro.html" title="Introduction">
 84 |                     Introduction
 85 |                 </a>
 86 | 
 87 |                 <a href="./setup.html" title="Setup">
 88 |                     Setup
 89 |                 </a>
 90 | 
 91 |                 <a href="./mo2.html" title="MO2">
 92 |                     Mod Organizer 2
 93 |                 </a>
 94 | 
 95 |                 <a href="./ttw.html" title="TTW">
 96 |                     Tale of Two Wastelands
 97 |                 </a>
 98 | 
 99 |                 <a href="./essentials.html" title="Essential Mods">
100 |                     Essential Mods
101 |                 </a>
102 | 
103 |                 <a href="./finish.html" title="Final Steps">
104 |                     Final Steps
105 |                 </a>
106 |             </p>
107 |             <hr>
108 |             <p>
109 |                 <a href="./changelog.html" title="TBoT Changelog">
110 |                     TBoT Changelog
111 |                 </a>
112 | 
113 |                 <a href="./files/TTW Changelog.7z" target="_blank" title="TTW Changelog">
114 |                     TTW Changelog
115 |                 </a>
116 | 
117 |                 <a href="https://vivanewvegas.moddinglinked.com/resources.html" target="_blank" title="Resources">
118 |                     Resources
119 |                 </a>
120 | 
121 |                 <a href="./faq.html" title="FAQ">
122 |                     FAQ
123 |                 </a>
124 | 
125 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-tools.html" target="_blank" title="Tools to Avoid">
126 |                     Tools to Avoid
127 |                 </a>
128 | 
129 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-mods.html" target="_blank" title="Mods to Avoid">
130 |                     Mods to Avoid
131 |                 </a>
132 | 
133 |                 <a href="./fo3.html" title="FO3 Mod Guide">
134 |                     FO3 Mod Guide
135 |                 </a>
136 |             </p>
137 |             <p class="sidebar-padder"></p>
138 |             <hr>
139 |             <p class="sidebar-bottom">
140 |                 <a href="https://discord.gg/S99Ary5eba" title="Discord">
141 |                     Discord
142 |                 </a>
143 |                 <a title="Donate" class="popup-button" id="donation-button" onclick="openPopup(this, donation)">
144 |                     Donate
145 |                 </a>
146 |                 <a href="https://github.com/ModdingLinked/The-Best-of-Times" title="GitHub">
147 |                     GitHub
148 |                 </a>
149 |             </p>
150 |         </div>
151 | 
152 |         <div class="card popup" id="donation">
153 |             <ul>
154 |                 <li>
155 |                     <a href="https://www.patreon.com/moddinglinked" target="_blank" rel="nofollow">Patreon</a>
156 |                 </li>
157 |                 <li>
158 |                     <a href="https://www.paypal.me/Ungeziefi" target="_blank" rel="nofollow">PayPal</a>
159 |                 </li>
160 |             </ul>
161 |         </div>
162 | 
163 |         <div class="content">
164 | 
165 |             <span id="Changelog" class="section">
166 |                 <h2 onclick="location.href='#Changelog'">TBoT Changelog</h2>
167 | 
168 |                 <div class="expander-top">
169 |                     <p>
170 |                     <h3>2025</h3>
171 |                     <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
172 |                     </p>
173 |                 </div>
174 |                 <div class="expander-bottom">
175 |                     <p>
176 |                     <h2 class="install">Aug 7</h2>
177 |                     <h2><strong>TTW</strong></h2>
178 |                     <ul>
179 |                         <li>Added the Mr House Final Battle Dialogue Hotfix.</li>
180 |                     </ul>
181 | 
182 |                     <hr>
183 | 
184 |                     <h2 class="install">Jun 1</h2>
185 |                     <h2><strong>TTW Changelog</strong></h2>
186 |                     <ul>
187 |                         <li>Added 3.4.</li>
188 |                     </ul>
189 | 
190 |                     <hr>
191 | 
192 |                     <h2 class="install">Jan 22</h2>
193 |                     <h3>Safe Mid-game</h3>
194 |                     <h2><strong>Essentials</strong></h2>
195 |                     <ul>
196 |                         <li>Removed the following mods:
197 |                             <ul>
198 |                                 <li>NVTF presets. Thanks to the new INI, switching memory pool type is now a single step during the performance guide. Recent versions of the Crash Logger also remove the need to identify the pool by checking what preset is installed.</li>
199 |                                 <li>Basic Console Autocomplete, not relevant to most users.</li>
200 |                             </ul>
201 |                         </li>
202 |                     </ul>
203 |                     </p>
204 |                 </div>
205 | 
206 |                 <div class="expander-top">
207 |                     <p>
208 |                     <h3>2024</h3>
209 |                     <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
210 |                     </p>
211 |                 </div>
212 |                 <div class="expander-bottom">
213 |                     <h2 class="install">Dec 17</h2>
214 |                     <h3>Safe Mid-Game</h3>
215 |                     <h2><strong>Essentials</strong></h2>
216 |                     <ul>
217 |                         <li>Removed New Vegas Heap Replacer due to possible crashes that are not worth the (often small) performance improvement from the mod.</li>
218 |                     </ul>
219 | 
220 |                     <hr>
221 | 
222 |                     <h2 class="install">Dec 14</h2>
223 |                     <h2><strong>Essentials</strong></h2>
224 |                     <ul>
225 |                         <li>Disabled bForceHighDetailReflections in the Custom INI for better performance.</li>
226 |                     </ul>
227 |                     <h2><strong>TTW Changelog</strong></h2>
228 |                     <ul>
229 |                         <li>Turned the page into a link to the archive of changelogs.</li>
230 |                         <li>Removed 3.0 as it never released publicly, and its contents are already in the 3.2 changelog.</li>
231 |                     </ul>
232 | 
233 |                     <hr>
234 | 
235 |                     <h2 class="install">Oct 23</h2>
236 |                     <h2><strong>TTW Changelog</strong></h2>
237 |                     <ul>
238 |                         <li>Added 3.3.3b.</li>
239 |                     </ul>
240 | 
241 |                     <hr>
242 | 
243 |                     <h2 class="install">Oct 12</h2>
244 |                     <h2><strong>TTW Changelog</strong></h2>
245 |                     <ul>
246 |                         <li>Added 3.3.3a and legacy changelogs.</li>
247 |                     </ul>
248 | 
249 |                     <hr>
250 | 
251 |                     <h2 class="install">Oct 7</h2>
252 |                     <h2><strong>Introduction</strong></h2>
253 |                     <ul>
254 |                         <li>Added links to the latest VC 2015-2022 in the requirements, due to the delay from TPU.</li>
255 |                     </ul>
256 | 
257 |                     <hr>
258 | 
259 |                     <h2 class="install">Oct 6</h2>
260 |                     <h3>Safe Mid-Game</h3>
261 |                     <h2><strong>Introduction</strong></h2>
262 |                     <ul>
263 |                         <li>Changed (and corrected) minimum space requirements to accomodate TTW 3.3.3.</li>
264 |                     </ul>
265 |                     <h2><strong>TTW</strong></h2>
266 |                     <ul>
267 |                         <li>Updated the TTW Installer image to 3.3.3's.</li>
268 |                         <li>Updated TTW's folder size to 3.3.3's.</li>
269 |                     </ul>
270 |                     <h2><strong>TTW Changelog</strong></h2>
271 |                     <ul>
272 |                         <li>Added 3.3.3.</li>
273 |                     </ul>
274 | 
275 |                     <hr>
276 | 
277 |                     <h2 class="install">Jul 15</h2>
278 |                     <h2><strong>Whole Guide</strong></h2>
279 |                     <ul>
280 |                         <li>Improved styling and rewrote a large number of instructions to be clearer.</li>
281 |                     </ul>
282 |                     <h2><strong>Utilities</strong></h2>
283 |                     <ul>
284 |                         <li>The utilities test is now handled by the ML Utilities Checker instead of using console commands, vastly simplifying instructions.</li>
285 |                     </ul>
286 |                     <h2><strong>FAQ</strong></h2>
287 |                     <ul>
288 |                         <li>Included the official TTW FAQ with many corrections and additions.</li>
289 |                     </ul>
290 | 
291 |                     <hr>
292 | 
293 |                     <h2 class="install">Jul 9</h2>
294 |                     <h2><strong>Introduction</strong></h2>
295 |                     <ul>
296 |                         <li>Re-added VC++ Runtime Libraries installation steps as a fallback to mysteriously missing libraries from MO2's installer.</li>
297 |                     </ul>
298 | 
299 |                     <hr>
300 | 
301 |                     <h2 class="install">Jun 4</h2>
302 |                     <h2><strong>Setup</strong></h2>
303 |                     <ul>
304 |                         <li>Added steps to disable Base Address Randomization.</li>
305 |                     </ul>
306 | 
307 |                     <hr>
308 | 
309 |                     <h2 class="install">Jun 2</h2>
310 |                     <h2><strong>Introduction</strong></h2>
311 |                     <ul>
312 |                         <li>Removed VC++ Runtime Libraries installation steps, as the Mod Organizer 2 installer now handles it (2.5.1rc2-ML1.3 onwards).</li>
313 |                     </ul>
314 | 
315 |                     <hr>
316 | 
317 |                     <h2 class="install">May 29</h2>
318 |                     <h3>Safe Mid-Game</h3>
319 |                     <h2><strong>Essentials</strong></h2>
320 |                     <ul>
321 |                         <li>Replaced the Stewie Tweaks Essentials INI with Stewie Tweaks - VNV INI.</li>
322 |                     </ul>
323 | 
324 |                     <hr>
325 | 
326 |                     <h2 class="install">Apr 29</h2>
327 |                     <h2><strong>MO2</strong></h2>
328 |                     <ul>
329 |                         <li>Switched to the MO2 installer over the archive download in order to prevent missing AV exclusions.</li>
330 |                     </ul>
331 |                     </p>
332 |                 </div>
333 | 
334 |                 <div class="expander-top">
335 |                     <p>
336 |                     <h3>2023</h3>
337 |                     <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
338 |                     </p>
339 |                 </div>
340 |                 <div class="expander-bottom">
341 |                     <p>
342 |                     <h2 class="install">Dec 29</h2>
343 |                     <h2><strong>MO2</strong></h2>
344 |                     <ul>
345 |                         <li>Updated to Mod Organizer 2.5.1 RC2.</li>
346 |                     </ul>
347 | 
348 |                     <hr>
349 | 
350 |                     <h2 class="install">Dec 23</h2>
351 |                     <h3>Safe Mid-game</h3>
352 |                     <h2><strong>Essentials</strong></h2>
353 |                     <ul>
354 |                         <li>Removed Preferred Pathing Combat Fix because of a critical bug.</li>
355 |                     </ul>
356 | 
357 |                     <hr>
358 | 
359 |                     <h2 class="install">Dec 22</h2>
360 |                     <h3>Safe Mid-game</h3>
361 |                     <h2><strong>Whole Guide</strong></h2>
362 |                     <ul>
363 |                         <li>Added support for Epic Games copies of Fallout: New Vegas.</li>
364 |                     </ul>
365 |                     <h2><strong>MO2</strong></h2>
366 |                     <ul>
367 |                         <li>Updated to Mod Organizer 2.5.1 RC1.</li>
368 |                         <li>Removed the profile configuration section since it is now a step during instance creation.</li>
369 |                     </ul>
370 |                     <h2><strong>Essentials</strong></h2>
371 |                     <ul>
372 |                         <li>Added the following mods:
373 |                             <ul>
374 |                                 <li>Epic Games Patcher</li>
375 |                                 <li>Preferred Pathing Combat Fix</li>
376 |                             </ul>
377 |                         </li>
378 |                     </ul>
379 | 
380 |                     <hr>
381 | 
382 |                     <h2 class="install">Nov 5</h2>
383 |                     <h2><strong>TTW</strong></h2>
384 |                     <ul>
385 |                         <li>Removed the TTW 3.3.2a hotfix since it is now merged into the second release of 3.3.2a (this hotfix is still available in the repository or through a link, so reinstalling TTW won't be necessary).</li>
386 |                     </ul>
387 | 
388 |                     <hr>
389 | 
390 |                     <h2 class="install">Nov 4</h2>
391 |                     <h2><strong>TTW</strong></h2>
392 |                     <ul>
393 |                         <li>Added the TTW 3.3.2a hotfix (same as what the 3.3.2 hotfix plugin had, all the other fixes are part of the first release of 3.3.2a).</li>
394 |                     </ul>
395 | 
396 |                     <hr>
397 | 
398 |                     <h2 class="install">Sep 6</h2>
399 |                     <h2><strong>TTW</strong></h2>
400 |                     <ul>
401 |                         <li>Removed the TTW 3.3.2 hotfix (this was still needed for the first release of 3.3.2a).</li>
402 |                     </ul>
403 | 
404 |                     <hr>
405 | 
406 |                     <h2 class="install">Jul 30</h2>
407 |                     <h2><strong>TTW</strong></h2>
408 |                     <ul>
409 |                         <li>Updated the TTW 3.3.2 hotfix (YUPTTW 12.8).</li>
410 |                     </ul>
411 | 
412 |                     <hr>
413 | 
414 |                     <h2 class="install">Jul 26</h2>
415 |                     <h2><strong>Essentials</strong></h2>
416 |                     <ul>
417 |                         <li>Fixed world FOV in the Custom INI.</li>
418 |                     </ul>
419 | 
420 |                     <hr>
421 | 
422 |                     <h2 class="install">Jul 23</h2>
423 |                     <h2><strong>MO2</strong></h2>
424 |                     <ul>
425 |                         <li>Switched back to portable instance for consistency with the TBoT video guide and the Wabbajack lists.</li>
426 |                     </ul>
427 | 
428 |                     <hr>
429 | 
430 |                     <h2 class="install">Jul 15</h2>
431 |                     <h2><strong>Home</strong></h2>
432 |                     <ul>
433 |                         <li>Added a video guide by Cloudisms.</li>
434 |                     </ul>
435 |                     <h2><strong>TTW</strong></h2>
436 |                     <ul>
437 |                         <li>Updated the TTW 3.3.2 hotfix (YUPTTW 12.7).</li>
438 |                     </ul>
439 |                     <h2><strong>Essentials</strong></h2>
440 |                     <ul>
441 |                         <li>Removed the ShowOff INI since it is no longer needed.</li>
442 |                         <li>Added Basic Console Autocomplete.</li>
443 |                     </ul>
444 | 
445 |                     <hr>
446 | 
447 |                     <h2 class="install">May 27</h2>
448 |                     <h2><strong>MO2</strong></h2>
449 |                     <ul>
450 |                         <li>Updated to MO2 2.4.5 Alpha 3 version to fix the alphabetic load order issues and bring some QoL features.</li>
451 |                     </ul>
452 | 
453 |                     <hr>
454 | 
455 |                     <h2 class="install">May 7</h2>
456 |                     <h2><strong>Essentials</strong></h2>
457 |                     <ul>
458 |                         <li>Added Improved Console.</li>
459 |                     </ul>
460 | 
461 |                     <hr>
462 | 
463 |                     <h2 class="install">Apr 5</h2>
464 |                     <h2><strong>Bug Fixes</strong></h2>
465 |                     <ul>
466 |                         <li>Added ActorCause Save Bloat Fix.</li>
467 |                     </ul>
468 |                     </p>
469 |                 </div>
470 | 
471 |                 <div class="expander-top">
472 |                     <p>
473 |                     <h3>2022</h3>
474 |                     <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
475 |                     </p>
476 |                 </div>
477 |                 <div class="expander-bottom">
478 |                     <p>
479 |                     <h2 class="install">Nov 26</h2>
480 |                     <h2><strong>Whole Guide</strong></h2>
481 |                     <ul>
482 |                         <li>Recreated the website with the help of Wall_SoGB, it is now responsive.</li>
483 |                     </ul>
484 |                     <h2><strong>Whole Guide</strong></h2>
485 |                     <ul>
486 |                         <li>Updated information.</li>
487 |                     </ul>
488 |                     <h2><strong>Utilities</strong></h2>
489 |                     <ul>
490 |                         <li>Added a performance guide by Wall_SoGB.</li>
491 |                     </ul>
492 | 
493 |                     <hr>
494 | 
495 |                     <h2 class="install">Nov 15</h2>
496 |                     <h2><strong>MO2</strong></h2>
497 |                     <ul>
498 |                         <li>Made some visual changes and updated Custom INI.</li>
499 |                     </ul>
500 |                     <h2><strong>MO2</strong></h2>
501 |                     <ul>
502 |                         <li>Switched to global instance (don't worry about this if you already have the guide installed).</li>
503 |                     </ul>
504 |                     <h2><strong>Essentials</strong></h2>
505 |                     <ul>
506 |                         <li>Switched to the Nexus release of xNVSE.</li>
507 |                     </ul>
508 | 
509 |                     <hr>
510 | 
511 |                     <h2 class="install">Jul 10</h2>
512 |                     <h2><strong>Whole Guide</strong></h2>
513 |                     <ul>
514 |                         <li>Updated for 3.3.2.</li>
515 |                         <li>Removed NVAC.</li>
516 |                     </ul>
517 | 
518 |                     <hr>
519 | 
520 |                     <h2 class="install">May 12</h2>
521 |                     <h2><strong>TTW</strong></h2>
522 |                     <ul>
523 |                         <li>Added steps to install the TTW hotfix.</li>
524 |                     </ul>
525 | 
526 |                     <hr>
527 | 
528 |                     <h2 class="install">May 4</h2>
529 |                     <h2><strong>Whole Guide</strong></h2>
530 |                     <ul>
531 |                         <li>Made every mod instruction version agnostic.</li>
532 |                     </ul>
533 |                     <h2><strong>Utilities</strong></h2>
534 |                     <ul>
535 |                         <li>Added NVAC.</li>
536 |                     </ul>
537 |                     <h2><strong>Utilities</strong></h2>
538 |                     <ul>
539 |                         <li>Added ShowOff NVSE.</li>
540 |                         <li>Removed JIP Improved Recipe Menu, it is now part of Stewie Tweaks Essentials INI as a scriptrunner.</li>
541 |                     </ul>
542 |                     <h2><strong>Visuals</strong></h2>
543 |                     <ul>
544 |                         <li>Reworded steps for Clarity.</li>
545 |                     </ul>
546 | 
547 |                     <hr>
548 | 
549 |                     <h2 class="install">Apr 18</h2>
550 |                     <h2><strong>Bug Fixes</strong></h2>
551 |                     <ul>
552 |                         <li>Added kNVSE.</li>
553 |                     </ul>
554 | 
555 |                     <hr>
556 | 
557 |                     <h2 class="install">Apr 15</h2>
558 |                     <h2><strong>Utilities</strong></h2>
559 |                     <ul>
560 |                         <li>Removed OneTweak.</li>
561 |                     </ul>
562 | 
563 |                     <hr>
564 | 
565 |                     <h2 class="install">Mar 26</h2>
566 |                     <h2><strong>Utilities</strong></h2>
567 |                     <ul>
568 |                         <li>Added JIP Improved Recipe Menu.</li>
569 |                     </ul>
570 | 
571 |                     <hr>
572 | 
573 |                     <h2 class="install">Mar 16</h2>
574 |                     <h2><strong>Utilities</strong></h2>
575 |                     <ul>
576 |                         <li>Replaced the Stewie Tweaks Custom INI with Stewie Tweaks Essentials INI.</li>
577 |                     </ul>
578 |                     <h2><strong>Visuals</strong></h2>
579 |                     <ul>
580 |                         <li>Removed the following mods:
581 |                             <ul>
582 |                                 <li>ISControl</li>
583 |                                 <li>Anniversary Anim Pack</li>
584 |                                 <li>Anniversary Anim Pack - General Bugfix</li>
585 |                             </ul>
586 |                         </li>
587 |                     </ul>
588 | 
589 |                     <hr>
590 | 
591 |                     <h2 class="install">Mar 10</h2>
592 |                     <h2><strong>Visuals</strong></h2>
593 |                     <ul>
594 |                         <li>Added the following mods:
595 |                             <ul>
596 |                                 <li>ISControl</li>
597 |                                 <li>Anniversary Anim Pack</li>
598 |                                 <li>Anniversary Anim Pack - General Bugfix</li>
599 |                             </ul>
600 |                         </li>
601 |                     </ul>
602 | 
603 |                     <hr>
604 | 
605 |                     <h2 class="install">Mar 5</h2>
606 |                     <h2><strong>Whole Guide</strong></h2>
607 |                     <ul>
608 |                         <li>TTW 3.3 release: total rewrite of the guide, do not recycle old setups from 3.2 as the INI is very different and the main quest will break, among other things!</li>
609 |                     </ul>
610 |                     </p>
611 |                 </div>
612 |             </span>
613 | 
614 |             <div class="navigationArrowContainer">
615 |                 <a href="#" id="previous" rel="prev" class="navigationArrow">
616 |                     <img class="mirror" src="./img/UI/Arrow.svg" alt="Back Arrow">
617 |                     <span class="arrowText"></span>
618 |                 </a>
619 |             </div>
620 |         </div>
621 |     </div>
622 | 
623 |     <footer>ModdingLinked 2025</footer>
624 | </body>
625 | 
626 | </html>


--------------------------------------------------------------------------------
/css/cards.css:
--------------------------------------------------------------------------------
  1 | /* Base card styles */
  2 | .card,
  3 | .card-wj,
  4 | .card-basic,
  5 | .card-green,
  6 | .card-yellow,
  7 | .card-red,
  8 | .expander-bottom,
  9 | .expander-top,
 10 | textarea {
 11 |   padding: 0 1em;
 12 |   border-radius: 8px;
 13 |   border: 1px solid transparent;
 14 |   margin: 0.5em 0;
 15 |   outline: 1px solid rgba(0, 0, 0, 0.1);
 16 |   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13);
 17 | }
 18 | 
 19 | /* Individual card variations */
 20 | .card {
 21 |   background-color: rgba(255, 255, 255, 0.0512);
 22 | }
 23 | 
 24 | .card-wj {
 25 |   background-color: rgb(31, 27, 36);
 26 | }
 27 | 
 28 | .card-basic,
 29 | textarea {
 30 |   font-family: monospace;
 31 |   font-size: 1.3em;
 32 |   background-color: rgba(255, 255, 255, 0.0326);
 33 |   width: fit-content;
 34 |   -moz-width: fit-content;
 35 | }
 36 | 
 37 | /* Color-themed cards */
 38 | .card-green,
 39 | .card-yellow,
 40 | .card-red {
 41 |   text-align: left;
 42 |   width: fit-content;
 43 |   -moz-width: fit-content;
 44 | }
 45 | 
 46 | .card-green {
 47 |   background-color: rgb(57, 61, 27);
 48 | }
 49 | 
 50 | .card-yellow {
 51 |   background-color: rgb(67, 53, 25);
 52 | }
 53 | 
 54 | .card-red {
 55 |   background-color: rgb(68, 39, 38);
 56 | }
 57 | 
 58 | .card-red.important-notice {
 59 |   display: flex;
 60 |   align-items: center;
 61 |   margin-top: 30px;
 62 |   width: fit-content;
 63 | }
 64 | 
 65 | /* Textarea specific styles */
 66 | textarea {
 67 |   resize: none;
 68 |   box-sizing: border-box;
 69 |   width: 95%;
 70 | }
 71 | 
 72 | textarea.auto-resize {
 73 |   overflow: hidden;
 74 | }
 75 | 
 76 | /* Card-basic variations */
 77 | b.card-basic {
 78 |   padding: 0.3em 0.5em;
 79 | }
 80 | 
 81 | span.card-basic {
 82 |   font-family: monospace !important;
 83 |   padding: 0.5em !important;
 84 |   line-height: 2.5em !important;
 85 |   text-wrap: nowrap;
 86 |   overflow-x: scroll !important;
 87 | }
 88 | 
 89 | .card-yellow .card-basic {
 90 |   background-color: rgba(255, 255, 255, 0.09) !important;
 91 |   border-color: rgba(255, 255, 255, 0.2) !important;
 92 | }
 93 | 
 94 | /* Expander components */
 95 | .expander-top {
 96 |   margin-bottom: 0 !important;
 97 |   display: flex;
 98 |   flex-direction: row;
 99 |   align-items: center;
100 |   background-color: rgba(255, 255, 255, 0.0512);
101 | }
102 | 
103 | .expander-top.active {
104 |   background-color: rgba(255, 255, 255, 0.0612);
105 | }
106 | 
107 | .expander-top.clickable {
108 |   cursor: pointer;
109 | }
110 | 
111 | .expander-top.clickable:hover {
112 |   outline: 1px solid rgba(255, 255, 255, 0.07);
113 |   background-color: rgba(255, 255, 255, 0.0812);
114 | }
115 | 
116 | .expander-top.clickable:active {
117 |   background-color: rgba(255, 255, 255, 0.03);
118 | }
119 | 
120 | .expander-bottom {
121 |   background-color: rgba(255, 255, 255, 0.0512);
122 |   display: none;
123 |   animation: slide-up 0.4s;
124 |   z-index: 0;
125 |   position: relative;
126 |   overflow-y: hidden;
127 |   margin-top: 0 !important;
128 | }
129 | 
130 | .expander-opened {
131 |   animation: slide-down 2s;
132 | }
133 | 
134 | /* Chevron icon */
135 | img.chevron {
136 |   display: flex;
137 |   height: 16px;
138 |   width: 16px;
139 |   box-shadow: none;
140 |   margin: 3px 0 0 auto;
141 |   transition: transform 0.1s;
142 |   user-select: none;
143 |   -webkit-user-select: none;
144 |   -moz-user-select: none;
145 | }
146 | 
147 | /* Center class for alignment */
148 | .center {
149 |   margin-left: auto;
150 |   margin-right: auto;
151 |   max-width: fit-content;
152 | }
153 | 
154 | @media only screen and (max-width: 700px) {
155 | 
156 |   .expander-bottom,
157 |   .expander-top,
158 |   .card-green,
159 |   .card-yellow,
160 |   .card-red,
161 |   .card-basic,
162 |   .card {
163 |     padding: 0.65em;
164 |   }
165 | 
166 |   /* Card basic modifications */
167 |   .card-basic {
168 |     width: unset;
169 |     display: inline-block;
170 |     max-width: 100%;
171 |   }
172 | 
173 |   .card-basic p {
174 |     margin: 0;
175 |     text-wrap: nowrap;
176 |     overflow-x: scroll;
177 |   }
178 | 
179 |   span.card-basic {
180 |     width: fit-content;
181 |     -moz-width: fit-content;
182 |     display: inline-block !important;
183 |     padding: 0 0.5em !important;
184 |     max-width: 100%;
185 |     overflow-x: auto;
186 |     vertical-align: middle;
187 |     line-height: 1.8em !important;
188 |   }
189 | 
190 |   textarea {
191 |     width: 100%;
192 |   }
193 | }
194 | 
195 | @media only screen and (max-width: 470px) {
196 | 
197 |   .card-green,
198 |   .card-yellow,
199 |   .card-red {
200 |     width: calc(100% - 1.3em);
201 |     box-sizing: border-box;
202 |     text-wrap: balance;
203 |     overflow-x: visible;
204 |   }
205 | 
206 |   .card-red.important-notice {
207 |     width: calc(100% - 1.3em);
208 |     margin-left: auto;
209 |     margin-right: auto;
210 |   }
211 | 
212 |   .center {
213 |     margin: 0 auto;
214 |   }
215 | }


--------------------------------------------------------------------------------
/css/coco.css:
--------------------------------------------------------------------------------
 1 | .cocoNerd {
 2 |   -webkit-user-select: none !important;
 3 |   -moz-user-select: none !important;
 4 |   user-select: none !important;
 5 |   pointer-events: none !important;
 6 |   margin-right: 1em;
 7 |   max-height: 5.5em;
 8 | }
 9 | 
10 | @media only screen and (max-width: 900px) {
11 |   .cocoNerd {
12 |     display: none;
13 |   }
14 | }


--------------------------------------------------------------------------------
/css/donations.css:
--------------------------------------------------------------------------------
 1 | .donations-card-row {
 2 |     gap: 2em;
 3 |     width: 100%;
 4 | }
 5 | 
 6 | .donations-card {
 7 |     flex: auto;
 8 | }
 9 | 
10 | .donations-card-basic {
11 |     display: flex;
12 |     flex-direction: column;
13 |     align-items: center;
14 |     justify-content: center;
15 |     height: 240px;
16 |     width: 100%;
17 | }
18 | 
19 | .donations-card-basic.patreon {
20 |     background: #f96854;
21 | }
22 | 
23 | .donations-card-basic.paypal {
24 |     background: #00457c;
25 | }
26 | 
27 | .donations-card-basic img {
28 |     max-width: 50%;
29 |     max-height: 50%;
30 |     filter: brightness(0) invert(1);
31 |     display: block;
32 | }
33 | 
34 | .donations-card-basic h3 {
35 |     color: #fff;
36 | }


--------------------------------------------------------------------------------
/css/frontPage.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background-image: url("./img/Others/Background.webp");
  3 |   background-repeat: no-repeat !important;
  4 |   background-attachment: fixed !important;
  5 |   background-size: cover !important;
  6 |   background-position: center !important;
  7 | }
  8 | 
  9 | .welcomeContent {
 10 |   user-select: none;
 11 |   color: #ffffff;
 12 |   font-size: 2.2em;
 13 |   display: flex;
 14 |   flex-direction: column;
 15 |   align-items: center;
 16 |   justify-content: center;
 17 |   width: 100%;
 18 |   height: 100vh;
 19 |   text-decoration: none;
 20 |   transition: backdrop-filter 0.5s linear, -webkit-backdrop-filter 0.5s linear;
 21 |   backdrop-filter: saturate(100%) blur(8px);
 22 |   -webkit-backdrop-filter: saturate(100%) blur(8px);
 23 | }
 24 | 
 25 | .titleContainer {
 26 |   position: relative;
 27 |   text-align: center;
 28 | }
 29 | 
 30 | .titleContainer h1 {
 31 |   margin: 2em 0 20px;
 32 |   position: relative;
 33 |   color: #ffffff;
 34 |   font-size: 1.5em;
 35 |   word-wrap: break-word;
 36 |   text-align: center;
 37 |   display: flex;
 38 |   justify-content: center;
 39 |   letter-spacing: 0.05em;
 40 |   text-shadow: 0.05em 0.075em 0.15em rgb(0, 0, 0);
 41 |   padding: 0.5em;
 42 | }
 43 | 
 44 | .backgroundImage {
 45 |   position: absolute;
 46 |   top: -100px;
 47 |   left: 50%;
 48 |   transform: translateX(-50%);
 49 |   max-height: 300px;
 50 |   z-index: -1;
 51 |   pointer-events: none;
 52 | }
 53 | 
 54 | .buttonContainer {
 55 |   display: flex;
 56 |   flex-direction: row;
 57 |   gap: 5em;
 58 | }
 59 | 
 60 | .buttonWrapper {
 61 |   text-align: center;
 62 | }
 63 | 
 64 | .buttonText {
 65 |   color: #ffffff;
 66 |   font-size: 1rem;
 67 |   text-shadow: rgb(0, 0, 0) 0 1px 8px;
 68 |   display: inline-block;
 69 |   margin-top: 1.1em;
 70 | }
 71 | 
 72 | /* Base button styles */
 73 | .welcomeContent .welcomeButton,
 74 | .welcomeContent .welcomeButtonYT,
 75 | .welcomeContent .welcomeButtonWJ {
 76 |   color: #ffffff;
 77 |   display: flex;
 78 |   justify-content: center;
 79 |   align-items: center;
 80 |   width: 300px;
 81 |   height: 72px;
 82 |   padding: 0.5em;
 83 |   font-size: 1.8rem;
 84 |   background-color: #235163;
 85 |   border-radius: 12pt;
 86 |   text-align: center;
 87 |   text-shadow: none;
 88 |   box-shadow: 0.1em 0.1em 0.6em rgba(0, 0, 0, 0.6);
 89 | }
 90 | 
 91 | .welcomeContent .welcomeButton:hover {
 92 |   color: white;
 93 |   background-color: rgb(50, 114, 139);
 94 |   box-shadow: 0em 0em 0.6em rgba(50, 114, 139, 0.37);
 95 | }
 96 | 
 97 | /* YT */
 98 | .welcomeContent .welcomeButtonYT {
 99 |   background-color: rgb(102, 16, 16);
100 | }
101 | 
102 | .welcomeContent .welcomeButtonYT:hover {
103 |   color: rgba(255, 255, 255, 0.8);
104 |   background-color: #960f2a;
105 |   box-shadow: 0em 0em 0.6em rgba(64, 8, 8, 0.37);
106 | }
107 | 
108 | .welcomeContent .welcomeButtonYT:hover strong {
109 |   color: rgba(242, 242, 242, 0.9);
110 | }
111 | 
112 | /* WJ */
113 | .welcomeContent .welcomeButtonWJ {
114 |   background-color: rgb(31, 27, 36);
115 | }
116 | 
117 | .welcomeContent .welcomeButtonWJ:hover {
118 |   color: rgba(255, 255, 255, 0.8);
119 |   background-color: #443a51;
120 |   box-shadow: 0em 0em 0.6em rgba(50, 114, 139, 0.37);
121 | }
122 | 
123 | .welcomeContent .welcomeButtonWJ:hover strong {
124 |   color: rgba(242, 242, 242, 0.9);
125 | }
126 | 
127 | /* Button text inside strong */
128 | .welcomeContent .welcomeButton strong,
129 | .welcomeContent .welcomeButtonYT strong,
130 | .welcomeContent .welcomeButtonWJ strong {
131 |   color: rgb(242, 242, 242);
132 |   font-weight: 500;
133 |   letter-spacing: 0.02em;
134 |   font-size: 1.3em;
135 | }
136 | 
137 | /* Blur */
138 | .blur {
139 |   transition: backdrop-filter 0.5s ease-in-out, -webkit-backdrop-filter 0.5s ease-in-out;
140 |   backdrop-filter: saturate(100%) blur(0.5px);
141 |   -webkit-backdrop-filter: saturate(100%) blur(0.5px);
142 | }
143 | 
144 | .blur h2 {
145 |   transition: text-shadow 0.5s ease-in-out;
146 |   text-shadow: 0.05em 0.075em 0.1em rgba(0, 0, 0, 0.7);
147 | }
148 | 
149 | .disabledButton {
150 |   pointer-events: none;
151 |   cursor: not-allowed;
152 |   background-color: #333333 !important;
153 | }
154 | 
155 | .disabledButton strong {
156 |   color: rgba(255, 255, 255, 0.38) !important;
157 | }
158 | 
159 | @media screen and (min-width: 900px) {
160 |   #title br {
161 |     display: none;
162 |   }
163 | 
164 |   #title::after {
165 |     content: " ";
166 |     display: inline;
167 |   }
168 | }
169 | 
170 | @media only screen and (max-width: 900px) {
171 |   .titleContainer h1 {
172 |     font-size: 1em;
173 |   }
174 | 
175 |   .buttonContainer {
176 |     flex-direction: column;
177 |     gap: 0;
178 |     margin-bottom: -5em;
179 |   }
180 | 
181 |   .buttonWrapper {
182 |     margin-bottom: 1em;
183 |   }
184 | 
185 |   .buttonText {
186 |     display: none;
187 |   }
188 | 
189 |   .welcomeContent .welcomeButton,
190 |   .welcomeContent .welcomeButtonYT,
191 |   .welcomeContent .welcomeButtonWJ {
192 |     width: 260px;
193 |     height: 58px;
194 |     font-size: 1.4rem;
195 |   }
196 | 
197 |   .navigationArrow .arrowText {
198 |     display: none;
199 |   }
200 | 
201 |   #sideButton {
202 |     margin-left: 0;
203 |     margin-right: 1em;
204 |   }
205 | 
206 |   #sidenavLeft .guideLinks {
207 |     display: block;
208 |   }
209 | 
210 |   #sidenavRight {
211 |     width: 0%;
212 |   }
213 | 
214 |   h1,
215 |   h2 {
216 |     line-height: 1.2em;
217 |   }
218 | }
219 | 
220 | @media only screen and (min-width: 901px) {
221 |   #sideButton {
222 |     margin-left: -100px;
223 |   }
224 | }
225 | 
226 | /* Shadow */
227 | .header {
228 |   box-shadow: 0 6px 12px 2px rgba(0, 0, 0, 0.5) !important;
229 | }


--------------------------------------------------------------------------------
/css/guideColors.css:
--------------------------------------------------------------------------------
 1 | strong {
 2 |   color: #57ffa2e6;
 3 | }
 4 | 
 5 | body {
 6 |   background-color: #141918 !important;
 7 | }
 8 | 
 9 | .sidebar,
10 | .header,
11 | .popup {
12 |   background: #202524 !important;
13 | }
14 | 
15 | .sidebar .active::before {
16 |   background-color: #57ffa2e6 !important;
17 | }
18 | 
19 | textarea {
20 |   border-color: #57ffa2e6 !important;
21 | }


--------------------------------------------------------------------------------
/css/header.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 |   outline: 1px solid rgba(0, 0, 0, 0.1);
 3 |   background-color: rgb(43, 43, 43);
 4 |   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.13);
 5 |   padding: 0 1em 0 1em;
 6 |   border-bottom-left-radius: 8px;
 7 |   border-bottom-right-radius: 8px;
 8 |   border: 1px solid transparent;
 9 |   display: flex;
10 |   position: fixed;
11 |   width: 100%;
12 |   z-index: 3;
13 |   height: 5em;
14 | }
15 | 
16 | .guideLinks {
17 |   display: flex;
18 |   align-items: center;
19 |   margin-left: auto;
20 | }
21 | 
22 | .guideLinks a {
23 |   color: #ffffff;
24 |   font-size: 1.2em;
25 |   margin-right: 1em;
26 | }
27 | 
28 | .headerTitle {
29 |   display: flex;
30 |   align-items: center;
31 | }
32 | 
33 | .headerTitle a {
34 |   font-size: 2em;
35 |   color: rgb(255, 255, 255);
36 | }
37 | 
38 | .header a:hover {
39 |   text-shadow: rgba(255, 255, 255, 0.5) 0 0 10px;
40 | }
41 | 
42 | .headerTitle img {
43 |   padding: 0.8em 1em 0.8em 0em;
44 |   max-width: 100%;
45 |   max-height: 100%;
46 | }
47 | 
48 | .headerMenu {
49 |   display: flex;
50 |   align-items: center;
51 | }
52 | 
53 | .headerMenu img {
54 |   padding: 0.8em 1em 0.8em 0em;
55 |   width: 100%;
56 |   height: 100%;
57 | }
58 | 
59 | #navButton {
60 |   cursor: pointer;
61 | }
62 | 
63 | #navButton:hover {
64 |   transform: scale3d(1.05, 1.05, 1.05);
65 | }
66 | 
67 | #navButton:active {
68 |   transform: scale3d(0.95, 0.95, 0.95) !important;
69 | }
70 | 
71 | @media only screen and (max-width: 700px) {
72 |   .guideLinks {
73 |     display: none;
74 |   }
75 | }
76 | 
77 | @media only screen and (max-width: 700px) {
78 |   #logo {
79 |     display: none;
80 |   }
81 | }
82 | 
83 | @media only screen and (min-width: 900px) {
84 |   .headerMenu {
85 |     display: none;
86 |   }
87 | }


--------------------------------------------------------------------------------
/css/images.css:
--------------------------------------------------------------------------------
  1 | .image-container {
  2 |   margin: 1em 0 1em 0;
  3 |   position: relative;
  4 |   display: inline-flex;
  5 |   cursor: pointer;
  6 |   max-width: 80%;
  7 | }
  8 | 
  9 | .image-container img {
 10 |   box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 0.5);
 11 |   border-radius: 6pt;
 12 |   max-width: 100%;
 13 |   height: auto;
 14 | }
 15 | 
 16 | .resize-overlay {
 17 |   position: absolute;
 18 |   top: 10px;
 19 |   right: 10px;
 20 |   width: 0px;
 21 |   height: 0px;
 22 |   background-size: contain;
 23 |   background-repeat: no-repeat;
 24 |   background-color: rgba(0, 0, 0, 0.6);
 25 |   background-image: none !important;
 26 |   padding: 5px;
 27 |   display: flex;
 28 |   border-radius: 6pt;
 29 |   transition: all 0.4s;
 30 |   pointer-events: none;
 31 | }
 32 | 
 33 | .image-container:hover .resize-overlay,
 34 | .overlay .resize-overlay {
 35 |   width: 32px !important;
 36 |   height: 32px !important;
 37 |   padding: 10px !important;
 38 | }
 39 | 
 40 | .image-container:hover .resize-overlay.expand {
 41 |   background-image: url("../img/UI/Maximize.svg") !important;
 42 | }
 43 | 
 44 | .image-container:hover .resize-overlay.shrink,
 45 | .overlay .resize-overlay.shrink {
 46 |   background-image: url("../img/UI/Minimize.svg") !important;
 47 | }
 48 | 
 49 | .image-container:hover img {
 50 |   box-shadow: 0 0pt 10pt 0 rgba(255, 255, 255, 0.4);
 51 | }
 52 | 
 53 | .overlay {
 54 |   position: fixed;
 55 |   top: 0;
 56 |   left: 0;
 57 |   width: 100%;
 58 |   height: 100%;
 59 |   background: rgba(0, 0, 0, 0.8);
 60 |   display: flex;
 61 |   align-items: center;
 62 |   justify-content: center;
 63 |   z-index: 1000;
 64 |   display: none;
 65 | }
 66 | 
 67 | .enlarged-image {
 68 |   display: block;
 69 |   max-height: 50vw;
 70 |   width: auto;
 71 |   height: auto;
 72 |   border-radius: 6pt;
 73 |   box-shadow: 0 2pt 4pt 0 rgba(0, 0, 0, 0.5);
 74 | }
 75 | 
 76 | .mo2-icon {
 77 |   position: relative;
 78 |   width: 2em;
 79 |   height: 2em;
 80 |   top: 0.5em;
 81 |   margin-top: -1em;
 82 | }
 83 | 
 84 | .logo-container {
 85 |   display: flex;
 86 |   justify-content: space-between;
 87 | }
 88 | 
 89 | .logo-container img {
 90 |   display: flex;
 91 |   height: 256px !important;
 92 |   padding: 1em;
 93 |   -webkit-user-select: none !important;
 94 |   -moz-user-select: none !important;
 95 |   user-select: none !important;
 96 |   pointer-events: none !important;
 97 | }
 98 | 
 99 | @media only screen and (max-width: 900px) {
100 |   .image-container {
101 |     max-width: 95% !important;
102 |   }
103 | 
104 |   .overlay .image-container {
105 |     max-width: 100% !important;
106 |   }
107 | 
108 |   .enlarged-image {
109 |     max-height: 100vw !important;
110 |   }
111 | 
112 |   .logo-container {
113 |     flex-direction: column;
114 |     align-items: center;
115 |   }
116 | }


--------------------------------------------------------------------------------
/css/navigationArrows.css:
--------------------------------------------------------------------------------
 1 | .navigationArrowContainer {
 2 |   display: flex;
 3 |   flex-direction: row;
 4 |   position: relative;
 5 |   width: 100%;
 6 |   height: 100%;
 7 |   display: flex;
 8 |   justify-content: space-between;
 9 |   align-items: end;
10 |   align-content: center;
11 |   padding: 0 1em;
12 | }
13 | 
14 | .navigationArrow {
15 |   display: flex;
16 |   justify-content: center;
17 |   align-items: center;
18 |   align-content: center;
19 |   text-wrap: nowrap;
20 | }
21 | 
22 | .navigationArrow img {
23 |   width: 5.5em;
24 |   height: 5.5em;
25 |   margin: 1.25em 0em 1em 0em;
26 | }
27 | 
28 | .navigationArrow .arrowText {
29 |   text-decoration: none;
30 |   font-size: 2.5em;
31 |   display: flex;
32 |   color: #ffffff;
33 | }
34 | 
35 | .navigationArrow:hover img {
36 |   scale: 90%;
37 |   transform: scaleY(90%);
38 | }
39 | 
40 | @media only screen and (max-width: 900px) {
41 |   .navigationArrow .arrowText {
42 |     font-size: 1.5em;
43 |   }
44 | 
45 |   .navigationArrow#next {
46 |     flex-direction: column-reverse;
47 |     align-items: end !important;
48 |   }
49 | 
50 |   .navigationArrow#next .arrowText {
51 |     margin-right: 0.33em;
52 |   }
53 | 
54 |   .navigationArrow#previous {
55 |     flex-direction: column;
56 |     align-items: start !important;
57 |   }
58 | 
59 |   .navigationArrow#previous .arrowText {
60 |     margin-left: 0.33em;
61 |   }
62 | }


--------------------------------------------------------------------------------
/css/popup.css:
--------------------------------------------------------------------------------
 1 | .popup-button {
 2 |   cursor: pointer;
 3 | }
 4 | 
 5 | .popup {
 6 |   position: fixed;
 7 |   display: none;
 8 |   z-index: 1;
 9 |   padding: 0.4em !important;
10 |   opacity: 0;
11 |   transition: opacity 0.2s ease;
12 | }
13 | 
14 | .popup ul {
15 |   list-style: none;
16 |   padding: 0 !important;
17 |   margin: 0 !important;
18 | }
19 | 
20 | .popup li {
21 |   padding: 0 !important;
22 |   margin: 0 !important;
23 | }
24 | 
25 | .popup a {
26 |   display: flex;
27 |   color: rgb(255, 255, 255);
28 |   border: 1px solid transparent;
29 |   background-color: transparent;
30 |   border-radius: 4px;
31 |   height: 32px;
32 |   width: auto;
33 |   text-align: left;
34 |   text-decoration: none;
35 |   padding: 5px 12px;
36 |   font-size: 1.05em;
37 |   transition: all 187ms Cubic-Bezier(0, 0, 0, 1);
38 |   text-wrap: nowrap;
39 |   text-overflow: clip;
40 | }
41 | 
42 | .popup a:hover {
43 |   background: rgba(255, 255, 255, 0.0605);
44 |   border: 1px solid rgba(255, 255, 255, 0.0605);
45 | }
46 | 
47 | .popup.show {
48 |   opacity: 1;
49 | }


--------------------------------------------------------------------------------
/css/progressBar.css:
--------------------------------------------------------------------------------
 1 | .progress-container {
 2 |   z-index: 2;
 3 |   width: 100%;
 4 |   height: 5.2em;
 5 |   background-color: #6e6e6e;
 6 |   border-bottom-left-radius: 8px;
 7 |   border-bottom-right-radius: 8px;
 8 |   position: fixed;
 9 | }
10 | 
11 | .progress-bar {
12 |   height: 5.2em;
13 |   width: 0%;
14 |   background-color: #71e075;
15 |   border-bottom-left-radius: 8px;
16 |   border-bottom-right-radius: 8px;
17 | }


--------------------------------------------------------------------------------
/css/sidebar.css:
--------------------------------------------------------------------------------
  1 | .sidebar {
  2 |   display: flex;
  3 |   flex-direction: column;
  4 |   width: 15em;
  5 |   text-align: left;
  6 |   position: fixed;
  7 |   margin-top: 5.75em;
  8 |   margin-left: 0.75em;
  9 |   border-radius: 4px;
 10 |   -webkit-user-select: none;
 11 |   -moz-user-select: none;
 12 |   user-select: none;
 13 |   background: #2b2b2b;
 14 |   outline: 1px solid rgba(0, 0, 0, 0.1);
 15 |   overflow-x: hidden;
 16 |   overflow-y: auto;
 17 |   height: calc(100vh - 6.25em);
 18 |   transition: all 333ms cubic-bezier(0, 0, 0, 1);
 19 |   justify-content: flex-start;
 20 | }
 21 | 
 22 | .left-sidebar {
 23 |   left: 0;
 24 | }
 25 | 
 26 | .right-sidebar {
 27 |   right: 0;
 28 |   flex-wrap: nowrap;
 29 |   padding-left: 0.7em;
 30 |   margin-right: 0.75em;
 31 |   width: 15.7em;
 32 | }
 33 | 
 34 | .sidebar-padder {
 35 |   display: flex;
 36 |   flex-direction: column;
 37 |   flex-grow: 1;
 38 | }
 39 | 
 40 | .sidebar-bottom {
 41 |   margin-top: auto;
 42 | }
 43 | 
 44 | .sidebar .active {
 45 |   background: rgba(255, 255, 255, 0.1);
 46 | }
 47 | 
 48 | .sidebar .active::before {
 49 |   content: "";
 50 |   position: absolute;
 51 |   left: 0;
 52 |   transform: translateY(2px);
 53 |   width: 3px;
 54 |   height: 16px;
 55 |   background-color: #ff0000;
 56 |   border-radius: 8px;
 57 | }
 58 | 
 59 | .sidebar p {
 60 |   margin: 10px 0;
 61 | }
 62 | 
 63 | .left-sidebar a,
 64 | .sublink {
 65 |   display: flex;
 66 |   color: rgb(255, 255, 255);
 67 |   border: 1px solid transparent;
 68 |   background-color: transparent;
 69 |   border-radius: 4px;
 70 |   height: 32px;
 71 |   width: auto;
 72 |   text-align: left;
 73 |   text-decoration: none;
 74 |   padding: 5px 12px;
 75 |   font-size: 1.05em;
 76 |   margin: 1.5px 0;
 77 |   transition: all 187ms Cubic-Bezier(0, 0, 0, 1);
 78 |   text-wrap: nowrap;
 79 |   text-overflow: clip;
 80 | }
 81 | 
 82 | .sublink {
 83 |   padding-left: 1.5em !important;
 84 |   display: none !important;
 85 | }
 86 | 
 87 | .right-sidebar div {
 88 |   padding-bottom: 0.75em;
 89 | }
 90 | 
 91 | .right-sidebar a:not(b a) {
 92 |   display: flex;
 93 |   color: rgb(255, 255, 255) !important;
 94 |   text-decoration: none;
 95 |   transition: all 187ms Cubic-Bezier(0, 0, 0, 1);
 96 |   padding: 0.2em 0em 0.2em 1em;
 97 | }
 98 | 
 99 | .right-sidebar b a {
100 |   display: flex;
101 |   color: rgb(255, 255, 255) !important;
102 |   text-decoration: none;
103 |   transition: all 187ms Cubic-Bezier(0, 0, 0, 1);
104 |   text-wrap: nowrap;
105 | }
106 | 
107 | .left-sidebar hr {
108 |   margin: 0px 10px !important;
109 | }
110 | 
111 | .left-sidebar a:hover {
112 |   background: rgba(255, 255, 255, 0.0605);
113 |   border: 1px solid rgba(255, 255, 255, 0.0605);
114 | }
115 | 
116 | .right-sidebar a:hover {
117 |   color: rgba(255, 255, 255, 0.8) !important;
118 | }
119 | 
120 | .left-sidebar a:active {
121 |   background: rgba(255, 255, 255, 0.0419);
122 |   border: 1px solid rgba(255, 255, 255, 0.0419);
123 |   color: rgba(255, 255, 255, 0.786);
124 | }
125 | 
126 | .right-sidebar a:active {
127 |   color: rgba(255, 255, 255, 0.5) !important;
128 | }
129 | 
130 | @media only screen and (max-width: 900px) {
131 |   .left-sidebar {
132 |     height: 100% !important;
133 |     width: calc(fit-content + 25%) !important;
134 |     margin: 0;
135 |     padding-top: 5em;
136 |     z-index: 1;
137 |     box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px;
138 | 
139 |     border-top-left-radius: 0;
140 |     border-bottom-left-radius: 0;
141 | 
142 |     transform: translateX(-100%);
143 |     transition: transform 333ms cubic-bezier(0, 0, 0, 1);
144 |   }
145 | 
146 |   .left-sidebar a,
147 |   .sublink {
148 |     height: 36px !important;
149 |     padding: 7px 12px !important;
150 |   }
151 | 
152 |   /* Add new class for expanded state */
153 |   .left-sidebar.expanded {
154 |     transform: translateX(0);
155 |   }
156 | }
157 | 
158 | @media only screen and (max-width: 1230px) {
159 |   .right-sidebar {
160 |     height: 100%;
161 |     right: -200em;
162 |   }
163 | }


--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   scroll-behavior: smooth;
  4 |   transition: all 187ms Cubic-Bezier(0, 0, 0, 1);
  5 |   scrollbar-width: thin;
  6 |   scrollbar-color: rgba(255, 255, 255, 0.63) transparent;
  7 | }
  8 | 
  9 | *::-webkit-scrollbar {
 10 |   width: 12px;
 11 | }
 12 | 
 13 | *::-webkit-scrollbar-track {
 14 |   background: transparent;
 15 | }
 16 | 
 17 | *::-webkit-scrollbar-thumb {
 18 |   background-color: rgba(143, 143, 143, 0.63);
 19 |   border-radius: 20px;
 20 | }
 21 | 
 22 | *::-webkit-scrollbar-thumb:hover {
 23 |   background-color: rgba(240, 240, 240, 0.63);
 24 |   border-radius: 20px;
 25 |   scale: 10%;
 26 | }
 27 | 
 28 | html {
 29 |   scroll-padding-top: 5.375em;
 30 | }
 31 | 
 32 | div {
 33 |   display: block;
 34 | }
 35 | 
 36 | body {
 37 |   margin: 0;
 38 |   font-size: 0.9em;
 39 |   font-weight: 400;
 40 |   line-height: 1.45em;
 41 | }
 42 | 
 43 | h1 {
 44 |   font-size: 40px;
 45 |   font-weight: 600;
 46 |   line-height: 52px;
 47 | }
 48 | 
 49 | h2 {
 50 |   font-size: 2.1em;
 51 |   font-weight: 600;
 52 |   line-height: 1.2em;
 53 |   cursor: pointer;
 54 | }
 55 | 
 56 | h3 {
 57 |   font-size: 1.5em;
 58 |   font-weight: 600;
 59 |   line-height: 1.25em;
 60 | }
 61 | 
 62 | #logoBig {
 63 |   display: flex;
 64 |   flex-direction: column;
 65 |   justify-content: center;
 66 |   align-items: center;
 67 | }
 68 | 
 69 | #logoBig img {
 70 |   width: 100%;
 71 |   max-width: 220px;
 72 |   margin: 0;
 73 |   padding: 0;
 74 | }
 75 | 
 76 | .flex {
 77 |   display: flex;
 78 | }
 79 | 
 80 | a {
 81 |   color: rgb(101, 206, 253);
 82 |   text-decoration: none;
 83 | }
 84 | 
 85 | a:hover {
 86 |   color: hsl(199, 83%, 45%);
 87 | }
 88 | 
 89 | li {
 90 |   margin-top: 1em;
 91 |   margin-bottom: 1em;
 92 | }
 93 | 
 94 | input,
 95 | button {
 96 |   color: white;
 97 |   background-color: rgba(255, 255, 255, 0.0605);
 98 |   border: 1px solid rgba(255, 255, 255, 0.093);
 99 |   border-radius: 3px;
100 |   text-align: center;
101 |   min-height: 1em;
102 |   font-size: 1.1em;
103 |   transition: all 187ms Cubic-Bezier(0, 0, 0, 1);
104 | }
105 | 
106 | input:hover,
107 | button:hover {
108 |   background-color: rgba(255, 255, 255, 0.0837);
109 | }
110 | 
111 | input:active,
112 | button:active {
113 |   background-color: rgba(255, 255, 255, 0.0326);
114 |   border-color: rgba(255, 255, 255, 0.0698);
115 |   color: rgba(255, 255, 255, 0.786);
116 | }
117 | 
118 | input:active {
119 |   border-bottom: 1px solid rgb(101, 206, 253);
120 | }
121 | 
122 | .center {
123 |   margin-left: auto;
124 |   margin-right: auto;
125 | }
126 | 
127 | hr {
128 |   border: 1px solid rgba(255, 255, 255, 0.2);
129 |   border-radius: 4px;
130 |   margin: 10px;
131 | }
132 | 
133 | .selected {
134 |   background: rgba(255, 255, 255, 0.12) !important;
135 |   border: 1px solid rgba(255, 255, 255, 0.12) !important;
136 | }
137 | 
138 | .annotations {
139 |   font-size: small;
140 | }
141 | 
142 | .container {
143 |   display: flex;
144 |   min-height: 100vh;
145 | }
146 | 
147 | :root {
148 |   --sidebar-margin: 14.5em;
149 |   --scrollbar-width: 0.7em;
150 | }
151 | 
152 | .content {
153 |   flex: 1;
154 |   display: flex;
155 |   flex-direction: column;
156 |   margin-top: 70px;
157 |   margin-left: var(--sidebar-margin);
158 |   margin-right: calc(var(--sidebar-margin) + var(--scrollbar-width));
159 |   width: 80%;
160 |   padding: 2em;
161 | }
162 | 
163 | footer {
164 |   text-align: center;
165 |   padding: 5px;
166 |   margin-bottom: 0;
167 |   margin-top: 10px;
168 |   outline: 1px solid rgba(0, 0, 0, 0.1);
169 |   background-color: rgba(255, 255, 255, 0.0512);
170 | }
171 | 
172 | .theme {
173 |   background: rgb(32, 32, 32);
174 |   color: white;
175 |   font-family: arial, helvetica, sans-serif;
176 | }
177 | 
178 | .section {
179 |   opacity: 0;
180 |   transition: opacity 1s ease;
181 | }
182 | 
183 | .section.fade-in {
184 |   opacity: 1;
185 | }
186 | 
187 | .faq h4 {
188 |   margin-top: 1.7em;
189 |   margin-bottom: 0.2em;
190 | }
191 | 
192 | .mirror {
193 |   rotate: 180deg;
194 | }
195 | 
196 | .width-90 {
197 |   max-width: 90% !important;
198 | }
199 | 
200 | .width-70 {
201 |   max-width: 70% !important;
202 | }
203 | 
204 | .width-60 {
205 |   max-width: 60% !important;
206 | }
207 | 
208 | .width-40 {
209 |   max-width: 40% !important;
210 | }
211 | 
212 | textarea {
213 |   padding: 1em !important;
214 |   color: white;
215 |   resize: none;
216 |   cursor: pointer;
217 | }
218 | 
219 | button.active {
220 |   background-color: #4CAF50;
221 |   color: white;
222 | }
223 | 
224 | @keyframes rotate {
225 |   50% {
226 |     transform: translateY(-6px) rotateZ(180deg);
227 |   }
228 | 
229 |   100% {
230 |     transform: translateY(0px) rotateZ(360deg);
231 |   }
232 | }
233 | 
234 | @keyframes slide-down {
235 |   from {
236 |     max-height: 0;
237 |     margin-top: -0.12px;
238 |   }
239 | 
240 |   to {
241 |     max-height: 5000px;
242 |   }
243 | }
244 | 
245 | @keyframes slide-up {
246 |   from {
247 |     max-height: 1000px;
248 |   }
249 | 
250 |   to {
251 |     max-height: 0;
252 |     margin-top: -0.12px;
253 |   }
254 | }
255 | 
256 | @media only screen and (max-width: 1220px) {
257 | 
258 |   .content,
259 |   .content-index {
260 |     margin-right: 0px !important;
261 |   }
262 | }
263 | 
264 | @media only screen and (max-width: 900px) {
265 | 
266 |   .content,
267 |   .content-index {
268 |     margin-left: 0px;
269 |   }
270 | }
271 | 
272 | @media only screen and (max-width: 700px) {
273 |   ul {
274 |     margin-left: -1.75em;
275 |   }
276 | 
277 |   ol {
278 |     margin-left: -1.75em;
279 |   }
280 | 
281 |   .content {
282 |     padding: 4px;
283 |   }
284 | 
285 |   .width-90 {
286 |     max-width: 100% !important;
287 |   }
288 | 
289 |   .width-70 {
290 |     max-width: 90% !important;
291 |   }
292 | 
293 |   .width-60 {
294 |     max-width: 80% !important;
295 |   }
296 | 
297 |   .width-40 {
298 |     max-width: 70% !important;
299 |   }
300 | 
301 |   #logoBig {
302 |     display: none;
303 |   }
304 | }
305 | 
306 | @media only screen and (max-width: 470px) {
307 |   .container {
308 |     min-width: 100%;
309 |     overflow-x: hidden;
310 |   }
311 | 
312 |   .content {
313 |     padding: 4px;
314 |     width: 100%;
315 |     min-width: 0;
316 |     margin-left: 0;
317 |     margin-right: 0;
318 |     overflow-x: hidden;
319 |   }
320 | 
321 |   .card,
322 |   .card-red,
323 |   .card-yellow,
324 |   .card-green,
325 |   .image-slider {
326 |     max-width: 100%;
327 |     overflow-x: hidden;
328 |   }
329 | 
330 |   .image-container,
331 |   .slider-container {
332 |     max-width: 100% !important;
333 |   }
334 | 
335 |   .slider-img {
336 |     max-width: 100%;
337 |     height: auto;
338 |   }
339 | 
340 |   textarea {
341 |     max-width: 95%;
342 |   }
343 | }


--------------------------------------------------------------------------------
/css/textIcons.css:
--------------------------------------------------------------------------------
 1 | .link-download a::after,
 2 | .link-page a::after {
 3 |   content: "";
 4 |   margin-left: 10px;
 5 |   display: inline-block;
 6 |   width: 1.25em;
 7 |   height: 1.25em;
 8 |   transform: translateY(0.25em);
 9 |   background-size: contain;
10 |   background-repeat: no-repeat;
11 | }
12 | 
13 | .link-page a::after {
14 |   background-image: url("../img/UI/Open.svg");
15 | }
16 | 
17 | .link-download a::after {
18 |   background-image: url("../img/UI/Download.svg");
19 | }


--------------------------------------------------------------------------------
/files/3.3.3a Hotfix.7z:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/files/3.3.3a Hotfix.7z


--------------------------------------------------------------------------------
/files/DirectX Remover.7z:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/files/DirectX Remover.7z


--------------------------------------------------------------------------------
/files/TTW Changelog.7z:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/files/TTW Changelog.7z


--------------------------------------------------------------------------------
/files/Vanilla UI Plus Fallout 3 9.48.7z:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/files/Vanilla UI Plus Fallout 3 9.48.7z


--------------------------------------------------------------------------------
/finish.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <link rel="icon" href="img/Coco/Head Logo.webp">
  9 | 
 10 |     <title>Final Steps | The Best of Times</title>
 11 | 
 12 |     <meta name="keywords" content="
 13 |     Mod, Modding, Mods, Guide, Mod Guide, Modding Guide, Resource, Resources,
 14 |     Stable, Stability, Performance, Fix, Fixes, FPS,
 15 |     Fast, Easy, Beginner,
 16 |     Nexus, Nexus Mods, NexusMods,
 17 |     Wabbajack, WJ, Installer,
 18 |     Mod Manager, Mod Organizer, MO2,
 19 |     Fallout, The Elder Scrolls, Bethesda, Bethesda Game Studios, BGS,
 20 |     Fallout New Vegas, Fallout NV, New Vegas, FNV, 
 21 |     Fallout 4, FO4,
 22 |     Tale of Two Wastelands, TTW,
 23 |     Skyrim Special Edition, Skyrim SE, SSE">
 24 | 
 25 |     <meta name="description" content="Final steps necessary before playing the game.">
 26 |     <meta http-equiv='content-language' content='en-us'>
 27 |     <meta name="twitter:card" value="summary_large_image">
 28 |     <meta property="og:site_name" content="ModdingLinked">
 29 |     <meta property="og:title" content="The Best of Times">
 30 |     <meta property="og:type" content="article">
 31 |     <meta property="og:url" content="https://thebestoftimes.moddinglinked.com">
 32 |     <meta property="og:image" content="https://thebestoftimes.moddinglinked.com/img/Others/Card.webp">
 33 |     <meta property="og:description" content="Final steps necessary before playing the game.">
 34 | 
 35 |     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#202524">
 36 |     <meta name="darkreader-lock">
 37 |     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
 38 |     <meta http-equiv='expires' content='0'>
 39 |     <meta http-equiv='pragma' content='no-cache'>
 40 |     <meta http-equiv='clear-site-data' content='cache'>
 41 | 
 42 |     <script src="js/imageViewer.js"></script>
 43 |     <script src="js/popup.js"></script>
 44 |     <script src="js/javascript.js"></script>
 45 |     <script src="js/responsiveTitle.js"></script>
 46 | 
 47 |     <link rel="stylesheet" href="css/styles.css">
 48 |     <link rel="stylesheet" href="css/cards.css">
 49 |     <link rel="stylesheet" href="css/header.css">
 50 |     <link rel="stylesheet" href="css/navigationArrows.css">
 51 |     <link rel="stylesheet" href="css/progressBar.css">
 52 |     <link rel="stylesheet" href="css/guideColors.css">
 53 |     <link rel="stylesheet" href="css/sidebar.css">
 54 |     <link rel="stylesheet" href="css/popup.css">
 55 |     <link rel="stylesheet" href="css/images.css">
 56 |     <link rel="stylesheet" href="css/donations.css">
 57 | </head>
 58 | 
 59 | <body class="theme">
 60 |     <div class="progress-container">
 61 |         <div class="progress-bar"></div>
 62 |     </div>
 63 | 
 64 |     <div class="container">
 65 |         <div class="header">
 66 |             <div class="headerMenu" onclick="toggleNav()">
 67 |                 <img src="./img/UI/Navigation.svg" id="navButton">
 68 |             </div>
 69 |             <div class="headerTitle">
 70 |                 <img src="./img/Coco/Head Logo.webp" alt="Logo" id="logo">
 71 |                 <a href="./index.html" id="headerTitle">The Best of Times</a>
 72 |             </div>
 73 |             <div class="guideLinks" id="headerLinks">
 74 |                 <a href="https://vivanewvegas.moddinglinked.com" target="_blank" rel="nofollow">Fallout: New Vegas</a>
 75 |                 <a href="https://themidnightride.moddinglinked.com" target="_blank" rel="nofollow">Fallout 4</a>
 76 |                 <a href="https://dragonbornsfate.moddinglinked.com" target="_blank" rel="nofollow">Skyrim SE</a>
 77 |             </div>
 78 |         </div>
 79 |         <div class="sidebar left-sidebar">
 80 |             <p class="pageLinks">
 81 |                 <a href="./index.html" title="Home">
 82 |                     Home
 83 |                 </a>
 84 | 
 85 |                 <a href="./intro.html" title="Introduction">
 86 |                     Introduction
 87 |                 </a>
 88 | 
 89 |                 <a href="./setup.html" title="Setup">
 90 |                     Setup
 91 |                 </a>
 92 | 
 93 |                 <a href="./mo2.html" title="MO2">
 94 |                     Mod Organizer 2
 95 |                 </a>
 96 | 
 97 |                 <a href="./ttw.html" title="TTW">
 98 |                     Tale of Two Wastelands
 99 |                 </a>
100 | 
101 |                 <a href="./essentials.html" title="Essential Mods">
102 |                     Essential Mods
103 |                 </a>
104 | 
105 |                 <a href="./finish.html" title="Final Steps">
106 |                     Final Steps
107 |                 </a>
108 |             </p>
109 |             <hr>
110 |             <p>
111 |                 <a href="./changelog.html" title="TBoT Changelog">
112 |                     TBoT Changelog
113 |                 </a>
114 | 
115 |                 <a href="./files/TTW Changelog.7z" target="_blank" title="TTW Changelog">
116 |                     TTW Changelog
117 |                 </a>
118 | 
119 |                 <a href="https://vivanewvegas.moddinglinked.com/resources.html" target="_blank" title="Resources">
120 |                     Resources
121 |                 </a>
122 | 
123 |                 <a href="./faq.html" title="FAQ">
124 |                     FAQ
125 |                 </a>
126 | 
127 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-tools.html" target="_blank" title="Tools to Avoid">
128 |                     Tools to Avoid
129 |                 </a>
130 | 
131 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-mods.html" target="_blank" title="Mods to Avoid">
132 |                     Mods to Avoid
133 |                 </a>
134 | 
135 |                 <a href="./fo3.html" title="FO3 Mod Guide">
136 |                     FO3 Mod Guide
137 |                 </a>
138 |             </p>
139 |             <p class="sidebar-padder"></p>
140 |             <hr>
141 |             <p class="sidebar-bottom">
142 |                 <a href="https://discord.gg/S99Ary5eba" title="Discord">
143 |                     Discord
144 |                 </a>
145 |                 <a title="Donate" class="popup-button" id="donation-button" onclick="openPopup(this, donation)">
146 |                     Donate
147 |                 </a>
148 |                 <a href="https://github.com/ModdingLinked/The-Best-of-Times" title="GitHub">
149 |                     GitHub
150 |                 </a>
151 |             </p>
152 |         </div>
153 | 
154 |         <div class="card popup" id="donation">
155 |             <ul>
156 |                 <li>
157 |                     <a href="https://www.patreon.com/moddinglinked" target="_blank" rel="nofollow">Patreon</a>
158 |                 </li>
159 |                 <li>
160 |                     <a href="https://www.paypal.me/Ungeziefi" target="_blank" rel="nofollow">PayPal</a>
161 |                 </li>
162 |             </ul>
163 |         </div>
164 | 
165 |         <div class="content">
166 | 
167 |             <span id="FinishingNotes" class="section">
168 |                 <h2 onclick="location.href='#FinishingNotes'">Finishing Notes</h2>
169 | 
170 |                 <div class="card" id="RunningTheGame">
171 |                     <p>
172 |                     <h3>Running the Game</h3>
173 |                     Due to the way Mod Organizer 2 works, running programs through it is a requirement in order to load mods. This is done in the <strong>top-right corner</strong> of the manager, where the program to run is chosen. Here, <strong>select Tale of Two Wastelands</strong>.
174 |                     <br>
175 |                     <br>
176 |                     For the sake of convenience you may also <strong>create a shortcut</strong> (right below the <b>Run</b> button) so that you won't have to manually open MO2 each time before playing.
177 |                     <br>
178 |                     <div class="image-container">
179 |                         <img class="content-img" src="./img/Others/Start Game.webp" alt="Launching the game">
180 |                         <div class="resize-overlay expand"></div>
181 |                     </div>
182 |                     <br>
183 | 
184 |                     <div class="card-yellow">
185 |                         <p>
186 |                             <b>Q: Aren't you supposed to launch through NVSE?</b>
187 |                             <br>
188 |                             <br>
189 |                             A: The 4GB Patcher and the Epic Games Patcher both allow the game's main executable to automatically load the script extender.
190 |                             <br>
191 |                             <hr>
192 |                             Refer to the <a href="./faq.html" target="_blank">FAQ</a> section for more information and solutions to possible problems you might encounter at this stage of the guide.
193 |                         </p>
194 |                     </div>
195 | 
196 |                     <br>
197 |                     You have now completed The Best of Times. If you don't want to mod your game further, <strong>you can now start playing</strong>. Have fun!
198 |                     </p>
199 |                 </div>
200 | 
201 |                 <div class="card" id="MoreContent">
202 |                     <p>
203 |                     <h3>Want More?</h3>
204 |                     You may be interested in <a href="https://wastelandsurvivalguide.github.io/" target="_blank">Wasteland Survival Guide</a>, which offers a wider selection of mods leading to a completely different experience. Support for WSG provided in <a href="https://discord.gg/YVTYMV9dby" target="_blank">The Wasteland Supplemental Discord server</a>.
205 |                     <br>
206 |                     <br>
207 |                     Adding mods independently and without the help of a guide is only recommended after you have learned the required information and workflow. These range from general technicalities about the game, to solving conflicts with <a href="https://moddinglinked.com/xedit.html" target="_blank">xEdit</a> through <a href="https://moddinglinked.com/themethod.html" target="_blank">The Method</a>.
208 |                     <br>
209 |                     <br>
210 |                     You can find sources for all this information and more in the <a href="https://vivanewvegas.moddinglinked.com/resources.html" target="_blank">Resources</a> section of Viva New Vegas. You should also be aware of the <a href="https://vivanewvegas.moddinglinked.com/avoid-tools.html" target="_blank">Tools</a> and <a href="https://vivanewvegas.moddinglinked.com/avoid-mods.html" target="_blank">Mods to Avoid</a>.
211 | 
212 |                     <div class="card-yellow">
213 |                         <p>
214 |                             We may not provide support for setups that have added mods, especially if you went overboard!
215 |                         </p>
216 |                     </div>
217 | 
218 |                     </p>
219 |                 </div>
220 |             </span>
221 | 
222 |             <span id="Donations">
223 |                 <div class="flex donations-flex-row">
224 |                     <div class="flex donations-card-row">
225 |                         <div class="donations-card">
226 |                             <a href="https://www.patreon.com/moddinglinked" target="_blank" rel="nofollow" style="text-decoration: none; width: 100%;">
227 |                                 <div class="card-basic donations-card-basic patreon">
228 |                                     <img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/patreon.svg" alt="Patreon">
229 |                                     <h3>Patreon</h3>
230 |                                 </div>
231 |                             </a>
232 |                         </div>
233 |                         <div class="donations-card">
234 |                             <a href="https://www.paypal.me/Ungeziefi" target="_blank" rel="nofollow" style="text-decoration: none; width: 100%;">
235 |                                 <div class="card-basic donations-card-basic paypal">
236 |                                     <img src="https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/paypal.svg" alt="PayPal">
237 |                                     <h3>PayPal</h3>
238 |                                 </div>
239 |                             </a>
240 |                         </div>
241 |                     </div>
242 |                 </div>
243 |             </span>
244 | 
245 |             <div class="navigationArrowContainer">
246 |                 <a href="#" id="previous" rel="prev" class="navigationArrow">
247 |                     <img class="mirror" src="./img/UI/Arrow.svg" alt="Back Arrow">
248 |                     <span class="arrowText"></span>
249 |                 </a>
250 |             </div>
251 |         </div>
252 | 
253 |         <div class="sidebar right-sidebar">
254 |             <p id="sidebarContent">
255 |             </p>
256 |         </div>
257 |     </div>
258 | 
259 |     <footer>ModdingLinked 2025</footer>
260 | 
261 |     <div id="image-overlay" class="overlay" hidden>
262 |         <div class="image-container">
263 |             <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
264 |             <div class="resize-overlay shrink"></div>
265 |         </div>
266 |     </div>
267 | 
268 | </body>
269 | 
270 | </html>


--------------------------------------------------------------------------------
/img/Coco/Blockquote.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Coco/Blockquote.webp


--------------------------------------------------------------------------------
/img/Coco/Full 1 Extended.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Coco/Full 1 Extended.webp


--------------------------------------------------------------------------------
/img/Coco/Full 1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Coco/Full 1.webp


--------------------------------------------------------------------------------
/img/Coco/Full 2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Coco/Full 2.webp


--------------------------------------------------------------------------------
/img/Coco/Head Logo Alt 2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Coco/Head Logo Alt 2.webp


--------------------------------------------------------------------------------
/img/Coco/Head Logo Alt.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Coco/Head Logo Alt.webp


--------------------------------------------------------------------------------
/img/Coco/Head Logo Extended.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Coco/Head Logo Extended.webp


--------------------------------------------------------------------------------
/img/Coco/Head Logo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Coco/Head Logo.webp


--------------------------------------------------------------------------------
/img/Coco/Head.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Coco/Head.webp


--------------------------------------------------------------------------------
/img/MO2/Connect.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Connect.webp


--------------------------------------------------------------------------------
/img/MO2/Executables.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Executables.webp


--------------------------------------------------------------------------------
/img/MO2/Folders.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Folders.webp


--------------------------------------------------------------------------------
/img/MO2/Install Archive.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Install Archive.webp


--------------------------------------------------------------------------------
/img/MO2/Install Path.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Install Path.webp


--------------------------------------------------------------------------------
/img/MO2/Instance.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Instance.webp


--------------------------------------------------------------------------------
/img/MO2/Profile Settings.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Profile Settings.webp


--------------------------------------------------------------------------------
/img/MO2/Settings.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Settings.webp


--------------------------------------------------------------------------------
/img/MO2/Start Menu.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Start Menu.webp


--------------------------------------------------------------------------------
/img/MO2/Tools.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/MO2/Tools.webp


--------------------------------------------------------------------------------
/img/Others/Background.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Background.webp


--------------------------------------------------------------------------------
/img/Others/Card.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Card.webp


--------------------------------------------------------------------------------
/img/Others/CardFO3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/CardFO3.webp


--------------------------------------------------------------------------------
/img/Others/Download Example.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Download Example.webp


--------------------------------------------------------------------------------
/img/Others/Dynamic Backgrounds/0.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Dynamic Backgrounds/0.webp


--------------------------------------------------------------------------------
/img/Others/Dynamic Backgrounds/12.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Dynamic Backgrounds/12.webp


--------------------------------------------------------------------------------
/img/Others/Dynamic Backgrounds/17.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Dynamic Backgrounds/17.webp


--------------------------------------------------------------------------------
/img/Others/Dynamic Backgrounds/20.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Dynamic Backgrounds/20.webp


--------------------------------------------------------------------------------
/img/Others/Dynamic Backgrounds/23.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Dynamic Backgrounds/23.webp


--------------------------------------------------------------------------------
/img/Others/Dynamic Backgrounds/7.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Dynamic Backgrounds/7.webp


--------------------------------------------------------------------------------
/img/Others/Dynamic Backgrounds/9.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Dynamic Backgrounds/9.webp


--------------------------------------------------------------------------------
/img/Others/File Extensions.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/File Extensions.webp


--------------------------------------------------------------------------------
/img/Others/Install TTW.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Install TTW.webp


--------------------------------------------------------------------------------
/img/Others/Root Folder.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Root Folder.webp


--------------------------------------------------------------------------------
/img/Others/Start Game.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Start Game.webp


--------------------------------------------------------------------------------
/img/Others/Start Launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Start Launcher.webp


--------------------------------------------------------------------------------
/img/Others/Steam Library Tool Setup.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Steam Library Tool Setup.webp


--------------------------------------------------------------------------------
/img/Others/Steam Location Pick.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ModdingLinked/The-Best-of-Times/bdce21fa9fab3bf6479d6c6682eca3f025afd715/img/Others/Steam Location Pick.webp


--------------------------------------------------------------------------------
/img/UI/Arrow.svg:
--------------------------------------------------------------------------------
 1 | <!-- MIT License
 2 | 
 3 | Copyright (c) 2020 Microsoft Corporation
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
21 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.704 12-8.492-8.727a.75.75 0 1 1 1.075-1.046l9 9.25a.75.75 0 0 1 0 1.046l-9 9.25a.75.75 0 1 1-1.075-1.046L19.705 12Z" fill="#FFFFFF"/></svg>


--------------------------------------------------------------------------------
/img/UI/Chevron Down.svg:
--------------------------------------------------------------------------------
 1 | <!-- MIT License
 2 | 
 3 | Copyright (c) 2020 Microsoft Corporation
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
21 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414Z" fill="#FFFFFF"/></svg>


--------------------------------------------------------------------------------
/img/UI/Download.svg:
--------------------------------------------------------------------------------
 1 | <!-- MIT License
 2 | 
 3 | Copyright (c) 2020 Microsoft Corporation
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
21 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.25 20.5h13.498a.75.75 0 0 1 .101 1.493l-.101.007H5.25a.75.75 0 0 1-.102-1.494l.102-.006h13.498H5.25Zm6.633-18.498L12 1.995a1 1 0 0 1 .993.883l.007.117v12.59l3.294-3.293a1 1 0 0 1 1.32-.083l.094.084a1 1 0 0 1 .083 1.32l-.083.094-4.997 4.996a1 1 0 0 1-1.32.084l-.094-.083-5.004-4.997a1 1 0 0 1 1.32-1.498l.094.083L11 15.58V2.995a1 1 0 0 1 .883-.993L12 1.995l-.117.007Z" fill="#FFFFFF"/></svg>


--------------------------------------------------------------------------------
/img/UI/Maximize.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.748 3.001h7.554l.1.014.099.028.061.026a.72.72 0 0 1 .218.15l.04.044.061.082.037.065.039.09.02.064.013.064.009.093v7.534a.75.75 0 0 1-1.493.102l-.006-.102-.001-5.696-13.94 13.945h5.69a.75.75 0 0 1 .744.65l.007.1a.75.75 0 0 1-.649.744l-.101.007H3.714L3.684 21a.705.705 0 0 1-.187-.04l-.09-.038-.018-.01a.746.746 0 0 1-.384-.553l-.007-.105V12.75a.75.75 0 0 1 1.493-.102l.007.102v5.692L18.438 4.5l-5.69.001a.75.75 0 0 1-.743-.648l-.007-.102a.75.75 0 0 1 .648-.743L12.748 3Z" fill="#FFFFFF"/></svg>


--------------------------------------------------------------------------------
/img/UI/Minimize.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.778 2.223a.75.75 0 0 1 .072.976l-.072.084-6.223 6.224h5.693a.75.75 0 0 1 .743.65l.007.1a.75.75 0 0 1-.649.744l-.101.007-7.55-.002-.016-.002a.727.727 0 0 1-.195-.042l-.098-.046a.747.747 0 0 1-.386-.553l-.007-.105V2.754a.75.75 0 0 1 1.493-.102l.007.102v5.69l6.222-6.221a.749.749 0 0 1 1.06 0ZM11.003 13.755v7.504a.75.75 0 0 1-1.494.102l-.007-.102v-5.695L3.28 21.78a.75.75 0 0 1-1.133-.977l.073-.084 6.22-6.214H2.751a.75.75 0 0 1-.743-.648L2 13.755a.75.75 0 0 1 .75-.75l7.554.002.074.009.097.023.053.019.086.04.089.058a.761.761 0 0 1 .148.148l.066.106.041.094.022.07.01.055.007.058v-.008l.005.076Z" fill="#FFFFFF"/></svg>


--------------------------------------------------------------------------------
/img/UI/Navigation.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.753 18h18.5a.75.75 0 0 1 .102 1.493l-.102.007h-18.5a.75.75 0 0 1-.102-1.493L2.753 18h18.5-18.5Zm0-6.497h18.5a.75.75 0 0 1 .102 1.493l-.102.007h-18.5a.75.75 0 0 1-.102-1.493l.102-.007h18.5-18.5Zm-.001-6.5h18.5a.75.75 0 0 1 .102 1.493l-.102.007h-18.5A.75.75 0 0 1 2.65 5.01l.102-.007h18.5-18.5Z" fill="#FFFFFF"/></svg>


--------------------------------------------------------------------------------
/img/UI/Open.svg:
--------------------------------------------------------------------------------
 1 | <!-- MIT License
 2 | 
 3 | Copyright (c) 2020 Microsoft Corporation
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
21 | <svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.25 4.5A1.75 1.75 0 0 0 4.5 6.25v11.5c0 .966.783 1.75 1.75 1.75h11.5a1.75 1.75 0 0 0 1.75-1.75v-4a.75.75 0 0 1 1.5 0v4A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75V6.25A3.25 3.25 0 0 1 6.25 3h4a.75.75 0 0 1 0 1.5h-4ZM13 3.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 .75.75v6.5a.75.75 0 0 1-1.5 0V5.56l-5.22 5.22a.75.75 0 0 1-1.06-1.06l5.22-5.22h-4.69a.75.75 0 0 1-.75-.75Z" fill="#FFFFFF"/></svg>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <link rel="icon" href="img/Coco/Head Logo.webp">
  9 | 
 10 |     <title>The Best of Times</title>
 11 | 
 12 |     <meta name="keywords" content="
 13 |     Mod, Modding, Mods, Guide, Mod Guide, Modding Guide, Resource, Resources,
 14 |     Stable, Stability, Performance, Fix, Fixes, FPS,
 15 |     Fast, Easy, Beginner,
 16 |     Nexus, Nexus Mods, NexusMods,
 17 |     Wabbajack, WJ, Installer,
 18 |     Mod Manager, Mod Organizer, MO2,
 19 |     Fallout, The Elder Scrolls, Bethesda, Bethesda Game Studios, BGS,
 20 |     Fallout New Vegas, Fallout NV, New Vegas, FNV, 
 21 |     Fallout 4, FO4,
 22 |     Tale of Two Wastelands, TTW,
 23 |     Skyrim Special Edition, Skyrim SE, SSE">
 24 | 
 25 |     <meta name="description" content="The official installation guide for Tale of Two Wastelands.">
 26 |     <meta http-equiv='content-language' content='en-us'>
 27 |     <meta name="twitter:card" value="summary_large_image">
 28 |     <meta property="og:site_name" content="ModdingLinked">
 29 |     <meta property="og:title" content="The Best of Times">
 30 |     <meta property="og:type" content="article">
 31 |     <meta property="og:url" content="https://thebestoftimes.moddinglinked.com">
 32 |     <meta property="og:image" content="https://thebestoftimes.moddinglinked.com/img/Others/Card.webp">
 33 |     <meta property="og:description" content="The official installation guide for Tale of Two Wastelands.">
 34 | 
 35 |     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#202524">
 36 |     <meta name="darkreader-lock">
 37 |     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
 38 |     <meta http-equiv='expires' content='0'>
 39 |     <meta http-equiv='pragma' content='no-cache'>
 40 |     <meta http-equiv='clear-site-data' content='cache'>
 41 | 
 42 |     <script src="js/popup.js"></script>
 43 |     <script src="js/javascript.js"></script>
 44 |     <script src="js/responsiveTitle.js"></script>
 45 | 
 46 |     <link rel="stylesheet" href="css/styles.css">
 47 |     <link rel="stylesheet" href="css/cards.css">
 48 |     <link rel="stylesheet" href="css/header.css">
 49 |     <link rel="stylesheet" href="css/guideColors.css">
 50 |     <link rel="stylesheet" href="css/sidebar.css">
 51 |     <link rel="stylesheet" href="css/popup.css">
 52 |     <link rel="stylesheet" href="css/images.css">
 53 |     <link rel="stylesheet" href="css/frontPage.css">
 54 | </head>
 55 | 
 56 | <script>
 57 |     window.addEventListener('load', setBackgroundByTime);
 58 | 
 59 |     function setBackgroundByTime() {
 60 |         const date = new Date();
 61 |         const hour = date.getHours();
 62 | 
 63 |         // set the background image based on the current time
 64 |         if (hour >= 0 && hour < 7) {
 65 |             document.body.style.backgroundImage = "url('./img/Others/Dynamic Backgrounds/0.webp')";
 66 |         } else if (hour >= 7 && hour < 9) {
 67 |             document.body.style.backgroundImage = "url('./img/Others/Dynamic Backgrounds/7.webp')";
 68 |         } else if (hour >= 9 && hour < 12) {
 69 |             document.body.style.backgroundImage = "url('./img/Others/Dynamic Backgrounds/9.webp')";
 70 |         } else if (hour >= 12 && hour < 17) {
 71 |             document.body.style.backgroundImage = "url('./img/Others/Dynamic Backgrounds/12.webp')";
 72 |         } else if (hour >= 17 && hour < 20) {
 73 |             document.body.style.backgroundImage = "url('./img/Others/Dynamic Backgrounds/17.webp')";
 74 |         } else if (hour >= 20 && hour < 23) {
 75 |             document.body.style.backgroundImage = "url('./img/Others/Dynamic Backgrounds/20.webp')";
 76 |         } else {
 77 |             document.body.style.backgroundImage = "url('./img/Others/Dynamic Backgrounds/23.webp')";
 78 |         }
 79 |     }
 80 | 
 81 | </script>
 82 | 
 83 | <body class="theme">
 84 |     <div style="overflow:auto">
 85 |         <div class="header">
 86 |             <div class="headerTitle">
 87 |                 <img src="./img/Coco/Head Logo.webp" alt="Logo" id="logo">
 88 |                 <a href="./index.html" id="headerTitle">The Best of Times</a>
 89 |             </div>
 90 |             <div class="guideLinks" id="headerLinks">
 91 |                 <a href="https://vivanewvegas.moddinglinked.com" target="_blank" rel="nofollow">Fallout: New Vegas</a>
 92 |                 <a href="https://themidnightride.moddinglinked.com" target="_blank" rel="nofollow">Fallout 4</a>
 93 |                 <a href="https://dragonbornsfate.moddinglinked.com" target="_blank" rel="nofollow">Skyrim SE</a>
 94 |             </div>
 95 |         </div>
 96 |     </div>
 97 | 
 98 |     <div id="backdrop" class="welcomeContent">
 99 |         <div class="titleContainer">
100 |             <img src="img/Coco/Full 1.webp" alt="Background Image" class="backgroundImage">
101 |             <h1 id="title">Welcome to <br>The Best of Times!</h1>
102 |         </div>
103 |         <div class="buttonContainer">
104 |             <div class="buttonWrapper">
105 |                 <a id="next" class="welcomeButton" href="./intro.html"><strong>Text Guide</strong></a>
106 |                 <span class="buttonText">&#8203;</span>
107 |             </div>
108 |             <div class="buttonWrapper">
109 |                 <a class="welcomeButtonYT" href="https://youtu.be/Esxj5NeXIsY"><strong>Video Guide</strong></a>
110 |                 <span class="buttonText">&#8203;</span>
111 |             </div>
112 |         </div>
113 |     </div>
114 | </body>
115 | 
116 | </html>


--------------------------------------------------------------------------------
/intro.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <link rel="icon" href="img/Coco/Head Logo.webp">
  9 | 
 10 |     <title>Introduction | The Best of Times</title>
 11 | 
 12 |     <meta name="keywords" content="
 13 |     Mod, Modding, Mods, Guide, Mod Guide, Modding Guide, Resource, Resources,
 14 |     Stable, Stability, Performance, Fix, Fixes, FPS,
 15 |     Fast, Easy, Beginner,
 16 |     Nexus, Nexus Mods, NexusMods,
 17 |     Wabbajack, WJ, Installer,
 18 |     Mod Manager, Mod Organizer, MO2,
 19 |     Fallout, The Elder Scrolls, Bethesda, Bethesda Game Studios, BGS,
 20 |     Fallout New Vegas, Fallout NV, New Vegas, FNV, 
 21 |     Fallout 4, FO4,
 22 |     Tale of Two Wastelands, TTW,
 23 |     Skyrim Special Edition, Skyrim SE, SSE">
 24 | 
 25 |     <meta name="description" content="Preamble about the guide's goals and requirements.">
 26 |     <meta http-equiv='content-language' content='en-us'>
 27 |     <meta name="twitter:card" value="summary_large_image">
 28 |     <meta property="og:site_name" content="ModdingLinked">
 29 |     <meta property="og:title" content="The Best of Times">
 30 |     <meta property="og:type" content="article">
 31 |     <meta property="og:url" content="https://thebestoftimes.moddinglinked.com">
 32 |     <meta property="og:image" content="https://thebestoftimes.moddinglinked.com/img/Others/Card.webp">
 33 |     <meta property="og:description" content="Preamble about the guide's goals and requirements.">
 34 | 
 35 |     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#202524">
 36 |     <meta name="darkreader-lock">
 37 |     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
 38 |     <meta http-equiv='expires' content='0'>
 39 |     <meta http-equiv='pragma' content='no-cache'>
 40 |     <meta http-equiv='clear-site-data' content='cache'>
 41 | 
 42 |     <script src="js/popup.js"></script>
 43 |     <script src="js/javascript.js"></script>
 44 |     <script src="js/responsiveTitle.js"></script>
 45 | 
 46 |     <link rel="stylesheet" href="css/styles.css">
 47 |     <link rel="stylesheet" href="css/cards.css">
 48 |     <link rel="stylesheet" href="css/header.css">
 49 |     <link rel="stylesheet" href="css/navigationArrows.css">
 50 |     <link rel="stylesheet" href="css/coco.css">
 51 |     <link rel="stylesheet" href="css/progressBar.css">
 52 |     <link rel="stylesheet" href="css/guideColors.css">
 53 |     <link rel="stylesheet" href="css/sidebar.css">
 54 |     <link rel="stylesheet" href="css/popup.css">
 55 |     <link rel="stylesheet" href="css/images.css">
 56 | </head>
 57 | 
 58 | 
 59 | <body class="theme">
 60 |     <div class="progress-container">
 61 |         <div class="progress-bar"></div>
 62 |     </div>
 63 | 
 64 |     <div class="container">
 65 |         <div class="header">
 66 |             <div class="headerMenu" onclick="toggleNav()">
 67 |                 <img src="./img/UI/Navigation.svg" id="navButton">
 68 |             </div>
 69 |             <div class="headerTitle">
 70 |                 <img src="./img/Coco/Head Logo.webp" alt="Logo" id="logo">
 71 |                 <a href="./index.html" id="headerTitle">The Best of Times</a>
 72 |             </div>
 73 |             <div class="guideLinks" id="headerLinks">
 74 |                 <a href="https://vivanewvegas.moddinglinked.com" target="_blank" rel="nofollow">Fallout: New Vegas</a>
 75 |                 <a href="https://themidnightride.moddinglinked.com" target="_blank" rel="nofollow">Fallout 4</a>
 76 |                 <a href="https://dragonbornsfate.moddinglinked.com" target="_blank" rel="nofollow">Skyrim SE</a>
 77 |             </div>
 78 |         </div>
 79 |         <div class="sidebar left-sidebar">
 80 |             <p class="pageLinks">
 81 |                 <a href="./index.html" title="Home">
 82 |                     Home
 83 |                 </a>
 84 | 
 85 |                 <a href="./intro.html" title="Introduction">
 86 |                     Introduction
 87 |                 </a>
 88 | 
 89 |                 <a href="./setup.html" title="Setup">
 90 |                     Setup
 91 |                 </a>
 92 | 
 93 |                 <a href="./mo2.html" title="MO2">
 94 |                     Mod Organizer 2
 95 |                 </a>
 96 | 
 97 |                 <a href="./ttw.html" title="TTW">
 98 |                     Tale of Two Wastelands
 99 |                 </a>
100 | 
101 |                 <a href="./essentials.html" title="Essential Mods">
102 |                     Essential Mods
103 |                 </a>
104 | 
105 |                 <a href="./finish.html" title="Final Steps">
106 |                     Final Steps
107 |                 </a>
108 |             </p>
109 |             <hr>
110 |             <p>
111 |                 <a href="./changelog.html" title="TBoT Changelog">
112 |                     TBoT Changelog
113 |                 </a>
114 | 
115 |                 <a href="./files/TTW Changelog.7z" target="_blank" title="TTW Changelog">
116 |                     TTW Changelog
117 |                 </a>
118 | 
119 |                 <a href="https://vivanewvegas.moddinglinked.com/resources.html" target="_blank" title="Resources">
120 |                     Resources
121 |                 </a>
122 | 
123 |                 <a href="./faq.html" title="FAQ">
124 |                     FAQ
125 |                 </a>
126 | 
127 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-tools.html" target="_blank" title="Tools to Avoid">
128 |                     Tools to Avoid
129 |                 </a>
130 | 
131 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-mods.html" target="_blank" title="Mods to Avoid">
132 |                     Mods to Avoid
133 |                 </a>
134 | 
135 |                 <a href="./fo3.html" title="FO3 Mod Guide">
136 |                     FO3 Mod Guide
137 |                 </a>
138 |             </p>
139 |             <p class="sidebar-padder"></p>
140 |             <hr>
141 |             <p class="sidebar-bottom">
142 |                 <a href="https://discord.gg/S99Ary5eba" title="Discord">
143 |                     Discord
144 |                 </a>
145 |                 <a title="Donate" class="popup-button" id="donation-button" onclick="openPopup(this, donation)">
146 |                     Donate
147 |                 </a>
148 |                 <a href="https://github.com/ModdingLinked/The-Best-of-Times" title="GitHub">
149 |                     GitHub
150 |                 </a>
151 |             </p>
152 |         </div>
153 | 
154 |         <div class="card popup" id="donation">
155 |             <ul>
156 |                 <li>
157 |                     <a href="https://www.patreon.com/moddinglinked" target="_blank" rel="nofollow">Patreon</a>
158 |                 </li>
159 |                 <li>
160 |                     <a href="https://www.paypal.me/Ungeziefi" target="_blank" rel="nofollow">PayPal</a>
161 |                 </li>
162 |             </ul>
163 |         </div>
164 | 
165 |         <div class="content">
166 | 
167 |             <span id="Introduction" class="section">
168 | 
169 |                 <div class="card-red center important-notice">
170 |                     <p>
171 |                         <img src="./img/Coco/Blockquote.webp" alt="Coco blockquote" class="cocoNerd">
172 |                     <div>
173 |                         <b>IMPORTANT</b>:
174 |                         <br>
175 |                         Everything in this guide is written down for a reason! It is vital to read <b>everything!</b>
176 |                         <br>
177 |                         You can <b>NOT</b> skip any paragraphs/instructions and expect your game to function as it should.
178 |                     </div>
179 |                     </p>
180 |                 </div>
181 | 
182 |                 <h2 onclick="location.href='#Introduction'">Introduction</h2>
183 |                 <div class="card flex logo-container" id="Overview">
184 |                     <div>
185 |                         <p>
186 |                         <h3>Overview</h3>
187 |                         </p>
188 |                         <p>
189 |                             This guide will instruct you on how to properly install Tale of Two Wastelands - a total conversion mod for Fallout: New Vegas that merges the games of Fallout 3 and New Vegas together!
190 |                             <br>
191 |                             <br>
192 |                             All essential mods required for performance and stability will also be installed.
193 |                         </p>
194 |                         <p>
195 |                             The guide is <strong>highly accessible to everyone</strong>, no matter your modding experience. It is expected for you to be relatively experienced with operating a computer in general.
196 |                             <br>
197 |                             <br>
198 |                             As there are many small instructions that are vital for your game to function, it is incredibly important that you read all the instructions very carefully, even if you believe you are experienced enough to skip them.
199 |                             <br>
200 |                         </p>
201 |                     </div>
202 | 
203 |                     <div>
204 |                         <img src="img/Coco/Full 2.webp" alt="Logo of Coco - a dog mascot of ModdingLinked">
205 |                     </div>
206 | 
207 |                 </div>
208 | 
209 |                 <div class="card" id="Requirements">
210 |                     <p>
211 |                     <h3 onclick="location.href='#Requirements'">Requirements</h3>
212 |                     <ul>
213 |                         <li><strong>English</strong> copies of both Fallout 3 and Fallout: New Vegas with <strong>all DLCs</strong> on either Steam, GOG, or the Epic Games Store.
214 |                             <ul>
215 |                                 <li>You may "mix and match" Steam, GOG, and Epic Games versions of the 2 games.</li>
216 |                                 <li>Only the English version of the game is supported for maximum compatibility - translations can conflict with mods and cause issues.</li>
217 |                                 <li>The Microsoft Store versions are not supported.</li>
218 |                                 <li>The Polish-Czech-Russian (PCR) version of Fallout: New Vegas is fully supported as long as the game itself is in English.</li>
219 |                                 <li>The German release uses a "No Gore" version, making it also incompatible with xNVSE. If you have it on Steam, you can use <a href="https://github.com/SteamRE/DepotDownloader" target="_blank">DepotDownloader</a> to download the international EXE.</li>
220 |                                 <li>The Games for Windows Live version of Fallout 3 is supported as long as it's the GOTY and in English.</li>
221 |                             </ul>
222 |                         </li>
223 | 
224 |                         <li>At least 40GB of free drive space, both games included. Tale of Two Wastelands itself is 17GB.</li>
225 |                         <li>Windows 10 or higher (64-bit).</li>
226 | 
227 |                         <div class="card-red">
228 |                             <p>
229 |                                 Windows installations deviating from the public release (e.g. <strong>customized or LTSC</strong>) are not supported by us. We can refuse to provide help in such cases.
230 |                                 <br>
231 |                                 This is because they don't guarantee the default functionality expected from the public release, which can cause <strong>unforeseen issues</strong>.
232 |                             </p>
233 |                         </div>
234 | 
235 |                         <li>A text editor (<a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a> is recommended, but the default Windows notepad will work).</li>
236 |                         <li>An archiving tool (<a href="https://apps.microsoft.com/store/detail/nanazip/9N8G7TSCL18R?hl=en-us&gl=us" target="_blank">NanaZip</a> is recommended).</li>
237 |                         <li>The latest GPU drivers (either <a href="https://www.nvidia.com/Download/index.aspx" target="_blank">Nvidia</a>, <a href="https://www.amd.com/en/support" target="_blank">AMD</a> or <a href="https://www.intel.com/content/www/us/en/search.html#q=&sort=relevancy&f:@tabfilter=[Downloads]&f:@stm_10385_en=[Graphics]" target="_blank">Intel</a>).</li>
238 |                         <li>A <a href="https://users.nexusmods.com/register" target="_blank">Nexus Mods</a> account (a Premium subscription will allow uncapped download speeds).</li>
239 |                         <li>A <a href="https://mod.pub/account/register" target="_blank">MOD:PUB</a> account.</li>
240 |                     </ul>
241 |                     </p>
242 |                 </div>
243 |                 <div class="card" id="RecommendedSpecs">
244 |                     <p>
245 |                     <h3 onclick="location.href='#RecommendedSpecs'">Recommended Specs</h3>
246 |                     The guide will make the game run better than vanilla. The game is much more CPU-intensive than GPU-intensive, and actually scales with modern hardware pretty well. Installing the game on an SSD will drastically improve loading times and decrease stuttering.
247 |                     <br><br>
248 |                     Here are the recommended minimum specifications to run TBoT at <strong>60 FPS 1080p</strong> with all the recommended mods and settings:
249 |                     <ul>
250 |                         <li><b>CPU</b>: Any quad-core processor (2.5GHz or more).</li>
251 |                         <li><b>RAM</b>: 8GB or more.</li>
252 |                         <li><b>GPU</b>: Matching or surpassing the performance of Nvidia's 600 series or AMD's 5500 series.</li>
253 |                     </ul>
254 |                     </p>
255 |                 </div>
256 |             </span>
257 | 
258 |             <div class="navigationArrowContainer">
259 |                 <a href="#" id="previous" rel="prev" class="navigationArrow">
260 |                     <img class="mirror" src="./img/UI/Arrow.svg" alt="Back Arrow">
261 |                     <span class="arrowText"></span>
262 |                 </a>
263 | 
264 |                 <a href="#" id="next" rel="next" class="navigationArrow">
265 |                     <span class="arrowText"></span>
266 |                     <img src="./img/UI/Arrow.svg" alt="Forward Arrow">
267 |                 </a>
268 |             </div>
269 |         </div>
270 | 
271 |         <div class="sidebar right-sidebar">
272 |             <p id="sidebarContent">
273 |             </p>
274 |         </div>
275 |     </div>
276 | 
277 |     <footer>ModdingLinked 2025</footer>
278 | </body>
279 | 
280 | </html>


--------------------------------------------------------------------------------
/js/imageViewer.js:
--------------------------------------------------------------------------------
 1 | // Image overlay
 2 | 
 3 | document.addEventListener('DOMContentLoaded', function () {
 4 |     createImageHandlers();
 5 | });
 6 | 
 7 | function createImageHandlers() {
 8 |     const imageOverlay  = document.getElementById('image-overlay');
 9 |     const enlargedImage = document.getElementById('enlarged-image');
10 |     if (!enlargedImage || !imageOverlay)
11 |         return;
12 | 
13 |     const images = document.querySelectorAll('.content-img');
14 | 
15 |     if (!images)
16 |         return;
17 | 
18 |     images.forEach(image => {
19 |         image.addEventListener('click', function () {
20 |             imageOverlay.style.display = "flex";
21 |             enlargedImage.src = this.src;
22 |         });
23 |     });
24 | 
25 |     imageOverlay.addEventListener('click', function () {
26 |         imageOverlay.style.display = "none";
27 |         enlargedImage.src = '';
28 |     });
29 | }


--------------------------------------------------------------------------------
/js/javascript.js:
--------------------------------------------------------------------------------
  1 | var menuIsOpen = false;
  2 | 
  3 | // Global variables
  4 | const progressBars = document.getElementsByClassName("progress-bar");
  5 | const sections = document.getElementsByClassName("section");
  6 | const sidebars = document.getElementsByClassName("sidebar");
  7 | const leftSideBar = document.getElementsByClassName("left-sidebar");
  8 | const autoSizeAreas = document.querySelectorAll('.auto-resize');
  9 | 
 10 | window.addEventListener('resize', sizeChanged);
 11 | document.addEventListener('DOMContentLoaded', function () {
 12 |     updateProgressBarAndFadeIn();
 13 |     createRightSidebar();
 14 |     markActivePage();
 15 |     resizeAllTextAreas();
 16 |     setupExpanders();
 17 | });
 18 | window.onscroll = updateProgressBarAndFadeIn;
 19 | 
 20 | document.addEventListener('keydown', (e) => {
 21 |     if (e.code === "ArrowRight") {
 22 |         window.open(document.getElementById("next").href, "_self")
 23 |     }
 24 |     else if (e.code === "ArrowLeft") {
 25 |         window.open(document.getElementById("previous").href, "_self")
 26 |     }
 27 | });
 28 | 
 29 | function sizeChanged() {
 30 |     if (leftSideBar && leftSideBar.length > 0) {
 31 |         if (document.documentElement.clientWidth > 760) {
 32 |             leftSideBar[0].style.width = "";
 33 |         }
 34 |     }
 35 | 
 36 |     resizeAllTextAreas();
 37 | }
 38 | 
 39 | function toggleNav() {
 40 |     const sidebar = document.querySelector('.left-sidebar');
 41 |     sidebar.classList.toggle('expanded');
 42 | }
 43 | 
 44 | function fadeOut(element) {
 45 |     element.style.opacity = "0%";
 46 | }
 47 | 
 48 | function rotate(element, rotation = 180) {
 49 |     element.style.transform = 'rotatex(' + rotation + 'deg)';
 50 | }
 51 | 
 52 | function setupExpanders() {
 53 |     const expanders = document.querySelectorAll('.expander-top');
 54 | 
 55 |     expanders.forEach((expander, index) => {
 56 |         // Remove any existing ID
 57 |         const oldId = expander.id;
 58 |         const contentId = oldId ?
 59 |             document.getElementById(oldId + 'expander') :
 60 |             expander.nextElementSibling;
 61 | 
 62 |         // Set new consistent IDs
 63 |         const newId = 'expander-' + index;
 64 |         expander.id = newId;
 65 | 
 66 |         if (contentId && contentId.classList.contains('expander-bottom')) {
 67 |             contentId.id = newId + '-content';
 68 | 
 69 |             // Update onclick handler
 70 |             expander.setAttribute('onclick', `expandCard(this, document.getElementById('${newId}-content'))`);
 71 | 
 72 |             // Make sure it has the clickable class
 73 |             if (!expander.classList.contains('clickable')) {
 74 |                 expander.classList.add('clickable');
 75 |             }
 76 |         }
 77 |     });
 78 | }
 79 | 
 80 | function expandCard(thisObj, $open, $dontReset) {
 81 |     const chevron = thisObj.getElementsByClassName("chevron")[0]
 82 |     if ($open.classList.contains('expander-opened') && !$dontReset) {
 83 |         rotate(chevron, 0)
 84 |         $open.classList.remove('expander-opened');
 85 |         setTimeout(() => $open.style.display = "none", 400);
 86 |         thisObj.classList.remove('active');
 87 |     }
 88 |     else {
 89 |         $open.classList.add('expander-opened');
 90 |         rotate(chevron, 180);
 91 |         $open.style.display = "block";
 92 |         thisObj.classList.add('active');
 93 | 
 94 |         const textareas = $open.querySelectorAll('.auto-resize');
 95 |         if (textareas) {
 96 |             for (var i = 0; i < textareas.length; i++) {
 97 |                 autoResize(textareas[i]);
 98 |             }
 99 |         }
100 |     }
101 | }
102 | 
103 | function resizeAllTextAreas() {
104 |     if (autoSizeAreas && autoSizeAreas.length > 0) {
105 |         for (var i = 0; i < autoSizeAreas.length; i++) {
106 |             autoResize(autoSizeAreas[i]);
107 |         }
108 |     }
109 | }
110 | 
111 | function autoResize(textarea) {
112 |     textarea.style.height = 'auto';
113 |     textarea.style.height = textarea.scrollHeight + 'px';
114 | }
115 | 
116 | function emToPixels(em) {
117 |     const baseFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
118 |     return em * baseFontSize;
119 | }
120 | 
121 | function updateProgressBarAndFadeIn() {
122 |     var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
123 |     var height = window.innerHeight;
124 | 
125 |     if (sections) {
126 |         for (var i = 0; i < sections.length; i++) {
127 |             var sectionTop = sections[i].getBoundingClientRect().top;
128 |             var sectionHeight = sections[i].clientHeight;
129 | 
130 |             if (sectionTop < height && sectionTop + sectionHeight > 0) {
131 |                 sections[i].classList.add("fade-in");
132 |             }
133 |         }
134 |     }
135 | 
136 |     var progressBar = progressBars[0];
137 |     if (progressBar) {
138 |         height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
139 |         var scroll = (winScroll / height);
140 |         var bottomMargin = (height - 25) / height;
141 |         progressBar.style.width = scroll * 100 + "%";
142 |     }
143 | 
144 | 
145 |     if (sidebars) {
146 |         var styleVal = "calc(100vh - 6.25em)";
147 | 
148 |         if (document.documentElement.clientHeight > 900 && scroll > bottomMargin) {
149 |             styleVal = "calc(100vh - 8.5em)";
150 |         }
151 | 
152 |         for (var i = 0; i < sidebars.length; i++) {
153 |             sidebars[i].style.height = styleVal;
154 |         }
155 |     }
156 | }
157 | 
158 | function createRightSidebar() {
159 |     const content = document.getElementsByClassName('content')[0];
160 |     const sidebar = document.getElementById('sidebarContent');
161 |     if (!content || !sidebar) return;
162 | 
163 |     const sections = content.getElementsByClassName('section');
164 |     if (!sections.length) return;
165 | 
166 |     // Create fragment for batch updates (better performance)
167 |     const fragment = document.createDocumentFragment();
168 | 
169 |     for (const section of sections) {
170 |         // Get section elements (both cards and expanders)
171 |         const elements = [...section.children].filter(el =>
172 |             (el.classList.contains('card') || el.classList.contains('expander-top')) &&
173 |             el.parentNode === section
174 |         ).sort((a, b) =>
175 |             a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
176 |         );
177 | 
178 |         // Process headers within section
179 |         section.querySelectorAll('h2').forEach(header => {
180 |             if (!header.innerHTML) return;
181 | 
182 |             const div = document.createElement('div');
183 | 
184 |             // Create header link
185 |             const b = document.createElement('b');
186 |             b.innerHTML = `<a href="#${section.id}">${header.innerHTML}</a>`;
187 |             div.appendChild(b);
188 | 
189 |             // Add all elements for this section
190 |             elements.forEach(element => {
191 |                 const text = element.getAttribute('title') ||
192 |                     element.id.replace(/([A-Z])/g, ' $1').trim();
193 | 
194 |                 if (!text) return;
195 | 
196 |                 const a = document.createElement('a');
197 |                 a.href = `#${element.id}`;
198 |                 a.textContent = text;
199 |                 div.appendChild(a);
200 |             });
201 | 
202 |             fragment.appendChild(div);
203 |         });
204 |     }
205 | 
206 |     sidebar.appendChild(fragment);
207 | }
208 | 
209 | function markActivePage() {
210 |     const leftSidebar = document.querySelector(".sidebar.left-sidebar");
211 | 
212 |     if (!leftSidebar)
213 |         return;
214 | 
215 |     const sidebarLinks = leftSidebar.querySelectorAll(".sidebar a");
216 | 
217 |     if (!sidebarLinks)
218 |         return;
219 | 
220 |     const currentPage = "./" + window.location.pathname.split("/").pop();
221 | 
222 |     let currentIndex = -1;
223 | 
224 |     // Loop through the links to find the current page index
225 |     sidebarLinks.forEach((link, index) => {
226 |         const linkPage = link.getAttribute("href");
227 | 
228 |         if (linkPage === currentPage) {
229 |             link.classList.add("active");
230 |             currentIndex = index;
231 | 
232 |             if (link.classList.contains("sublink")) {
233 |                 link.setAttribute('style', 'display:flex !important');
234 |             }
235 |         }
236 |     });
237 | 
238 |     const allowedPageLinks = leftSidebar.querySelectorAll(".pageLinks");
239 |     if (allowedPageLinks) {
240 |         let linkCount = 0;
241 | 
242 |         for (let i = 0; i < allowedPageLinks.length; i++) {
243 |             linkCount += allowedPageLinks[i].children.length;
244 |         }
245 | 
246 |         if (currentIndex > linkCount - 1)
247 |             currentIndex = -1;
248 | 
249 |         createPageArrows(currentIndex);
250 |     }
251 | }
252 | 
253 | function createPageArrows(currentIndex) {
254 |     const linkSections = document.querySelectorAll(".pageLinks");
255 | 
256 |     if (!linkSections)
257 |         return;
258 | 
259 |     const prevLink = document.getElementById("previous");
260 |     const nextLink = document.getElementById("next");
261 | 
262 |     let sidebarLinks = [];
263 | 
264 |     for (let i = 0; i < linkSections.length; i++) {
265 |         var list = linkSections[i].querySelectorAll(".sidebar a");
266 |         for (let j = 0; j < list.length; j++) {
267 |             sidebarLinks.push(list[j]);
268 |         }
269 |     }
270 | 
271 |     // Set the previous and next links if the current page is found
272 |     // Otherwise default to the home page
273 |     if (currentIndex !== -1) {
274 |         if (prevLink) {
275 |             if (currentIndex > 0) {
276 |                 const prevPage = sidebarLinks[currentIndex - 1];
277 |                 prevLink.href = prevPage.getAttribute("href");
278 |                 prevLink.querySelector(".arrowText").textContent = prevPage.textContent.trim();
279 |             } else {
280 |                 prevLink.style.display = "none";
281 |             }
282 |         }
283 | 
284 |         if (nextLink) {
285 |             if (currentIndex < sidebarLinks.length - 1) {
286 |                 const nextPage = sidebarLinks[currentIndex + 1];
287 |                 nextLink.href = nextPage.getAttribute("href");
288 |                 nextLink.querySelector(".arrowText").textContent = nextPage.textContent.trim();
289 |             } else {
290 |                 nextLink.style.display = "none";
291 |             }
292 |         }
293 |     }
294 |     else if (prevLink) {
295 |         console.log("Current page not found in sidebar links");
296 |         const prevPage = sidebarLinks[0];
297 |         prevLink.href = prevPage.getAttribute("href");
298 |         prevLink.querySelector(".arrowText").textContent = prevPage.textContent.trim();
299 |     }
300 | }
301 | 
302 | function isChildOfSidebar(element) {
303 |     while (element) {
304 |         if (element.classList && element.classList.contains('sidebar') && element.classList.contains('left-sidebar')) {
305 |             return true;
306 |         }
307 |         element = element.parentElement;
308 |     }
309 |     return false;
310 | }
311 | 
312 | document.addEventListener('click', function (event) {
313 |     if (globalThis.menuIsOpen) {
314 |         const target = event.target;
315 |         if (target.id != "navButton" && isChildOfSidebar(target) == false) {
316 |             toggleNav();
317 |         }
318 |     }
319 | });


--------------------------------------------------------------------------------
/js/popup.js:
--------------------------------------------------------------------------------
 1 | var lastPopupWindow = null;
 2 | var lastPopupButton = null;
 3 | 
 4 | function openPopup(thisObj, $target) {
 5 |     const rect = thisObj.getBoundingClientRect();
 6 |     var popup = $target;
 7 | 
 8 |     const isVisible = popup.classList.contains('show');
 9 |     if (!isVisible) {
10 |         popup.style.top = `${rect.top}` - emToPixels(2) + "px";
11 |         popup.style.left = `${rect.right}px`;
12 |         popup.style.display = 'block';
13 |         requestAnimationFrame(() => popup.classList.add('show'));
14 |     } else {
15 |         popup.classList.remove('show');
16 |         setTimeout(() => (popup.style.display = 'none'), 200);
17 |     }
18 | 
19 |     lastPopupWindow = $target;
20 |     lastPopupButton = thisObj;
21 | };
22 | 
23 | document.addEventListener('click', (e) => {
24 |     if (lastPopupWindow && !lastPopupWindow.contains(e.target) && !lastPopupButton.contains(e.target)) {
25 |         lastPopupWindow.classList.remove('show');
26 |         setTimeout(() => (lastPopupWindow.style.display = 'none', lastPopupWindow = null), 200);
27 |     }
28 | });
29 | 
30 | window.addEventListener('scroll', () => {
31 |     document.querySelectorAll('.popup').forEach(popup => {
32 |         popup.classList.remove('show');
33 |         setTimeout(() => (popup.style.display = 'none'), 200);
34 |     });
35 | }, true);


--------------------------------------------------------------------------------
/js/responsiveTitle.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function () {
 2 |     setupResponsiveElements();
 3 |     window.addEventListener('resize', setupResponsiveElements);
 4 | });
 5 | 
 6 | function setupResponsiveElements() {
 7 |     const abbreviations = {
 8 |         // Header titles
 9 |         "ModdingLinked": "ML",
10 |         "Viva New Vegas": "VNV",
11 |         "The Best of Times": "TBoT",
12 |         "The Midnight Ride": "TMR",
13 |         "A Dragonborn's Fate": "DBF",
14 | 
15 |         // Header links
16 |         "Fallout: New Vegas": "FNV",
17 |         "Tale of Two Wastelands": "TTW",
18 |         "Fallout 4": "FO4",
19 |         "Skyrim SE": "SSE"
20 |     };
21 | 
22 |     const isNarrow = window.innerWidth < 900;
23 | 
24 |     const headerTitle = document.getElementById('headerTitle');
25 |     if (headerTitle) {
26 |         const fullTitle = headerTitle.getAttribute('data-full-title') || headerTitle.textContent;
27 |         const shortTitle = abbreviations[fullTitle] || fullTitle.split(' ').map(word => word[0]).join('');
28 | 
29 |         if (isNarrow) {
30 |             if (headerTitle.textContent !== shortTitle) {
31 |                 headerTitle.textContent = shortTitle;
32 |                 if (!headerTitle.hasAttribute('data-full-title')) {
33 |                     headerTitle.setAttribute('data-full-title', fullTitle);
34 |                 }
35 |             }
36 |         } else if (headerTitle.textContent !== fullTitle) {
37 |             headerTitle.textContent = fullTitle;
38 |         }
39 |     }
40 | 
41 |     const headerLinks = document.getElementById('headerLinks');
42 |     if (headerLinks) {
43 |         headerLinks.querySelectorAll('a').forEach(link => {
44 |             const fullText = link.getAttribute('data-full-text') || link.textContent;
45 | 
46 |             if (!link.hasAttribute('data-full-text')) {
47 |                 link.setAttribute('data-full-text', fullText);
48 |             }
49 | 
50 |             const abbr = abbreviations[fullText] || fullText;
51 |             link.textContent = isNarrow ? abbr : fullText;
52 |         });
53 |     }
54 | }


--------------------------------------------------------------------------------
/mo2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <link rel="icon" href="img/Coco/Head Logo.webp">
  9 | 
 10 |     <title>Mod Organizer 2 | The Best of Times</title>
 11 | 
 12 |     <meta name="keywords" content="
 13 |     Mod, Modding, Mods, Guide, Mod Guide, Modding Guide, Resource, Resources,
 14 |     Stable, Stability, Performance, Fix, Fixes, FPS,
 15 |     Fast, Easy, Beginner,
 16 |     Nexus, Nexus Mods, NexusMods,
 17 |     Wabbajack, WJ, Installer,
 18 |     Mod Manager, Mod Organizer, MO2,
 19 |     Fallout, The Elder Scrolls, Bethesda, Bethesda Game Studios, BGS,
 20 |     Fallout New Vegas, Fallout NV, New Vegas, FNV, 
 21 |     Fallout 4, FO4,
 22 |     Tale of Two Wastelands, TTW,
 23 |     Skyrim Special Edition, Skyrim SE, SSE">
 24 | 
 25 |     <meta name="description" content="Installing and configuring Mod Organizer 2.">
 26 |     <meta http-equiv='content-language' content='en-us'>
 27 |     <meta name="twitter:card" value="summary_large_image">
 28 |     <meta property="og:site_name" content="ModdingLinked">
 29 |     <meta property="og:title" content="The Best of Times">
 30 |     <meta property="og:type" content="article">
 31 |     <meta property="og:url" content="https://thebestoftimes.moddinglinked.com">
 32 |     <meta property="og:image" content="https://thebestoftimes.moddinglinked.com/img/Others/Card.webp">
 33 |     <meta property="og:description" content="Installing and configuring Mod Organizer 2.">
 34 | 
 35 |     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#202524">
 36 |     <meta name="darkreader-lock">
 37 |     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
 38 |     <meta http-equiv='expires' content='0'>
 39 |     <meta http-equiv='pragma' content='no-cache'>
 40 |     <meta http-equiv='clear-site-data' content='cache'>
 41 | 
 42 |     <script src="js/imageViewer.js"></script>
 43 |     <script src="js/popup.js"></script>
 44 |     <script src="js/javascript.js"></script>
 45 |     <script src="js/responsiveTitle.js"></script>
 46 | 
 47 |     <link rel="stylesheet" href="css/styles.css">
 48 |     <link rel="stylesheet" href="css/cards.css">
 49 |     <link rel="stylesheet" href="css/header.css">
 50 |     <link rel="stylesheet" href="css/navigationArrows.css">
 51 |     <link rel="stylesheet" href="css/progressBar.css">
 52 |     <link rel="stylesheet" href="css/guideColors.css">
 53 |     <link rel="stylesheet" href="css/sidebar.css">
 54 |     <link rel="stylesheet" href="css/popup.css">
 55 |     <link rel="stylesheet" href="css/images.css">
 56 | </head>
 57 | 
 58 | <body class="theme">
 59 |     <div class="progress-container">
 60 |         <div class="progress-bar"></div>
 61 |     </div>
 62 | 
 63 |     <div class="container">
 64 |         <div class="header">
 65 |             <div class="headerMenu" onclick="toggleNav()">
 66 |                 <img src="./img/UI/Navigation.svg" id="navButton">
 67 |             </div>
 68 |             <div class="headerTitle">
 69 |                 <img src="./img/Coco/Head Logo.webp" alt="Logo" id="logo">
 70 |                 <a href="./index.html" id="headerTitle">The Best of Times</a>
 71 |             </div>
 72 |             <div class="guideLinks" id="headerLinks">
 73 |                 <a href="https://vivanewvegas.moddinglinked.com" target="_blank" rel="nofollow">Fallout: New Vegas</a>
 74 |                 <a href="https://themidnightride.moddinglinked.com" target="_blank" rel="nofollow">Fallout 4</a>
 75 |                 <a href="https://dragonbornsfate.moddinglinked.com" target="_blank" rel="nofollow">Skyrim SE</a>
 76 |             </div>
 77 |         </div>
 78 |         <div class="sidebar left-sidebar">
 79 |             <p class="pageLinks">
 80 |                 <a href="./index.html" title="Home">
 81 |                     Home
 82 |                 </a>
 83 | 
 84 |                 <a href="./intro.html" title="Introduction">
 85 |                     Introduction
 86 |                 </a>
 87 | 
 88 |                 <a href="./setup.html" title="Setup">
 89 |                     Setup
 90 |                 </a>
 91 | 
 92 |                 <a href="./mo2.html" title="MO2">
 93 |                     Mod Organizer 2
 94 |                 </a>
 95 | 
 96 |                 <a href="./ttw.html" title="TTW">
 97 |                     Tale of Two Wastelands
 98 |                 </a>
 99 | 
100 |                 <a href="./essentials.html" title="Essential Mods">
101 |                     Essential Mods
102 |                 </a>
103 | 
104 |                 <a href="./finish.html" title="Final Steps">
105 |                     Final Steps
106 |                 </a>
107 |             </p>
108 |             <hr>
109 |             <p>
110 |                 <a href="./changelog.html" title="TBoT Changelog">
111 |                     TBoT Changelog
112 |                 </a>
113 | 
114 |                 <a href="./files/TTW Changelog.7z" target="_blank" title="TTW Changelog">
115 |                     TTW Changelog
116 |                 </a>
117 | 
118 |                 <a href="https://vivanewvegas.moddinglinked.com/resources.html" target="_blank" title="Resources">
119 |                     Resources
120 |                 </a>
121 | 
122 |                 <a href="./faq.html" title="FAQ">
123 |                     FAQ
124 |                 </a>
125 | 
126 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-tools.html" target="_blank" title="Tools to Avoid">
127 |                     Tools to Avoid
128 |                 </a>
129 | 
130 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-mods.html" target="_blank" title="Mods to Avoid">
131 |                     Mods to Avoid
132 |                 </a>
133 | 
134 |                 <a href="./fo3.html" title="FO3 Mod Guide">
135 |                     FO3 Mod Guide
136 |                 </a>
137 |             </p>
138 |             <p class="sidebar-padder"></p>
139 |             <hr>
140 |             <p class="sidebar-bottom">
141 |                 <a href="https://discord.gg/S99Ary5eba" title="Discord">
142 |                     Discord
143 |                 </a>
144 |                 <a title="Donate" class="popup-button" id="donation-button" onclick="openPopup(this, donation)">
145 |                     Donate
146 |                 </a>
147 |                 <a href="https://github.com/ModdingLinked/The-Best-of-Times" title="GitHub">
148 |                     GitHub
149 |                 </a>
150 |             </p>
151 |         </div>
152 | 
153 |         <div class="card popup" id="donation">
154 |             <ul>
155 |                 <li>
156 |                     <a href="https://www.patreon.com/moddinglinked" target="_blank" rel="nofollow">Patreon</a>
157 |                 </li>
158 |                 <li>
159 |                     <a href="https://www.paypal.me/Ungeziefi" target="_blank" rel="nofollow">PayPal</a>
160 |                 </li>
161 |             </ul>
162 |         </div>
163 | 
164 |         <div class="content">
165 | 
166 |             <span id="MO2" class="section">
167 |                 <h2 onclick="location.href='#MO2'">Mod Organizer 2</h2>
168 | 
169 |                 <div class="card" id="WhatIsMO2" title="What is MO2?">
170 |                     <p>
171 |                     <h3>What is Mod Organizer 2?</h3>
172 |                     Mod Organizer 2 (MO2) is an open source game mod manager, mainly used for Bethesda games. Its main features are:
173 |                     <ul>
174 |                         <li>
175 |                             <strong>Virtual Filesystem (USVFS)</strong>: MO2 does not install mods directly into the game's folder, but rather creates a virtual filesystem that the game reads from. This allows for:
176 |                             <ul>
177 |                                 <li>Safe mod installation and uninstallation,</li>
178 |                                 <li>Being able to modify mod install order at any point,</li>
179 |                                 <li>Having multiple profiles with different mod setups,</li>
180 |                                 <li>Keeping original game files clean.</li>
181 |                             </ul>
182 |                             The <b>downsides</b> to USVFS are:
183 |                             <ul>
184 |                                 <li>Mods installed through MO2 are "visible" only to programs launched using MO2,</li>
185 |                                 <li>Some programs may not work properly with MO2's virtual filesystem,</li>
186 |                                 <li>USVFS can cause performance overhead if you have tons of loose (not-BSA/BA2) files,</li>
187 |                                 <li>USVFS works by "hooking" into the game (similarly to mods such as NVSE plugins, ReShade, etc.). This method can be considered as unsafe by some antivirus software due to its memory-invasive nature.</li>
188 |                             </ul>
189 |                         </li>
190 |                         <li>
191 |                             <strong>Profile System</strong>: MO2 allows you to create multiple profiles with different mod setups, saves, and settings.
192 |                         </li>
193 |                         <li>
194 |                             <strong>Two pane interface</strong>: MO2 is split into two sides, the left side is the modlist and the right side is the plugin list. This allows for easy conflict resolution and mod management.
195 |                         </li>
196 |                         <li>
197 |                             <strong>Portability</strong>: Thanks to the use of USVFS, MO2 has a "portable" mode that allows you to move the entire MO2 folder to another location with minimal setup.
198 |                         </li>
199 |                         <li>
200 |                             <strong>Modding Community Integration</strong>: MO2 has built-in support for Nexus Mods, allowing you to download mods directly from the Nexus.
201 |                             <br>
202 |                             It also has a plugin system that allows for creation of custom plugins to extend its functionality.
203 | 
204 |                             <div class="card-yellow">
205 |                                 <p>
206 |                                     Mod Organizer 2 has <b>NO</b> support for Nexus' Collections feature, so you will have to download mods one by one.
207 |                                     <br>
208 |                                     This is not a big issue, as the guide will provide direct links to the mods you need, and most collections are low quality and not curated.
209 |                                     <hr>
210 |                                     The closest alternative to Collections is <a href="https://www.wabbajack.org/">Wabbajack</a>, which is a community-made modlist installer that can install entire modlists with a single click. Due to its higher bar of entry for modlist creators, Wabbajack lists tend to be of higher quality compared to Collections.
211 |                                 </p>
212 |                             </div>
213 | 
214 |                         </li>
215 |                     </ul>
216 |                     </p>
217 |                 </div>
218 | 
219 |                 <div class="card" id="WhyMO2" title="Why MO2?">
220 |                     <p>
221 |                     <h3>Why Mod Organizer 2?</h3>
222 |                     Mod Organizer 2 has been chosen for our guides due to its <strong>ease of use</strong> and its ability to keep the <strong>game's folder clean</strong>. This is important because it allows for easy conflict resolution and mod management, and makes correcting mistakes trivial - installed mods in the wrong order? Just drag them into the correct position!
223 |                     <br>
224 |                     <br>
225 |                     Compared to Vortex, MO2 doesn't hide the most important parts of modding from the user, making it easier to understand what is happening and why, albeit at the cost of potentially looking scary at first.
226 |                     <br>
227 |                     <br>
228 |                     That said, we are well aware that MO2 is not perfect, and it has its own set of issues and limitations, but it is the best tool for the job.
229 |                     </p>
230 |                 </div>
231 |             </span>
232 | 
233 |             <span id="Installation" class="section">
234 |                 <h2 onclick="location.href='#Installation'">Installation</h2>
235 | 
236 |                 <div class="card" id="InstallingMO2" title="Installing MO2">
237 |                     <p>
238 |                     <h3>Installing Mod Organizer 2</h3>
239 |                     <ol>
240 |                         <li><strong>Download Mod Organizer 2</strong> from <a href="https://www.nexusmods.com/site/mods/874" target="_blank">here</a>.</li>
241 |                         <li>Once the download has finished, run the installer.</li>
242 |                         <li>Accept the license, click <b>Next</b>.</li>
243 |                         <li>
244 |                             When asked about the install location, change <span class="card-basic">MO2</span> to <span class="card-basic">The Best of Times</span> and click <b>Next</b>.
245 |                             <br>
246 |                             <div class="image-container width-40">
247 |                                 <img class="content-img" src="img/MO2/Install Path.webp" alt="Change folder name to The Best of Times">
248 |                                 <div class="resize-overlay expand"></div>
249 |                             </div>
250 | 
251 |                             <div class="card-green">
252 |                                 <p>
253 |                                     If you wish to install Mod Organizer 2 in a different location, you can do so by clicking the <b>Browse</b> button and selecting a different folder.
254 |                                     <br>
255 |                                     <br>
256 |                                     The folder <u>MUST</u> be outside of the default Windows folders (such as <span class="card-basic">Program Files x86</span>) and outside of the game's <b>Root</b> folder.
257 |                                     <br>
258 |                                     <br>
259 |                                     It's discouraged to store MO2 on Desktop or Documents if you use OneDrive or similar cloud providers, due to potential issues and degraded performance.
260 |                                 </p>
261 |                             </div>
262 | 
263 |                         </li>
264 |                         <li>On the install components page, use defaults.</li>
265 |                         <li>
266 |                             When asked about the Start Menu folder, change <span class="card-basic">Mod Organizer</span> to <span class="card-basic">The Best of Times</span> and click <b>Next</b>.
267 |                             <br>
268 |                             <div class="image-container width-40">
269 |                                 <img class="content-img" src="img/MO2/Start Menu.webp" alt="Change the name to The Best of Times">
270 |                                 <div class="resize-overlay expand"></div>
271 |                             </div>
272 |                         </li>
273 |                         <li>Don't create a Desktop shortcut - we will create our own later.</li>
274 |                         <li>On the final page, click <b>Install</b>.</li>
275 |                         <li>Once the installation is complete, ensure that <strong>Launch Mod Organizer</strong> is ticked and click <b>Finish</b>.</li>
276 |                     </ol>
277 | 
278 |                     <div class="card-red">
279 |                         <p>
280 |                             MO2 refuses to open? Try <a href="https://vivanewvegas.moddinglinked.com/faq.html#troubleshootingquestion15">these steps</a> in the FAQ.
281 |                         </p>
282 |                     </div>
283 | 
284 |                     </p>
285 |                 </div>
286 |             </span>
287 | 
288 |             <span id="Setup" class="section">
289 |                 <h2 onclick="location.href='#Setup'">Setup</h2>
290 | 
291 |                 <div class="card" id="Configuration">
292 |                     <p>
293 |                     <h3>Configuring Mod Organizer 2</h3>
294 |                     <ol>
295 |                         <li>On the instance creation page, select <strong>Create a portable instance</strong>, click <b>Next</b>.</li>
296 |                         <div class="image-container width-40">
297 |                             <img class="content-img" src="./img/MO2/Instance.webp" alt="Select Portable Instance option">
298 |                             <div class="resize-overlay expand"></div>
299 |                         </div>
300 |                         <li>Select <strong>Tale of Two Wastelands</strong> and click <b>Next</b>.</li>
301 |                         <li>Select the store where you bought the game, click <b>Next</b>.</li>
302 |                         <li>When asked about profile settings, <strong>enable all options</strong> and click <b>Next</b>.</li>
303 |                         <li>Keep the <strong>default location</strong> file path.</li>
304 |                         <li>Click <strong>Connect to Nexus</strong>.</li>
305 |                     </ol>
306 | 
307 |                     <div class="card-yellow">
308 |                         <p>
309 |                             If you have MO2 installed on an SSD or a HDD with little space, you can check the <strong>Show advanced options</strong> box and change the <strong>Downloads</strong> file path to a different drive with more space.
310 |                             <br>
311 |                             This will not affect the game's performance, the downloaded files can be deleted after the mods have been installed.
312 |                         </p>
313 |                     </div>
314 | 
315 |                     <ol start="7">
316 |                         <li>On the last page, select <b>Finish</b>.</li>
317 |                         <li>If you see a pop-up called <strong>Show tutorial?</strong>, select <b>No</b>.</li>
318 |                         <li>If you see a pop-up called <strong>Register?</strong>, select <b>Yes</b>.</li>
319 |                         <li>If you see a pop-up called <strong>INI file is read-only</strong>, select <b>Remember my choice</b> from the drop-down at the bottom then click <b>Clear the read-only flag</b>.</li>
320 |                         <li>If you see a pop-up called <strong>FalloutNV_lang.esp was found</strong>, select <b>Yes</b>.</li>
321 |                     </ol>
322 |                     </p>
323 |                 </div>
324 | 
325 |                 <div class="card" id="MO2Settings" title="MO2 Settings">
326 |                     <p>
327 |                     <h3>Configuring Settings</h3>
328 |                     <ol>
329 |                         <li>Click the <b>X</b> in the bottom right of MO2 to close the log window.</li>
330 |                         <li>Click the <img class="mo2-icon" src="./img/MO2/Settings.webp" alt="MO2 settings"> button at the top of MO2 to open the settings.</li>
331 |                         <li>If you wish, you can select a different theme.</li>
332 |                         <li>In the <b>Nexus</b> tab, select <strong>Connect to Nexus</strong>.</li>
333 |                         <div class="image-container">
334 |                             <img class="content-img" src="./img/MO2/Connect.webp" alt="Connect to Nexus">
335 |                             <div class="resize-overlay expand"></div>
336 |                         </div>
337 |                     </ol>
338 | 
339 |                     <div class="card-green">
340 |                         <p>
341 |                             This option will not show up if you have already connected your Nexus account on a different MO2 instance.
342 |                         </p>
343 |                     </div>
344 | 
345 |                     <ol start="5">
346 |                         <li>MO2 will open your browser and prompt you to <strong>authorize</strong> the connection.</li>
347 |                         <li>Once you authorize it, you can close your browser and of the MO2 settings.</li>
348 |                         <li>Allow MO2 to <strong>restart</strong>.</li>
349 |                     </ol>
350 |                     </p>
351 |                 </div>
352 | 
353 |                 <div class="card" id="GameSettings">
354 |                     <p>
355 |                     <h3>Game Settings</h3>
356 |                     <ol>
357 |                         <li>Open the game launcher using the <strong>Fallout Launcher</strong> option in MO2.</li>
358 |                         <div class="image-container width-60">
359 |                             <img class="content-img" src="./img/Others/Start Launcher.webp" alt="Run the launcher through MO2">
360 |                             <div class="resize-overlay expand"></div>
361 |                         </div>
362 |                         <li>
363 |                             Inside the launcher, click <b>Options</b> and do the following:
364 |                             <ol>
365 |                                 <li>
366 |                                     Select the <strong>Ultra Preset</strong>.
367 | 
368 |                                     <div class="card-yellow">
369 |                                         <p>
370 |                                             If you have a very weak PC, you can select the <b>Medium Preset</b> instead.
371 |                                         </p>
372 |                                     </div>
373 | 
374 |                                 </li>
375 |                                 <li>
376 |                                     Set <strong>Resolution</strong> to your monitor's native resolution.
377 | 
378 |                                     <div class="card-yellow">
379 |                                         <p>
380 |                                             If you can't find the right resolution in the launcher's list, do the following:
381 |                                         <ol>
382 |                                             <li>Close the launcher.</li>
383 |                                             <li>Click the <img class="mo2-icon" src="./img/MO2/Tools.webp" alt="Tools drop-down"> button at the top of MO2 and select <strong>INI Editor</strong>.</li>
384 |                                             <li>Select the <strong>FalloutPrefs.ini</strong> tab.</li>
385 |                                             <li>Change the following settings in the <span class="card-basic">Display</span> section:
386 |                                                 <br>
387 |                                                 <span class="card-basic">iSize W</span> = your screen width
388 |                                                 <br>
389 |                                                 <span class="card-basic">iSize H</span> = your screen height
390 |                                             </li>
391 |                                         </ol>
392 |                                         </p>
393 |                                     </div>
394 |                                 </li>
395 |                             </ol>
396 |                         <li>Close the launcher.</li>
397 |                         </li>
398 |                     </ol>
399 |                     </p>
400 |                 </div>
401 |             </span>
402 | 
403 |             <span id="Instructions" class="section">
404 |                 <h2 onclick="location.href='#Instructions'">Mod Installation Instructions</h2>
405 | 
406 |                 <div class="card" id="HowToUse?">
407 |                     <p>
408 |                     <h3>How to use Nexus and MO2?</h3>
409 |                     When the guide says to install a mod, it will be formatted as <strong>Main File - Example 1.5</strong>, this is referring to the mod's category on Nexus and file name.
410 | 
411 |                     <div class="card-yellow">
412 |                         <p>
413 |                             <b>IMPORTANT</b>:
414 |                             <br>
415 |                             Unless otherwise specified, always use <b>Mod Manager Download</b>.
416 |                         </p>
417 |                     </div>
418 | 
419 |                     <div class="image-container">
420 |                         <img class="content-img" src="./img/Others/Download Example.webp" alt="Download example">
421 |                         <div class="resize-overlay expand"></div>
422 |                     </div>
423 |                     <br>
424 |                     <br>
425 |                     <strong>Standard procedure</strong> through the manager:
426 |                     <ol>
427 |                         <li>Download the indicated file(s).</li>
428 |                         <li>Open the <b>Downloads</b> tab in MO2 (below the executable selector on the right).</li>
429 |                         <li>Double-click on the mod to install it.</li>
430 |                         <li>Enable the mod on the left pane by ticking its checkbox.</li>
431 |                     </ol>
432 |                     <br>
433 |                     If downloading through the manager is not an option, do the following:
434 |                     <ol>
435 |                         <li>Click the <strong>Manual Download</strong> button (or whatever the download button is for the respective site).</li>
436 |                         <li>Once the download has finished, click the <img class="mo2-icon" src="./img/MO2/Install Archive.webp" alt="MO2 archive button"> button at the top of MO2.</li>
437 |                         <li>From the new window, navigate to where the file was downloaded to and double-click it.</li>
438 |                         <li>Finish the install as you would with a <b>Mod Manager Download</b> mod.</li>
439 |                     </ol>
440 |                     <br>
441 |                     When <strong>installing a mod</strong>, MO2 might prompt you with multiple choices:
442 |                     <ul>
443 |                         <li><strong>Rename</strong> appears when you are trying to install a file with the same name as an existing one. If you are installing, for example, a secondary file necessary for the mod to work, then rename it accordingly with the name drop-down list or by typing the name manually.</li>
444 |                         <li>If you are updating from an old version of a mod, you should select <strong>Replace</strong>, this will automatically delete all the files from the old version of the mod and replace them with the ones from the new version.</li>
445 |                         <li><strong>Merge</strong> should only be used when you are sure the mod will not be updated and in situations where a hotfix is uploaded as separate file. Avoid it if you can, for maximum modularity.</li>
446 |                     </ul>
447 |                     </p>
448 |                 </div>
449 |             </span>
450 | 
451 |             <div class="navigationArrowContainer">
452 |                 <a href="#" id="previous" rel="prev" class="navigationArrow">
453 |                     <img class="mirror" src="./img/UI/Arrow.svg" alt="Back Arrow">
454 |                     <span class="arrowText"></span>
455 |                 </a>
456 | 
457 |                 <a href="#" id="next" rel="next" class="navigationArrow">
458 |                     <span class="arrowText"></span>
459 |                     <img src="./img/UI/Arrow.svg" alt="Forward Arrow">
460 |                 </a>
461 |             </div>
462 |         </div>
463 | 
464 |         <div class="sidebar right-sidebar">
465 |             <p id="sidebarContent">
466 |             </p>
467 |         </div>
468 |     </div>
469 | 
470 |     <footer>ModdingLinked 2025</footer>
471 | 
472 |     <div id="image-overlay" class="overlay" hidden>
473 |         <div class="image-container">
474 |             <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
475 |             <div class="resize-overlay shrink"></div>
476 |         </div>
477 |     </div>
478 | </body>
479 | 
480 | </html>


--------------------------------------------------------------------------------
/setup.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <link rel="icon" href="img/Coco/Head Logo.webp">
  9 | 
 10 |     <title>Initial Setup | The Best of Times</title>
 11 | 
 12 |     <meta name="keywords" content="
 13 |     Mod, Modding, Mods, Guide, Mod Guide, Modding Guide, Resource, Resources,
 14 |     Stable, Stability, Performance, Fix, Fixes, FPS,
 15 |     Fast, Easy, Beginner,
 16 |     Nexus, Nexus Mods, NexusMods,
 17 |     Wabbajack, WJ, Installer,
 18 |     Mod Manager, Mod Organizer, MO2,
 19 |     Fallout, The Elder Scrolls, Bethesda, Bethesda Game Studios, BGS,
 20 |     Fallout New Vegas, Fallout NV, New Vegas, FNV, 
 21 |     Fallout 4, FO4,
 22 |     Tale of Two Wastelands, TTW,
 23 |     Skyrim Special Edition, Skyrim SE, SSE">
 24 | 
 25 |     <meta name="description" content="Clean install and initial launch of the vanilla game.">
 26 |     <meta http-equiv='content-language' content='en-us'>
 27 |     <meta name="twitter:card" value="summary_large_image">
 28 |     <meta property="og:site_name" content="ModdingLinked">
 29 |     <meta property="og:title" content="The Best of Times">
 30 |     <meta property="og:type" content="article">
 31 |     <meta property="og:url" content="https://thebestoftimes.moddinglinked.com">
 32 |     <meta property="og:image" content="https://thebestoftimes.moddinglinked.com/img/Others/Card.webp">
 33 |     <meta property="og:description" content="Clean install and initial launch of the vanilla game.">
 34 | 
 35 |     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#202524">
 36 |     <meta name="darkreader-lock">
 37 |     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
 38 |     <meta http-equiv='expires' content='0'>
 39 |     <meta http-equiv='pragma' content='no-cache'>
 40 |     <meta http-equiv='clear-site-data' content='cache'>
 41 | 
 42 |     <script src="js/imageViewer.js"></script>
 43 |     <script src="js/popup.js"></script>
 44 |     <script src="js/javascript.js"></script>
 45 |     <script src="js/responsiveTitle.js"></script>
 46 | 
 47 |     <link rel="stylesheet" href="css/styles.css">
 48 |     <link rel="stylesheet" href="css/cards.css">
 49 |     <link rel="stylesheet" href="css/header.css">
 50 |     <link rel="stylesheet" href="css/navigationArrows.css">
 51 |     <link rel="stylesheet" href="css/progressBar.css">
 52 |     <link rel="stylesheet" href="css/guideColors.css">
 53 |     <link rel="stylesheet" href="css/sidebar.css">
 54 |     <link rel="stylesheet" href="css/popup.css">
 55 |     <link rel="stylesheet" href="css/images.css">
 56 | </head>
 57 | 
 58 | <body class="theme">
 59 |     <div class="progress-container">
 60 |         <div class="progress-bar"></div>
 61 |     </div>
 62 | 
 63 |     <div class="container">
 64 |         <div class="header">
 65 |             <div class="headerMenu" onclick="toggleNav()">
 66 |                 <img src="./img/UI/Navigation.svg" id="navButton">
 67 |             </div>
 68 |             <div class="headerTitle">
 69 |                 <img src="./img/Coco/Head Logo.webp" alt="Logo" id="logo">
 70 |                 <a href="./index.html" id="headerTitle">The Best of Times</a>
 71 |             </div>
 72 |             <div class="guideLinks" id="headerLinks">
 73 |                 <a href="https://vivanewvegas.moddinglinked.com" target="_blank" rel="nofollow">Fallout: New Vegas</a>
 74 |                 <a href="https://themidnightride.moddinglinked.com" target="_blank" rel="nofollow">Fallout 4</a>
 75 |                 <a href="https://dragonbornsfate.moddinglinked.com" target="_blank" rel="nofollow">Skyrim SE</a>
 76 |             </div>
 77 |         </div>
 78 | 
 79 |         <div class="sidebar left-sidebar">
 80 |             <p class="pageLinks">
 81 |                 <a href="./index.html" title="Home">
 82 |                     Home
 83 |                 </a>
 84 | 
 85 |                 <a href="./intro.html" title="Introduction">
 86 |                     Introduction
 87 |                 </a>
 88 | 
 89 |                 <a href="./setup.html" title="Setup">
 90 |                     Setup
 91 |                 </a>
 92 | 
 93 |                 <a href="./mo2.html" title="MO2">
 94 |                     Mod Organizer 2
 95 |                 </a>
 96 | 
 97 |                 <a href="./ttw.html" title="TTW">
 98 |                     Tale of Two Wastelands
 99 |                 </a>
100 | 
101 |                 <a href="./essentials.html" title="Essential Mods">
102 |                     Essential Mods
103 |                 </a>
104 | 
105 |                 <a href="./finish.html" title="Final Steps">
106 |                     Final Steps
107 |                 </a>
108 |             </p>
109 |             <hr>
110 |             <p>
111 |                 <a href="./changelog.html" title="TBoT Changelog">
112 |                     TBoT Changelog
113 |                 </a>
114 | 
115 |                 <a href="./files/TTW Changelog.7z" target="_blank" title="TTW Changelog">
116 |                     TTW Changelog
117 |                 </a>
118 | 
119 |                 <a href="https://vivanewvegas.moddinglinked.com/resources.html" target="_blank" title="Resources">
120 |                     Resources
121 |                 </a>
122 | 
123 |                 <a href="./faq.html" title="FAQ">
124 |                     FAQ
125 |                 </a>
126 | 
127 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-tools.html" target="_blank" title="Tools to Avoid">
128 |                     Tools to Avoid
129 |                 </a>
130 | 
131 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-mods.html" target="_blank" title="Mods to Avoid">
132 |                     Mods to Avoid
133 |                 </a>
134 | 
135 |                 <a href="./fo3.html" title="FO3 Mod Guide">
136 |                     FO3 Mod Guide
137 |                 </a>
138 |             </p>
139 |             <p class="sidebar-padder"></p>
140 |             <hr>
141 |             <p class="sidebar-bottom">
142 |                 <a href="https://discord.gg/S99Ary5eba" title="Discord">
143 |                     Discord
144 |                 </a>
145 |                 <a title="Donate" class="popup-button" id="donation-button" onclick="openPopup(this, donation)">
146 |                     Donate
147 |                 </a>
148 |                 <a href="https://github.com/ModdingLinked/The-Best-of-Times" title="GitHub">
149 |                     GitHub
150 |                 </a>
151 |             </p>
152 |         </div>
153 | 
154 |         <div class="card popup" id="donation">
155 |             <ul>
156 |                 <li>
157 |                     <a href="https://www.patreon.com/moddinglinked" target="_blank" rel="nofollow">Patreon</a>
158 |                 </li>
159 |                 <li>
160 |                     <a href="https://www.paypal.me/Ungeziefi" target="_blank" rel="nofollow">PayPal</a>
161 |                 </li>
162 |             </ul>
163 |         </div>
164 | 
165 |         <div class="content">
166 | 
167 |             <span id="Preparation" class="section">
168 |                 <h2 onclick="location.href='#Preparation'">Preparation</h2>
169 | 
170 |                 <div class="card" id="CPPRedists" title="Installing Redistributables">
171 |                     <p>
172 |                     <h3>Installing VC++ Redistributables</h3>
173 |                     Most engine mods and tools require latest Visual C++ Redistributables to be installed. We will use an all-in-one package that will install all possible versions.
174 |                     <div class="card-red">
175 |                         <p>
176 |                             Failure to have latest versions installed will result in an immediate crash when launching the game or modding tools.
177 |                             <br>
178 |                             <br>
179 |                             Please install the redistributables even if you have them installed already, as they are often outdated.
180 |                         </p>
181 |                     </div>
182 |                     <ol>
183 |                         <li>Download <a href="https://www.techpowerup.com/download/visual-c-redistributable-runtime-package-all-in-one/" target="_blank">VC++ AIO</a> from TechPowerUp.</li>
184 |                         <li>Extract the archive and run the included <span class="card-basic">install_all.bat</span> as <b>an administrator</b>.</li>
185 |                         <li>Restart your PC.</li>
186 |                     </ol>
187 |                     </p>
188 |                 </div>
189 | 
190 |                 <div class="card" id="FileExtensions" title="Enabling File Extensions">
191 |                     <p>
192 |                     <h3>Enabling File Extensions</h3>
193 |                     Before we start, it is important to enable file extensions in Windows.
194 |                     </p>
195 |                     <p>
196 |                         By default, File Explorer will not show file extensions (such as .exe, .dll, or .esp). These extensions are very important when going through the guide, so it is highly recommended to enable visible file extensions:
197 |                     <ol>
198 |                         <li>Open File Explorer.</li>
199 |                         <li>Select the <b>View</b> tab at the top.</li>
200 |                         <li>Enable <strong>File name extensions</strong> in the <b>Show</b> section.</li>
201 |                         <div class="image-container width-90">
202 |                             <img class="content-img" src="./img/Others/File Extensions.webp" alt="Show file extensions">
203 |                             <div class="resize-overlay expand"></div>
204 |                         </div>
205 |                     </ol>
206 |                     </p>
207 |                 </div>
208 | 
209 |                 <div class="card" id="BaseAddressRandomization">
210 |                     <p>
211 |                     <h3>Disabling Base Address Randomization</h3>
212 |                     Base Address Randomization is a security feature in Windows that allows program's starting address to be randomized, which is not the expected behavior in 32-bit programs like Fallout: New Vegas. This <strong>leads to crashes</strong> in a modded game.
213 |                     <br>
214 |                     <br>
215 |                     While the feature should be disabled by default, it is still recommended to sanity check if it is disabled:
216 |                     <ol>
217 |                         <li>Open <strong>Windows Security</strong> from your <b>Start Menu</b>.</li>
218 |                         <li>Click on <b>App & browser control</b> in the left sidebar.</li>
219 |                         <li>Click on <b>Exploit protection settings</b> under <b>Exploit protection</b>.</li>
220 |                         <li>Ensure <strong>Force randomization for images (Mandatory ASLR)</strong> is set to <strong>Use default (Off)</strong>.</li>
221 | 
222 |                         <div class="card-green">
223 |                             <p>
224 |                                 If you don't want to change the global setting, you can add an exception just for the game:
225 |                             <ol>
226 |                                 <li>Click on <b>Program settings</b>.</li>
227 |                                 <li>Click on <b>Add program to customize</b>.</li>
228 |                                 <li>Select <b>Add program by name</b>.</li>
229 |                                 <li>Enter <span class="card-basic">FalloutNV.exe</span> in the box and save.</li>
230 |                                 <li>Find the newly created entry on the list and click <b>Edit</b>.</li>
231 |                                 <li>Find <b>Force randomization for images (Mandatory ASLR)</b>.</li>
232 |                                 <li>Check <b>Override system settings</b>, and set the toggle to <b>Off</b>.</li>
233 |                             </ol>
234 |                             </p>
235 |                         </div>
236 | 
237 |                     </ol>
238 |                     </p>
239 |                 </div>
240 |             </span>
241 | 
242 |             <span id="Installation" class="section">
243 |                 <h2 onclick="location.href='#Installation'">Installation</h2>
244 | 
245 |                 <div class="card" id="InstallLocation">
246 |                     <p>
247 |                     <h3>Choosing a Location</h3>
248 |                     <strong>A clean installation</strong> is not only required to get rid of any potential leftover mod files, but also to make sure the game is installed in a safe location. Here is what you need to know when choosing where to install your game:
249 |                     <br>
250 |                     <ul>
251 |                         <li>
252 |                             <b>Avoid any default Windows folders</b>: This includes but is not limited to <span class="card-basic">C:\Program Files</span>, <span class="card-basic">C:\Program Files x86</span>, your <span class="card-basic">Desktop</span> and your <span class="card-basic">Documents</span> folders.
253 |                             <br>
254 |                             This is because users lack write access to Program Files, while Desktop and Documents are often managed by OneDrive. This can cause many issues with the game and any modding tools.
255 |                             <br>
256 |                             <br>
257 |                             An example of a safe location is <span class="card-basic">C:\Games</span>
258 |                         </li>
259 |                         <li>
260 |                             <b>Install on an SSD if possible</b>: Having the game on an SSD will drastically improve loading times and decrease stuttering.
261 |                         </li>
262 |                         <li><b>Fallout 3 Installation</b>: Fallout 3 only needs to be installed for running the TTW installer, and can be uninstalled after the installer completes. It still needs to be installed outside of any default Windows folder as outlined above.</li>
263 |                     </ul>
264 |                     </p>
265 |                 </div>
266 | 
267 |                 <div class="card" id="Uninstall">
268 |                     <p>
269 |                     <h3>Uninstalling the Games</h3>
270 | 
271 |                     <div class="card-green">
272 |                         <p>
273 |                             If you never installed the games before, go directly to the next section.
274 |                         </p>
275 |                     </div>
276 | 
277 |                     As the games are available on Steam, GOG, and Epic Games, there are separate instructions for each version. You obviously only need to follow the directions for the versions you have.
278 |                     <div class="expander-top colors-steam clickable width-90" onclick="expandCard(this, uninstallSteamExpander)" id="uninstallSteam">
279 |                         <p>
280 |                         <h3>Steam</h3>
281 |                         <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
282 |                         </p>
283 |                     </div>
284 | 
285 |                     <div class="expander-bottom colors-steam width-90" id="uninstallSteamExpander">
286 | 
287 |                         <div class="card-red">
288 |                             <p>
289 |                                 If you already uninstalled the games, make sure to follow step 4 and 5 to ensure there are no leftovers.
290 |                             </p>
291 |                         </div>
292 | 
293 |                         <h3>Fallout: New Vegas</h3>
294 |                         <ol>
295 |                             <li>Open Steam and go to your <strong>Library</strong>.</li>
296 |                             <li>Find <strong>Fallout: New Vegas</strong> in the list.</li>
297 |                             <li>Right-click on it and select <strong>Manage</strong> -> <strong>Uninstall</strong>.</li>
298 |                             <li>Navigate to <span class="card-basic">Steam\steamapps\common</span> and, if present, delete the <strong>Fallout New Vegas</strong> folder.</li>
299 |                             <li>Navigate to <span class="card-basic">Documents\My Games\FalloutNV</span> and delete all INI files inside it.</li>
300 |                         </ol>
301 |                         <h3>Fallout 3</h3>
302 |                         <ol>
303 |                             <li>Open Steam and go to your <strong>Library</strong>.</li>
304 |                             <li>Find <strong>Fallout 3</strong> in the list.</li>
305 |                             <li>Right-click on it and select <strong>Manage</strong> -> <strong>Uninstall</strong>.</li>
306 |                             <li>Navigate to <span class="card-basic">Steam\steamapps\common</span> and, if present, delete the <strong>Fallout 3</strong> folder.</li>
307 |                         </ol>
308 |                     </div>
309 | 
310 |                     <div class="expander-top colors-gog clickable width-90" onclick="expandCard(this, uninstallGogExpander)" id="uninstallGog">
311 |                         <p>
312 |                         <h3>GOG</h3>
313 |                         <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
314 |                         </p>
315 |                     </div>
316 | 
317 |                     <div class="expander-bottom colors-gog width-90" id="uninstallGogExpander">
318 |                         <h3>Fallout: New Vegas</h3>
319 |                         <ol>
320 |                             <li>Open GOG and go to your <strong>Library</strong>.</li>
321 |                             <li>Find <strong>Fallout: New Vegas</strong> in the list.</li>
322 |                             <li>Right-click on it and select <strong>Manage Installation -> Uninstall</strong>.</li>
323 |                             <ul>
324 |                                 <li>If you used an offline installer then run the <strong>unins000.exe</strong> file in the game's <b>Root</b> folder.</li>
325 |                             </ul>
326 |                             <li>Navigate to <span class="card-basic">Documents\My Games\FalloutNV</span> and delete all INI files inside it.</li>
327 |                         </ol>
328 |                         <h3>Fallout 3</h3>
329 |                         <ol>
330 |                             <li>Open GOG and go to your <strong>Library</strong>.</li>
331 |                             <li>Find <strong>Fallout 3</strong> in the list.</li>
332 |                             <li>Right-click on it and select <strong>Manage Installation -> Uninstall</strong>.</li>
333 |                             <ul>
334 |                                 <li>If you used an offline installer then run the <strong>unins000.exe</strong> file in the game's <b>Root</b> folder.</li>
335 |                             </ul>
336 |                         </ol>
337 |                     </div>
338 | 
339 |                     <div class="expander-top colors-epic clickable width-90" onclick="expandCard(this, uninstallEpicExpander)" id="uninstallEpic">
340 |                         <p>
341 |                         <h3>Epic Games</h3>
342 |                         <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
343 |                         </p>
344 |                     </div>
345 | 
346 |                     <div class="expander-bottom colors-epic width-90" id="uninstallEpicExpander">
347 | 
348 |                         <div class="card-red">
349 |                             <p>
350 |                                 If you already uninstalled the games, make sure to follow step 4 to ensure there are no leftovers.
351 |                             </p>
352 |                         </div>
353 | 
354 |                         <h3>Fallout: New Vegas</h3>
355 |                         <ol>
356 |                             <li>Open the Epic Games Launcher and go to your <strong>Library</strong>.</li>
357 |                             <li>Find <strong>Fallout: New Vegas</strong> in the list.</li>
358 |                             <li>Click on 3 dots and select uninstall from the menu.</li>
359 |                             <li>Navigate to <span class="card-basic">Documents\My Games\FalloutNV_Epic</span> and delete all INI files inside it.</li>
360 |                         </ol>
361 |                         <h3>Fallout 3</h3>
362 |                         <ol>
363 |                             <li>Open the Epic Games Launcher and go to your <strong>Library</strong>.</li>
364 |                             <li>Find <strong>Fallout 3</strong> in the list.</li>
365 |                             <li>Click on 3 dots and select uninstall from the menu.</li>
366 |                             <li>Navigate to <span class="card-basic">Documents\My Games</span> and delete the <strong>Fallout3</strong> folder.</li>
367 |                         </ol>
368 |                     </div>
369 |                     </p>
370 |                 </div>
371 | 
372 |                 <div class="card" id="Install">
373 |                     <p>
374 |                     <h3>Installing the Games</h3>
375 |                     As the games are available on Steam, GOG, and Epic Games, there are separate instructions for each version. You obviously only need to follow the directions for the versions you have.
376 |                     <div class="expander-top colors-steam clickable width-90" onclick="expandCard(this, installSteamExpander)" id="installSteam">
377 |                         <p>
378 |                         <h3>Steam</h3>
379 |                         <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
380 |                         </p>
381 |                     </div>
382 | 
383 |                     <div class="expander-bottom colors-steam width-90" id="installSteamExpander">
384 |                         <h3>Creating a new Steam library</h3>
385 | 
386 |                         <div class="card-red">
387 |                             <p>
388 |                                 It is strongly recommended to install the games outside of any default Windows folders (such as <span class="card-basic">Program Files (x86)</span>), as the the strict Windows file protections of these folders can break certain mods/tools. Instead, we will use a tool called Steam Library Setup Tool to create a new Steam library folder outside of any default Windows folders.
389 |                                 <br>
390 |                                 <br>
391 |                                 If you already have Steam installed outside of any default windows folders then go directly to step 1 of the next section and install the games to your custom Steam library.
392 |                             </p>
393 |                         </div>
394 | 
395 |                         <ol>
396 |                             <li>Completely exit out of Steam using Task Manager or System Tray.</li>
397 |                             <li>Download the <strong>steam_library_setup_tool-3.2.exe</strong> file from <a href="https://github.com/LostDragonist/steam-library-setup-tool/releases" target="_blank">here</a>.</li>
398 |                             <li>Once downloaded, run the file and add a new entry by clicking <strong>Add Row</strong>.</li>
399 |                             <li>Type the chosen path under <strong>Path</strong>, e.g. <span class="card-basic">C:\Games\Steam</span></li>
400 |                             <li>Click <strong>Accept</strong> then <strong>Yes</strong> if prompted to create a new folder.</li>
401 |                             <li>The tool will ask to exit, select <strong>OK</strong>.</li>
402 |                             <div class="image-container width-90">
403 |                                 <img class="content-img" src="./img/Others/Steam Library Tool Setup.webp" alt="Steam library setup tool">
404 |                                 <div class="resize-overlay expand"></div>
405 |                             </div>
406 |                         </ol>
407 |                         <h3>Fallout: New Vegas</h3>
408 |                         <ol>
409 |                             <li>Open Steam and go to your <strong>Library</strong>.</li>
410 |                             <li>Find <strong>Fallout: New Vegas</strong> in the list and select <strong>Install</strong>.</li>
411 |                             <li>Under <strong>Install to:</strong>, select the library folder created with the tool, which is the second <b>C:\</b> entry if you are installing on the main drive.</li>
412 |                             <div class="image-container width-90">
413 |                                 <img class="content-img" src="./img/Others/Steam Location Pick.webp" alt="Example Steam install locations">
414 |                                 <div class="resize-overlay expand"></div>
415 |                             </div>
416 |                             <li>Select <strong>Next</strong> then wait for the install to finish.</li>
417 |                         </ol>
418 | 
419 |                         <div class="card-yellow">
420 |                             <p>
421 |                                 If you still do not see your new library, restart your PC.
422 |                             </p>
423 |                         </div>
424 | 
425 |                         <h3>Fallout 3</h3>
426 |                         <ol>
427 |                             <li>Open Steam and go to your <strong>Library</strong>.</li>
428 |                             <li>Find <strong>Fallout 3</strong> in the list and select <strong>Install</strong>.</li>
429 |                             <li>Under <strong>Install to:</strong>, select the library folder created with the tool, which is the second <b>C:\</b> entry if you are installing on the main drive.</li>
430 |                             <div class="image-container width-90">
431 |                                 <img class="content-img" src="./img/Others/Steam Location Pick.webp" alt="Example Steam install locations">
432 |                                 <div class="resize-overlay expand"></div>
433 |                             </div>
434 |                             <li>Select <strong>Next</strong> then wait for the install to finish.</li>
435 |                         </ol>
436 |                     </div>
437 | 
438 |                     <div class="expander-top colors-gog clickable width-90" onclick="expandCard(this, installGogExpander)" id="installGog">
439 |                         <div>
440 |                             <p>
441 |                             <h3>GOG</h3>
442 |                             </p>
443 |                         </div>
444 |                         <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
445 |                     </div>
446 | 
447 |                     <div class="expander-bottom colors-gog width-90" id="installGogExpander">
448 |                         <h3>Fallout: New Vegas</h3>
449 |                         <ol>
450 |                             <li>Open GOG and go to your <strong>Library</strong>.</li>
451 |                             <li>Find <strong>Fallout: New Vegas</strong> in the list and select <strong>Install</strong>.</li>
452 |                             <li>Set the <strong>Install to</strong> location to a location of your choice.</li>
453 |                             <ul>
454 |                                 <li>It is <strong>required</strong> to install the game outside of any default Windows folders (e.g., <span class="card-basic">Program Files x86</span>).</li>
455 |                             </ul>
456 |                         </ol>
457 |                         <h3>Fallout 3</h3>
458 |                         <ol>
459 |                             <li>Open GOG and go to your <strong>Library</strong>.</li>
460 |                             <li>Find <strong>Fallout 3</strong> in the list and select <strong>Install</strong>.</li>
461 |                             <li>Set the <strong>Install to</strong> location to a location of your choice.</li>
462 |                             <ul>
463 |                                 <li>It is <strong>required</strong> to install the game outside of any default Windows folders (e.g., <span class="card-basic">Program Files x86</span>).</li>
464 |                             </ul>
465 |                         </ol>
466 |                     </div>
467 | 
468 |                     <div class="expander-top colors-epic clickable width-90" onclick="expandCard(this, installEpicExpander)" id="installEpic">
469 |                         <p>
470 |                         <h3>Epic Games</h3>
471 |                         <img class="chevron" style="transform: rotateX(0deg);" src="img/UI/Chevron Down.svg" alt="UI element - Chevron">
472 |                         </p>
473 |                     </div>
474 | 
475 |                     <div class="expander-bottom colors-epic width-90" id="installEpicExpander">
476 |                         <h3>Fallout: New Vegas</h3>
477 |                         <ol>
478 |                             <li>Open the Epic Games Launcher and go to your <strong>Library</strong>.</li>
479 |                             <li>Find <strong>Fallout: New Vegas</strong> in the list.</li>
480 |                             <li>Click on the game to install it.</li>
481 |                             <ul>
482 |                                 <li>It is <strong>required</strong> to install the game outside of any default Windows folders (e.g., <span class="card-basic">Program Files x86</span>).</li>
483 |                             </ul>
484 |                         </ol>
485 |                         <h3>Fallout 3</h3>
486 |                         <ol>
487 |                             <li>Open the Epic Games Launcher and go to your <strong>Library</strong>.</li>
488 |                             <li>Find <strong>Fallout 3</strong> in the list.</li>
489 |                             <li>Click on the game to install it.</li>
490 |                             <ul>
491 |                                 <li>It is <strong>required</strong> to install the game outside of any default Windows folders (e.g., <span class="card-basic">Program Files x86</span>).</li>
492 |                             </ul>
493 |                         </ol>
494 |                     </div>
495 |                     </p>
496 |                 </div>
497 |             </span>
498 | 
499 |             <span id="PostInstallation" class="section">
500 |                 <h2 onclick="location.href='#PostInstallation'">Post-Installation</h2>
501 | 
502 |                 <div class="card" id="Terminology">
503 |                     <p>
504 |                     <h3>Key Terminology</h3>
505 |                     Now that the game is installed, there are two folders from it that will be referred to in the guide often:
506 |                     <ul>
507 |                         <li><strong>Root</strong> folder: Where the game is installed.</li>
508 |                         <ul>
509 |                             <li>For Steam:
510 |                                 <div class="card-basic">
511 |                                     <p>Steam\steamapps\common\Fallout New Vegas</p>
512 |                                 </div>
513 |                             </li>
514 |                             <li>For GOG:
515 |                                 <div class="card-basic">
516 |                                     <p>GOG Galaxy\Games\Fallout New Vegas</p>
517 |                                 </div> (unless you manually changed the installation path).
518 |                             </li>
519 |                             <li>For Epic Games:
520 |                                 <div class="card-basic">
521 |                                     <p>Epic Games\FalloutNewVegas\Fallout New Vegas English</p>
522 |                                 </div> (unless you manually changed the installation path).
523 |                             </li>
524 |                         </ul>
525 |                     </ul>
526 | 
527 |                     <ul>
528 |                         <li><strong>Data</strong> folder: Where all of the game's assets are located.</li>
529 |                         <ul>
530 |                             <li>For Steam:
531 |                                 <div class="card-basic">
532 |                                     <p>Steam\steamapps\common\Fallout New Vegas\Data</p>
533 |                                 </div>
534 |                             </li>
535 |                             <li>For GOG:
536 |                                 <div class="card-basic">
537 |                                     <p>GOG Galaxy\Games\Fallout New Vegas\Data</p>
538 |                                 </div>
539 |                             </li>
540 |                             <li>For Epic Games:
541 |                                 <div class="card-basic">
542 |                                     <p>Epic Games\FalloutNewVegas\Fallout New Vegas English\Data</p>
543 |                                 </div>
544 |                             </li>
545 |                         </ul>
546 |                     </ul>
547 |                     </p>
548 |                 </div>
549 |                 <div class="card" id="GeneratingINIs" title="Generating INIs">
550 |                     <p>
551 |                     <h3>Generating Fresh INI Files</h3>
552 |                     <h3>Fallout: New Vegas</h3>
553 |                     <ol>
554 |                         <li>Run the game from Steam/GOG Galaxy, or through FalloutNVLauncher.exe in the game files if you are using an offline copy.</li>
555 |                         <li>Click OK to both pop-ups that say <b>Detecting Video Hardware</b>.</li>
556 |                         <ul>
557 |                             <li>If there aren't any pop-ups, navigate to <span class="card-basic">Documents\My Games\FalloutNV</span> and delete all INI files, then retry.</li>
558 |                         </ul>
559 |                         <li>Click <b>OK</b> then <b>Exit</b>.</li>
560 |                     </ol>
561 |                     <h3>Fallout 3</h3>
562 |                     <ol>
563 |                         <li>Run the game from Steam/GOG Galaxy, or through FalloutLauncher.exe in the game files if you are using an offline copy.</li>
564 |                         <li>Click OK to both pop-ups that say <b>Detecting Video Hardware</b>.</li>
565 |                         <ul>
566 |                             <li>If there aren't any pop-ups, navigate to <span class="card-basic">Documents\My Games\Fallout3</span> and delete all INI files, then retry.</li>
567 |                         </ul>
568 |                         <li>Exit the launcher.</li>
569 |                     </ol>
570 |                     </p>
571 |                 </div>
572 |             </span>
573 | 
574 |             <div class="navigationArrowContainer">
575 |                 <a href="#" id="previous" rel="prev" class="navigationArrow">
576 |                     <img class="mirror" src="./img/UI/Arrow.svg" alt="Back Arrow">
577 |                     <span class="arrowText"></span>
578 |                 </a>
579 | 
580 |                 <a href="#" id="next" rel="next" class="navigationArrow">
581 |                     <span class="arrowText"></span>
582 |                     <img src="./img/UI/Arrow.svg" alt="Forward Arrow">
583 |                 </a>
584 |             </div>
585 |         </div>
586 | 
587 |         <div class="sidebar right-sidebar">
588 |             <p id="sidebarContent">
589 |             </p>
590 |         </div>
591 |     </div>
592 | 
593 |     <footer>ModdingLinked 2025</footer>
594 | 
595 |     <div id="image-overlay" class="overlay" hidden>
596 |         <div class="image-container">
597 |             <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
598 |             <div class="resize-overlay shrink"></div>
599 |         </div>
600 |     </div>
601 | 
602 | </body>
603 | 
604 | </html>


--------------------------------------------------------------------------------
/sitemap.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 3 | 	<url>
 4 | 		<loc>https://thebestoftimes.moddinglinked.com/essentials.html</loc>
 5 | 		<priority>0.90</priority>
 6 | 		<lastmod>2025-08-08</lastmod>
 7 | 	</url>
 8 | 	<url>
 9 | 		<loc>https://thebestoftimes.moddinglinked.com/intro.html</loc>
10 | 		<priority>0.90</priority>
11 | 		<lastmod>2025-05-06</lastmod>
12 | 	</url>
13 | 	<url>
14 | 		<loc>https://thebestoftimes.moddinglinked.com/ttw.html</loc>
15 | 		<priority>0.80</priority>
16 | 		<lastmod>2025-08-07</lastmod>
17 | 	</url>
18 | 	<url>
19 | 		<loc>https://thebestoftimes.moddinglinked.com/mo2.html</loc>
20 | 		<priority>0.70</priority>
21 | 		<lastmod>2025-05-06</lastmod>
22 | 	</url>
23 | 	<url>
24 | 		<loc>https://thebestoftimes.moddinglinked.com/fo3.html</loc>
25 | 		<priority>0.50</priority>
26 | 		<lastmod>2025-08-08</lastmod>
27 | 	</url>
28 | 	<url>
29 | 		<loc>https://thebestoftimes.moddinglinked.com/ttwintro.html</loc>
30 | 		<priority>0.50</priority>
31 | 		<lastmod>2024-06-17</lastmod>
32 | 	</url>
33 | 	<url>
34 | 		<loc>https://thebestoftimes.moddinglinked.com/setup.html</loc>
35 | 		<priority>0.50</priority>
36 | 		<lastmod>2025-05-06</lastmod>
37 | 	</url>
38 | </urlset>


--------------------------------------------------------------------------------
/ttw.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |     <link rel="icon" href="img/Coco/Head Logo.webp">
  9 | 
 10 |     <title>TTW | The Best of Times</title>
 11 | 
 12 |     <meta name="keywords" content="
 13 |     Mod, Modding, Mods, Guide, Mod Guide, Modding Guide, Resource, Resources,
 14 |     Stable, Stability, Performance, Fix, Fixes, FPS,
 15 |     Fast, Easy, Beginner,
 16 |     Nexus, Nexus Mods, NexusMods,
 17 |     Wabbajack, WJ, Installer,
 18 |     Mod Manager, Mod Organizer, MO2,
 19 |     Fallout, The Elder Scrolls, Bethesda, Bethesda Game Studios, BGS,
 20 |     Fallout New Vegas, Fallout NV, New Vegas, FNV, 
 21 |     Fallout 4, FO4,
 22 |     Tale of Two Wastelands, TTW,
 23 |     Skyrim Special Edition, Skyrim SE, SSE">
 24 | 
 25 |     <meta name="description" content="Instructions for Tale of Two Wastelands installation.">
 26 |     <meta http-equiv='content-language' content='en-us'>
 27 |     <meta name="twitter:card" value="summary_large_image">
 28 |     <meta property="og:site_name" content="ModdingLinked">
 29 |     <meta property="og:title" content="The Best of Times">
 30 |     <meta property="og:type" content="article">
 31 |     <meta property="og:url" content="https://thebestoftimes.moddinglinked.com">
 32 |     <meta property="og:image" content="https://thebestoftimes.moddinglinked.com/img/Others/Card.webp">
 33 |     <meta property="og:description" content="TTW installation.">
 34 | 
 35 |     <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#202524">
 36 |     <meta name="darkreader-lock">
 37 |     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
 38 |     <meta http-equiv='expires' content='0'>
 39 |     <meta http-equiv='pragma' content='no-cache'>
 40 |     <meta http-equiv='clear-site-data' content='cache'>
 41 | 
 42 |     <script src="js/imageViewer.js"></script>
 43 |     <script src="js/popup.js"></script>
 44 |     <script src="js/javascript.js"></script>
 45 |     <script src="js/responsiveTitle.js"></script>
 46 | 
 47 |     <link rel="stylesheet" href="css/styles.css">
 48 |     <link rel="stylesheet" href="css/cards.css">
 49 |     <link rel="stylesheet" href="css/header.css">
 50 |     <link rel="stylesheet" href="css/navigationArrows.css">
 51 |     <link rel="stylesheet" href="css/progressBar.css">
 52 |     <link rel="stylesheet" href="css/guideColors.css">
 53 |     <link rel="stylesheet" href="css/sidebar.css">
 54 |     <link rel="stylesheet" href="css/popup.css">
 55 |     <link rel="stylesheet" href="css/images.css">
 56 |     <link rel="stylesheet" href="css/textIcons.css">
 57 | </head>
 58 | 
 59 | <body class="theme">
 60 |     <div class="progress-container">
 61 |         <div class="progress-bar"></div>
 62 |     </div>
 63 | 
 64 |     <div class="container">
 65 |         <div class="header">
 66 |             <div class="headerMenu" onclick="toggleNav()">
 67 |                 <img src="./img/UI/Navigation.svg" id="navButton">
 68 |             </div>
 69 |             <div class="headerTitle">
 70 |                 <img src="./img/Coco/Head Logo.webp" alt="Logo" id="logo">
 71 |                 <a href="./index.html" id="headerTitle">The Best of Times</a>
 72 |             </div>
 73 |             <div class="guideLinks" id="headerLinks">
 74 |                 <a href="https://vivanewvegas.moddinglinked.com" target="_blank" rel="nofollow">Fallout: New Vegas</a>
 75 |                 <a href="https://themidnightride.moddinglinked.com" target="_blank" rel="nofollow">Fallout 4</a>
 76 |                 <a href="https://dragonbornsfate.moddinglinked.com" target="_blank" rel="nofollow">Skyrim SE</a>
 77 |             </div>
 78 |         </div>
 79 |         <div class="sidebar left-sidebar">
 80 |             <p class="pageLinks">
 81 |                 <a href="./index.html" title="Home">
 82 |                     Home
 83 |                 </a>
 84 | 
 85 |                 <a href="./intro.html" title="Introduction">
 86 |                     Introduction
 87 |                 </a>
 88 | 
 89 |                 <a href="./setup.html" title="Setup">
 90 |                     Setup
 91 |                 </a>
 92 | 
 93 |                 <a href="./mo2.html" title="MO2">
 94 |                     Mod Organizer 2
 95 |                 </a>
 96 | 
 97 |                 <a href="./ttw.html" title="TTW">
 98 |                     Tale of Two Wastelands
 99 |                 </a>
100 | 
101 |                 <a href="./essentials.html" title="Essential Mods">
102 |                     Essential Mods
103 |                 </a>
104 | 
105 |                 <a href="./finish.html" title="Final Steps">
106 |                     Final Steps
107 |                 </a>
108 |             </p>
109 |             <hr>
110 |             <p>
111 |                 <a href="./changelog.html" title="TBoT Changelog">
112 |                     TBoT Changelog
113 |                 </a>
114 | 
115 |                 <a href="./files/TTW Changelog.7z" target="_blank" title="TTW Changelog">
116 |                     TTW Changelog
117 |                 </a>
118 | 
119 |                 <a href="https://vivanewvegas.moddinglinked.com/resources.html" target="_blank" title="Resources">
120 |                     Resources
121 |                 </a>
122 | 
123 |                 <a href="./faq.html" title="FAQ">
124 |                     FAQ
125 |                 </a>
126 | 
127 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-tools.html" target="_blank" title="Tools to Avoid">
128 |                     Tools to Avoid
129 |                 </a>
130 | 
131 |                 <a href="https://vivanewvegas.moddinglinked.com/avoid-mods.html" target="_blank" title="Mods to Avoid">
132 |                     Mods to Avoid
133 |                 </a>
134 | 
135 |                 <a href="./fo3.html" title="FO3 Mod Guide">
136 |                     FO3 Mod Guide
137 |                 </a>
138 |             </p>
139 |             <p class="sidebar-padder"></p>
140 |             <hr>
141 |             <p class="sidebar-bottom">
142 |                 <a href="https://discord.gg/S99Ary5eba" title="Discord">
143 |                     Discord
144 |                 </a>
145 |                 <a title="Donate" class="popup-button" id="donation-button" onclick="openPopup(this, donation)">
146 |                     Donate
147 |                 </a>
148 |                 <a href="https://github.com/ModdingLinked/The-Best-of-Times" title="GitHub">
149 |                     GitHub
150 |                 </a>
151 |             </p>
152 |         </div>
153 | 
154 |         <div class="card popup" id="donation">
155 |             <ul>
156 |                 <li>
157 |                     <a href="https://www.patreon.com/moddinglinked" target="_blank" rel="nofollow">Patreon</a>
158 |                 </li>
159 |                 <li>
160 |                     <a href="https://www.paypal.me/Ungeziefi" target="_blank" rel="nofollow">PayPal</a>
161 |                 </li>
162 |             </ul>
163 |         </div>
164 | 
165 |         <div class="content">
166 | 
167 |             <span id="Installation" class="section">
168 |                 <h2 onclick="location.href='#Installation'">Installation</h2>
169 | 
170 |                 <div class="card" id="InstallingTTW" title="Installing TTW">
171 |                     <p>
172 |                     <h3>Installing Tale of Two Wastelands</h3>
173 |                     <ol>
174 |                         <li>Download the <a href="https://mod.pub/ttw/133-tale-of-two-wastelands" target="_blank">Tale of Two Wastelands Installer</a> and extract the contents of the archive anywhere outside of the default Windows folders.</li>
175 |                         <li>Open Mod Organizer 2, select the <img class="mo2-icon" src="./img/MO2/Folders.webp" alt="MO2 Folders"> button at the top and select <strong>Open Mods folder</strong>.</li>
176 |                         <li>Here, <strong>create a folder</strong> named <b>Tale of Two Wastelands</b> and then <strong>copy its path</strong>.</li>
177 |                         <li>Close MO2.</li>
178 |                         <li>Back in the TTW Installer folder, right-click the <strong>TTW Install.exe</strong> and select <b>Run As Administrator</b>.</li>
179 |                         <li>In the installer, verify that the automatically set file paths for both your Fallout 3 and Fallout: New Vegas installations are correct.</li>
180 |                         <li><strong>Paste the path</strong> you copied in step 3 in the last text field.</li>
181 |                         <div class="image-container width-70">
182 |                             <img class="content-img" src="./img/Others/Install TTW.webp" alt="TTW installation paths">
183 |                             <div class="resize-overlay expand"></div>
184 |                         </div>
185 |                         <li>Ensure your paths look similar to the example above, then <strong>Install</strong>.</li>
186 |                     </ol>
187 | 
188 |                     <div class="card-yellow">
189 |                         <p>
190 |                             The installation might take a long time as the audio encoding section is very CPU-intensive. It takes about 40 minutes on a Ryzen 5 5600x but could take several hours or even longer on a slower CPU.
191 |                             <br>
192 |                             <br>
193 |                             It is recommended to close any other CPU-intensive application during this time to avoid slowdowns.
194 |                             <br>
195 |                             <br>
196 |                             If you run into any errors during the installation, check the solutions listed in the <a href="./faq.html" target="_blank">FAQ</a>.
197 |                         </p>
198 |                     </div>
199 | 
200 |                     </p>
201 |                 </div>
202 | 
203 |                 <div class="card" id="Activation&Size" title="Activation & Size">
204 |                     <p>
205 |                     <h3>Activating and Size Check</h3>
206 |                     <ol>
207 |                         <li>Open MO2.</li>
208 |                         <li>If you installed TTW correctly, <strong>you should see the Tale of Two Wastelands mod in the left pane</strong> of MO2.</li>
209 |                         <ul>
210 |                             <li>If you do not see anything or the mod name is greyed out, you did not install TTW to the correct folder.
211 |                                 Find out where the files were installed to and move them to the folder you created in step 3 of the <a href="ttw.html#InstallingTTW">previous section</a>.
212 |                                 <br>
213 |                                 The path <strong>should look like this</strong>: <span class="card-basic">YOUR MO2 FOLDER\mods\Tale of Two Wastelands</span>
214 |                             </li>
215 |                         </ul>
216 |                         <li>Click the checkbox next to it in the left pane and the right pane should fill with plugins.</li>
217 |                         <li>In MO2, right-click Tale of Two Wastelands and <strong>Open in Explorer</strong>.</li>
218 |                         <li>Right-click anywhere in the folder (do not select any file inside) and open its <strong>Properties</strong>.</li>
219 |                         <li><strong>The folder's size should be 17GB</strong>, reinstall Tale of Two Wastelands if it isn't. This can be done by first clearing the contents of the current folder, then repeating the <a href="ttw.html#InstallingTTW">installation steps</a>.</li>
220 |                     </ol>
221 |                     </p>
222 |                 </div>
223 | 
224 |                 <div class="card" id="YUPTTWUpdate" title="YUPTTW Update">
225 |                     <p>
226 |                     <h3 class="link-download"><a href="https://mod.pub/ttw/133/files" target="_blank">YUPTTW 13.4</a></h3>
227 |                     The latest YUPTTW version, split from the main TTW installer to allow an easy update for existing installations.
228 |                     <h3 class="install">Installation instructions</h3>
229 |                     <ul>
230 |                         <li>
231 |                             <b>Main Files</b> - YUPTTW 13.4
232 |                             <ul>
233 |                                 <li>
234 |                                     Click <strong>MO2 download</strong>, then install the mod in MO2 by double clicking it in the <b>Downloads</b> tab.
235 |                                 </li>
236 |                             </ul>
237 |                         </li>
238 |                     </ul>
239 |                     </p>
240 |                 </div>
241 | 
242 |                 <div class="card" id="MrHouseHotfix">
243 |                     <p>
244 |                     <h3 class="link-download"><a href="https://mod.pub/ttw/133/files" target="_blank">Mr House Final Battle Dialogue Hotfix</a></h3>
245 |                     Fixes the issue where Mr. House reverts to his pre-battle dialogue when you insert the override chip at Hoover Dam.
246 |                     <h3 class="install">Installation instructions</h3>
247 |                     <ul>
248 |                         <li>
249 |                             <b>Main Files</b> - Mr House Final Battle Dialogue Hotfix
250 |                             <ul>
251 |                                 <li>
252 |                                     Click <strong>MO2 download</strong>, then install the mod in MO2 by double clicking it in the <b>Downloads</b> tab.
253 |                                 </li>
254 |                             </ul>
255 |                         </li>
256 |                     </ul>
257 |                     </p>
258 |                 </div>
259 |             </span>
260 | 
261 |             <div class="navigationArrowContainer">
262 |                 <a href="#" id="previous" rel="prev" class="navigationArrow">
263 |                     <img class="mirror" src="./img/UI/Arrow.svg" alt="Back Arrow">
264 |                     <span class="arrowText"></span>
265 |                 </a>
266 | 
267 |                 <a href="#" id="next" rel="next" class="navigationArrow">
268 |                     <span class="arrowText"></span>
269 |                     <img src="./img/UI/Arrow.svg" alt="Forward Arrow">
270 |                 </a>
271 |             </div>
272 |         </div>
273 | 
274 |         <div class="sidebar right-sidebar">
275 |             <p id="sidebarContent">
276 |             </p>
277 |         </div>
278 |     </div>
279 | 
280 |     <footer>ModdingLinked 2025</footer>
281 | 
282 |     <div id="image-overlay" class="overlay" hidden>
283 |         <div class="image-container">
284 |             <img id="enlarged-image" class="enlarged-image" src="" alt="Enlarged Image">
285 |             <div class="resize-overlay shrink"></div>
286 |         </div>
287 |     </div>
288 | 
289 | </body>
290 | 
291 | </html>


--------------------------------------------------------------------------------