Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
A userscript to redesign the PPCG website

Change CR_THEME to use a theme similar to Code Review's.


  • Dark Theme


  • Auto-byte counts for all code blocks
  • New design
  • Better font
  • Custom Sprites (Voting / Favorite / Badge icons)

That's it... tell me in chat if you have any other ideas.

// ==UserScript==
// @name PPCG Design
// @namespace Doᴡɴɢᴏᴀᴛ
// @version 1
// @author Doᴡɴɢᴏᴀᴛ
// @grant none
// ==/UserScript==
function qS(x){
return document.querySelector(x);
var GOLF_BALL_THEME = false; // disable if you don't want PPCG to have anything to do with golf
var CR_THEME = false; // Code Review theme
var FAVICON = "//";
qS("link[rel$=\"icon\"]").href = FAVICON;
var x = qS(".beta-title").parentElement;
$("#content").css('background', 'none');
$(".post-tag").css('background', 'rgb(177, 235, 124)');
$(".post-tag").css('color', '#14761a');
$(".post-tag").css('border', 'none');
$("#mainbar, .user-page #content").css('background', '#FAFAFA');
$("#mainbar").css('padding', '15px');
$(".envelope-on, .envelope-off, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on, .star-off, .comment-up-off, .comment-up-on, .comment-flag, .edited-yes, .feed-icon, .vote-accepted-off, .vote-accepted-on, .vote-accepted-bounty, .badge-earned-check, .delete-tag, .grippie, .expander-arrow-hide, .expander-arrow-show, .expander-arrow-small-hide, .expander-arrow-small-show, .anonymous-gravatar, .badge1, .badge2, .badge3, .gp-share, .fb-share, .twitter-share, #notify-container span.notify-close,, .migrated.from")
.css("background-image", "url(");
$(".answer pre code").each(function() {
var t=$(this).text().trim().replace(/\r\n/g, "\n");
$(this).parent().before('<div style="font:11px \'Open Sans\'">'+(2*t.length-t.replace(/[\u0100-\uFFFF]/g,'').length)+" bytes</div>");
x.innerHTML = "<table id=\"newlogo\"><tr><td><img src=\""+FAVICON+"\" height=50></td><td>Programming Puzzles &amp; Code Golf</td></tr></table>";
document.head.innerHTML += "<style>@import url(,700,700italic,400italic);@import url(;.module:not(.community-bulletin,#questions-count){background-color:rgb(250, 250, 250) !important;padding:10px !important;}.youarehere{color:rgb(72,125,75) !important;border-bottom:2px solid rgb(72,125,75) !important;}.bounty-indicator-tab{background:rgb(193, 225, 183);color:rgb(72,125,75) !important;}html,body{font-family:\"Open Sans\"}#header *{color:#4C4C4C;}#content{background:#FAFAFA}#newlogo{font-family:\"Exo 2\";top:-15px;position:relative;}#newlogo td{padding-right:15px;}#hlogo a{width:600px;}</style>";
qS(".container").style.boxShadow = "none";
$("body .container").prepend('<div style="position: absolute;width: inherit; height: 120px; background: linear-gradient(rgba(153, 255, 165, 0.26), rgba(140, 255, 149, 0.26)), url("></div>');
if (CR_THEME) {
$("body > .container").css("box-shadow", "none");
$("body").css("background", "linear-gradient(rgba(140, 255, 149, 0.26), rgba(140, 255, 149, 0.26)), url(\"\")");
$("body > .container").css("box-shadow", "none");
$("body").css({"background-image":"url(", "background-size": "130px"});
document.querySelector("link[rel$=\"icon\"").href = FAVICON;
$('img[title="Programming Puzzles & Code Golf"]').attr("src", FAVICON);

This comment has been minimized.

Copy link

isaacg1 commented Jan 5, 2016

The background color on the tags was way too bright for my liking, so I changed line 21 to $(".post-tag").css('background', 'rgb(177, 235, 124)');


This comment has been minimized.

Copy link

turbo commented Jan 5, 2016

Suggestion: Optional switch/button for a dark theme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.