1. Forum
  2. >
  3. Topic: Duolingo
  4. >
  5. Lessons Userstyle to get some…


Lessons Userstyle to get some things of the old look back

Hello everyone,

Like a lot of people I wasn't too happy with the recent redesign. I found it more distracting than before and the colours and contrast didn't help.

So, I used stylish and got this:

(this is with Flag-Background and DuoKeyboard enabled, I actually don't use the latter for Swedish, but I wanted to show that it works.)

Since others might like it too, I thought I'd share. Maybe it won't work for long, who knows if Duo changes it to the better. We'll see. But at least we got something in the mean time. I'll probably also update to something similar if it stops working, because the redesign is just not as effective to me.

What I did:

  • The lessons are now in a box in the middle of the screen. The box has a maximum size, but it will also revert back to full screen on smaller screens.
  • Made the instructions smaller and lighter (my eyes read the "Translate this" stuff every time and it knocked down my productivity), I get what I have to do by what is in front of me, thank you.
  • Made the sentence bigger and bolder, same with the diacritics, because my eyesight sucks.
  • The multiple choice stuff is not in 132 order anymore but one below the other. The blue is also like it used to be. (Edit: Due to choices above 5 being covered up, it's next to each other again, but is ordered line by line not column by column.)
  • Changed the green and red bars on the bottom to the old colours. I also made little white boxes to highlight the corrections and translations.
  • The exit "X" is on the top right corner, where it should be.


  • Questions are now next to the textarea again, at least on big enough screens: It will move to the current top/bottom display if there's not enough space.
  • If the sentence is above the field, the hints will hover upwards, to not cover the input field. If the sentence is displayed on the left, the hints will go downwards.

Pictures? Pictures!

Without flags and keyboard: standard view

This weird thing was the first multiple choice sentence I got...
multiple choice




Also, a shoutout to Duolingo, because seriously, it gave me the best sentences to cap. "She has presented her idea." is quite fitting and yesterday, when I started a lesson to make a cap to show off a first look I got "Every problem has a solution.".

That's great and all, but how do I use it?

You will need Stylish. It's a browser extension for userstyles. You can get it via these links:
There's no official Stylish extension for Safari, but there are some usermade ones you could try, just google it. If it doesn't work you can try installing the style as a userscript (requires Tampermonkey or similar). There's a separate link on the download page below.

Then go here and install the style.

If you have any questions or find any errors, feel free to tell me. There might be something I've missed. And while it's not the first time I made something like this, it's the first time I shared a style, so I hope the optional settings work like they are supposed to...

Sadly I can't make the number of questions appear or the blue navigation with this (it would need to be a userscript). The only thing this does it modify what's already on the screen, nothing more. I also kept the grey background and will keep it, since it's apparently something really important for the pictures and Japanese/Korean/Chinese and will look not as good on a white background (though I wonder why they didn't make transparent images, oh well...)

September 28, 2017



This is fantastic. I can tweak this with a dark background stylish to fit my needs. Thanks so much for sharing your fix!


Glad you like it! :)

You'd probably not even have to change that much. I barely changed any greys at all, just the background of the disabled textarea and the box to display mistakes and translations (plus of course the greens/reds/blues), it would probably be a quick fix.


@Faranae, Have you considered posting your tweak on Stylish? Sounds really good! I would love to try it.


Thank you :-). This is great, and while I'm not able to do this by myself, I can at least use this and make some tiny changes to fit it to my needs.

The only thing I'd like to improve and where I haven't found out so far how to do it: the sentence on the left is sometimes extremely near to the box on the right. How do I get more space there?


You're welcome!

I updated the userstyle to add a 20px distance between the two. If you already have changes here's what I did so you can do it yourself.

Add this somewhere to your style: ._1UNVv { margin-right: 20px; }

You'd also have to change the width of the column. Look for this selector ._2hoER.e5HsR > ._3hECj and set the width to 48%.

I also fixed something that made longer sentences for multiple choice overlap with the border: Look for this: .e5HsR { height: 70%; } twice. Because I'm that sloppy. Replace one of those with this, so the textareas aren't too big:

@media (min-width: 700px){ ._1pqg2 { max-height: 70%; }}


Noch einmal danke, especially for the individual answer so that I do not have to do the changes again!

I just did a few lessons, and I can finally focus on the language again. I haven't retained a thing during the last days and had to review everything I "learned" (or not :-/).

You are my hero ;-).

[deactivated user]

    I really thank you,

    It seems to me as if the distance between the sentence and translation really helps me to focus more on the language that I'm learning instead of just translating it

    I prefer it without the box Duo


    Really cool idea! Thanks! :-)

    I experienced something strange (Firefox 56): I didn't see any progress bar!
    Then I changed some values and came across "._2vsG4" (in @media (min-width:700px)) I set to "margin-top: 110px;" - so that was my fix :-) I usually have Firefox in one size on my desktop, half of my screensize...

    But what happens, if you update/change anything and make it available? Firefox will update the userscript and then I guess my value will be overwritten again, right?


    Thanks for sharing your fix if others come across the same issue!

    If you use it via Stylish it should not update automatically, and you'd have to click on a button to get the updated style. Like I did for strandfloh I think I'll always share what I did (unless all the classes change and it's simply too much) so you can update it yourself. :)


    Soo, I did make some small changes:

    First, this makes the distance to the bottom a bit bigger so it doesn't overlap:
    @media (min-width: 700px){ ._25rpC{ height: calc(100% - 150px); } }

    Also there was something weird going on with the window, so there was a scrollbar and it seemed that in Firefox the box appeared lower than in Chrome.

    So I you should look at the top of the style and find something starting with this: @media (min-width:700px) { ._2vsG4 {

    delete the margin-top: -110px; thing.

    Then below in the ._3hDVx { paranteses add min-height: auto; andtop: 0px;

    A bit below you can find

    ._2vsG4, ._3hDVx { top: auto; }
    delete the ._3hDVx part so it's only
    ._2vsG4 { top: auto; }

    I'll update the style with the changes.


    Annnd since it moved the profiles up - something I should've done from the start:

    In Firefox replace
    @-moz-document domain("www.duolingo.com") {
    @-moz-document url-prefix("https://www.duolingo.com/practice"), url-prefix("https://www.duolingo.com/skill") {

    and in Chrome, you'd need to set it to URLS starting with: https://www.duolingo.com/practice
    and URLS starting with https://www.duolingo.com/skill

    Update is on userstyles.org as well.


    Thanks! Just updated the userscript and tried it out - works like a charm! :-)

    The only thing I discovered: The box is directly under the bookmarks toolbar and not in the middle of the screen, but I guess I'll try to change values with the developer tools and see, where this leads me...


    This moving too much to the top is so weird. When I fixed it in Firefox it moved directly under the bookmarks in Chrome, when I fixed that Firefox again had problems. I don't even get why. With what I wrote, it looked correct (and centered) in both my browsers at a 1920x1080 resolution with a 150% scaling.

    It does jump around in Firefox for a second though when I open the page and is even covered by the bookmarks, but then moves to the center and stays there for the rest of the exercise so I just left it like that and hoped it wouldn't bother anyone... Maybe that's what looks like a warning message to you? CSS shouldn't normally produce any messages, so I don't know what it could be, to be honest.

    For pushing it down with your fix. Look right at the top of the code. There should something start with @media (min-width:700px) { and then just below that the ._2vsG4 tag opening. There's no "top" in my file, but you can just add it yourself. (don't forget the semicolon at the end!)


    Hm, since I don't know anything about userstyles, but have knowledge in CSS, I should somehow be able to fix it... But first I would have to look how userstyles work... Probably they work like a "child-theme", so everything we want to be overwritten, we have to overwrite in the userstyle...

    Browsers don't interpret CSS the same way, even have different defaults... Wait! Maybe that's the problem :-) But before I'm thinking about "normalizing" CSS in a userstyle, I should look into the CSS code of Duo myself...

    I don't have any problems with Firefox btw, apart that it's up to the top of the viewport... Which Firefox version do you use? And which OS?

    No, the warning message comes from Greasemonkey itself :-) Maybe even from other userscripts here on Duo... I deactivated them for now...

    I tried your "solution", but it hadn't any effect up to now... That's why I'm curious, where this file "ltr-1470116b.css" comes from... Maybe even from Duo itself? Have to look at the source code :-)

    ETA: YES! The .css-file comes from Duo itself! Now I have an idea...


    Sometimes the easiest way is the best... ;-) I tend to think too complicated at times :-D

    "@media (min-width:700px) {",
    " ._2vsG4 {",
    " max-height: 670px;",
    " max-width: 1100px;",
    " margin: 110px auto;",
    " border: 1px solid #ABABAB;",
    " border-radius: 10px;",
    " min-height: auto;",
    " }",

    Now everything is in the middle for me! Yay! :-)


    Since I mainly use Chrome and only pull out Firefox to test stuff it doesn't bother me too much and I probably didn't even look enough for errors. I also know that browsers interpret stuff differently, but it's just weird, that it happens in one, just when I fix the exact same problem in the other browser and then again there when I fix it. Instead of making other problems because of the fix. It's like it's contrary at least with the placement of that.

    I'm using Firefox 56 on Windows 10. I'm also using it with Stylish instead of as an userscript, maybe that makes a difference? Especially if you get an error message? Seems like the overwriting of css declarations doesn't work as well as with Stylish? Otherwise the top: 110px part should've worked without using !important.


    Just tried to push down the box (110px)... Started the developer tools and saw this code:

    ltr-1470116b.css:1 @(min-width: 700px)
    ._2vsG4 {
    min-height: 570px;
    padding: 0;
    top: 0;
    width: 100%;

    Put 110px into "top" and it worked really well!

    The only thing: I can't find this declaration anywhere in the .js-file :-(


    Also I get a quite short warning popup now, when refreshing a site - but since it's not displayed longer, I can't read anything (would love to find out, what causes this) :-/ It doesn't appear always btw...


    Oh, just realized, that's not the only value I have to fix... Now I made a mistake in translating and it looks like this:


    Hope, that the image will show up eventually - did reference it like in your post under mine :-)


    I'll check it out in Firefox.

    For images you have to use markdown on duo it's ![alt text](imageurl)



    I guess it's due to the forums "glitches" since the update... If I edit my post, then an old one shows up...


    I fear the style no longer works, at least it doesn't for me. Maybe Duo updated their stylesheet for whatever reason, and someone else had warned that the css-classes look machine-generated, so the classes may have gotten new names.

    Anyone else having problems?


    Updated it for the new classes!

    It should work again, you might have to update it manually though.

    It looks okay for me, but there always might be something that they changed and doesn't work now. Most of what I did was finding and replacing the classes. So if there are any problems, just tell me. :)


    On multiple choice questions with more than 5 answer options, the 6th answer always disappears. Resizing the window doesn't make it appear. With more than 4 answers, resizing at least shows the 5th answer. I don't know what on earth they did that resizing wouldn't let me show the 6th answer even with my browser at full screen.


    Weird... I'll look into it in a couple of hours (I'm on the go right now). While it's not fixed you can disable the style via the button next to the address bar without reloading the page and resetting your lesson and then just re-enabling it after the multiple choice question.


    :) Yeah that's what I'm doing for now. Anything is better than dealing with the site yesterday! And no worries, I'm just grateful you got the update out so quickly. <3 You're certainly faster than Duo at responding to "bug" reports!


    Yeah, well it's not completely altruistic since I want to do my lessons too and that low-contrast mobile layout on a big screen hinders that. ;)


    Interesting, first I thought I wouldn't get 6 options and couldn't even imagine that... Now I installed the new style, learned a lesson (verbs!) and had the same problem :-D

    Have to look where I can disable the style while doing a lesson for the time being... Just installed Stylus, the next "Stylish" without telemetry in Firefox, which will also work with newer browsers than FF56...


    I never had 6 options either. I actually just edited the HTML with the site inspector tool, because I didn't want to look for an occurence. ;)

    I didn't really fix the overlap, but changed the display, so that it will move to columns for those "fill in the blank" multiple choice exercises. But contrary to Duo it's in the order:

    1 - 2
    3 - 4

    If some of you prefer the Duo order. I could make it an option on stylish. It confuses me personally and I've read others had the same problem, so I didn't do it for now (plus, a bit of good oldfashioned laziness).


    I'd never had a 6 option question before this week, either, and I've been on the site since French beta. O.o I like your numbering order, it's the same as Memrise. Thank you again for such a speedy fix!


    Thanks again! I am only able to change minor things like color and font attributes, but I don't know enough to change the layout itself.

    I think you missed the color for new words which I spotted only because I need another color. .XV0Fl { color: red !important; } works for me (you see I choose red instead of orange).


    I just checked a new lesson, because I distinctly remembered it being orange and wondering why the class apparently didn't change. Turns out I overlooked it, because Duo listened to one of the aspects we complained about and made the new words orange again - or they're doing an A/B test and I'm in the lucky group with highlighted words...

    I'll add it to the style though, so people who lost the highlight have it or can change it easily like you did. :)


    Urgh, just tested it. It doesn't work for me either. I guess they updated something because of the addition of Japanese and Korean (despite it working a couple of hours ago).

    I don't know how much time I have for it before the weekend, but I will update the style! I really can't work longterm with the new interface...


    Thank you so much! I appreciate your work a lot.

    The new layout is just horrible. Sometimes I wonder if Duo loves to make fun of users...


    Really appreciate your work and the sharing thereof with all of us!


    Yeah, me too! Just changed my browser size for the lessons, but that is really annoying when you want to read discussions in between... Then the size is too small :-/

    Waiting for the fix :-)

    Thanks @ tiramisues! :-)


    Thank you so much.
    Promptly installed your style - and I am happy. Works!
    Finally the text fonts (area below) are better readable again :-)

    Q: Can you manage to re-activate the right white box after I have submitted the text?
    I know, DuoLingo deactivated the right translation box for a few weeks...this is the worst!


    I regularly type some English (e.g EN-PT course) but I am interested to use the Mozilla Google translate addon to mark any English text and translate either the text or separate words (everyone should do this who is not a native English speaker but uses / learns this 2nd language!).

    With the complete text-box being greyed-out and deactivated, I can not longer mark any typed text to pass it to the add-on or copy paste the text to somewhere else.

    This is IMHO a clear step backwards being first initiated by the DuoLingo developer team (why oh why?).

    Is there any workaround which you could apply to the right (white) text field?

    Thank you so much for your hard work!!!
    With your help - and Camilo's user script "DuoLingo tree enhancer" and the duo.old_web_url_whitelist=["^.+"]; script workaround (Woof has posted this in several threads) to get some older powerful user scripts working again on the "home" page - it makes again fun to use DuoLingo.


    Freut mich, dass es noch jemandem außer mir hilft. :)

    I didn't even notice that the selection won't work anymore, but I use Chrome most of the time and only switch to Firefox for testing. It seems to be, that the "disabled" attribute works differently depending on the browser. I tried making it selectable via css, but that apparently only works for normal text.

    So the developers would have to change it to a "readonly" field or you'd have to use a userscript to do it.


    I have seen that you offer your code tweaks in the link additionally as a Greasemonkey (Firefox) user script. I would gladly switch over to it - I am already using so many user scripts.

    Have you already tried to modify your user script to successfully change the text box attributes?
    I could be your beta tester :-)

    I am a developer myself, but this JS / HTML stuff and element modification is way beyond my skills...


    Sorry, I didn't see the comment until now.

    The userscript is compiled automatically by userstyles.org, I actually have nothing to do with it, so everything I'd write would be separate anyway.

    I'm not the best at JS either, but I might be able to do this. I'll try tonight!


    Whoop! This weekend I finally looked into Mutation Observers in JavaScript (needed to detect changes in a page after it's loaded), which was the reason I previously failed to do it and thought about your request as something easy to test my newfound knowledge with:

    Link to GreasyFork

    Hope it works for you! :)


    I had to learn how to use mutation observers a few weeks ago. Your code is so much tidier than mine!

    Can check out my messy code and what I used it for if you like, if you haven't already seen it on greasyfork:


    I doubt there's anything useful to learn from my code. But it should prove to be a very handy userscript to have nonetheless (assuming the way Duolingo used to automatically follow threads when posting in them is still currently broken?). ^^


    I actually use it already - it's such a necessary fix since the maintenance and I would forget to follow half the discussions I see. Thanks for writing it! (and last time I checked and judging from the posts in the forums it's still broken...)

    I wouldn't actually say that either mine or yours is tidier than the other. Your userscript has to check a bit more than mine and is easier to follow because it's not just one block of code.


    Thanks tiramisues!

    Installed as soon as you wrote it to me and I got the e-mail notification on my 1st PC.

    Are there different exercise types, where the code would have to check multiple times?

    I could have been dreaming, but I may have noticed, that the textbox re-enable might have not been working for EVERY question.
    I am not quite sure at this moment.

    I will now install your textbox enable script on the 2nd Laptop where no display screen is corrupted.

    If you do not hear from me anymore in the next 2-4/6 weeks, then I was wrong and your cool script works fine for each exercise / question type and the textbox will be re-enabled everytime.

    Thanks for posting it.

    How brave of you, to learn this whole JS observer thing just for me :-)

    If you want Paypal donations, let me know.

    Good work!


    I am glad it works for you most of the time! :)

    No need to donate, it's just a few lines of code and knowing how to use the mutation observers might be useful another time. :)

    If it doesn't work all the time, could you tell me if it's random or for specific textareas, i.e. while testing out of a skill, the direction of the question, etc. Since I use Chrome most of the time and it already allows to mark text in disabled textareas I don't really notice it that much.




    This weekend I finally looked into Mutation Observers in JavaScript

    Re-Enable Textarea V0.1 https://greasyfork.org/de/scripts/35078-duolingo-re-enable-textareas

    Browser console

    TypeError: textarea is NULL


    var textarea = document.querySelector('[data-test="challenge-translate-input"]'); textarea.removeAttribute('disabled'); textarea.setAttribute('readonly','readonly');

    Habe festgestellt dass bei einigen neuen 2017/2018 Exercise Challenges (z.B Fill the word into the blank, Auswählen Optionen 1-4) es gar keine Textbox für Übersetzungen mehr gibt.

    Die Idee für eine V0.1.2 / V0.2 Deines Scripts wäre noch eine if (textarea != NULL) Abfrage einzubauen.

    Oder bestenfalls das Script nur auf bestimmte Translation Challenges mit vorhandener Textbox einzuschränken.



    I'm sorry, my limited JS knowledge failed me. I can write something that finds the element, change it, but I just don't know enough to observe the changes of the page and change it everytime it gets disabled again. Maybe one of the people with better JS knowledge can include it in one of their userscripts for you.


    Please, can you tell me where are these scripts, and where do you put the workaround? (Duolingo's discussion search functionality is awful!) What is it a workaround for? Thank you!


    Wie ich es im "My Rant" thread https://www.duolingo.com/comment/25170229 von WaterPolyglot schon gepostet hatte, bevor dieser und ggf. mein Kommentar wieder gelöscht wird (ist mir schon wo anders passiert):

    Your userstyle clearly shows me, that new (grey background compatible) development / new web design does NOT necessarily mean to corrupt old - working good before - layout and text size design.

    Thanks for your support!
    What would we do without you, as DuoLingo seems to ignore user feedback?

    But hey, it's ok.
    We, the users, are alpha/beta testers....just throw some stuff at us and we will give (DuoLingo) feedback what we like or do not like / what we can NOT work with.

    Feedback - change - fixes - long-term improvement: That is the cycle.


    [SECURITY-ISSUE] Warning: Stylish addon V3.1.1 is unsafe, contains tracker, sends collected data: https://forum.duolingo.com/comment/27870688

    I added an additional comment about the suggested Stylus userstyle addon (have not yet installed/tried it): https://forum.duolingo.com/comment/27870688$comment_id=27870900


    Is anybody using Camilo's "Duolingo Next Lesson" Tampermonkey user script?

    Finally I have added a new (longer) comment highlighting some facts about

    • to filter skills by strength (there was a user style to filter golden skills)
    • rename skill names (adding prefixes, e.g on our www.duome.eu/USERNAME/progress page)
    • a (crowns) level-up lesson strategy concept to focus on more difficult grammar (e.g Subjunctives) / Verb tense skills

    in Camilo's "Duolingo Next Lesson" thread: https://forum.duolingo.com/comment/26849592$comment_id=29666271

    as well as "[HOWTO]: Different ways for spaced repetition with skill strength viewer (user script and extension)" thread: https://forum.duolingo.com/comment/29304553$comment_id=29666130

    I would like to invite advanced users and user script or user style programming gods to join and discuss questions and ideas on a brainstorming level.

    Best regards / Viele Grüße


    Related to the pending changes in 2019 "Introduction Duolingo's Redesign": https://forum.duolingo.com/comment/29997264

    As suggested by me in this rant thread: https://forum.duolingo.com/comment/30025645$comment_id=30026941

    My idea is (I am not a html/css frontend programmer) that we might need to SAVE the button and icon look (gifs,..) of the html/css web resource formatting right now, so we can revert back to some of the elements more easily.

    Can this be done?

    How can we backup the gifs and related css formatted if the code gets a new style in 2019 or might be broken with new bugs like we had seen it before?

    Can we replace Duo's own web resources by stored local copies within the Stylus addon?


    I understand that this "Save the more serious and working web frontend design 2017-2018" is a bigger project than your old "Lessons get the old look back" project.

    Wouldn't the new 2019 redesign code also probably use all new generated codes, so your above userstyle does not work anymore?

    [deactivated user]

      Love it! Well done!


      Thank you very much for the style and the instructions.


      Thank you!! So much better.


      @frontend programmers @tiramisues


      can you save the current web html / css and text size / font code with your existing userstyle or a new one BEFORE we all get migrated to the new "Juicy" website?

      See my last comment here (a font and size has already been changed some days/weeks ago for the worse): https://forum.duolingo.com/comment/31465576$comment_id=31472511

      Fiercat's Recipe: How Disable/Enable the New Web Look



      Why it didin't work? I try it.



      This thread from tiramisues is 3 years old.

      Staff has changed the website in 2019/20 - and all css/div autogenerated new classes - in the web html code at least 20-50+ times since then.

      A Userstyle will only work for the website if it was written for the most updated current version.

      Please understand there currently is not any other similar userstyle out there.

      Helpful userscripts, extension and userstyle repository:


      Works on selected web browsers on mobile devices, but not in the Duolingo mobile app!!


      [Bug/Howto] Chrome V96.0 on Android ignores Accessibility Text scaling - website is hardly readable: https://forum.duolingo.com/comment/54856115

      Learn a language in just 5 minutes a day. For free.