Apply Material Design Lite to Roblox header and sidebar, removing other content
// ==UserScript==
// @name Roblox - Material Design Lite Header Only
// @namespace http://tampermonkey.net/
// @version 1.1
// @description Apply Material Design Lite to Roblox header and sidebar, removing other content
// @author YourName
// @match *://www.roblox.com/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// Load Material Design Lite CSS and Google Icons
const mdlCSS = document.createElement('link');
mdlCSS.rel = 'stylesheet';
mdlCSS.href = 'https://code.getmdl.io/1.3.0/material.indigo-pink.min.css';
document.head.appendChild(mdlCSS);
const googleIconsCSS = document.createElement('link');
googleIconsCSS.rel = 'stylesheet';
googleIconsCSS.href = 'https://fonts.googleapis.com/icon?family=Material+Icons';
document.head.appendChild(googleIconsCSS);
// Load Material Design Lite JavaScript
const mdlScript = document.createElement('script');
mdlScript.src = 'https://code.getmdl.io/1.3.0/material.min.js';
mdlScript.defer = true;
document.head.appendChild(mdlScript);
// Inject custom styling for the layout (Header and Sidebar)
GM_addStyle(`
/* Custom Styling for Header */
.mdl-layout__header {
background-color: #3F51B5;
color: white;
}
.mdl-layout__header-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.mdl-layout-title {
font-size: 24px;
font-weight: bold;
}
.mdl-navigation__link {
color: white;
font-size: 16px;
padding: 0 20px;
}
/* Sidebar Styles */
.mdl-layout__drawer {
background-color: #2C3E50;
}
.mdl-layout__drawer .mdl-navigation__link {
color: white;
font-size: 18px;
padding: 10px 20px;
}
/* Hide all other content */
body > *:not(header):not(.mdl-layout__drawer) {
display: none !important;
}
`);
// Create the new HTML layout with header and sidebar only
const newLayout = `
<!-- Header -->
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Roblox</span>
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#home">Home</a>
<a class="mdl-navigation__link" href="#games">Games</a>
<a class="mdl-navigation__link" href="#store">Store</a>
<a class="mdl-navigation__link" href="#about">About</a>
</nav>
</div>
</header>
<!-- Sidebar (Drawer) -->
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Roblox Menu</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#profile">Profile</a>
<a class="mdl-navigation__link" href="#friends">Friends</a>
<a class="mdl-navigation__link" href="#messages">Messages</a>
<a class="mdl-navigation__link" href="#settings">Settings</a>
</nav>
</div>
`;
// Insert the new layout into the body
document.body.innerHTML = newLayout;
})();