CarbonAlien said: Your style is really beautiful. I would like to use it, but I have problem with anime/manga cover photos... Can you help me? I suggest using the updated version, it says how to do the covers. Also please read the instructions on the post as the background isn't done the same way as other designs (if you hover over the menu icon you can see that it doesn't look right.) Code /* ANIMOD by Shixma */ /* COVERS */ /* Replace "YOUR-USERNAME" with your MAL username */ /* Replace "anime" with "manga" if using this for a manga list */ @import "http://mal-fellow-writer.appspot.com/anime/YOUR-USERNAME/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; /* IMPORT */ @import "http://shixma.github.io/mal/animod-lazy.min.css"; /* == MODS == */ EDIT: Also I suggest either using a different background or adding a vignette as its hard to read the text. |
Shixma said: CarbonAlien said: Your style is really beautiful. I would like to use it, but I have problem with anime/manga cover photos... Can you help me? I suggest using the updated version, it says how to do the covers. Also please read the instructions on the post as the background isn't done the same way as other designs (if you hover over the menu icon you can see that it doesn't look right.) Code /* ANIMOD by Shixma */ /* COVERS */ /* Replace "YOUR-USERNAME" with your MAL username */ /* Replace "anime" with "manga" if using this for a manga list */ @import "http://mal-fellow-writer.appspot.com/anime/YOUR-USERNAME/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; /* IMPORT */ @import "http://shixma.github.io/mal/animod-lazy.min.css"; /* == MODS == */ EDIT: Also I suggest either using a different background or adding a vignette as its hard to read the text. I'm just checking what would look good. Thank you for the help! |
| Wow, that looks really neat. O_O Mind if I ask how you do that menu thing on the left top side? Or if I can get the code or something? XD |
 |
rusette said: Wow, that looks really neat. O_O Mind if I ask how you do that menu thing on the left top side? Or if I can get the code or something? XD This is the code for the menu animation and button.
#mal\_control_strip {
background-color: rgba(0, 0, 0, 0.3) !important;
background-image: url(http://i.imgur.com/nFwVWX4.jpg) !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
transform: translateY(-43px);
-webkit-transform: translateY(-43px);
-moz-transform: translateY(-43px);
-o-transform: translateY(-43px);
-ms-transform: translateY(-43px);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
border-bottom: 0px #000000 solid;
position: fixed !important;
text-shadow: 2px 1px 2px rgba(150, 150, 150, 1) !important;
z-index: 99999;
text-decoration: none !important;
}
#mal\_control_strip:before {
content: "MENU";
position: fixed;
display: block;
margin-left: .6%;
left: 2px;
top: 83px;
font-size: 10px;
color: white;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
cursor: default;
transition: all .23s ease;
}
#mal\_control_strip:after {
content: "+";
position: fixed;
top: 55px;
font-size: 40px;
margin-left: .5%;
width: 30px !important;
height: 35px;
padding: 2px;
color: white;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
transition: all .2s ease;
display: block;
cursor: default;
}
#mal\_control_strip:hover {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
height: 43px !important;
border-bottom: 0px black solid;
}
#mal\_control_strip:hover:after {
width: 9000px !important;
margin-top: -13px;
height: 70px;
display: block;
position: absolute;
margin-left: -10%;
color: rgba(0, 0, 0, 0);
}
#mal\_control_strip:hover:before {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
transform: translateX(-420px);
}
|
| the images of my list are broken :C help plz |
 |
| @metavulpes @kyutora Seems theres an error with mal-fellow-writer. You can use this as an alternative, although fellow writer will most likely be fixed. Its the same set up, replace anime with manga if using this on a manga list and put your username in there. http://mal-image.appspot.com/anime/YOUR-USERNAME |
| thanks you it worked |
|
| could i use one of your background for my list? i want to use it with MAL modern design. |
HollowPointX said: could i use one of your background for my list? i want to use it with MAL modern design. if you're talking about the low poly backgrounds go ahead, the other ones were just found online, I dont own the rights. |
Shixma said: HollowPointX said: could i use one of your background for my list? i want to use it with MAL modern design. if you're talking about the low poly backgrounds go ahead, the other ones were just found online, I dont own the rights. much appreciated (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ |
Recuvan said: /*COVERS - Replace the "username" bit with your MAL username to make your covers work*/ /* ANIME */@import "http://mal-image.appspot.com/anime/username"; /* MANGA */@import "http://mal-image.appspot.com/manga/username"; thanks ! :) now it works perfectly. |
Shixma said: rusette said: Wow, that looks really neat. O_O Mind if I ask how you do that menu thing on the left top side? Or if I can get the code or something? XD This is the code for the menu animation and button.
#mal\_control_strip {
background-color: rgba(0, 0, 0, 0.3) !important;
background-image: url(http://i.imgur.com/nFwVWX4.jpg) !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
transform: translateY(-43px);
-webkit-transform: translateY(-43px);
-moz-transform: translateY(-43px);
-o-transform: translateY(-43px);
-ms-transform: translateY(-43px);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
border-bottom: 0px #000000 solid;
position: fixed !important;
text-shadow: 2px 1px 2px rgba(150, 150, 150, 1) !important;
z-index: 99999;
text-decoration: none !important;
}
#mal\_control_strip:before {
content: "MENU";
position: fixed;
display: block;
margin-left: .6%;
left: 2px;
top: 83px;
font-size: 10px;
color: white;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
cursor: default;
transition: all .23s ease;
}
#mal\_control_strip:after {
content: "+";
position: fixed;
top: 55px;
font-size: 40px;
margin-left: .5%;
width: 30px !important;
height: 35px;
padding: 2px;
color: white;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 1);
transition: all .2s ease;
display: block;
cursor: default;
}
#mal\_control_strip:hover {
transform: translateY(0px);
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
height: 43px !important;
border-bottom: 0px black solid;
}
#mal\_control_strip:hover:after {
width: 9000px !important;
margin-top: -13px;
height: 70px;
display: block;
position: absolute;
margin-left: -10%;
color: rgba(0, 0, 0, 0);
}
#mal\_control_strip:hover:before {
color: rgba(0, 0, 0, 0);
text-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
transform: translateX(-420px);
}
Will it be okay if I use this code on my list? :D |
|
| @rusette Sure, no problem! |
Eucli said: @Shixma Hey, I was wondering if you could help me with this problem I'm trying to solve I'm trying to increase the width of the tags column, but I don't know what I'm supposed to do This is the code I currently have All I can think of is this, although its not very friendly and will need to be edited should you change your list options. Increase the nth-of-type value by 1 for every option you add.
.td2:nth-of-type(6), .td1:nth-of-type(6) {
width: 200px !important;
}
|
I see. I put it, right on top of the code, is that alright? Also, is it possible to shift the words on the top (with the score/type/progress columns) cause they are kinda off now :P |
 |
@Eucli Try this, It should correct the columns ^^td:nth-child(6){width: 200px} |
That worked perfectly! Thank you so much! |
|
| http://myanimelist.net/animelist/Excuritas What am i doing wrong ?:x im a noob so i just copy and paste stuff most of the time. I put this in: /* MOD: -Normal Cover- */ :hover + .hide { background-position: center center !important; background-repeat: no-repeat !important; background-size: cover; background: url(http://i.imgur.com/7wqGILZ.png); /* ERROR CALLBACK: Should mal-fellow-writer not work this will be used */ border: 5px solid rgb(255, 255, 255); box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.41); display: block !important; height: 317px; left: 10px; padding-bottom: 0; position: fixed; border-radius: 0px !important; top: 160px; width: 220px; animation-name: TTIPSlideIn; animation-duration:.25s; animation-iteration-count:1; -webkit-animation-name: TTIPSlideIn; -webkit-animation-duration: .25s; -webkit-animation-iteration-count:1; } /* END: -Normal Cover-*/ And then the custom background 3 under that. I think i did something wrong but im not sure :/ |
Excuritas said: http://myanimelist.net/animelist/Excuritas What am i doing wrong ?:x im a noob so i just copy and paste stuff most of the time. I put this in: /* MOD: -Normal Cover- */ :hover + .hide { background-position: center center !important; background-repeat: no-repeat !important; background-size: cover; background: url(http://i.imgur.com/7wqGILZ.png); /* ERROR CALLBACK: Should mal-fellow-writer not work this will be used */ border: 5px solid rgb(255, 255, 255); box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.41); display: block !important; height: 317px; left: 10px; padding-bottom: 0; position: fixed; border-radius: 0px !important; top: 160px; width: 220px; animation-name: TTIPSlideIn; animation-duration:.25s; animation-iteration-count:1; -webkit-animation-name: TTIPSlideIn; -webkit-animation-duration: .25s; -webkit-animation-iteration-count:1; } /* END: -Normal Cover-*/ And then the custom background 3 under that. I think i did something wrong but im not sure :/ Everything looks fine too me. Although I suggest keeping up to date with the design by using the automatic updating code. Here it is customized for you.
/* ANIMOD by Shixma */
/* COVERS */
/* Replace "YOUR-USERNAME" with your MAL username */
/* Replace "anime" with "manga" if using this for a manga list */
/* Should MAL fellow writer stop working you can use this as an alternative import: http://mal-image.appspot.com/anime/YOUR-USERNAME */
@import "http://mal-image.appspot.com/anime/Excuritas";
/* IMPORT */
@import "http://shixma.github.io/mal/animod-lazy.min.css";
/* == MODS == */
/* MOD: -Alternate BG 2-*/
#mal\_control_strip {
background-image: url(http://i.imgur.com/5EOKQbP.jpg) !important; /* GAUSSIAN BLUR */
}
body {
background-image: url(http://i.imgur.com/vhrnObB.jpg) !important; /* NORMAL IMAGE */
}
/* END: -Alternate BG 2- */
|
| Great work, it looks really nice! I have decided to use your design until i can make my own. Hope you don't mind. :) |
YatoGodMar 29, 2016 2:08 PM
 |
Stormrider said: @Shixma How can i change the header to my list which says MY ANIME LIST in bold white font...to something else?? I will be putting in an easier way to change it although right now you need to edit this image: http://i.imgur.com/9Xw6Qvv.png The height and placement need to be in the same place to be centered. Width does not matter. The font used is Roboto Light and there is a light drop shadow added to the text. Heres another example: http://imgur.com/e4394Jm |
ShixmaMar 15, 2016 2:28 PM
Shixma said: @metavulpes @kyutora Seems theres an error with mal-fellow-writer. You can use this as an alternative, although fellow writer will most likely be fixed. Its the same set up, replace anime with manga if using this on a manga list and put your username in there. http://mal-image.appspot.com/anime/YOUR-USERNAME Got the same problem where do i put this though? |
|
_Yato_God said: Shixma said: @metavulpes @kyutora Seems theres an error with mal-fellow-writer. You can use this as an alternative, although fellow writer will most likely be fixed. Its the same set up, replace anime with manga if using this on a manga list and put your username in there. http://mal-image.appspot.com/anime/YOUR-USERNAME Got the same problem where do i put this though? Sorry for the late reply. Looks for this in your code: @import "http://mal-fellow-writer.appspot.com/anime/YOUR-USERNAME/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; and replace it with this: @import "http://mal-image.appspot.com/anime/YOUR-USERNAME"; |
Hi, I have this problem :  how can I solve this?.. My Code /* ANIMOD by Shixma */ /* COVERS */ /* Replace "Speedragon" with your MAL username */ /* Replace "anime" with "manga" if using this for a manga list */ /* Should MAL fellow writer stop working you can use this as an alternative import: http://mal-image.appspot.com/anime/YOUR-USERNAME */ @import "http://mal-fellow-writer.appspot.com/anime/YOUR-USERNAME/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; /* IMPORT */ @import "http://shixma.github.io/mal/animod-lazy.min.css"; /* == MODS == */ #mal\_control_strip { background-image: url(http://wallpoper.com/images/00/43/58/46/boku-wa-tomodachi-ga-sukunai_00435846.jpg) !important; /* GAUSSIAN BLUR */ } body { background-image: url(http://wallpoper.com/images/00/43/58/46/boku-wa-tomodachi-ga-sukunai_00435846.jpg) !important; /* NORMAL IMAGE */ } |
LucasJun 5, 2016 12:23 PM
Speedragon said: Hi, I have this problem : how can I solve this?.. My Code /* ANIMOD by Shixma */ /* COVERS */ /* Replace "Speedragon" with your MAL username */ /* Replace "anime" with "manga" if using this for a manga list */ /* Should MAL fellow writer stop working you can use this as an alternative import: http://mal-image.appspot.com/anime/YOUR-USERNAME */ @import "http://mal-fellow-writer.appspot.com/anime/YOUR-USERNAME/?covers=http://dl.dropbox.com/u/49469857/MAL/premade/formats/covers/more"; /* IMPORT */ @import "http://shixma.github.io/mal/animod-lazy.min.css"; /* == MODS == */ #mal\_control_strip { background-image: url(http://wallpoper.com/images/00/43/58/46/boku-wa-tomodachi-ga-sukunai_00435846.jpg) !important; /* GAUSSIAN BLUR */ } body { background-image: url(http://wallpoper.com/images/00/43/58/46/boku-wa-tomodachi-ga-sukunai_00435846.jpg) !important; /* NORMAL IMAGE */ } You need to replace the "YOUR-USERNAME" in the link. although you have to use the new link (like it says). Just copy and paste this:
/* ANIMOD by Shixma */
/* COVERS */
@import "http://mal-image.appspot.com/anime/Speedragon";
/* IMPORT */
@import "http://shixma.github.io/mal/animod-lazy.min.css";
/* == MODS == */
#mal\_control_strip {
background-image: url(http://wallpoper.com/images/00/43/58/46/boku-wa-tomodachi-ga-sukunai_00435846.jpg) !important; /* GAUSSIAN BLUR */
}
body {
background-image: url(http://wallpoper.com/images/00/43/58/46/boku-wa-tomodachi-ga-sukunai_00435846.jpg) !important; /* NORMAL IMAGE */
}[
|
Speedragon said: @Shixma thank you, it fixed the problem., however  Note : I used the same code for both Anime and Manga You need to create a new stylesheet and copy and paste that same code, although replace "anime" with "manga" in that mal-image link. |
| UPDATE: I am currently improving this (you can see on my anime list). if you look at my list you can see it looks much better, less cluttered and just all around more elegant. I will be adding a new menu (on the side, still hidden tho) and it will be for the modern stylesheet. (although it will only be released on the modern stylesheet much later) If you would like an early version copy and paste this (for classic style): http://pastebin.com/raw/Ef4vegC8 (be sure to change your replace "shixma" with your username for the mal-image covers) |
ShixmaAug 9, 2016 7:20 PM
| This design is beautiful c: I'm using it~ |
 |
| I'm so glad you're updating this design, it looks so sleek now ^^ I just found it a week ago and i'm really liking it :) I have a problem tho, I'm using it for both anime and manga lists (on separate stylesheets) but on my manga list, I can't edit my chapters, when i click on the chapter numbers, there's no textbox to write the new number in. however it works with the score and the anime list too here's a screenshot of it:  I'm using the same code on both lists except for the import and the banner image PS i just updated to your new/improved design but i had this same problem before too this is my manga list code thanks in advance :) |
AzachiAug 10, 2016 6:03 AM
 |
Azachi said: I'm so glad you're updating this design, it looks so sleek now ^^ I just found it a week ago and i'm really liking it :) I have a problem tho, I'm using it for both anime and manga lists (on separate stylesheets) but on my manga list, I can't edit my chapters, when i click on the chapter numbers, there's no textbox to write the new number in. however it works with the score and the anime list too here's a screenshot of it: I'm using the same code on both lists except for the import and the banner image PS i just updated to your new/improved design but i had this same problem before too this is my manga list code thanks in advance :) Hi, that's normal. I've yet to find a way to keep the smaller picture there. Currently it just enlarges the small picture and moves it to the side when hovered Sorry, was thinking about another thing when responding too you. I will look into it. |
ShixmaAug 14, 2016 10:25 PM
| @Archaevia @-Shian- Im glad you like it c: |
| Love the design, would love to change the "MY ANIME LIST". I read that you're working on it, so I'm hyped for that. :D A small problem though, why is it that the design is slightly different from yours and mine (using the installation guide provided)? Mainly about it being bold and also the "WATCHING/COMPLETED/etc" seems to have a background on yours. I'm a sucker for minimal design (like yours), but mine doesn't achieve that. :/ You can see it here. |
muazamkamal said: Love the design, would love to change the "MY ANIME LIST". I read that you're working on it, so I'm hyped for that. :D A small problem though, why is it that the design is slightly different from yours and mine (using the installation guide provided)? Mainly about it being bold and also the "WATCHING/COMPLETED/etc" seems to have a background on yours. I'm a sucker for minimal design (like yours), but mine doesn't achieve that. :/ You can see it here. Hi, use this code instead (follow the same instructions): http://pastebin.com/raw/Ef4vegC8 This is currently in the works and I will eventually update it for everyone with cleaner code. |
UPDATE Hi, MAL has updated to use a secure protocol (SSL/HTTPS) causing an error (not allowing un-secure imports) Too fix this please change http:// on all the links in the design to https:// This will fix your issue. Everything on my end has been updated already. As well as this I have updated the design to use the newer thinner version. If you used the beta version of the thin design please follow the regular install. |
ShixmaAug 24, 2016 5:14 AM
FAVOURITE MOD
/* MOD: -Favourite- */
/* mod: favourite editor */
a[href="/anime/31240/Re_Zero_kara_Hajimeru_Isekai_Seikatsu"] span:after,
a[href="/anime/12355/Ookami_Kodomo_no_Ame_to_Yuki"] span:after {
content: "favourite";
background: #fff;
color: #212121;
font-size: 9px;
margin-left: 10px;
padding: 2px 10px;
text-transform: uppercase;
font-family: Roboto,arial,sans-serif;
cursor: default;
text-shadow: 1px 1px 3px rgba(0,0,0,.5)!important;
}
/* end mod: favourite editor */
[class^="td"] a:hover span:after {
text-shadow: 1px 1px 3px rgba(0,0,0,.5)!important;
}
/* END MOD: -Favourite- */
|
More topics from this board
» Share Your YouTube Channel/Videos! ( 1 2 3 4 5 ... Last Page )nin-tendo - Dec 16, 2022 |
362 |
by nin-tendo
»»
Yesterday, 11:56 AM |
|
» Protect or punish?DollzchanAi - Apr 18 |
4 |
by DollzchanAi
»»
Yesterday, 6:15 AM |
|
» BL reference in Tomodachi LifeKinspie13 - Apr 24 |
4 |
by Kinspie13
»»
Apr 24, 9:41 PM |
|
» How to Export/Backup Your Anime List Automatically! (TamperMonkey Script)hacker09 - May 18, 2020 |
3 |
by Vapor_AU
»»
Apr 24, 8:41 PM |
|
» advice for someone returning to artCrystepsi - Apr 4 |
5 |
by haaku-san
»»
Apr 24, 4:21 PM |