Frames
| All fun out of the pool for oldfag swim! "INTERNET HATE MACHINE"
|
On imageboards, frames (or framesets) is a mode that uses framesets (or iframes[for some reason the sharty implementation uses iframes]) to split the page into a left navigation menu and the site on the right. It is common on older (or oldfag LARP) imageboards. On some imageboards, it is the default view (index.html is frames). On others, where it is optional or deprecated, such as the 'cuck, it is optional and has to be enabled or navigated to. Many newer imageboards do not have frames at all.
On the Sharty[edit | edit source]
On the sharty, frames (https://www.soyjak.st/frames.html) is a page that allows you to customize the layout of the Sharty. This can be helpful if you want to add/remove boards to the sidebar, while also allowing for non board related items such as quick access to the onion service or the 'ru. By default, frames on the 'arty only has "Trying to find hidden boards award", meaning that it is completely useless without Tampermonkey. Only websites that allow for the iframe service can be accessible on the same page. YouTube, for example, will not work unless a video is embed but like stated before, the 'ru works. To still be able to access YouTube, for example, you will have to change the code to:
<a href="https://www.youtube.com" target="_blank">YouTube</a><br> \\This will cause YouTube or whatever the link is to open in a new tab
All of this is done by using the Tampermonkey extension. Make sure that you turn on Developer Mode in Extensions settings. You may have to turn on "Allow Access to File URL" which you can find in the details section of Tampermonkey within that same Extensions settings. Some basic HTML coding can is required (duh, you are redesigning the website) but I wonder what else you do to customize the site. There are plenty of things you can do.
Example[edit | edit source]
It may be easier to see here: https://files.catbox.moe/1cgeps.txt
// ==UserScript==
// @name Soyjak Frames Customizer
// @namespace http://tampermonkey.net/
// @version 1.1
// @description Clean frame setup for soyjak.st
// @author Nobody
// @match *://www.soyjak.st/frames.html
// @grant none
// ==/UserScript==
(function () {
'use strict';
// Create and inject frames loadFrames();
// Hide .boardlist in the main frame once it's loaded
document.getElementById('main').addEventListener('load', function () {
const boardlist = this.contentDocument.querySelector('.boardlist');
if (boardlist) boardlist.style.display = 'none';
});
function loadFrames() {
const sidebar = document.createElement('iframe');
sidebar.id = 'sidebar';
sidebar.name = 'sidebar';
sidebar.style.width = '180px'; // Adjust sidebar width here
sidebar.style.height = '100vh';
sidebar.style.border = 'none';
sidebar.style.float = 'left';
const main = document.createElement('iframe');
main.id = 'main';
main.name = 'main';
main.src = '/index.html';
main.style.width = 'calc(100% - 180px)';
main.style.height = '100vh';
main.style.border = 'none';
main.style.float = 'left';
document.body.innerHTML = ;
document.body.style.margin = '0';
document.body.appendChild(sidebar);
document.body.appendChild(main);
const sidebarContent = `
<html>
<head>
<style>
body {
margin: 0;
padding: 10px;
font-family: Arial, sans-serif;
background: #f0f8ff;
}
h1, h3 {
font-family: Arial, sans-serif;
color: #333;
margin-bottom: 10px;
}
h3 {
font-size: 14px;
background-color: lightblue;
padding: 5px;
border: 1px solid grey;
}
a {
font-size: 10pt;
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<img src="" width="120px">
Quick Access
<a href="javascript:void(0);" onclick="window.parent.document.getElementById('main').src='/soy/index.html';">/soy/</a>
</body>
</html>
`;
const sidebarDoc = sidebar.contentDocument || sidebar.contentWindow.document;
sidebarDoc.open();
sidebarDoc.write(sidebarContent);
sidebarDoc.close();
}
})();


" width="120px">