[Userscript] Dashboard Progress Plus

Indeed, I believe that’s the reason rfindley introduced the check marks.

1 Like

Cool feature.
Thank you for the swift inputs.

Thank you, this is great ^^

Heya. When I’m using the Stylish script “Wanikani Custom Color Style” it makes Dashboard Progress Plus not show properly (if I turn off the custom color style script it works just fine). Is there any way I can keep these functioning together without having to sacrifice one or the other? The only colors on the page that I am changing using the custom color script are the SRS level boxes in green and black in the center of my screenshot.

This is because I do not like the SRS levels being the same colors as item types, because my brain creates confusing associations that I have trouble differentiating (i.e. pink = kanji/apprentice, purple = vocab/guru, sky blue = radicals/enlightened). I highly prefer when I see a color for it to have a specific single association so that my brain doesn’t start confusing item types with SRS levels (pink = kanji, purple = vocab, sky blue = radicals, gradually darker shades of green = SRS levels).

Anything I can do to make these two scripts work harmoniously?

1 Like

Unrelated, but I love your username and avatar! <3

ありがとうございます!

1 Like

What, specifically, doesn’t work when both are running? You get odd colors, or it just doesn’t run? Any errors in the Javascript console?

Ah, I should have included this screenshot as well, to show the difference. You can see the progress on all these items when I’m not running the color change script. I’m not aware of any errors in the javascript console. How can I check for them?

Can you paste your Stylish script? I’m sure it’s just overriding one of the CSS rules I’m using.

Here’s the color change script:

@namespace url(XHTML namespace);
/------------------------------------------------------------------------------------------------------------------------------/
/---------------------------------------------------------STOCK SITE-----------------------------------------------------------/
/------------------------------------------------------------------------------------------------------------------------------/

/-----------------------------------------------------------------------------/
/--------------------------------ENTIRE SITE----------------------------------/
/-----------------------------------------------------------------------------/

body, .footer-adjustment, #reviews-summary, .wall-of-shame, html#main .navbar.scrolled .navbar-inner, html#main .navbar.navbar-static-top, .navbar-inner, section#progress, h2.progression, .additional-info, .alternative-meaning {
background-color: #FFFFFF !important;
background-image: none !important;
}

/---------------------------------------------------------------------------/
/--------------------------------DASHBOARD----------------------------------/
/---------------------------------------------------------------------------/

/-------------------------SRS Overview Code Start-------------------------/
.srs-progress ul li#apprentice {
background: #cdf2d0 !important;
}

.srs-progress ul li#guru {
background: #9fe2a6 !important;
}

.srs-progress ul li#master {
background: #60c262 !important;
}

.srs-progress ul li#enlightened {
background: #4b8c66 !important;
}

.srs-progress ul li#burned {
background: #434343 !important;
}

.srs-progress ul, .srs-progress ul li span {
color: #FFFFFF !important;
}
/-------------------------SRS Overview Code End-------------------------/

/-------------------------SRS Progress Bars Start-------------------------/
.kanji-progress > div:nth-child(2) > div:nth-child(1), .radicals-progress > div:nth-child(2) > div:nth-child(1) {
background: #A6A6A6 !important;
}

.radicals-progress > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {
background: #00A0F1 !important;
}

.kanji-progress > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {
background: #F100A0 !important;
}
/-------------------------SRS Progress Bars End-------------------------/

/-------------------------Items Left Start-------------------------/
.radicals-progress .lattice-single-character ul li a {
background: #00A0F1 !important;
}

.kanji-progress .lattice-single-character ul li a {
background: #F100A0 !important;
}

.kanji-progress .lattice-single-character ul li a, .radicals-progress .lattice-single-character ul li a {
color: #FFFFFF !important;
}
/-------------------------Items Left End-------------------------/

/-------------------------Additional Item Info Start-------------------------/
.row .span4 section table tbody tr[id*=“radical”] td {
background: #00A0F1 !important;
}

.row .span4 section table tbody tr[id*=“kanji”] td {
background: #F100A0 !important;
}

.row .span4 section table tbody tr[id*=“vocabulary”] td {
background: #AA00FF !important;
}
/-------------------------Additional Item Info End-------------------------/

/---------------------------------------------------------------------------/
/----------------------------LESSONS & REVIEWS------------------------------/
/---------------------------------------------------------------------------/

div#answer-form fieldset input, div#answer-form fieldset button {
background-color: #FFFFFF !important;
box-shadow: 3px 3px #FFFFFF !important;
}

/---------------------------------------------------------------------------/
/---------------------------------LESSONS-----------------------------------/
/---------------------------------------------------------------------------/

/-------------------------Lessons Summary Start-------------------------/
#lessons-summary #radicals h2, #lessons-summary #radicals div ul li {
background: #00A0F1 !important;
}

#lessons-summary #kanji h2, #lessons-summary #kanji div ul li {
background: #F100A0 !important;
}

#lessons-summary #vocabulary h2, #lessons-summary #vocabulary div ul li {
background: #AA00FF !important;
}
/-------------------------Lessons Summary End-------------------------/

/-------------------------Lessons Content Start-------------------------/
#main-info.radical {
background: #00A0F1 !important;
}

#main-info.kanji {
background: #F100A0 !important;
}

#main-info.vocabulary {
background: #AA00FF !important;
}
/---------------------------------------------------------------------------/
#supplement-info .kanji {
background: #F100A0 !important;
}

#supplement-info .radical {
background: #00A0F1 !important;
}
/---------------------------------------------------------------------------/
#lesson #batch-items ul li span[class*=“radical”] {
background: #00A0F1 !important;
}

#lesson #batch-items ul li span[class*=“kanji”] {
background: #F100A0 !important;
}

#lesson #batch-items ul li span[class*=“vocabulary”] {
background: #AA00FF !important;
}
/-------------------------Lessons Content End-------------------------/

/---------------------------------------------------------------------------/
/---------------------------------REVIEWS-----------------------------------/
/---------------------------------------------------------------------------/

/-------------------------Reviews Summary Start-------------------------/
#reviews-summary div div > ul > li a[href*=“radical”] {
background: #00A0F1 !important;
}

#reviews-summary div div > ul > li a[href*=“kanji”] {
background: #F100A0 !important;
}

#reviews-summary div div > ul > li a[href*=“vocabulary”] {
background: #AA00FF !important;
}

#reviews-summary div div > ul > li a {
color: #FFFFFF !important;
}
/---------------------------------------------------------------------------/
#review-stats-radicals {
background: #00A0F1 !important;
}

#review-stats-kanji {
background: #F100A0 !important;
}

#review-stats-vocabulary {
background: #AA00FF !important;
}

#review-stats-radicals, #review-stats-kanji, #review-stats-vocabulary {
color: #FFFFFF !important;
}
/-------------------------Reviews Summary End-------------------------/

/-------------------------Reviews Content Start-------------------------/
#question .radical {
background: #00A0F1 !important;
}

#question .kanji {
background: #F100A0 !important;
}

#question .vocabulary {
background: #AA00FF !important;
}

#question div span {
color: #FFFFFF !important;
text-shadow: 0px 0px 0px !important;
}
/---------------------------------------------------------------------------/
#question-type.meaning {
background: #363636 !important;
}

#question-type.reading {
background: #FFFFFF !important;
}
/-------------------------Reviews Content End-------------------------/

/---------------------------------------------------------------------------/
/----------------------------------FORUMS-----------------------------------/
/---------------------------------------------------------------------------/

/-------------------------(Un)Subscribed Colors Start-------------------------/
.forum-post-author-says {
background-color: #BBBBBB !important;
box-shadow: 0px 0px 0px !important;
}

.forum-post-author-says.premium {
background-color: #5EC9FF !important;
box-shadow: 0px 0px 0px !important;
}

.forum-post-author-says.lifetime {
background-color: #C95EFF !important;
box-shadow: 0px 0px 0px !important;
}
/-------------------------(Un)Subscribed Colors End-------------------------/

/-------------------------------------------------------------------------------------------------------------------------------------/
/---------------------------------------------------------COMMUNITY CONTENT-----------------------------------------------------------/
/-------------------------------------------------------------------------------------------------------------------------------------/

/---------------------------------------------------------------------------/
/---------------------------------SCRIPTS-----------------------------------/
/---------------------------------------------------------------------------/

/-------------------------Dashboard Progress Plus Start-------------------------/

/-------------------------Dashboard Progress Plus End-------------------------/

@AmericanLion,
On your lattice-single-character rules, change the background properties to background-color.

Using just background overrides all of the following:

  • background-color
  • background-image
  • background-position
  • background-repeat

And I’m using background-image and background-position to overlay the progress rings and hatching pattern.

Also, if you want to override any of my colors, here are the rules I’m using:

Dashboard Progress Plus CSS
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="0"] {background-color:#00aaff;}
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="1"] {background-color:#00aaff;}
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="2"] {background-color:#00aaff;}
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="3"] {background-color:#00aaff;}
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="4"] {background-color:#00aaff;}
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="5"] {background-color:#b69acd;}
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="6"] {background-color:#b69acd;}
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="7"] {background-color:#9aa5cf;}
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="8"] {background-color:#a3c3d3;}
.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="9"] {background-color:#999999;}

.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="0"] {background-color:#ff00aa;}
.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="1"] {background-color:#ff00aa;}
.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="2"] {background-color:#ff00aa;}
.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="3"] {background-color:#ff00aa;}
.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="4"] {background-color:#ff00aa;}
.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="5"] {background-color:#b69acd;}
.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="6"] {background-color:#b69acd;}
.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="7"] {background-color:#9aa5cf;}
.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="8"] {background-color:#a3c3d3;}
.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="9"] {background-color:#999999;}
1 Like

Aaaaand problem solved. Thank you so much.

When I leveled up to 9, Dashboard Progress Plus suddenly started showing up like this:

These are my settings:

07%20

I do have several other scripts too, I’ll list them if needed. I’d really like to see the radicals and kanji. Help? :slight_smile:

3 Likes

Check “Show Item Name” in your settings.

(Interestingly, it looks like I may have forgotten to apply that setting to the SVG radicals… but that’s a note for me, not you :wink:)

2 Likes

Thanks. I thought name meant the name of the radical or the meaning of the kanji. ^___^

1 Like

The colors were bothering me (too pale) so I changed the codes to match the WaniKani colors with the golden burn as well.

Copy and paste this in if you want the colors corrected:

//                        Apprentice,Guru,Master,Enlightened,Burned,Locked
var srs_radical_colors = '#039BE9,#A633C6,#4C6CE1,#00AAEF,#FABF45,#039BE9';
var srs_kanji_colors = '#F200A2,#A633C6,#4C6CE1,#00AAEF,#FABF45,#F200A2';
// Radical colors
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="0"] {background-color:#039BE9;}'+
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="1"] {background-color:#039BE9;}'+
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="2"] {background-color:#039BE9;}'+
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="3"] {background-color:#039BE9;}'+
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="4"] {background-color:#039BE9;}'+
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="5"] {background-color:#A633C6;}'+
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="6"] {background-color:#A633C6;}'+
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="7"] {background-color:#4C6CE1;}'+
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="8"] {background-color:#00AAEF;}'+
'.radicals-progress .lattice-single-character .dpp-progress[data-srs-lvl="9"] {background-color:#FABF45;}'+

// Kanji colors
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="0"] {background-color:#F200A2;}'+
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="1"] {background-color:#F200A2;}'+
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="2"] {background-color:#F200A2;}'+
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="3"] {background-color:#F200A2;}'+
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="4"] {background-color:#F200A2;}'+
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="5"] {background-color:#A633C6;}'+
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="6"] {background-color:#A633C6;}'+
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="7"] {background-color:#4C6CE1;}'+
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="8"] {background-color:#00AAEF;}'+
'.kanji-progress .lattice-single-character .dpp-progress[data-srs-lvl="9"] {background-color:#FABF45;}'+

Hello. Everyone raves over your plugins but i can’t get them to do anything?
Do i need to put an API Key in somewhere or do something like that?
I see them listed as on in the Tampermoney thing and i made sure that OpenFramework was in the #1 position.
When i load up the dashboard the badge says 3 scripts are running but nothing changes.
Any idea why?

You don’t need to enter an API key since it fetches it automatically.

Are you on Firefox? Sometimes Firefox has problems with indexedDB being corrupt. Also, try opening the Javascript console (press F12 and click on the Console tab) and post a screenshot of any errors you see.

image

Here’s what I have. (fixed the image)

Ahh, okay… it looks like you have a plugin that’s blocking Open Framework from accessing a needed CSS file (i.e. the CORS error). Can you try temporarily disabling any ad blockers on Wanikani? Open Framework doesn’t have ads, but sometimes plugins give false positives. If you can figure out which plugin is causing the problem, I can try to find a fix or workaround.