• 🏆 Texturing Contest #33 is OPEN! Contestants must re-texture a SD unit model found in-game (Warcraft 3 Classic), recreating the unit into a peaceful NPC version. 🔗Click here to enter!
  • It's time for the first HD Modeling Contest of 2024. Join the theme discussion for Hive's HD Modeling Contest #6! Click here to post your idea!

New Hive Theme

Status
Not open for further replies.

Deleted member 219079

D

Deleted member 219079

wait, what, where?
http://www.hiveworkshop.com/forums/site-discussion-97/new-hive-theme-256724/index2.html#post2609654

Currently I'm looking for different css styler, because stylebot rearranges the css rules, which causes e.g. links not change color when you're hovering over them. Also it rearranges the comments to go to bottom.

Currently trying Stylish, it doesn't support all the selectors I've used for D3 theme, I guess I'll try to change those somehow...

UPDATE: Moving to Stylish!!
Now on, my future uploads will be @ userstyles.org

Currently I have only 1 theme there:
D3 theme: https://userstyles.org/styles/106891/hiveworkshop-diablo-3-theme

This version includes new approach to the resource list!
 
Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

Coming up! (quality won't be as poor :) )
attachment.php
 

Attachments

  • comingup.JPG
    comingup.JPG
    153.7 KB · Views: 305

Deleted member 219079

D

Deleted member 219079

I dumped that resource list as it offers nothing new. Now I've moved onto javacript and jQuery, and currently I'm working on a resource list like this:
attachment.php

Should I upload it here when it's ready? It needs another chrome extension to work.
 

Attachments

  • newResourcelist.PNG
    newResourcelist.PNG
    125 KB · Views: 254

Deleted member 219079

D

Deleted member 219079

Updatuuu!
As a pre-Christmas present, I have something for this.

It's really early and just a concept, it's based on my post last year.

Not that many ppl got any interest for it at all, imo it's better than using the horrible gems. E.g. I prefer Hearthstone's number leagues to Starcraft's medal leagues.

attachment.php


HTML:
    // 10+10*current lvl^1.5
var levelExp = function (level) {
    return 10 + 10*Math.pow(level,1.5);
};
var round = function (n) {
    n=n.toString();
    var str="";
    var c="";
    while (n.length>0) {
        c=n.substring(0,1);
        if (c===".") {
            return parseInt(str);
        } else {
            str=str+c;
        }
        n=n.substring(1,n.length);
    }
    if (str.length===0) {
        return 0;
    }
    return parseInt(str);
};

var getLevel = function (rep) {
    var i=0;
    while (rep>levelExp(i)) {
        i++;
    }
    return Math.max(1,i);
};

var pushC=-1;
jQuery.fn.push = function () {
    pushC++;
    $(this).append("<div id=\"element"+pushC+"\"></div>");
    return $("#element"+pushC);
};
jQuery.fn.pushFront = function () {
    pushC++;
    $(this).prepend("<div id=\"element"+pushC+"\"></div>");
    return $("#element"+pushC);
};

var getRep = function (str) {
    var i=str.length;
    var s="";
    while(i>0) {
        var l=str.length;
        var c=str.substring(l-1,l);
        if (!isNaN(c)) {
            s=c+s;
        } else if (c==="(") {
            return s;
        }
        str=str.substring(0,l-1);
        i--;
    }
    return -1;
};

jQuery.fn.initBar = function (title) {
    this.children().each(function () {$(this).remove()} );
    var me=$(this).parent();
    this.remove();
    //pushC++;
    //$(this).replaceWith("<div id=\"element"+pushC+"\"></div>");
    //var me = $("#element"+pushC);
    me.css({/*
        */ "position": "relative", /*
        */ "width": "100%", /*
        */ "display": "table"});
    var rep = getRep(title);
    if (rep===-1) {
        me.append(" (User has disabled rep)");
    } else {
        var level = getLevel(rep);
        var nextLevel = levelExp(level);
        var toNextRatio;
        if (level!==1) {
            var thisLevel = levelExp(level-1);
            toNextRatio = (rep-thisLevel)/(nextLevel-thisLevel) * 100;
        } else {
            toNextRatio = rep/nextLevel * 100;
        }
        
        me.prepend("<br><br>");
        
        var txt = me.pushFront();
        txt.css({
             "width": "100%","height": "15px", 
             "border": "1px solid #000", 
             "position": "absolute", 
             "display": "inline-block"
        });
        txt.append("<strong>Level "+getLevel(rep)+"</strong> ("+rep+"/"+round(nextLevel)+")");
        
        var bar = me.pushFront();
        bar.css({ 
             "background-color": "#335018", 
             "width": toNextRatio+"%", 
             "height": "15px", 
             "border": "1px solid #000", 
             "position": "absolute", 
             "display": "inline-block" });
        
        var barBg = me.pushFront();
        barBg.css({ 
             "background-color": "#192205", 
             "width": "100%","height": "15px", 
             "border": "1px solid #000", 
             "position": "absolute", 
             "display": "inline-block" });
    }
};

$(document).ready(function () {
    $(".inlineimg").each(function () {
        var viable=false;
        var s = $(this).attr('src');
        if (s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_vhighpos.gif' /*
        */ || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_higherpos.gif' /*
        */ || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_highpos.gif' /*
        */ || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_pos.gif' /*
        */ || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_smallpos.gif' /*
        */ || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_off.gif')
        {
            viable=true;
        }
        if (viable) {
            $(this).parent().initBar($(this).attr('title'));
        }
    });
});

  1. You need to use the newest/new enough for the tool - version of Google Chrome / build off of late Chromium (e.g. I use Iron).
  2. Download the cjs from the chrome store link I posted in this post, if it works correctly, you should now see a blue "cjs" text at the top right corner of your browser.
  3. Select all the code I posted in this particular post. Copy it, and paste it onto the window which'll appear when you click the blue cjs text in the corner.
  4. Make sure it'll automatically add jQuery library for the code to use, use the drop down custom script selection to do so. Select the jQuery with biggest number.
  5. Click "Save". It should now reload the page.
  6. After reload, when the browser does no longer load the page, the script should be ran.

I need feedback on:
-How do you like the concept of using levels instead of gems?
-Are the bar colors okay, would gradient color serve it better?
-Does the fact, that the vanilla rep indication still shows up before the script is ran, bother you?
-Does the fact, that the code won't update after you rep someone, bother you?
-How do you like the level ramps? current formula: 10+10*current lvl^1.5

And the obvious:
-Is the script not running even though you read the implementation guide? Press F12 while your window is focused on, and if there's any red text in the console (navigate to it yourself, too lazy to guide you there), could you cnp it here?
 

Attachments

  • preview.PNG
    preview.PNG
    83.3 KB · Views: 252
Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

HTML:
    // 10+10*current lvl^2
var levelExp = function (level) {
    return 10 + 10*Math.pow(level,2);
};
var rArr = [
        1, // gr>orng
        60, // orng>grn
        120, // grn>bl
        600, // bl>wht
        1200, // wht>gld
        1200  //gld
        ];

var cArr = [
        [130, 130, 130, // gr top
        80, 80, 80], // gr bot
        [130, 91, 30, // orng top
        80, 51, 24], // orng bot
        [91, 130, 30, // grn top
        51, 80, 24], // grn bot
        [73, 93, 240, // bl top
        30,48,145], // bl bot
        [220, 220, 220, // wht top
        130, 130, 130], // wht bot
        [130, 122, 30, // gld top
        80, 72, 24] // gld bot
    ];
var getFBarC = function (rep) {
    var i=0;
    while (rep>rArr[i]) {
        if (typeof rArr[i+1] !== 'undefined') {
            i++;
        } else {
            break;
        }
    }
    return "linear-gradient(rgb(" +
        cArr[i][0]+","+
        cArr[i][1]+","+
        cArr[i][2]+")20%, rgb("+
        cArr[i][3]+","+
        cArr[i][4]+","+
        cArr[i][5]+")60%)";
};
var round = function (n) {
    n=n.toString();
    var str="";
    var c="";
    while (n.length>0) {
        c=n.substring(0,1);
        if (c===".") {
            return parseInt(str);
        } else {
            str=str+c;
        }
        n=n.substring(1,n.length);
    }
    if (str.length===0) {
        return 0;
    }
    return parseInt(str);
};

var getLevel = function (rep) {
    var i=0;
    while (rep>levelExp(i)) {
        i++;
    }
    return Math.max(1,i);
};

var pushC=-1;
jQuery.fn.push = function () {
    pushC++;
    $(this).append("<div id=\"element"+pushC+"\"></div>");
    return $("#element"+pushC);
};
jQuery.fn.pushFront = function () {
    pushC++;
    $(this).prepend("<div id=\"element"+pushC+"\"></div>");
    return $("#element"+pushC);
};

var getRep = function (str) {
    var i=str.length;
    var s="";
    while(i>0) {
        var l=str.length;
        var c=str.substring(l-1,l);
        if (!isNaN(c)) {
            s=c+s;
        } else if (c==="(") {
            return s;
        }
        str=str.substring(0,l-1);
        i--;
    }
    return -1;
};

var getUser = function (str) {
    var i=0;
    var s="";
    while(str.length>0) {
        var c=str.substring(0,1);
        if (c===" ") {
            return s;
        } else {
            s=s+c;
        }
        str=str.substring(1,str.length);
    }
    return s;
};

jQuery.fn.initBar = function (title) {
    this.children().each(function () {$(this).remove()} );
    var me=$(this).parent();
    this.remove();
    me.css({
        "position": "relative", 
        "width": "107px",
        "display": "table"});
    var rep = getRep(title);
    if (rep<=0) {
        me.append(" (No levels)");
    } else {
        var level = getLevel(rep);
        var nextLevel = levelExp(level);
        var toNextRatio;
        if (level!==1) {
            var thisLevel = levelExp(level-1);
            toNextRatio = (rep-thisLevel)/(nextLevel-thisLevel) * 100;
        } else {
            toNextRatio = rep/nextLevel * 100;
        }
        
        me.prepend("<br>");
        
        var plusC = me.pushFront();
        plusC.css({
             "width": "100%","height": "15px", 
             "border": "1px solid #000", 
             "position": "absolute", 
             "display": "inline-block",
             "text-align": "right",
        });
        plusC.attr('title',getUser(title)+' has '+rep+' reputation points, '+round(nextLevel-rep)+' to next level.');
        
        var defP = me.children('span');
        defP.appendTo(plusC);
        defP.children('a').children('img').remove();
        defP.children('a').append('<strong>+</strong>');
        var plus=defP.children('a');//$('#element'+pushC);
        plus.css({
             "opacity": "0.5",
             "text-shadow": "1px 1px 1px #000",
             "cursor": "pointer",
             "text-decoration": "none",
             "color": me.css("color"),
             "padding": "5px"
        });
        plus.hover(function () {
            $(this).css("opacity","1");
        }, function () {
            $(this).css("opacity","0.5");
        });
        
        var txt = me.pushFront();
        txt.css({
             "width": "100%","height": "15px", 
             "border": "1px solid #000", 
             "position": "absolute", 
             "display": "inline-block",
             "text-align": "center",
             "text-shadow": "1px 1px 1px #000"
        });
        txt.append("<strong>Level "+getLevel(rep)+"</strong>");
        
        var bar = me.pushFront();
        bar.css({ 
             "background": getFBarC(rep), 
             "width": toNextRatio+"%", 
             "height": "15px", 
             "border": "1px solid #000", 
             "position": "absolute", 
             "display": "inline-block" });
        
        var barBg = me.pushFront();
        barBg.css({ 
             "background-color": "#192205", 
             "width": "100%","height": "15px", 
             "border": "1px solid #000", 
             "position": "absolute", 
             "display": "inline-block" });
    }
};

var initRep = function () {
    var s = $(this).attr('src');
    if (s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_vhighpos.gif' 
     || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_higherpos.gif' 
     || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_highpos.gif' 
     || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_pos.gif' 
     || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_smallpos.gif'
     || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_balance.gif'
     || s==='http://www.hiveworkshop.com/forums/images_custom/style_wc3s/reputation_normal/reputation_off.gif')
    {
        $(this).parent().initBar($(this).attr('title'));
    }
};

function stringHasNumbers (str) {
    while (str.length) {
        if (!isNaN(str.substring(0,1))) {
            return true;
        }
        str=str.substring(1,str.length);
    }
    return false;
}
if (stringHasNumbers(document.URL)) {
    $(document).ready(function () {
        $(".inlineimg:first-child").each(initRep);
    });
    $(".inlineimg:first-child").load(initRep);
}
A lil' update to the javascript as a Christmas present :)
Changelog:
-Rep and rep to new level is now shown as a tooltip.
-Integrated add rep button to the bar
-Bar changes color according to the actual gem colors
-Bar has now gradient colors
-Bar is now smaller
 
Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

New version
upload_2016-12-2_21-22-9.png

It should work with Hive 2.0 now:
HTML:
// 10+10*current lvl^2
function levelExp(level) {
    return 150 + 30*Math.pow(level,2.2);
};
var rArr = [
    1, // gr>orng
    60, // orng>grn
    120, // grn>bl
    600, // bl>wht
    1200, // wht>gld
    1200  //gld
];

var cArr = [
    [130, 130, 130, // gr top
        80, 80, 80], // gr bot
    [130, 91, 30, // orng top
        80, 51, 24], // orng bot
    [91, 130, 30, // grn top
        51, 80, 24], // grn bot
    [73, 93, 240, // bl top
        30,48,145], // bl bot
    [220, 220, 220, // wht top
        130, 130, 130], // wht bot
    [208, 172, 0, // gld top
        128, 112, 19] // gld bot
];
var getFBarC = function (rep) {
    var i=0;
    while (rep>rArr[i]) {
        if (typeof rArr[i+1] !== 'undefined') {
            i++;
        } else {
            break;
        }
    }
    return "linear-gradient(rgb(" +
        cArr[i][0]+","+
        cArr[i][1]+","+
        cArr[i][2]+")20%, rgb("+
        cArr[i][3]+","+
        cArr[i][4]+","+
        cArr[i][5]+")60%)";
};
var round = function (n) {
    n=n.toString();
    var str="";
    var c="";
    while (n.length>0) {
        c=n.substring(0,1);
        if (c===".") {
            return parseInt(str);
        } else {
            str=str+c;
        }
        n=n.substring(1,n.length);
    }
    if (str.length===0) {
        return 0;
    }
    return parseInt(str);
};

var getLevel = function (rep) {
    var i = 0;
    while (rep>levelExp(i)) {
        i++;
    }
    return i;
};

function execute() {

    var pushC=-1;
    jQuery.fn.push = function () {
        pushC++;
        $(this).append("<div id=\"element"+pushC+"\"></div>");
        return $("#element"+pushC);
    };
    jQuery.fn.pushFront = function () {
        pushC++;
        $(this).prepend("<div id=\"element"+pushC+"\"></div>");
        return $("#element"+pushC);
    };

    jQuery.fn.createExpBar = function(rep) {
        var user = $(this).parent().parent().children().children().children().text();
        var i = 0;
        for (; i < user.length; i++) {
            var charcode = user.charCodeAt(i);
            if (!(charcode > 47 && charcode < 58) &&
                !(charcode > 64 && charcode < 91) &&
                !(charcode > 96 && charcode < 123)) {
                break;
            }
        }
        user = user.substr(0,i);
        console.log(user);

        this.css({
            "display": "inherit",
            "width": "97px",
            "margin": "27px auto"
        });

        var level = getLevel(rep);

        var nextLevel = levelExp(level);

        var toNextRatio;
        if (level == 0) {
            toNextRatio = rep/nextLevel;
        } else {
            var thisLevel = levelExp(level-1);
            toNextRatio = (rep-thisLevel)/(nextLevel-thisLevel);
        }
        console.log("rep:" + rep + "; nextLevel: " + nextLevel + "; thisLevel: " + thisLevel + "; ratio: " + toNextRatio);

        $(this).prepend("<br>");

        var plusC = $(this).pushFront();
        plusC.css({
            "width": "100%","height": "15px",
            "border": "1px solid #000",
            "margin-top": "-17px",
            "margin-bottom": "-55px"});
        //plusC.attr('title',user+' has '+rep+' reputation points, '+round(nextLevel-rep)+' to next level.');

        var defP = $(this).children('span');
        defP.appendTo(plusC);
        defP.children('a').children('img').remove();
        defP.children('a').append('<strong>+</strong>');
        var plus=defP.children('a');//$('#element'+pushC);
        plus.css({
            "opacity": "0.5",
            "text-shadow": "1px 1px 1px #000",
            "cursor": "pointer",
            "text-decoration": "none",
            "color": $(this).css("color"),
            "padding": "5px"
        });
        plus.hover(function () {
            $(this).css("opacity","1");
        }, function () {
            $(this).css("opacity","0.5");
        });

        var txt = $(this).pushFront();
        txt.css({
            "width": "100%","height": "15px",
            "border": "1px solid #000",
            "margin-top": "-17px",
            "color": "white",
            "font-family": "Arial Black",
            "font-size": "10.5px",
            "text-shadow": "1px 1px #000, -1px -1px #000, -1px 1px #000, 1px -1px #000"
        });
        txt.append("Level "+(level + 1));

        var bar = $(this).pushFront();
        bar.css({
            "background": getFBarC(rep),
            "width": (toNextRatio*100)+"%",
            "height": "15px",
            "border": "1px solid #000",
            "margin-top": "-17px"});

        var barBg = $(this).pushFront();
        barBg.css({
            "background-color": "#192205",
            "width": "100%","height": "15px",
            "border": "1px solid #000",
            "margin-top": "-17px"});
    };

    var gemValues = [
        0,
        10,
        50,
        150,
        600,
        1800
    ];

    $(".ReputationGems").each(function(){
        var rep = 0;
        $(this).find("img").each(function(){
            var s = $(this).attr('src');
            if (s.length != 34) alert('ExpBar Error: Unexpected condition met.');
            var i = parseInt(s.substr(29,1));
            if (i < 0 || i > 5) alert('ExpBar Error: Unexpected condition met.');
            rep += gemValues[i];
        });
        $(this).children().each(function () {$(this).remove()});
        console.log(rep);
        $(this).createExpBar(rep);
    });
}

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() {defer(method)}, 25);
    }
}
defer(execute);

cjs interfered with XenForo, I have to poll for jQuery which means it might be 25ms slower than before.
upload_2016-12-2_20-48-26.png

For better immersion, use Stylish snippet:
HTML:
.ReputationGems { display: none; }
This, well, hides rep gems :D


Tbh idk what the fk JS is lol it does what I want it's enough. If someone knows better feel free to post better code hehe

Cons:
- Inaccurate af (rep isn't obtainable from html in hive2)
- Can't rep someone (small losses)

Yeah big cons, the latter I will fix later, former I can't myself

Edit: This is all based on my post here.
 
Last edited by a moderator:
Level 21
Joined
Jul 6, 2014
Messages
6,791
Maybe I'm a idiot and just did it wrong,but it's not working for me
Seems to be a error in the second line,but then again,as I said:It could just be me being a idiot
 

Deleted member 219079

D

Deleted member 219079

What does console (F12) say? Is your Chrome 54.0.2840.99 m (64-bit) or newer? Did you download specifically this extension? Do you have the settings just like here:
upload_2016-12-2_21-40-28.png
 
Last edited by a moderator:
Level 21
Joined
Jul 6, 2014
Messages
6,791
Ah,forgot to update chrome.I apologize.
Edit:Working now.Again,sorry for being a idiot
 
Last edited:

Deleted member 219079

D

Deleted member 219079

Edit:Working now.Again,sorry for being a idiot
Well define working :D you can't rep anyone and the bar is very inaccurate. Also it throws an error if you come across a fellow with no rep.

I will try to fix those issues tomorrow.
 

Deleted member 219079

D

Deleted member 219079

Thanks!

New version
upload_2016-12-3_11-56-1.png

A lot was changed:
- Made leveling bit faster
- Now accurate rep
- You can see by hovering mouse over how much is needed to next level
- You can now rep people (small change)
- Shouldn't throw error when coming across a pal with 0 rep

Things to note:
- After posting, the level bar doesn't appear
- After repping, the level bar doesn't update

If this doesn't work, try the older one.
Requires: Custom JavaScript for websites
Optional: Stylish
Insert below code like so:
upload_2016-12-3_12-19-39.png

Code:
function levelExp(level) {
    return Math.round(15 + 15*Math.pow(level,2));
}

var rArr = [
    1, // gr>orng
    60, // orng>grn
    120, // grn>bl
    600, // bl>wht
    1200, // wht>gld
    1200  //gld
];

var cArr = [
    [130, 130, 130, // gr top
        80, 80, 80], // gr bot
    [130, 91, 30, // orng top
        80, 51, 24], // orng bot
    [91, 130, 30, // grn top
        51, 80, 24], // grn bot
    [73, 93, 240, // bl top
        30,48,145], // bl bot
    [220, 220, 220, // wht top
        130, 130, 130], // wht bot
    [208, 172, 0, // gld top
        128, 112, 19] // gld bot
];
function getFBarC(rep) {
    var i = 0;
    while (rep>rArr[i]) {
        if (typeof rArr[i+1] !== 'undefined') {
            i++;
        } else {
            break;
        }
    }
    return "linear-gradient(rgb(" +
        cArr[i][0]+","+
        cArr[i][1]+","+
        cArr[i][2]+")40%, rgb("+
        cArr[i][3]+","+
        cArr[i][4]+","+
        cArr[i][5]+")57%)";
};
var round = function (n) {
    n=n.toString();
    var str="";
    var c="";
    while (n.length>0) {
        c=n.substring(0,1);
        if (c===".") {
            return parseInt(str);
        } else {
            str=str+c;
        }
        n=n.substring(1,n.length);
    }
    if (str.length===0) {
        return 0;
    }
    return parseInt(str);
};

var getLevel = function (rep) {
    var i = 0;
    while (rep >= levelExp(i)) {
        i++;
    }
    return i;
};

function execute() {

    var pushC=-1;
    jQuery.fn.push = function () {
        pushC++;
        $(this).append("<div id=\"element"+pushC+"\"></div>");
        return $("#element"+pushC);
    };
    jQuery.fn.pushFront = function () {
        pushC++;
        $(this).prepend("<div id=\"element"+pushC+"\"></div>");
        return $("#element"+pushC);
    };

    jQuery.fn.createExpBar = function(user, rep) {
        var plus = $(this).find(".inlineAddRepButton");
        if (typeof plus.html() == 'undefined') plus = undefined;
        else plus = plus.clone(true, true);
        $(this).children().each(function(){$(this).remove();});

        this.css({
            "display": "inherit",
            "width": "97px",
            "margin": "27px auto"
        });

        var level = getLevel(rep);

        var nextLevel = levelExp(level);

        var toNextRatio;
        if (level == 0) {
            toNextRatio = rep/nextLevel;
        } else {
            var thisLevel = levelExp(level-1);
            toNextRatio = (rep-thisLevel)/(nextLevel-thisLevel);
        }
        // console.log(user + ": rep:" + rep + "; nextLevel: " + nextLevel + "; thisLevel: " + thisLevel + "; ratio: " + toNextRatio);

        $(this).prepend("<br>");

        var plusC = $(this).pushFront();
        plusC.css({
            "width": "100%","height": "15px",
            "border": "1px solid #000",
            "margin-top": "-17px",
            "text-align": "left",
            "margin-bottom": "-55px"});
        $(this).attr('title',user+' has '+rep+' reputation points, '+round(nextLevel-rep)+' to next level.');
        if (typeof plus != 'undefined') {
            plus.appendTo(plusC);
            plus.removeClass('inlineAddRepButton');
            plus.css({
                "cursor": "pointer",
                "line-height": "0.9",
                "margin-left": "4px",
                "text-decoration": "none",
                "color": "white",
                "font-family": "Arial Black",
                "font-size": "16px",
                "text-shadow": "1px 1px #000, -1px -1px #000, -1px 1px #000, 1px -1px #000"
            });
        }

        var txt = $(this).pushFront();
        txt.css({
            "width": "100%","height": "15px",
            "border": "1px solid #000",
            "margin-top": "-17px",
            "color": "white",
            "font-family": "Arial Black",
            "font-size": "10.5px",
            "text-shadow": "1px 1px #000, -1px -1px #000, -1px 1px #000, 1px -1px #000"
        });
        txt.append("Level "+(level + 1));

        var bar = $(this).pushFront();
        bar.css({
            "background": getFBarC(rep),
            "width": (toNextRatio*100)+"%",
            "height": "15px",
            "border": "1px solid #000",
            "margin-top": "-17px"});

        var barBg = $(this).pushFront();
        barBg.css({
            "background-color": "#0f0c0c",
            "width": "100%","height": "15px",
            "border": "1px solid #000",
            "margin-top": "-17px"});
    };

    var gemValues = [
        0,
        10,
        50,
        150,
        600,
        1800
    ];

    $(".ReputationGems").each(function(){
        var i;

        $(this).mouseover();
        var tt = $(".xenTooltip").last();
        var txt = tt.text();
        tt.remove();

        for (i = 0;;i++) {
            var charcode = txt.charCodeAt(i);
            if (!(charcode > 47 && charcode < 58) &&
                !(charcode > 64 && charcode < 91) &&
                !(charcode > 96 && charcode < 123)) {
                break;
            }
        }
        var user = txt.substr(0, i);

        i = txt.search(" received") + 10;
        var rep = 0;
        for(;;i++) {
            var charcode = txt.charCodeAt(i);
            if (charcode == 44) continue;
            if (!(charcode > 47 && charcode < 58)) break;
            rep = rep*10 + (charcode - 48);
        }
        $(this).createExpBar(user, rep);
    });
}

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() {defer(method)}, 20);
    }
}
defer(execute);
For Stylish (optional, hides gems that may be visible for a brief moment and centers user titles):
Code:
.ReputationGems { display: none; }
h3.userText > span { padding: 0 0 0 36px !important; }

Edit: Made leveling faster
Edit2: There was typo in code :D
 
Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

Thanks for the feedback, this system is what I wanted as well.

How about centering the username and rank over the avatar?
Seems like adding this to Stylish does the trick:
HTML:
h3.userText > span { padding: 0 0 0 36px !important; }
Putting margin auto somewhere could work yea, but I guess the centering is already defined.

Edit: What about showing the rep discretely, and only showing "x rep to next level" with the mouse hover tooltip?
upload_2016-12-3_14-13-48.png
 
Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

Diablo Theme
screencapture-hiveworkshop-forums-1481409511732.png
This is my first Hive 2.0 theme. It has lots of rough edges, e.g. lots of green popping up behind every corner.
Requires: Stylish

Code:
.navTabs
.navTabs.selected .navLink { background-color: #160100; }

.navTabs .navLink,
.navTabs .SplitCtrl { color: rgb(166, 96, 0); }

a:link, a:visited { color: rgb(166, 96, 0); }
a:hover, a:focus { color: rgb(246, 208, 128); }

.prefix.prefixPrimary { color: rgb(166, 96, 0); }

.PageNav a.currentPage,
.PageNav a {
    color: rgb(246, 208, 128);
    background-color: #160100;
    border-color: rgb(166, 96, 0);
}
.PageNav a:hover,
.PageNav a:focus {
    color: rgb(255, 227, 147);
    background-color: #160100;
    border-color: rgb(206, 116, 10);
}

.PanelScroller .panel,
.PanelScrollerOff .panel,
.PanelScroller .scrollContainer,
.PanelScroller .navControls a {
    color: rgb(248, 208, 128) !important;
    background-color: #160100 !important;
}

.PanelScroller .scrollContainer,
.PanelScrollerOff .panel,
.PanelScroller .navControls a {
    background-color: #160100;
    border-color: rgb(166, 96, 0);
}

.PanelScroller .navControls a .arrow span { border-top-color: #160100; }

.PanelScroller .navControls a.current .arrow { border-top-color: rgb(166, 96, 0); }

.titleBar h1,
.discussionList .sectionHeaders a { color: rgb(246, 208, 128); }

body .itemPageNav a {
    background-color: rgb(11, 1, 0);
    border-color: rgb(166, 96, 0);
    color: rgb(166, 96, 0) !important;
}

body .itemPageNav a:hover {
    background-color: #160100;
    border-color: rgb(206, 116, 10);
    color: rgb(255, 227, 147) !important;
}

.navTabs .navTab.PopupClosed .navLink { color: rgb(166, 96, 0); }

.navTabs .navTab.selected .navLink { background-color: #160100; }

.navTabs { background-color: rgb(11, 1, 0); }

.navTabs .navTab.selected .tabLinks a { color: rgb(166, 96, 0); }

.navTabs .navTab.selected .tabLinks { background-color: #160100; }
.navTabs .navTab.selected .tabLinks a:hover,
.navTabs .navTab.selected .tabLinks a:focus { background: none; }

.navTabs .navTab.PopupClosed:hover { background-color: #222; }

.nodeList .categoryStrip .nodeTitle a { color: rgb(246, 208, 128); }

a[href="http://www.hiveworkshop.com/streams/"] .itemCount,
a .itemCount { background-color: red !important; }

a[href="http://www.hiveworkshop.com/streams/"] .itemCount .arrow,
a .itemCount .arrow { border-top-color: red !important; }

.footer .pageContent { background-color: #160100; }

.leaf-border, .leaf-border > div {
    border-image: none;
}

.leaf-border > div > div:first-child {
    border: 1px solid #160100;
    outline: 1px solid #0B0100;
    box-shadow: 1px 1px 20px black;
    padding: 5px;
    background: url('http://www.hiveworkshop.com/attachments/bgloop-jpg.164788/');
}

#content .pageContent { background: none; }

.leaf-border > div {
    margin: -40px;
}

#header, #headerMover #headerProxy { background: none; }

body {
    background: url('http://www.hiveworkshop.com/attachments/artwork-0128-full-jpg.164784/');
    background-size: cover;
}

.sectionMain {
    border: 1px solid #414141;
    border-radius: 5px;
}

#ratopbuttons { display: none; }

#logoBlock {
    position: absolute;
    z-index: 100;
}
@media (max-width:480px) {
    #logoBlock { display: none; }
}

#navigation {
    width: 100%;
    box-shadow: 0px 1px 20px black;
    background-color: rgb(11,1,0);
    margin: 45px 0 0 0;
}

#navigation > div {
    margin-left: 200px;
}
@media (max-width:480px) {
    #navigation > div { margin-left: 0; }
}

.navTabs .navTab.selected .tabLinks { border-radius: 0; }

#headerMover #headerProxy { height: 85px; }

.messageList .message {
    border-color: black;
    border-style: solid;
    border-width: 1px 2px 1px 0;
    margin-left: 1px;
    background-color: #222;
}
@media (min-width:481px) {
    .messageList .message {
        background-image: url('http://www.hiveworkshop.com/attachments/post_user_repeat-jpg.254754/') !important;
        background-repeat: repeat-y !important;
    }
}

.messageList .message:first-child { border-radius: 0 4px 0 0; }
.messageList .message:last-child { border-radius: 0 0 4px 0; }

.button,
a.callToAction {
    color: #ffcc54;
    background-color: #3e2a07;
    border-color: #653808;
    background-image: -webkit-linear-gradient(top, #6a3003, #3e2a07);
}

.redactor_toolbar li.redactor_btn_group ul {
    background-color: #ea1001;
    border-color: #653808;
    background-image: -webkit-linear-gradient(top, #6a3003, #3a2a07);
}

ol.messageList {
    border: 1px solid #414141;
    border-radius: 5px;
    padding-left: 1px;
    background: #000;
}

html .redactor_toolbar li a {
    background-image: url('http://www.hiveworkshop.com/attachments/icons-png.254580/') !important;
}

.tagList .tag { color: rgb(166, 96, 0); }

.sidebar .section .primaryContent   h3,
.sidebar .section .secondaryContent h3,
.profilePage .mast .section.infoBlock h3,
.sidebar .section .primaryContent   h3 a,
.sidebar .section .secondaryContent h3 a,
.sidebar .section .secondaryContent .footnote,
.sidebar .section .secondaryContent .minorHeading,
.sidebar .section .secondaryContent .minorHeading a { color: rgb(246, 208, 128); }

@media (max-width:480px) {
    .Responsive .messageUserBlock div.avatarHolder {
        margin-top: -100px;
        padding: 0;
        margin: 5px;
    }
    .messageUserBlock div.avatarHolder {
        border: 1px solid #111;
        box-shadow: none;
        background: none;
        width: auto;
        height: auto;
       
    }
}

#ProfilePostList > li {
    background: none;
}

Edit: Removed some of the green, better less-than-480px-width look.
Edit 2: Made posts lighter.
Edit 3: Separated posts with horizontal black line.
 
Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

^You have Diablo theme? Based on sneak peek thread, I'd say it's a recolorization into red. This one is brown and introduces two background picture elements.
 

Deleted member 219079

D

Deleted member 219079

Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

Version 0.12 of better-vms:
- Images are parsed only after they're successfully loaded
- Shows image dimensions
- Omits line break if parsee is preceded by one already
- Chrome support (I hope)

Chrome: (newer post)
Firefox: (newer post)

Download the file, go to about:extensions (Chrome) or about:addons (Firefox) and drag and drop the downloaded file to the page.
 
Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

Version 0.13 of better-vms:
- HTTP Images delivered via images.weserv.nl
- Image details moved to the title attribute

Chrome: (newer post)
Firefox: (newer post)

Download the file, go to about:extensions (Chrome) or about:addons (Firefox) and drag and drop the downloaded file to the page.
 
Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

I should probably look into Chrome Web Store publishing then. But I would think it still lets you install it, at least my SRWare Iron (Chromiun based) does.
 

Deleted member 219079

D

Deleted member 219079

I would have to pay $5 to publish to Chrome Web Store, no way.
 

Deleted member 219079

D

Deleted member 219079

Version 0.15 of better-vms:
- Files with URI info past extension will now be embedded
- YouTube videos have title before clicking on the player

Chrome: (newer post)
Firefox: https://www.dropbox.com/s/w15yc5h2dn78yla/better_vms-0.15-an+fx.xpi?dl=1

Download the file, go to about:extensions (Chrome) or about:addons (Firefox) and drag and drop the downloaded file to the page.
 
Last edited by a moderator:

Deleted member 219079

D

Deleted member 219079

So, you have a tool that can change how the site looks for you? And you can share that with others?

I don't know what I think about such a tool. It feels invasive in a weird way.
You can study the source code by opening the add-on file as zip file; change its file extension to zip and open the content.js file, that's the code which is executed by the extension on pages https://www.hiveworkshop.com/members/*, as specified in manifest.json.
Or if you think the sole existence of the file on your computer is a security risk, here's the code:
JavaScript:
// parse all VMs currently present in DOM
for (let enumees = document.querySelectorAll(".commentContent blockquote > a, .messageContent blockquote > a"),
    i = 0; i < enumees.length; ++i) {

    linkEnum(enumees[i]);

}

// style.css: #profilePosts { visibility: hidden; }
document.querySelector('#profilePosts').style.visibility = 'visible';

// listen to 'Show more comments...'
for (let enumees = document.querySelectorAll('.commentMore'),
    i = enumees.length; i-- > 0;) {
    
    enumees[i].addEventListener('click', function(){
        
        var observer = new MutationObserver(function(mutations){

            for (let i = mutations.length; i-- > 0;) {

                for (let enumees = mutations[i].addedNodes[0].querySelectorAll('blockquote > a'),
                    j = enumees.length; j-- > 0;) {

                    linkEnum(enumees[j]);

                }

            }

            observer.disconnect();
            
        });

        observer.observe(this.parentNode, {childList: true});

    }, {once: true});

}

/**
 * @param {Element} _this
 * */
function linkEnum(_this) {
    
    let url = _this.textContent;
    
    if (url.match(/\.(png|jpg|jpeg|gif)(\?.*|)$/)) {

        let img = document.createElement('img');
        img.src = (url.startsWith('https')) ? url : 'https://images.weserv.nl/?url=' + url.substr(6);
        
        _this.textContent = '';

        if (!precededByBr(_this)) _this.insertAdjacentElement('beforebegin', document.createElement('br'));
        img.title = img.src.substr(img.src.lastIndexOf('/') + 1);
        _this.appendChild(img);
        
        img.style.maxWidth = '150px';
        img.style.maxHeight = '150px';

        _this.addEventListener('click', function(ev) {
            
            ev.preventDefault();
            
            if (img.style.maxWidth === '150px') {
                img.style.maxWidth = '385px';
                img.style.maxHeight = '';
            } else {
                img.style.maxWidth = '150px';
                img.style.maxHeight = '150px';
            }

        });
        
    } else if (url.match(/\.(mp4|webm|ogg)(\?.*|)$/)) {

        _this.textContent = '';

        if (!precededByBr(_this)) _this.insertAdjacentElement('beforebegin', document.createElement('br'));

        let video = document.createElement('video');
        video.style.background = '#111';
        video.controls = true;
        _this.insertAdjacentElement('beforebegin', video);
        video.width = '320'; video.height = '180';
        
        let source = document.createElement('source');
        video.appendChild(source)
        source.src = url;
        source.type = 'video/' + url.substr(url.lastIndexOf('.') + 1);
        source.textContent = 'Your browser does not support the video tag.';

        _this.parentElement.removeChild(_this);

    } else {

        var match = url.match(/^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/); // http://stackoverflow.com/a/9102270/8009276
        if (match && match[2].length === 11) {

            _this.textContent = '';
            if (!precededByBr(_this)) _this.appendChild(document.createElement('br'));

            let thumbnail = document.createElement('div');
            _this.appendChild(thumbnail);
            thumbnail.className = 'youtube';
            thumbnail.style.backgroundImage = 'url("https://img.youtube.com/vi/' + match[2] + '/mqdefault.jpg")';

            let gradient = document.createElement('div');
            thumbnail.appendChild(gradient);
            gradient.className = 'youtube-gradient-top';

            let title = document.createElement('div');
            thumbnail.appendChild(title);
            title.className = 'youtube-title';
            
            let titleText = document.createElement('div')
            title.appendChild(titleText);
            titleText.className = 'youtube-title-text';

            let playbutton = document.createElement('button');
            thumbnail.appendChild(playbutton);
            playbutton.className = 'youtube-play-button';
            playbutton.setAttribute('aria-label', 'Play');

            let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            playbutton.appendChild(svg);
            svg.setAttribute('height', '100%');
            svg.setAttribute('version', '1.1');
            svg.setAttribute('viewBox', '0 0 68 48');
            svg.setAttribute('width', '100%');

            let pathBg = document.createElementNS('http://www.w3.org/2000/svg',"path");
            svg.appendChild(pathBg);
            pathBg.setAttribute('class', 'youtube-play-button-bg');
            pathBg.setAttribute('d', 'M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z');

            let path = document.createElementNS('http://www.w3.org/2000/svg',"path");
            svg.appendChild(path);
            path.setAttribute('d', 'M 45,24 27,14 27,34');
            path.setAttribute('fill', '#fff');
            
            fetch('https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=' + match[2] + '&format=json').then(function(res){
                return res.json();
            }).then(function(json) {
                titleText.textContent = json.title;
            });

            _this.addEventListener('click', function(ev) {
                ev.preventDefault();
                this.removeChild(this.lastChild);
                let player = document.createElement('iframe');
                this.appendChild(player);
                player.width = '320'; player.height = '180';
                player.style.backgroundImage = 'url("https://img.youtube.com/vi/' + match[2] + '/mqdefault.jpg")';
                player.src = 'https://www.youtube.com/embed/' + match[2] + '?autoplay=1&rel=0&modestbranding=1';
                player.frameBorder = 0;
                player.allowFullscreen = true;
            }, {once: true});
        }

    }

}

/**
 * @param {Element} _this 
 */
function precededByBr(_this) {
    for (var sib = _this.previousSibling; sib && sib.nodeType != 1 && sib.textContent.length == 1; sib = sib.previousSibling);
    return sib && sib.nodeName == 'BR';
}
And I don't how good of a green flag this is since this isn't just CSS fiddling, but back in 2014 I asked for Ralle's judgement on spreding my Stylebot css ruleset (which also changes how the site looks):
upload_2017-12-9_19-21-48.png

 

Kyrbi0

Arena Moderator
Level 45
Joined
Jul 29, 2008
Messages
9,502
So, you have a tool that can change how the site looks for you? And you can share that with others?

I don't know what I think about such a tool. It feels invasive in a weird way.
I'm not a user of this utility, nor a defender, but "invasive"? It's entirely external; like a different cover/font on the same book. I don't understand.
 
Level 29
Joined
Jul 29, 2007
Messages
5,174
So, you have a tool that can change how the site looks for you? And you can share that with others?

I don't know what I think about such a tool. It feels invasive in a weird way.

As invasive as installing any add-on on your browser, or any application on your computer, or any application on your phone (and I doubt you actually read the list of permissions every application requires!), and so on.

@BlueSaint first time I see a one-time standard event listener, didn't even know the option exists. Nice!
 
Last edited:
  • Like
Reactions: pyf

pyf

pyf

Level 32
Joined
Mar 21, 2016
Messages
2,985
@BlueSaint : The crx version of v0.16 gives the error message "Package incorrect : "CRX_VERSION_NUMBER_INVALID"." when I try to install it in Google Chrome 49.

Better-vms v0.14 can be installed on Chrome, and works with varying degrees of success for images.
 

Deleted member 219079

D

Deleted member 219079

Image support is still a hit and miss.
Can you give example? Only peculiarity I'm seeing on the Chrome port's side is that you need to doubly click on YouTube videos to play them.
 

Deleted member 219079

D

Deleted member 219079

Ah it shouldn't be parsing that first one at all, it's not image but a web page. The second one seems easy to fix.

I will post new ver soon(tm).
 
Status
Not open for further replies.
Top