Skip to content

Side Characters for Dark themes by shishiostyles

Screenshot of Side Characters for Dark themes
Write a review Install Get Stylus

Details

Authorshishiostyles

LicenseNo License

Categoryhttps://myanimelist.net/

Created

Updated

Size6.3 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Compatible with other Stylish themes and multiple screen resolutions!

For adding custom characters easily to every page on MyAnimeList except for the list pages. The characters are darkened for Dark Modes, which you can install separately; I have some dark modes here: https://userstyles.world/user/shishiostyles

CHANGING CHARACTERS
Simply download and upload your new character render to Imgur. Next, replace the background image link in parenthesis with a direct link to the render you uploaded on Imgur, then save the theme. The parenthesis is found under
/* CHARACTER ON THE LEFT SIDE
and
/* CHARACTER ON THE RIGHT SIDE

The link you paste should look like this:

https://i.imgur.com/WLRuczW.png
This links to a default Zero Two (Darling in the Franx) render- you can paste it to learn how to change the theme or to switch to this character.

http://i.imgur.com/IdiA3Yi.png
This links a Natsumi (Date a live) render- you can paste it to learn how to change the theme or to switch to this character.

RANDOM CHARACTERS
You can use these links to replace the background image links in the code, the same as above, but you use these links instead.
https://signavatar.com/74154_s.gif
https://signavatar.com/74154_v.gif

CREATE YOUR OWN RANDOM POOL OF CHARACTERS
The random option is one I put together, but you can go to https://signavatar.com/index.php and create a pool of all the character renders you want to use on both sides.

If you need help, or want more themes, see this page:
https://myanimelist.net/forum/?topicid=2073022

By Shishio-kun @MyAnimeList

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name           Dark Side Characters
@namespace      Shishio
@version        2
@description    What the name says :D 
@author         Shishio-kun @MyAnimeList
==/UserStyle== */


@-moz-document regexp(".*myanimelist\\.net/(?!animelist|mangalist|editlist).*") 
{ 


/* 
For adding a custom renders easily to MAL on the forum and profile pages.
Install with the Stylish add-on. Compatible with other MAL themes!
By Shishio-kun @MyAnimeList
If you need help or want more themes see this page:
http://myanimelist.net/forum/?topicid=453219
*/ 


  
  
/* AFTER YOU MAKE A CHANGE BELOW, SAVE YOUR CHANGES WITH THE SAVE BUTTON OR ELSE THEY WON'T WORK. */
    

/* CHARACTER ON THE LEFT SIDE
You can put a custom character render on the left side of your layout here or on the install page. It will pop in front out of the MAIN BACKGROUND pic!
Adjust the percentage number after "left:" to move the render to the left or right, or use the settings on the install page.
*/ 
#myanimelist:before{
background-image: url(https://imgur.com/qBDPqkz.png) !important;
left: 0% !important;
top: 0% !important;
height: 100% !important;
}
      

/* CHARACTER ON THE RIGHT SIDE
You can put a custom character render on the right side of your layout here or on the install page. It will pop in front out of the MAIN BACKGROUND pic!
Adjust the percentage number after "right:" to move the render to the left or right, or use the settings on the install page. 
    
*/ 
#myanimelist:after {
background-image: url(https://imgur.com/er4cH26.png) !important;
right: 0% !important;
top: 0% !important;
height: 100% !important;
}  


      

      
  
/* OTHER CODES
Please don't touch these unless you know what you're doing or been directed to.
*/   

 
.page-common #searchBar.searchBar #topSearchButon:before{
background-image: url(https://imgur.com/6ZhDwCM.png),  url(https://imgur.com/6ZhDwCM.png) !important;
left: 0% !important;
top: 0% !important;
height: 100% !important;
}
      

.page-common #searchBar.searchBar #topSearchButon:after {
background-image: url(https://imgur.com/tXsBXQx.png),  url(https://imgur.com/tXsBXQx.png)  !important;
right: 0% !important;
top: 0% !important;
height: 100% !important;
}  
  

.page-common #searchBar.searchBar #topSearchButon:before {
content: "" !important;
width: 100% !important;
position: fixed !important;
bottom: 0;
display: block !important;
background-repeat: no-repeat;
background-position:  left bottom;
background-size: 25%,10% !important;
z-index: 2 !important;  
pointer-events: none !important;
}


  
.page-common #searchBar.searchBar #topSearchButon:after {
content: "" !important;
width: 100% !important;
position: fixed !important;
bottom: 0;
display: block !important;
background-repeat: no-repeat;
background-size: 25%,10% !important;
background-position: right bottom;
z-index: 2 !important;  
pointer-events: none !important;
}

#menu:before, #myanimelist:before,
#menu:after, #myanimelist:after{
opacity: .8;    
}

  

#menu:before, #menu:after{
background-color: transparent !important;}
  
  
#menu:before, #myanimelist:before {
content: "" !important;
width: 100% !important;
position: fixed !important;
bottom: 0;
display: block !important;
background-repeat: no-repeat;
background-position: center bottom;
background-size: contain !important;
z-index: -1 !important;  
}


  
#menu:after, #myanimelist:after {
content: "" !important;
width: 100% !important;
position: fixed !important;
bottom: 0;
display: block !important;
background-repeat: no-repeat;
background-size: contain !important;
background-position: center bottom;
z-index: -1 !important;  
}






    /* Media query for devices above 1024px */
@media all and (min-device-width:1025px) {
#menu:before, #myanimelist:before{
margin-left: -45%;
}
}

/* Media query for devices above 1140px */
@media all and (min-device-width:1141px) {
#menu:before, #myanimelist:before{
  margin-left: -44%;
}
}

/* Media query for devices above 1280px */
@media all and (min-device-width:1281px) {
#menu:before, #myanimelist:before{
  margin-left: -43%;
}
}

/* Media query for devices above 1366px */
@media all and (min-device-width:1367px) {
#menu:before, #myanimelist:before{
  margin-left: -41%;
}
}

/* Media query for devices above 1440px */
@media all and (min-device-width:1441px) {
#menu:before, #myanimelist:before{
  margin-left: -41%;
}
}

/* Media query for devices above 1600px */
@media all and (min-device-width:1601px) {
#menu:before, #myanimelist:before{
  margin-left: -44%;
}
}

/* Media query for devices above 1680px */
@media all and (min-device-width:1681px) {
#menu:before, #myanimelist:before{
  margin-left: -40%;
}
}

/* Media query for devices above 1920px */
@media all and (min-device-width:1921px) {
#menu:before, #myanimelist:before{
  margin-left: -36%;
}
}     
  

    /* Media query for devices above 1024px */
@media all and (min-device-width:1025px) {
#menu:after, #myanimelist:after {
margin-right: -52%;
}
}

/* Media query for devices above 1140px */
@media all and (min-device-width:1141px) {
#menu:after, #myanimelist:after {
  margin-right: -48%;
}
}

/* Media query for devices above 1280px */
@media all and (min-device-width:1281px) {
#menu:after, #myanimelist:after {
  margin-right: -45%;
}
}

/* Media query for devices above 1366px */
@media all and (min-device-width:1367px) {
#menu:after, #myanimelist:after {
  margin-right: -45%;
}
}

/* Media query for devices above 1440px */
@media all and (min-device-width:1441px) {
#menu:after, #myanimelist:after {
  margin-right: -44%;
}
}

/* Media query for devices above 1600px */
@media all and (min-device-width:1601px) {
#menu:after, #myanimelist:after {
  margin-right: -44%;
}
}

/* Media query for devices above 1680px */
@media all and (min-device-width:1681px) {
#menu:after, #myanimelist:after {
  margin-right: -42%;
}
}

/* Media query for devices above 1920px */
@media all and (min-device-width:1921px) {
#menu:after, #myanimelist:after {
  margin-right: -40%;
}
}

}

Reviews

No reviews yet.