Homepage redesign ideas

General Forums Blender Artists Updates
43

That theme switcher component looks great! I don’t have access to the Discourse backend, but I was able to whip up a quick and dirty tabbed posts/art switcher:

It’s buggy, but it’s not production code, it’s just a functional mockup that’s a front-end hack at best.

To make space for the tabs, I removed the social icons and pushed the nav to the right. I personally feel like the social icons take up a lot of useful space and aren’t all that important, but that’s of course open to differing opinions.

Code below if anyone wants to try it themselves :slight_smile:

JavaScript/TamperMonkey code 
// ==UserScript==
// @name         Add Tabs to Homepage
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://blenderartists.org/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=blenderartists.org
// @grant        none
// ==/UserScript==

//make space for the tabs by removing social icons and shifting nav to the right

var icons = Array.from(document.getElementsByClassName("custom-header-icon-link")).slice(0,2);
for (var r in icons) {
    try{
        icons[r].remove();
    }
    catch {
        console.log("Icon removal complete");
    }
}

var v = document.getElementsByClassName("d-header-icons")[0];
v.style.marginLeft = "0vw";

//this only needs to be run on the homepage
try{
    var n = document.getElementsByClassName("nav-link-container")[0];
    n.style.right = "80px";

    // add tabs
    Element.prototype.appendAfter = function(element) {
      element.parentNode.insertBefore(this, element.nextSibling);
    }, false;

    var NewElement = document.createElement('div');
    NewElement.innerHTML = "<li style = 'list-style-type: none;font-weight:700;margin-left:20px;'><a href = 'https://blenderartists.org/c/artwork/8/l/latest'>Latest Art</a></li>";
    NewElement.className = "nav-pills";
    NewElement.id = 'artwork-tab';
    NewElement.appendAfter(document.getElementsByClassName('title')[0]);

    NewElement = document.createElement('div');
    NewElement.innerHTML = "<li style = 'list-style-type: none;font-weight:700;'><a href = 'https://blenderartists.org/categories'>Latest Posts</a></li>";
    NewElement.id = 'posts-tab';
    NewElement.className = "nav-pills";
    NewElement.appendAfter(document.getElementById('artwork-tab'));


} catch {
    console.log("Not the homepage")
}
1 Like