1. Forum
  2. >
  3. Topic: Arabic
  4. >
  5. Custom theme for Duolingo Ara…

https://www.duolingo.com/profile/alijsh

Custom theme for Duolingo Arabic

Following my technical review of the Arabic course, here is a quick fix: now you can see Arabic texts in a better font (Vazir) and hopefully, a better size too.

  • First install Stylish extension on Firefox or Chrome . Alternatively, you can install Stylus on Firefox or Chrome
  • And then, go to this page and click on "Install style" button:
  • Now, open an Arabic lesson and you'll notice the changes :)

How to use the theme on cell phones and tablets

Instead of using Duolingo's Android/iOS application, open Firefox on your cell phone/tablet and log into Duolingo. This way, you're using the Web version of Duolingo on your device. Now, do the same steps: install Stylish/Stylus and the theme. The screen is smaller but it's quite like studying Duolingo on your laptop/PC using this custom theme.

July 1, 2019

41 Comments


https://www.duolingo.com/profile/dlhgl
  • 1501

Thank you for providing this style. It makes learning the Arabic letters a lot easier.

I use it with the Stylus addon which I prefer to Stylish as it doesn't track its users.


https://www.duolingo.com/profile/alijsh

You're welcome! I'll edit my post and add Stylus as an alternative. A lingot for you :)


https://www.duolingo.com/profile/RobertoVro15

OOH MAN THANKS YOU VERY MUCH FOR YOUR POST, SALUDES FROM MEXICO,SHUKRAN


[deactivated user]

    Fill in the blanks, translate English to Arabic choices, and new words are still in the original font, though the last is larger.

    Thank you so much for doing this.


    https://www.duolingo.com/profile/alijsh

    Please try the updated version and also read my explanation added to the end of the post


    [deactivated user]

      I'm very pleased with the update. Thank you. My pained eyes thank you as well.


      https://www.duolingo.com/profile/alijsh

      Glad to hear that :)


      https://www.duolingo.com/profile/garpike

      I have just installed this (Firefox/Stylus) and I'm not seeing the new font, either. I'm not complaining about this, as I prefer the original font, so your addon has done exactly what I'd have wanted.
      However, I'm curious as to why it hasn't changed the font as it was supposed to.

      Many thanks for making this, anyway.


      https://www.duolingo.com/profile/PeaceForce

      Thank you for all your concern, involvement and time. If the initial links could open in their own respective tabs ... In any case, the footwork needed to get to the style extension makes me wonder about a larger issue. Can sequential links be coded into a consolidated one, for users to avoid multiple steps and hop straight to the end? Just an idea to "copyleft" (if it hasn't been implemented already) ...


      https://www.duolingo.com/profile/alijsh

      Sorry. I don't completely understand what you mean. There are only two steps. Installing an extension and then, installing this custom style. It can't become simpler. To open a link in a new tab, you can middle click on it (alternatively, you can hold down Ctrl key before clicking on a link).


      https://www.duolingo.com/profile/Alpha882105

      I am on a tablet IPad. What can I do?


      https://www.duolingo.com/profile/PeaceForce

      Thank you for clarifying and sorry for my confusing. I did install the style and appreciate the difference.

      Installation issues or no, perhaps "meta-" or "super"-links (if they may be called) for one-click, one-step navigation through multiple pages or sites is a job for future web technology.

      In any case, if you haven't said so already, what would be your style recommendations for mobile (Android, iPhone, iPad, etc.)? The Arabic font problem seems to carry over to the DL app.


      https://www.duolingo.com/profile/alijsh

      I added a section about how to use the theme on mobile devices


      https://www.duolingo.com/profile/JudieLC

      Doesn't work for iPhone, as Firefox does not support extensions on iOS.


      https://www.duolingo.com/profile/Eyderste

      I just added "https://forum.duolingo.com/" to the "applies to" section. You may consider adding that for the installer, too. Otherwise discussions will still have the small default font, e.g.: https://forum.duolingo.com/comment/32916524


      https://www.duolingo.com/profile/alijsh

      A lingot for your interesting suggestion :) However, that makes the theme's scope too general. It can cause problem when you're studying other languages. I'll test it on my computer to see how I can lay the font stack flawlessly.


      https://www.duolingo.com/profile/alijsh

      Applied your suggestion. Thanks again.


      https://www.duolingo.com/profile/CornTassel

      I only have Edge......


      https://www.duolingo.com/profile/alijsh

      Sorry! This only works on Firefox/Chrome/Opera


      https://www.duolingo.com/profile/amplifymysound1

      I love the new style thing, it makes it look so darn cute


      https://www.duolingo.com/profile/BarefootGrandma

      Thank you so much!!! This has helped me a ton.


      https://www.duolingo.com/profile/efisgprr

      Thanks a lot!


      https://www.duolingo.com/profile/rwreed

      A couple more notes. The style doesn't currently apply when you choose the general practice button instead of a specific section. That URL is https://www.duolingo.com/practice

      It also doesn't apply to the word bank currently (when you choose from the word bank instead of typing your answer). The class I used for that is for the word buttons, and is iNLw3. I didn't check if you were using the surrounding div on others or the buttons themselves.


      https://www.duolingo.com/profile/alijsh

      THANKS! Updated the style. 5 lingots for you :) The URL for practice tests isn't language-specific and the styles will apply to other languages as well but we have no other option: that's the only way to style Arabic texts in a practice test


      https://www.duolingo.com/profile/StephanVog9

      It works in the course (kudos!), but not in Tinycards, neither when creating cards nor when learning them. Is there a way to apply your neat styling also to Tinycards?


      https://www.duolingo.com/profile/StephanVog9

      I guess I would only have to add the line: https://tinycards.duolingo.com/ somewhere, but I have no glue where and how to access your style file.


      https://www.duolingo.com/profile/alijsh

      Thanks. Tinycards are now supported


      https://www.duolingo.com/profile/dlhgl
      • 1501

      Your Duolingo Arabic user style was very useful during the last weeks, so thank you again!

      Today I tried if I can add a user-customizable variable fontSize to your user style. Finally I created a companion style to achieve this.

      The companion style just overwrites the font-size value in the Duolingo Arabic user style and makes it a user-customizable variable. I am not sure if something like this is possible with Stylish, so maybe you will need Stylus for it (available for Chrome, Firefox and Opera).

      If you want to try it out and if you have already Stylus and the Duolingo Arabic user style installed, you can install the companion style via this link.

      Then when you want to change the font size during a lesson on Duolingo click on the Stylus symbol and then on the settings wheel next to "Duolingo Arabic CO..." in the first screenshot:

      You can adjust the font size between 20px and 40px, default is 30px.

      @alijsh I wonder if you could add something like this to your user style?


      https://www.duolingo.com/profile/JudieLC

      Stylus worked great on my laptop. Firefox for iOS does not support extensions, unfortunately, so can't use it on an iPhone.


      https://www.duolingo.com/profile/alijsh

      You're welcome :)


      https://www.duolingo.com/profile/AlsaTronic

      Thank you so much for this userstyle! I don't know when or why Duolingo changed the font, but using this returned the writing to what I was used to seeing and makes it easier to focus on the exercises.


      https://www.duolingo.com/profile/RxJar

      I know this is old, but thank you so much!!! As I was getting further into the lessons, I was squinting to see the diacritics and this has helped immensely! Plus, it's very similar to the font for al jazeera so it'll help me with that as well!

      Hopefully for everyone else's sake the team decides to use this theme after the beta


      https://www.duolingo.com/profile/Alexey914898

      It's no longer in beta.


      https://www.duolingo.com/profile/YeltsinJr

      God bless your soul!


      https://www.duolingo.com/profile/PhilipJollans

      I have a minor sizing problem with the theme.

      On one or two questions the graphics are a bit too large and cause a horizontal scroll bar to be displayed.

      I don't know anything about writing themes for Stylish or Stylus, but if possible, I would rather make the frame wider, than the text smaller.

      Apart from this minor issue, the theme is fantastic.


      https://www.duolingo.com/profile/JudieLC

      I had the sizing issue on my browser, as well. I had to disable the add-on in order to complete some of the lessons, cause I couldn't see the whole word and/or sentence.


      https://www.duolingo.com/profile/PhilipJollans

      And another very minor point.

      The theme is not activated for the checkpoint tests (between different parts of the course).


      https://www.duolingo.com/profile/Ali251435

      Amazing thank you!

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