Skip to content

Custom Side Characters by shishiostyles

Screenshot of Custom Side Characters
Write a review Install Get Stylus

Details

Authorshishiostyles

LicenseNo License

Categoryhttps://myanimelist.net/

Created

Updated

Size6.4 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.

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.

You can use these links for a random character on the side:
https://signavatar.com/74154_s.gif
https://signavatar.com/74154_v.gif

DARKENING
To darken the renders for Dark mode, go to DARKEN OPTION and delete the specified line, then save the theme.

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           Custom 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/QRn4ynS.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/DQISLS3.png) !important;
right: 0% !important;
top: 0% !important;
height: 100% !important;
}  


      

      
/* DARKEN
Remove the DELETE line below to darken the renders. Otherwise, the darkening codes are blocked. This is for users using a dark theme or dark mode.    
*/ 

    
    
    
 /* DELETE THIS ENTIRE LINE TO DARKEN THE THEME /*
    
    
 
.page-common #headerSmall: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 #headerSmall: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 #headerSmall: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 #headerSmall: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;    
}

  

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

#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.