Greasy Fork is available in English.

Wider PCGamesN

Makes the PCGamesN site wrapper and content wider (custom width)

  1. // ==UserScript==
  2. // @name Wider PCGamesN
  3. // @namespace 1N07
  4. // @author 1N07
  5. // @version 0.5.2
  6. // @description Makes the PCGamesN site wrapper and content wider (custom width)
  7. // @match https://www.pcgamesn.com/*
  8. // @grant GM_registerMenuCommand
  9. // @grant GM_unregisterMenuCommand
  10. // @grant GM_getValue
  11. // @grant GM_setValue
  12. // @noframes
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. var siteWidthOption;
  17. var siteWidth = GM_getValue("siteWidth", "1240px");
  18. if(!isNaN(siteWidth))
  19. {
  20. siteWidth = "1240px";
  21. GM_setValue("siteWidth", siteWidth);
  22. alert("Invalid site width value detected! Width set to default (1240px).")
  23. }
  24. SetSiteWidthOption();
  25.  
  26. var centerImgOption;
  27. var centerImg = GM_getValue("centerImg", true);
  28. SetCenterImgOption();
  29.  
  30. window.onload = function() {
  31. doTheThings();
  32. setTimeout(doTheThings, 1000); //Doing another pass in case it fails the first one because shit hasn't loaded properly yet.
  33. }
  34.  
  35. if(true) {
  36. addGlobalStyle(`
  37. #site_wrap, .next_page_placeholder, .flow_ad_wrap {
  38. max-width: 100% !important;
  39. width: `+siteWidth+` !important;
  40. box-sizing: border-box;
  41. }
  42.  
  43. .sticky_rail600 {
  44. max-height: 600px;
  45. height: auto !important;
  46. }
  47.  
  48. .ad-mobile {
  49. display: none !important;
  50. }
  51.  
  52. .feature_aside {
  53. display: inline-block;
  54. width: auto;
  55. }
  56.  
  57. .feature_posts {
  58. width: auto;
  59. text-align: center;
  60. }
  61.  
  62. .post_med {
  63. display: inline-block;
  64. margin: 10px;
  65. }
  66.  
  67. .entry-content {
  68. width: auto !important;
  69. margin: 30px 75px;
  70. }
  71.  
  72. .content_expander {
  73. display: none; /*unsure what this is for, doesn't seem to ever contain anything but empty space for no reason*/
  74. }
  75.  
  76. article > div.article-featured-image img {
  77. max-width: 100%;
  78. }
  79.  
  80. .feature-header {
  81. margin: auto;
  82. max-width: 100%;
  83. }
  84.  
  85. .list_feature_item img {
  86. width: 900px !important;
  87. }
  88. .list_feature_item {
  89. margin: 0 -60px 35px !important;
  90. }
  91.  
  92. .responsive-container {
  93. width: 900px !important;
  94. height: 507px !important;
  95. margin: 30px `+(centerImg ? `auto` : `0`)+` !important;
  96. }
  97.  
  98. .pcgn-pullquote {
  99. margin-left: -75px !important;
  100. }
  101.  
  102. .pcgn-callout {
  103. margin-right: -75px !important;
  104. }
  105.  
  106. p > img, p .gallery {
  107. max-width: 100%;
  108. }
  109.  
  110. `+(centerImg ? `
  111. p .gallery img {
  112. margin: 0 !important;
  113. left: 0px !important;
  114. transform: initial !important;
  115. width: 100%;
  116. }
  117. p > img {
  118. margin: auto !important;
  119. left: 0px !important;
  120. transform: initial !important;
  121. }
  122. ` : `
  123. p img.aligncenter {
  124. left: 0px !important;
  125. transform: initial !important;
  126. width: 900px !important;
  127. margin: 30px calc(50% - 450px) !important;
  128. }
  129.  
  130. p .gallery img.size-large:not(.aligncenter), p .gallery img.size-full:not(.aligncenter) {
  131. margin: 30px 0 !important;
  132. width: 900px !important;
  133. }
  134. `)+`
  135.  
  136. p .gallery {
  137. `+(centerImg ? `
  138. width: 900px !important;
  139. margin: 30px auto !important;
  140. ` : `
  141. width: 100% !important;
  142. `)+`
  143. }
  144.  
  145. .image_comparison {
  146. margin-left: 160px; !important;
  147. }
  148.  
  149. div.pcgn_gallery_large {
  150. margin: 30px `+(centerImg ? `auto` : `0`)+` !important;
  151. }
  152. `);
  153. }
  154.  
  155. function addGlobalStyle(css) {
  156. var head, style;
  157. head = document.getElementsByTagName('head')[0];
  158. if (!head) { return; }
  159. style = document.createElement('style');
  160. style.type = 'text/css';
  161. style.innerHTML = css;
  162. head.appendChild(style);
  163. }
  164.  
  165. function doTheThings() {
  166. try {
  167. var thing = document.getElementsByClassName("feature_aside")[0];
  168. if(thing.offsetWidth < 1) {
  169. document.getElementsByClassName("feature_posts")[0].style.width = "100%";
  170. }
  171. } catch(err) {}
  172.  
  173. try {
  174. /*var articleImg = document.getElementsByClassName("article-featured-image")[0].getElementsByTagName("img")[0];
  175. articleImg.removeAttribute("sizes");
  176. articleImg.removeAttribute("width");
  177. articleImg.removeAttribute("height");*/
  178. } catch(err) {}
  179.  
  180. try {
  181. var moreImgs = document.getElementsByClassName("gallery");
  182. for(var i = 0, len = moreImgs.length; i < len; i++) {
  183. moreImgs[i].getElementsByTagName("img")[0].removeAttribute("sizes");
  184. moreImgs[i].getElementsByTagName("img")[0].removeAttribute("width");
  185. moreImgs[i].getElementsByTagName("img")[0].removeAttribute("height");
  186. }
  187. } catch(err) {}
  188. }
  189.  
  190. function SetSiteWidthOption() {
  191. GM_unregisterMenuCommand(siteWidthOption);
  192. siteWidthOption = GM_registerMenuCommand("Site width: " + siteWidth + " -click to change-", function(){
  193. let prevVal = siteWidth;
  194. siteWidth = prompt("Give the site width value (CSS unit value e.g. 1000px)", prevVal);
  195.  
  196. GM_setValue("siteWidth", siteWidth);
  197. SetSiteWidthOption();
  198. if(confirm("Refresh now to see changes?")) {
  199. location.reload();
  200. }
  201. });
  202. }
  203.  
  204. function SetCenterImgOption() {
  205. GM_unregisterMenuCommand(centerImgOption);
  206. centerImgOption = GM_registerMenuCommand("Center images: " + (centerImg ? "yes" : "no") + " -click to change-", function(){
  207. centerImg = !centerImg;
  208. GM_setValue("centerImg", centerImg);
  209. SetCenterImgOption();
  210. if(confirm("Refresh now to see changes?")) {
  211. location.reload();
  212. }
  213. });
  214. }
  215. })();