CubeMage said: Hi, I am using your Grid Style 4 and really like it!
When changing the backgrounds, renders, and banners, I realized that I the filter window also has a custom background. However, no matter how much I searched the code, I couldn't find the appropriate code to change that background.
Any help will be much appreciated
Hi, I decided to use Clarity Style 2 for my anime list. I've figured out how to do most of the customizations I wanted, but there are a few things I am having trouble with:
1: How do you move banner characters?
I would like to move the pictures on my Completed and Dropped lists to the right and not move any other ones.
2. How do you resize the width of the list entries?
I would like to have renders on each side but there's not much room to work with because the renders would either be covered by my list (or, if I change the z-index, cover up part of the entry and make me unable to use some functions in certain parts on my screen)
3. When hovering over an entry's picture, is there a way to change the color of the arrow?
4. Is there a way to change the color of the Banner Text?
Vivator said: Hi, I decided to use Clarity Style 2 for my anime list. I've figured out how to do most of the customizations I wanted, but there are a few things I am having trouble with:
1: How do you move banner characters?
I would like to move the pictures on my Completed and Dropped lists to the right and not move any other ones.
2. How do you resize the width of the list entries?
I would like to have renders on each side but there's not much room to work with because the renders would either be covered by my list (or, if I change the z-index, cover up part of the entry and make me unable to use some functions in certain parts on my screen)
3. When hovering over an entry's picture, is there a way to change the color of the arrow?
4. Is there a way to change the color of the Banner Text?
Add all new code to the bottom of your CSS.
1. Play with this. Each section is set to its default value here, but to change anything you can fiddle with the values. To align an image to the left of the screen, you could give it a background-position of left and a margin-left of 0. Same with the right of the screen.
2. Default is 1060px. To modify, change the top-most number in this code to something else (900px for instance). I haven't tested higher numbers, only lower.
@Valerio_Lyndon Thank you so much for your response. I was able to get everything finished how I wanted it to be. It's a very great list design and I'm glad that I got to make it how I wanted it.
1. Play with this. Each section is set to its default value here, but to change anything you can fiddle with the values. To align an image to the left of the screen, you could give it a background-position of left and a margin-left of 0. Same with the right of the screen.
It's not particularly an issue. Most of what I've done since you made the original post is just minor bug fixes. You can find a full list of changes since the version you used (R22.0) in the image below or here: [Changelog]
If you were to update, you'd probably have to update the image on hover code as well as I think I made a change to how that code works during one of the updates. I'd also check that nothing else broke afterwards.
You're not using Grid Layout on the anime list tho? I can only guess that it's because your layout was private recently or something in your browser like ad block is blocking th cover imports. You can try the alternative cover imports, or wait 24 hours after setting the anime list to public for covers to appear.
Your manga list is also private- the covers won't show by default if your list is private and you're trying to use one of these layouts there too. You can try some of the alternative modern manga list cover imports for a private manga list
You probably need either one of these at the top of your mangalist CSS (please don't use both at the same time)
Hey there Shishio-kun! First of all, I'd like to thank you for giving such amazing design for my list! However, I am facing a few problems and would like to have them solved. Here's my anime list: My Anime List
Now, here are my issues:
1. The position of the hover is not adjacent to the rectangular box corresponding to the anime. How can I resolve ths?
2. I want to change the font to "Thirsty Script". But I don't know how to do so as there are many places where font-family is written. Also, I can't find any free link on google. Can you help me with that as well? If not, let's try with your Lover's Quarrel example.
Once again, I'd like to thank you on sharing your amazing work. I finally feel like my anime profile is something dope!
Koustubh said: Hey there Shishio-kun! First of all, I'd like to thank you for giving such amazing design for my list! However, I am facing a few problems and would like to have them solved. Here's my anime list: My Anime List
Now, here are my issues:
1. The position of the hover is not adjacent to the rectangular box corresponding to the anime. How can I resolve ths?
2. I want to change the font to "Thirsty Script". But I don't know how to do so as there are many places where font-family is written. Also, I can't find any free link on google. Can you help me with that as well? If not, let's try with your Lover's Quarrel example.
Once again, I'd like to thank you on sharing your amazing work. I finally feel like my anime profile is something dope!
It's Takana_no_Hana's work, I just edited it so that it would be easier to customize and had more options
1. What's your screen size and did you use zoom on your browser? That might be the issue. It looks normal to me.
You can also try this: add this code to the bottom and adjust the number after left to move the preview pic and tags to where you want.
@Shishio-kun Hey! #2 worked like a charm! Thanks for that. As for #1, the issue I am facing is that without scrolling up or down with the middle mouse, if I move the mouse up/down across different entries, the thing is that the hover stays at only a single place. It does not move up/down with it. How do I resolve this?
Koustubh said: @Shishio-kun Hey! #2 worked like a charm! Thanks for that. As for #1, the issue I am facing is that without scrolling up or down with the middle mouse, if I move the mouse up/down across different entries, the thing is that the hover stays at only a single place. It does not move up/down with it. How do I resolve this?
That should let it be moved more flexibly but you'll have to adjust the numbers again to find the right place. Also this might work better too instead:
That lets you control the tag's and preview pic's positions separately, but there's a lot of adjusting of the numbers that need to be done. Maybe some of these would work for you? Might take a lot of experimentation. Lastly you could replace absolute with relative but I think that absolute should be enough.
Koustubh said: @Shishio-kun Hey! #2 worked like a charm! Thanks for that. As for #1, the issue I am facing is that without scrolling up or down with the middle mouse, if I move the mouse up/down across different entries, the thing is that the hover stays at only a single place. It does not move up/down with it. How do I resolve this?
That should let it be moved more flexibly but you'll have to adjust the numbers again to find the right place. Also this might work better too instead:
That lets you control the tag's and preview pic's positions separately, but there's a lot of adjusting of the numbers that need to be done. Maybe some of these would work for you? Might take a lot of experimentation. Lastly you could replace absolute with relative but I think that absolute should be enough.
@Shishio-kun I was able to do almost everything I needed. I just have one final issue. In my animelist, the studio name is stuck at one place in the middle. Other than that, everything is working perfectly.
Check it out: My Anime List
You also need to remove that extra closing bracket from the bottom if you want to add more codes.
Also your preview pic and other imports aren't visible, you need to repair your imports with this topic under Allow logged out users and other users to see your imported CSS https://myanimelist.net/forum/?topicid=439897
You also need to remove that extra closing bracket from the bottom if you want to add more codes.
Also your preview pic and other imports aren't visible, you need to repair your imports with this topic under Allow logged out users and other users to see your imported CSS https://myanimelist.net/forum/?topicid=439897
I see. Well, I tried the thing which you've mentioned for the broken images, but it's still not working. Also, I want a slight change in my design. Whenever I hover over a design, the entry of the particular entry enlarges because of the image. That probably is because of the relative positioning of the image,tags and the studio. Is there any roundabout way for this so that
1. The entry won't enlarge
2. I can see the image, tag and the studio beside the entry to the left side (the way it's positioned in the original template, with the entry being just adjacent to the entry and not fixed in a single postion)
Edit: I commented out all the codes related to data.tags, data.images and data.studio, so the design has been reverted to the original state. You can give me suggestions now. Here's my list: My Anime List
Unfortunately with this type of positioning there's going to be alot of errors and manual readjustment. You can use this CSS tho to get the effect you want, I worked really hard on it for a long time. All the codes to move everything are at the bottom now, and a lot of conflicting codes had to be taken out, and a lot of the columns had to manually adjusted. But you can make any more readjustments with the margin-top, top, and left codes in the bottom of the CSS. I labelled the sections too :D
/* picture at the bottom of your list
** please note that default is a seiren picture even if you delete the image url below(it's just a sample image which you need to replace).
** if you don't want this section, just delete the image url
*/
.list-unit .loading-space {
height:250px;
width:1000px;
background-image:url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAuKTKHnTqNYtxb-j8OBAt-g);
}
For future questions try using this video first please so you can learn how to use the Inspect Element tool, which will help you a lot in making high level customization and live edits https://www.youtube.com/watch?v=cTGbVutdqfc
Unfortunately with this type of positioning there's going to be alot of errors and manual readjustment. You can use this CSS tho to get the effect you want, I worked really hard on it for a long time. All the codes to move everything are at the bottom now, and a lot of conflicting codes had to be taken out, and a lot of the columns had to manually adjusted. But you can make any more readjustments with the margin-top, top, and left codes in the bottom of the CSS. I labelled the sections too :D
/* picture at the bottom of your list
** please note that default is a seiren picture even if you delete the image url below(it's just a sample image which you need to replace).
** if you don't want this section, just delete the image url
*/
.list-unit .loading-space {
height:250px;
width:1000px;
background-image:url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAuKTKHnTqNYtxb-j8OBAt-g);
}
For future questions try using this video first please so you can learn how to use the Inspect Element tool, which will help you a lot in making high level customization and live edits https://www.youtube.com/watch?v=cTGbVutdqfc
Damn brother! You nailed it! Saasuga Shishio-sama! Talk about an overkill :D You really are very dedicated guy who loves to help other people. Props to you for helping me out. Also, I think you're the first person I've seen who's very active on MAL (compared to people like Stark700) who do a very unique kind of work. I thank you very much once again for helping me brother.
Cheers!
Unfortunately with this type of positioning there's going to be alot of errors and manual readjustment. You can use this CSS tho to get the effect you want, I worked really hard on it for a long time. All the codes to move everything are at the bottom now, and a lot of conflicting codes had to be taken out, and a lot of the columns had to manually adjusted. But you can make any more readjustments with the margin-top, top, and left codes in the bottom of the CSS. I labelled the sections too :D
/* picture at the bottom of your list
** please note that default is a seiren picture even if you delete the image url below(it's just a sample image which you need to replace).
** if you don't want this section, just delete the image url
*/
.list-unit .loading-space {
height:250px;
width:1000px;
background-image:url(https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAuKTKHnTqNYtxb-j8OBAt-g);
}
For future questions try using this video first please so you can learn how to use the Inspect Element tool, which will help you a lot in making high level customization and live edits https://www.youtube.com/watch?v=cTGbVutdqfc
Damn brother! You nailed it! Saasuga Shishio-sama! Talk about an overkill :D You really are very dedicated guy who loves to help other people. Props to you for helping me out. Also, I think you're the first person I've seen who's very active on MAL (compared to people like Stark700) who do a very unique kind of work. I thank you very much once again for helping me brother.
Cheers!
I'm looking for a way to add 1 or 2 character renders on each side of the page for each page available (Completed, Watching, Dropped etc) of either:
The Line Style Simple Layout
and/or
The Line Style 3 Layout
I was told that I would need to add more CSS codes to do so however simply copy pasting the CSS character render codes from Grid Style 5 does not work as this is a very different design. Would anyone be able to help me out with this?
FrenchAussie said: I'm looking for a way to add 1 or 2 character renders on each side of the page for each page available (Completed, Watching, Dropped etc) of either: The Line Style Simple Layout and/or The Line Style 3 Layout.
I was told that I would need to add more CSS codes to do so however simply copy pasting the CSS character render codes from Grid Style 5 does not work as this is a very different design. Would anyone be able to help me out with this?
I ripped the renders from the grid design like you wished to do and it seems to work. The reason it didn't work for you is probably due to some extra code that was needed, found far down into the CSS. I also added a bit of new code to make the cover image appear above the render. Give it a go. Place it anywhere below the @import codes.
/* RENDERS:
adjust the size with the width percentage and position with left or right percentage. */
/*ALL ANIME/MANGA L RENDER*/
body[data-query*='status":7']::before {
background-image: url(https://imgur.com/tqCiDWz.png);
width: 50%;
left: -15%;
}
/*CURRENT L RENDER*/
body[data-query*='status":1']::before {
background-image: url(http://imgur.com/gAgIkGM.png);
width: 50%;
left: -15%;
}
/*COMPLETED L RENDER*/
body[data-query*='status":2']::before {
background-image: url(https://imgur.com/ctFCZtn.png);
width: 50%;
left: -15%;
}
/*ON HOLD L RENDER*/
body[data-query*='status":3']::before {
background-image: url(https://imgur.com/pFOQFvK.png);
width: 50%;
left: -15%;
}
/*DROPPED L RENDER*/
body[data-query*='status":4']::before {
background-image: url(https://imgur.com/Qi926ug.png);
width: 50%;
left: -15%;
}
/*PLANNED L RENDER*/
body[data-query*='status":6']::before {
background-image: url(https://imgur.com/dyj3O7G.png);
width: 50%;
left: -15%;
}
/*CURRENT R RENDER*/
body[data-query*='status":1']::after {
background-image: url(http://imgur.com/yewORJZ.png);
width: 50%;
right: -15%;
}
/*COMPLETED R RENDER*/
body[data-query*='status":2']::after {
background-image: url(https://imgur.com/4ST8CD0.png);
width: 50%;
right: -15%;
}
/*ON HOLD R RENDER*/
body[data-query*='status":3']::after {
background-image: url(https://imgur.com/UhX9YW6.png);
width: 50%;
right: -15%;
}
/*DROPPED R RENDER*/
body[data-query*='status":4']::after {
background-image: url(https://imgur.com/qhDbEDQ.png);
width: 50%;
right: -15%;
}
/*PLANNED R RENDER*/
body[data-query*='status":6']::after {
background-image: url(https://imgur.com/NSgLbpa.png);
width: 50%;
right: -15%;
}
/*ALL ANIME/MANGA R RENDER*/
body[data-query*='status":7']::after {
background-image: url(https://imgur.com/pKH4nBd.png);
width: 50%;
right: -15%;
}
/*RENDERS - CORE CODES*/
body::before,
body::after {
background-color: transparent;
display: block !important;
height: 100% !important;
position: fixed !important;
content: "";
top: 0% !important;
z-index: 5 !important;
background-repeat: no-repeat;
background-position: center bottom;
pointer-events: none;
background-size: 100% !important;
}
.data.image a::before {
z-index: 150;
}
Hey, im new here.
I was wondering while using grid style 4 (with two bottom renders). If there was any direct way to scle the renders bigger or smaller. In grid style one there is an option to adjust the width and height, but in grid style 4 there is only an option to adjust how far left the image is set. Is there any way to scale the two renders in grid style 4?
Yuryy said: Hey, im new here.
I was wondering while using grid style 4 (with two bottom renders). If there was any direct way to scle the renders bigger or smaller. In grid style one there is an option to adjust the width and height, but in grid style 4 there is only an option to adjust how far left the image is set. Is there any way to scale the two renders in grid style 4?
/* BOTTOM RENDERS (left and right) */
body footer:before{
width: 50%;
height: 100%;
left: -15%;
background-image: url(http://imgur.com/gAgIkGM.png);
}
body footer:after {
width: 50%;
height: 100%;
right: -15%;
background-image: url(http://imgur.com/yewORJZ.png);
}
I added the width and height properties to each render and changed the selector ("footer" to "body footer") to increase its priority and override some exisiting code. You probably won't need to mess with the height, width will probably do what you need.
JawbreakerGamer said: Im so sorry to bother you guys. I used one of your themes to make my anime list look better than default. I thought it was done, but my friend opened my list, but besides the anime cover pics themselves nothing else loads for him. On my screen i can see it all perfectly though. In the CSS i can see it all on there too. I opened my anime list on an incognito tab and they dont load on that either. I have my list set to modern, style override is unchecked. I used direct links for all the pictures, and Original gif links for all the gifs from imgur. Some of the renders are the ones that came with the theme too and those arent showing up either. I dont have my account on private. Is there something that im missing? Any and all help would be greatly appreciated with this. Im sorry if im just an idiot and i did something wrong. I can give you the CSS code if that would help too. I can also send you guys screenshots if that would help as well!
I believe this is linked to the current issues with MAL's image service. There's a thread about it in the support board, and it's been affecting the entire website (forums, profiles, everything). Your list appears fine when logged in because you are being served the original images from Imgur. When logged out, or viewing as another user, issues appear because they're being served by MAL's temporarily borked image network. There are ways to work around this, but it's probably not worth the effort of going through since I would expect a fix to come through within a few days. Or at least, I'm hoping for one.
I installed the Clarity Style 1 layout and i cant get the characters on the side of the list apear on the top of my backround. I tried to fixed it but im not rally into coding and i just wounder if somebody could help me so the characters would be on top of the backround.
MrD3xtr said: I installed the Clarity Style 1 layout and i cant get the characters on the side of the list apear on the top of my backround. I tried to fixed it but im not rally into coding and i just wounder if somebody could help me so the characters would be on top of the backround.
Add this to the bottom of your CSS, it should fix the issue. :)
New member here, started using your layouts just now. Everything looks amazing, how do you change all the font style for Grid Style 1? I wanted to change it to Arial to keep the font simple.
Mike_Myers said: New member here, started using your layouts just now. Everything looks amazing, how do you change all the font style for Grid Style 1? I wanted to change it to Arial to keep the font simple.
Mike_Myers said: New member here, started using your layouts just now. Everything looks amazing, how do you change all the font style for Grid Style 1? I wanted to change it to Arial to keep the font simple.
Hmm, usually adding this CSS somewhere in your code will enable changing the filter background. It's a little hard to tell if you have some other code already applied that will conflict, but if there is an issue you could probably fix it by removing your current image that is displaying on the filter menu and solely using this new code.
To add an image, replace "YourImageUrl" with a link to an image. To remove the image, replace "url(YourImageUrl)" with "none".
If you still need some help, make sure to apply the changes to the CSS on your publicly available (currently active) list style, so that I can see what's going wrong in the code. :)
Thanks for all this awesome work! So I actually used Grid Style 5, Chrome and Firefox displays all the anime/manga covers sharp and detailed, but for some reason Safari (on MacBook) renders the anime/manga cover images blurry. Is there a way to fix this blurry problem on Safari?
ZekkenFuwa said: Thanks for all this awesome work! So I actually used Grid Style 5, Chrome and Firefox displays all the anime/manga covers sharp and detailed, but for some reason Safari (on MacBook) renders the anime/manga cover images blurry. Is there a way to fix this blurry problem on Safari?
Find this line, it should be right near the top of the CSS:
The problem with the regular code in Safari is that it relies on some referral tech for automatically detecting the user and list. Safari unfortunately blocks this by default and the only way to prevent this happening is to disable all of Safari's privacy features browser-wide. Rather inconvenient. The solution here is to specify the user and list to the cover generator so it doesn't have to auto-detect it.
How to change pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to change the main background or a banner background, find MAIN BACKGROUND or BANNER BACKGROUND.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Then upload the new background image you want for that part. Upload the picture to Imgur or a similar site and copy the direct link. It will look something like: http://i.imgur.com/VTrW1N1.jpg
Paste it into the parenthesis.
5. Save with the button underneath the CSS edit box. The background image be changed.
How to remove pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to remove the side character renders, search for SIDE CHARACTERS or RENDER.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Save with the button underneath the CSS edit box. The pics should be transparent or blank now.
How to change colors of the list's boxes containing anime/manga.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find /* ANIME/MANGA CONTAINER SETTINGS */
3. Under there, look for background color settings. You can change the colors after color: here. You can use a single color word like purple or transparent, or RGBA color settings. RGBA colors like rgba(255, 0, 0, .5)
That's red with half opacity. Something like this can be generated here or Google "RGBA COLOR GENERATOR". http://www.hexcolortool.com
btw the section for hover is what you see when pointing the cursor to the container.
How to change the quote at the top.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find
/* BANNER QUOTE*/
3. The quote's text is in quotations below. Change it to what you want. Leaving it blank will leave no quote.
4. Save.
Line Style 2
* 1 Wallpaper
* 1 Banner
* Custom Quote on top of the banner
* Custom table and row hover color
* Big preview pic on row hover
How to change pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to change the main background or a banner background, find MAIN BACKGROUND or BANNER BACKGROUND.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Then upload the new background image you want for that part. Upload the picture to Imgur or a similar site and copy the direct link. It will look something like: http://i.imgur.com/VTrW1N1.jpg
Paste it into the parenthesis.
5. Save with the button underneath the CSS edit box. The background image be changed.
How to remove pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to remove the side character renders, search for SIDE CHARACTERS or RENDER.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Save with the button underneath the CSS edit box. The pics should be transparent or blank now.
How to change colors of the list's boxes containing anime/manga.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find /* ANIME/MANGA CONTAINER SETTINGS */
3. Under there, look for background color settings. You can change the colors after color: here. You can use a single color word like purple or transparent, or RGBA color settings. RGBA colors like rgba(255, 0, 0, .5)
That's red with half opacity. Something like this can be generated here or Google "RGBA COLOR GENERATOR". http://www.hexcolortool.com
btw the section for hover is what you see when pointing the cursor to the container.
How to change the quote at the top.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find
/* BANNER QUOTE*/
3. The quote's text is in quotations below. Change it to what you want. Leaving it blank will leave no quote.
4. Save.
Line Style 3
* 6 Wallpapers (one for each category page)
* Custom Quote on top of the banner
* Custom table and row hover color
* Big preview pic on row hover
How to change pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to change the main background or a banner background, find MAIN BACKGROUND or BANNER BACKGROUND.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Then upload the new background image you want for that part. Upload the picture to Imgur or a similar site and copy the direct link. It will look something like: http://i.imgur.com/VTrW1N1.jpg
Paste it into the parenthesis.
5. Save with the button underneath the CSS edit box. The background image be changed.
How to remove pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to remove the side character renders, search for SIDE CHARACTERS or RENDER.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Save with the button underneath the CSS edit box. The pics should be transparent or blank now.
How to change colors of the list's boxes containing anime/manga.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find /* ANIME/MANGA CONTAINER SETTINGS */
3. Under there, look for background color settings. You can change the colors after color: here. You can use a single color word like purple or transparent, or RGBA color settings. RGBA colors like rgba(255, 0, 0, .5)
That's red with half opacity. Something like this can be generated here or Google "RGBA COLOR GENERATOR". http://www.hexcolortool.com
btw the section for hover is what you see when pointing the cursor to the container.
How to change the quote at the top.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find
/* BANNER QUOTE*/
3. The quote's text is in quotations below. Change it to what you want. Leaving it blank will leave no quote.
4. Save.
Line Style 4
* 6 Wallpapers (one for each category page)
* 1 Banner
* Custom Quote on top of the banner
* Custom table and row hover color
* Big preview pic on row hover
How to change pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to change the main background or a banner background, find MAIN BACKGROUND or BANNER BACKGROUND.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Then upload the new background image you want for that part. Upload the picture to Imgur or a similar site and copy the direct link. It will look something like: http://i.imgur.com/VTrW1N1.jpg
Paste it into the parenthesis.
5. Save with the button underneath the CSS edit box. The background image be changed.
How to remove pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to remove the side character renders, search for SIDE CHARACTERS or RENDER.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Save with the button underneath the CSS edit box. The pics should be transparent or blank now.
How to change colors of the list's boxes containing anime/manga.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find /* ANIME/MANGA CONTAINER SETTINGS */
3. Under there, look for background color settings. You can change the colors after color: here. You can use a single color word like purple or transparent, or RGBA color settings. RGBA colors like rgba(255, 0, 0, .5)
That's red with half opacity. Something like this can be generated here or Google "RGBA COLOR GENERATOR". http://www.hexcolortool.com
btw the section for hover is what you see when pointing the cursor to the container.
How to change the quote at the top.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find
/* BANNER QUOTE*/
3. The quote's text is in quotations below. Change it to what you want. Leaving it blank will leave no quote.
4. Save.
Line Style 5
* 6 Wallpapers (one for each category page)
* 6 Banners (one for each category page)
* Custom Quote on top of the banner
* Custom table and row hover color
* Big preview pic on row hover
How to change pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to change the main background or a banner background, find MAIN BACKGROUND or BANNER BACKGROUND.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Then upload the new background image you want for that part. Upload the picture to Imgur or a similar site and copy the direct link. It will look something like: http://i.imgur.com/VTrW1N1.jpg
Paste it into the parenthesis.
5. Save with the button underneath the CSS edit box. The background image be changed.
How to remove pics
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find the uppercase text for the part you want to change. For example, to remove the side character renders, search for SIDE CHARACTERS or RENDER.
3. Underneath that text, there should be some codes with a parenthesis following background-image or something similar. Delete what's in the parenthesis.
4. Save with the button underneath the CSS edit box. The pics should be transparent or blank now.
How to change colors of the list's boxes containing anime/manga.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find /* ANIME/MANGA CONTAINER SETTINGS */
3. Under there, look for background color settings. You can change the colors after color: here. You can use a single color word like purple or transparent, or RGBA color settings. RGBA colors like rgba(255, 0, 0, .5)
That's red with half opacity. Something like this can be generated here or Google "RGBA COLOR GENERATOR". http://www.hexcolortool.com
btw the section for hover is what you see when pointing the cursor to the container.
How to change the quote at the top.
1. After installing the layout, go to the CSS edit box where you pasted the code.
2. Near the top of the code, find
/* BANNER QUOTE*/
3. The quote's text is in quotations below. Change it to what you want. Leaving it blank will leave no quote.
4. Save.
One Piece Layout example from video
These might not be recently updated as the ones above!
Adding a render to the Line-Style layouts
Simply add this code to the bottom of the CSS. You can change the image the same as the banners and backgrounds. Height and width are the size.
/* Character render on the right list */
footer::after {
content: "";
display: block;
width: 20%;
height: 100%;
position: fixed;
bottom: 0px;
left: calc( 50% + 465px);
background: url(http://i.imgur.com/MO8goKt.png) no-repeat bottom left;
pointer-events: none;
z-index: 3; }
