Hello,
I would like to change the background of memrise, I am tired of looking at the ugly mountain picture. Can someone please point me in the right direction to achieve this?
i don’t give a damn for backgrounds
smof: why do you “answer” then?
kylecree: the only option would be to download some extension for your browser that allows you to change that, or, if you’re good at .css, to fiddle with the web-developer tools. I did not find an extension for that (only some for changing the colour scheme), and I would like as well to get rid of the nuclear catastrophe image
2 Likes
This userstyle results in something like the dashboard below.
@-moz-document domain("memrise.com") {
/*change background image below*/
body{
background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/20/Fowlers_toad_frog.jpg) !important;
background: no-repeat center center fixed; !important
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100%;
}
/*change fonts here*/
*{font-family: Georgia, "Times New Roman",/*"FangSong","仿宋",*/KaiTi, "楷体", STKaiti, "华文楷体", serif !important;}
/*don't display premium stuff*/
div.premium-header {display: none;}
div.premium-content > div.text {display: none;}
div{border: none !important; }
/*have a margin above the content on the review screen*/
.have-attributes{margin-top: 20px !important;}
/*#m-sidebar-goal-countdown{display: none; }*/
#m-sidebar-premium, #m-sidebar-goal-countdown{margin-top: -40px !important;}
div.countdown-header, div.sidebar-main-btn {display:none;}
#footer {background-color: transparent !important;}
#page-header, #page-head, .landscape{visibility: hidden;}
.inner {visibility: visible;}
#header, .header-v2, .header-fake {background: rgba(244, 244, 255, 0) !important;}
.shiny-box {background-color: transparent !important;border: none !important;}
.shiny-box.active { background-color: #663344 !important; pacity: 0.8;}
.shiny-box{border-radius: 0px !important;}
.primary-value {margin-bottom: 0px !important;margin-top: 0px !important; }
.unitalic {border: none !important; }
/*mc screen*/
span.unitalic, span.val { text-shadow: none; }
li.shiny-box.choice.clearfix span.val {
font-size: 26px !important;
padding: 2px;
line-height: 1;
}
ol.choices li.shiny-box {
width: 97.5%; margin-left: -2% !important;
}
div.qquestion.qtext{font-size: 30px !important;margin-top: 13px; margin-bottom: -37px;}
.session-header{transition: all 0.75s ease}
.bar{background-image: linear-gradient(to right, rgba(0,244,233,0.6), rgba(0,181,250,1)) !important; border-radius: 5px !important;}
.bar-wrapper{background: rgba(255,255,255, 0.8) !important;}
.session-header {transform: scale(0.2);margin:-23px;margin-bottom: 110px; top: 0px;z-index: 999999 !important;}
/*.session-header:hover {margin-bottom: 100px;}*/
.js-course-details{font-size: 40px !important;}
.js-course-title {font-size: 20px !important;color: white !important;}
/*Session end screen don't show Facebook*/
div.fb-buttons {display: none !important;}
}
@-moz-document url("https://www.memrise.com/home/") {
div {background: transparent !important;}
.dashboard section .wrapper {background: transparent !important;}
.progress-bar {background: red !important;}
.dashboard-landscape, .landscape {display: none !important;}
}
/*change the display of the edit/report/mute audio/ etc links in the review screen*/
@-moz-document domain("www.memrise.com") {
#left-area{
transition: all 1.5s;
/*transform: scale (0.5) !important; *//*transform: rotate (25deg) !important;*/
/*background: green !important;*/
/*display: inline !important;*/
width: 270px !important; height: 20px !important;
position: fixed !important;
top: 96% !important; left: 75% !important;
z-index: 99999 !important;
overflow: hidden;
padding: 0px !important;
}
/*#left-area:hover {width: 270px !important;}*/
#left-area p, #left-area a {display: inline !important; margin-right: 6px; color: orange !important; font-size: 5px !important; padding: 0px !important;transform: rotate (25deg) !important; }
}
2 Likes
I tried to use this but it is not working for me. I don’t really know much about CSS or making user scripts, could you please explain how I can use this to get the background I want. I tried copy and pasting to tapermonkey to make the script but it is not working.
@Arete_Hime; I tried it and it doesn’t work for me too. I did also paste it into Tampermonkey, but there are errors and I don’t know how to fix them for I have no script programming knowledge. 
@kylecree10, @GabrieleCramer-Knebe this userstyle is probably more of a hindrance than a help. The below works for me in Chrome with the Stylish extension. You need to allow Stylish if you have something like uMatrix installed. Perhaps it also already works with Tampermonkey but I haven’t tried that. It might/probably have an issue with all the transparant divs, and my idiosyncratic changes:
/*change background image below*/
body{
background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/20/Fowlers_toad_frog.jpg) !important;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100%;
}
/*MAKES ALL DIVS TRANSPARANT */
div {background: transparent !important;}
/*MAKE THESE DIVS WHITE */
.thing-show .row{background-color: white !important;opacity: 0.8;}
/*don't display premium stuff*/
div.premium-header {display: none;}
div.premium-content > div.text {display: none;}
div{border: none !important; }
div.countdown-header, div.sidebar-main-btn {display:none;}
#footer {background-color: transparent !important;}
#page-header, #page-head, .landscape{visibility: hidden;}
.inner {visibility: visible;}
#header, .header-v2, .header-fake {background: rgba(244, 244, 255, 0) !important;}
.shiny-box {background-color: white !important;opacity: 0.8; border: none !important;}
.shiny-box.active { background-color: black !important; opacity: 0.8;}
.shiny-box{border-radius: 0px !important;}
.primary-value {margin-bottom: 0px !important;margin-top: 0px !important; }
.unitalic {border: none !important; }
/*mc screen*/
span.unitalic, span.val { text-shadow: none; }
li.shiny-box.choice.clearfix span.val {
font-size: 26px !important;
padding: 2px;
line-height: 1;
}
ol.choices li.shiny-box {
width: 97.5%; margin-left: -2% !important;
}
div.qquestion.qtext{font-size: 30px !important;margin-top: 13px; margin-bottom: -37px;background-color: white !important;opacity: 0.8;}
.session-header{transition: all 0.75s ease}
.bar{background-image: linear-gradient(to right, rgba(0,244,233,0.6), rgba(0,181,250,1)) !important; border-radius: 5px !important;}
.bar-wrapper{background: rgba(255,255,255, 0.8) !important;}
.session-header {transform: scale(0.2);margin:-23px;margin-bottom: 110px; top: 0px;z-index: 999999 !important;}
/*.session-header:hover {margin-bottom: 100px;}*/
.js-course-details{font-size: 40px !important;}
.js-course-title {font-size: 20px !important;color: white !important;}
/*Session end screen don't show Facebook*/
div.fb-buttons {display: none !important;}
.dashboard section .wrapper {background: transparent !important;}
.progress-bar {background: red !important;}
.dashboard-landscape, .landscape {display: none !important;}
/*change the display of the edit/report/mute audio/ etc links in the review screen*/
#left-area{
transition: all 1.5s;
/*transform: scale (0.5) !important; *//*transform: rotate (25deg) !important;*/
/*background: green !important;*/
/*display: inline !important;*/
width: 270px !important; height: 20px !important;
position: fixed !important;
top: 96% !important; left: 75% !important;
z-index: 99999 !important;
overflow: hidden;
padding: 0px !important;
}
/*#left-area:hover {width: 270px !important;}*/
#left-area p, #left-area a {display: inline !important; margin-right: 6px; color: orange !important; font-size: 5px !important; padding: 0px;/*transform: rotate (25deg) !important;*/ }
The below userstyle should have less issues. It was originally written by @loesvanbos and I tinkered with it a bit. This makes the courses on the dashboard display in 3 columns. Search for it on the internet with “Boxed in Dashboard (Memrise)” I think:
body, span, .container {
font-size: 12px !important;
}
.container {
width: 1000px !important;
max-width: 1000px !important;
}
/* i added after https change */
/*.course-card-container, .course-progress-box, .card-bottom, .top-main, .course-progress, .card-main-container {background-color: transparent !important;}
*/
/*
.tabbed-sidebar, .sidebar-boxes, .li.active, .sidebar-profile {
width: 110px;
}
.sidebar-tabs, .sidebar-premium, .sidebar-leaderboard {
transform: scale(0.7);
margin-left: -45px;
margin-bottom: -70px;
margin-top: -30px;
}
.sidebar-profile{
margin-top: -20px;
}
.left, .right {
width:100% !important;
}
.number.js-num {
font-size: 16px !important;
}
.profile-header, .profile-link {
height:35px !important;
}
*/
.tabbed-main {
/*i changed*/
width: 800px !important;
float:left;
margin-left: 5px;
margin-top: -50px;
}
.card-top {
width:100%;
padding: 10px 10px 0px !important;
}
.card-image-col, .img-crop{
width:60px !important;;
}
.course-photo {
margin-left: 0px !important;
height: 60px !important;
}
.detail, .pull-right {
width: 100% !important;
}
.detail {margin-bottom: 5px;}
.pull-right { float: none !important;}
.title {
font-size:16px !important;
}
.goal-setter-btn {
height:16px !important;
min-width: 100px !important;
}
.leaderboard-icon, .icon{
background-size:110px 16px !important;
height: 16px !important;
}
.leaderboard-btn {
height: 24px !important; width:24px !important;
margin-right: -15px !important;
}
.onoff {
padding: 0px 5px 5px 0px !important;
width:102px;
}
.orange, .pts, .onoff {
font-size: 9px !important;
}
.goal-setter {
height: 50px;
width: 90% !important;
margin: 5px -50px -5px !important;
}
.goal-setter-progress {
width: 90% !important;
margin: 0px -42px 5px !important;
height: 8px !important;
position: absolute !important;
top: 65px !important;
}
.streak-row {
transform: scale(0.7) !important;
margin: -8px 0px !important;
}
.streak-edit {
position:absolute !important;
top: 9px;
right: 50px;
}
.card-bottom {
padding: 5px 0px 5px 0px !important;
min-height: 0px !important;
width: 100%;
margin-right: 20% !important;
}
.button {
min-width: 49px !important;
/*i changed*/
max-width: 149px;
height: 15px;
padding: 2px 2px 8px 2px !important;
margin-right: 5px;
}
.button.pink, .button.green, .button.blue {
background-image: none;
}
.button.pink{background:#F13A98;}
.button.green{background:#7EC826;}
.button.blue{background:#69C3F4;}
.course-card-container {
margin-bottom:60px !important;
/*i changed*/
margin-right: 13px;
/*i added*/
margin-left: 13px;
/*i added*/
margin-top: 40px;
width:23%;
height:240px;
display:inline-block;
vertical-align: top;
}
/* .course-progress-box added after memrise https change*/
.card-main-container, .course-progress-box {
/*i changed*/
width:99% !important;
/*i changed*/
height:55px;
top: 16px; right: 16px;
/*i added*/
margin-top: 75px;
display: block;
}
div.wrapper > div.detail {height: 10px;}
/*.button.blue{
margin-top: -10px;
margin-bottom: -10px;
height: 26px !important;
}
*/
.button.green > span, .button.blue > span{
font-size: 10px !important;}
.text {
/*white-space: unset !important;*/
}
.fb-like-box, .app-promo-box, .streak, /*.right.half,*/ .duration, .level.first, .level.second, .level.third, .tail, .name, .content-general, /*.profile-image,*/ .premium-badge, .premium-header, .premium-link, .img-star {
display: none !important;
}
/*my extra's*/
div.content-badges{display: none;}
.button.orange, .button.only-img, .button.disabled {display: none !important;}
p.title{font-size: 10px !important;}
/*p.title {transform: scale(0.37);}*/
div.pull-right{display: none;}
div.courses-filter-container{margin-bottom: 40px; width: 80%;}
div.cellWrapper{height: 22px !important;}
div.card-image-col{transform: translate(60px, 0px) scale(3.5);z-index: 90000;}
img.category-photo{transform: scale(0.35);}
Go to memrise.com, then click on the Stylish button and click “Create New Style,” paste the stuff in and give it a name.
I couldn’t quite get what I wanted with the above coding, but I found a way to get what I want, which was:[quote=“Hydroptere, post:3, topic:12683”]
to get rid of the nuclear catastrophe image
[/quote]
What I did was this:
I used the code below with the “Stylish” extension for google chrome browser, this took care of the image on the bottom of the screen when doing lessons.
/change background image below/
body {
background-image: url(http://www.hbc333.com/data/out/187/47103911-plain-backgrounds.jpg) !important;
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: 100%;
}
The next thing I did was use an extension called “Adgaurd AdBlocker” to get rid of the image of the mountains at the top of screen after you complete a lesson. Simply right click on the screen where the mountains are at, scroll down and select the Adgaurd AdBlocker option, then select “Block ads on this website” this will allow you to select the mountain image and block it so you won’t see it anymore.
1 Like
i like the moutains, they are all that’s left from the ol memrise… I’ll fiddle with the background image