Starting off by admitting my limited knowledge in coding, I am determined to finish this simple script. Despite being aware of the script's limitations, I am struggling to understand why it is not functioning as intended. I have attempted to utilize features from similar CSS injection scripts, but unfortunately, the styling is not being applied correctly.
// ==UserScript==
// @name Test1
// @namespace +mK or OMGWTFISTHIS
// @description Changes HackForums to a dark, sleek theme!
// @include http://www.hackforums.net/*
// @include http://hackforums.net/*
// @version 1.3
// @run-at document-start
// ==/UserScript==
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addGlobalStyle('.thead {background: url(http://i.imgur.com/SRMEIpU.png) repeat scroll right top #111111; height: 20px; !important}');
addGlobalStyle('.tcat {background: url(http://i.imgur.com/SRMEIpU.png) repeat scroll 0 0 !important; }');
addGlobalStyle('.tborder {background: #111111; border: 1px solid #1D1D1D; !important; }');
addGlobalStyle('.bitButton {background-color: #1E1E1E; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('#panel {border: 1px solid #111111; !important; }');
addGlobalStyle('.menu ul, .tfoot {background: #111111 !important; }');
addGlobalStyle('.pm_alert {border: 1px solid #0AFF00 !important; }');
addGlobalStyle('body {background: #072948 url(http://imgur.com/dY3iaZ2.png) fixed; !important; }');
addGlobalStyle('.bottommenu {background: #111111; border: 1px solid #000000; !important; }');
addGlobalStyle('.button {background-color: #1E1E1E; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('.shadetabs li a, .shadetabs li a.selected {background-color: #1E1E1E; color: #6D6D6D; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('.shadetabs li a.selected, .shadetabs li a:hover {background-color: #111111; box-shadow: 0 1px 0 0 #505050 inset !important; }');
addGlobalStyle('.subforumicon.ajax_mark_read {background: #072948 url(http://i.imgur.com/Wfru130.gif) fixed; !important; }');
addGlobalStyle('a:hover, a:active, .menu ul a:hover, .menu ul a:active {color: #cccccc; !important; }');
addGlobalStyle('.shadetabs li a:hover {color: #fff; !important; }');
addGlobalStyle('.shadetabs li a.selected {color: #fff; !important; }');
addGlobalStyle('.pagination_current {background: #383737 !important; }');
addGlobalStyle('.pagination a, .pagination a:hover {background-color: #181818; !important; }');
addGlobalStyle('.navButton:hover {border-top: 1px solid #919191; background: #333333; !important; }');
addGlobalStyle('.tcat a:hover, .tcat a:active, .tfoot a:hover, .tfoot a:active, .navigation a:hover, .navigation a:active {color: #949494; !important; }');
addGlobalStyle('.pagination a:hover {color: #949494; !important; }');
addGlobalStyle('textarea, input.textbox {border: 1px solid #000000; !important; }');
addGlobalStyle('.subject_new, a.subject_new {font-weight: bold; !important;');
Presenting my current dilemma:
Upon visiting the website, the theme appears as desired. However, when navigating to any link on the page, the styling is applied correctly. If I refresh the active page (F5), only half of the styling is installed. This inconsistency occurs only when @run-at document-start is active. Removing this line results in the script executing after the DOM loads, causing the page to flash but applying the styling correctly.
My attempts to address one issue (page flashing) have led to another issue (incomplete styling). I am at a loss for solutions, even after removing image styles as a potential cause.