Chrome/TamperMonkey for Design
For those of you, using TamperMonkey in Chrome, I have created a small script, which, for now, will compact the design just a bit. Feel free to enhance/comment.
// ==UserScript== // @name [DPE] CSS Overrides // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://en.delphipraxis.net/* // @exclude *?do=edit // @grant none // ==/UserScript== (function() { 'use strict'; // fluid list const $ = jQuery; $('HEADER .logo').attr('style', 'height: auto;'); $('HEADER .logo IMG').attr('style', 'margin-bottom: -30px;'); $('LI.ipsDataItem').attr('style', 'padding: 2px 0'); $('DIV.ipsDataItem_icon').attr('style', 'padding: 0 10px;'); $('DIV.ipsDataItem_main').attr('style', 'padding: 0;'); $('UL.ipsDataItem_stats').attr('style', 'padding: 0 10px 0 0;'); $('LI.ipsDataItem_unread DIV.ipsDataItem_main A[href*=topic]').each(function() { const href = $(this).attr('href'); if (href.indexOf('?') < 0) $(this).attr('href', href + '?do=getNewComment'); }); // thread view const ipsPageHeader = $('DIV.ipsPageHeader'); ipsPageHeader.attr('style', 'padding: 5px;'); const topicControls = ipsPageHeader.next(); const topicControlsLinks = topicControls.find('A'); for (var idx = 0, link; link = topicControlsLinks[idx]; idx++) { const div = $('<div class="ipsPos_right ipsResponsive_noFloat ipsResponsive_hidePhone" style="margin-left: 5px;"></div>'); link.style = 'padding: 5px; line-height: 1.5em;'; div.append(link); ipsPageHeader.prepend(div); } topicControls.remove(); $('UL.cAuthorPane_info').attr('style', 'transform: scale(0.6); padding: 0; margin: -40px;'); $('DIV[data-role="commentContent"]').attr('style', 'padding: 0; font-size: small;'); })(); ... 🐈 ...
// ==UserScript== // @name [DPE] CSS Overrides // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://en.delphipraxis.net/* // @exclude *?do=edit // @grant none // ==/UserScript== (function() { 'use strict'; // fluid list const $ = jQuery; $('HEADER .logo').attr('style', 'height: auto;'); $('HEADER .logo IMG').attr('style', 'margin-bottom: -30px;'); $('LI.ipsDataItem').attr('style', 'padding: 2px 0'); $('DIV.ipsDataItem_icon').attr('style', 'padding: 0 10px;'); $('DIV.ipsDataItem_main').attr('style', 'padding: 0;'); $('UL.ipsDataItem_stats').attr('style', 'padding: 0 10px 0 0;'); $('LI.ipsDataItem_unread DIV.ipsDataItem_main A[href*=topic]').each(function() { const href = $(this).attr('href'); if (href.indexOf('?') < 0) $(this).attr('href', href + '?do=getNewComment'); }); // thread view const ipsPageHeader = $('DIV.ipsPageHeader'); ipsPageHeader.attr('style', 'padding: 5px;'); const topicControls = ipsPageHeader.next(); const topicControlsLinks = topicControls.find('A'); for (var idx = 0, link; link = topicControlsLinks[idx]; idx++) { const div = $('<div class="ipsPos_right ipsResponsive_noFloat ipsResponsive_hidePhone" style="margin-left: 5px;"></div>'); link.style = 'padding: 5px; line-height: 1.5em;'; div.append(link); ipsPageHeader.prepend(div); } topicControls.remove(); $('UL.cAuthorPane_info').attr('style', 'transform: scale(0.6); padding: 0; margin: -40px;'); $('DIV[data-role="commentContent"]').attr('style', 'padding: 0; font-size: small;'); })(); ... 🐈 ...
Hi,
I added a couple things:
+ enable_compact_topic_banner (if you want the topic banner to be smaller, but otherwise unchanged)
+ enable_compact_comment_footer (reduces the height of the quote/reaction footer of comments)
+ enable_username_above_avatar (moves the username from the blue comment header to above the user avatar)
// ==UserScript==
// @name [DPE] CSS Overrides
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://en.delphipraxis.net/
// @match https://en.delphipraxis.net/?*
// @match https://en.delphipraxis.net/topic/*
// @match https://en.delphipraxis.net/discover/*
// @grant none
// ==/UserScript==
(function() {
try{
'use strict';
// Header
const enable_compact_banner = true;
const enable_compact_searchbar = true;
// thread overview
const enable_compact_topic_banner = true;
const enable_modified_topic_banner = true;
const enable_compact_fluidlist = true;
const enable_additional_highlight = true;
// Threads/Posts
const enable_small_userinfo = true;
const enable_compact_comment = true;
const enable_compact_comment_footer = true;
const enable_compact_pre = true;
const enable_compact_code = true;
const enable_compact_survey = true;
const enable_username_above_avatar = true;
// Other
const enable_goto_latest_post = true;
const enable_scroll_to_content = true;
const enable_compactDiscover = true;
const isDiscover = location.href.indexOf('delphipraxis.net/discover') > 0;
const $ = jQuery;
const stylesheet = document.styleSheets[document.styleSheets.length - 1];
if (enable_compact_banner)
{
$('HEADER .logo').attr('style', 'height: auto;');
$('HEADER .logo IMG').attr('style', 'margin-bottom: -30px;');
}
// fluid list
if (enable_compact_fluidlist && !isDiscover)
{
$('LI.ipsDataItem').attr('style', 'padding: 2px 0');
$('DIV.ipsDataItem_icon').attr('style', 'padding: 0 10px;');
$('DIV.ipsDataItem_main').attr('style', 'padding: 0;');
$('UL.ipsDataItem_stats').attr('style', 'padding: 0 10px 0 0;');
}
if (enable_goto_latest_post)
{
$('LI.ipsDataItem_unread DIV.ipsDataItem_main A[href*=topic]').each(function() {
const href = $(this).attr('href');
if (href.indexOf('?') < 0) $(this).attr('href', href + '?do=getNewComment');
});
}
const ipsPageHeader = $('DIV.ipsPageHeader');
if (enable_compact_topic_banner)
{
ipsPageHeader.attr('style', 'padding: 5px;');
}
if (enable_modified_topic_banner)
{
if (!isDiscover) {
const topicControls = ipsPageHeader.next();
const topicControlsLinks = topicControls.find('A');
for (var idx = 0, link; link = topicControlsLinks[idx]; idx++) {
if ($(link).closest('FORM').length > 0) continue;
const div = $('<div class="ipsPos_right ipsResponsive_noFloat ipsResponsive_hidePhone" style="margin-left: 5px;"></div>');
link.style = 'padding: 5px; line-height: 1.5em;';
div.append(link);
ipsPageHeader.prepend(div);
}
}
}
if (enable_username_above_avatar && !isDiscover)
{
var authorOriginal = $('.cAuthorPane_author > strong > a');
authorOriginal.each(
function(i, obj)
{
var txt = obj.innerHTML;
var list = obj.parentElement.parentElement.nextSibling.nextSibling;
list.innerHTML = '<li><strong>' + obj.outerHTML + '</strong></li>' + list.innerHTML;
obj.outerHTML = ' ';
});
}
if (enable_small_userinfo)
{
$('UL.cAuthorPane_info').attr('style', 'transform: scale(0.6); padding: 0; margin: -40px;');
}
if (enable_compact_comment && !isDiscover)
{
$('DIV[data-role="commentContent"]').attr('style', 'padding: 0; font-size: small;');
}
if (enable_compact_comment_footer && !isDiscover)
{
$('.ipsItemControls').attr('style', 'line-height: 25px; height: 25px;');
$('.ipsComment_controls').attr('style', 'line-height: 25px; height: 25px;');
$('.ipsReact_types').attr('style', 'transform: scale(0.75);');
}
// Code
if (enable_compact_code && !isDiscover)
{
$('PRE.ipsCode').attr('style', 'padding: 5px !important; font-size: small;');
}
if (enable_compact_pre) {
stylesheet.insertRule('PRE.ipsCode { max-height: 15em; }');
stylesheet.insertRule('PRE.ipsCode.viewAll { max-height: inherit; }');
stylesheet.insertRule('.codefold { right: 0; position: absolute !important; margin-right: 3em; }');
const a = $('<a href="javascript:void(0);" class="codefold" onclick="$(this).parent().toggleClass(\'viewAll\');">open/close</a>');
$('PRE.ipsCode').prepend(a);
}
// Survey
if (enable_compact_survey && !isDiscover)
{
$(':root').attr('style', '--grid-gap: 0px;');
$('span.ipsFaded').attr('style', 'margin-left: 5px;');
}
if (enable_additional_highlight)
{
// Highlight subforum in post listing (fluid list)
$('.ipsDataItem_meta > a[href*="?forumId="]').css({ color: '#4D7395' });
// Highlight user in post listing (fluid list)
$('.ipsDataItem_meta > span > a[href*="/profile/"]').css({ color: '#4D7395' });
}
// Compact search bar
if (enable_compact_searchbar && !isDiscover)
{
$('.nav-bar').attr('style', 'height: 30px;');
$('.secondary-header-align').attr('style', 'height: 30px;');
$('.ipsNavBar_primary > ul > li > a').attr('style', 'line-height: 30px;');
$('.ipsfocus-search').attr('style', 'height: 30px; line-height: 30px;');
}
stylesheet.insertRule('.ipsDataList.ipsDataList_zebra > .ipsDataItem { height: 45px; }');
if (enable_compactDiscover && isDiscover) {
$('LI.ipsStreamItem').attr('style', 'padding: 2px 10px !important; margin: 0 0 2px 30px !important;');
$('LI.ipsStreamItem UL.ipsTags').each(function () { $(this).closest('DIV').find('H2').append($(this)); });
}
// scroll to start of content
if (enable_scroll_to_content)
{
if ((window.location.href.indexOf('?do') < 0) && window.location.href.indexOf('#') < 0)
{
$('html,body').animate({scrollTop: $('#elContent').offset().top},'slow');
}
}
}
catch(e)
{
// I don't wanna hear about it
}
})();