Forum Settings
Forums

[CSS- CLASSIC] Pre-Made CSS For Your Anime or Manga List! (Channel-style layout)

New
Reply Disabled for Non-Club Members
Pages (4) « First ... « 2 3 [4]
Apr 28, 2012 10:43 PM

Offline
Nov 2011
304
@ Shishio-kun

Something I found out today:
May 9, 2012 11:31 AM
Offline
Jun 2010
2
Shishio-kun,thank you so much for your help,i hope i didn't bother you ^^
Jul 10, 2012 4:00 PM
Trickster

Offline
Jun 2011
2271
What's the code to change the position of the buttons Watching, Plan To Watch, On-Hold, etc. to the top instead of on the left? If it's possible, I would prefer that.
Jul 13, 2012 11:38 PM

Online
Feb 2010
12805
Todd_Jensen said:
What's the code to change the position of the buttons Watching, Plan To Watch, On-Hold, etc. to the top instead of on the left? If it's possible, I would prefer that.


Not really made imo for that but I guess you could add to the buttons codes:

position: absolute;
left: 0px;
top: 0px;

And move them from there by adjusting the 0px amounts. Just an educated guess tho, you might need more (maybe someone else can chime in) and you can use relative or fixed in place of absolute for more options.
Jul 17, 2012 6:26 PM

Offline
Apr 2008
216
Hi! I'm currently using an edited version of this layout. However, I've run in some problems with the top banner image.

I'm using an image with some semi-transparent parts. When I choose to view "All Anime" on my list, the opacity of the banner becomes a lot more opaque. However, it is fine when I view the other sections (Currently Watching, Completed, etc.)

Some screenshots:

How it looks like for "All Anime":
http://puu.sh/Jrw7

How it looks like for the other sections:
http://puu.sh/Jrvi

Code:



Any help would much appreciated ^^


Jul 17, 2012 11:52 PM

Online
Feb 2010
12805
Ichigo-Sora said:
Hi! I'm currently using an edited version of this layout. However, I've run in some problems with the top banner image.

I'm using an image with some semi-transparent parts. When I choose to view "All Anime" on my list, the opacity of the banner becomes a lot more opaque. However, it is fine when I view the other sections (Currently Watching, Completed, etc.)

Some screenshots:

How it looks like for "All Anime":
http://puu.sh/Jrw7

How it looks like for the other sections:
http://puu.sh/Jrvi

Code:



Any help would much appreciated ^^


I am pretty sure its because when you have it on a single category, like Currently watching, the banner for CW is only seen once at the top of the page. But on All Anime all the category pages get their banner at the top in the same place. So they all end up behind each other and seem to increase the opacity of the front image. Hard to explain.. nice layout btw
Jul 18, 2012 10:53 AM

Offline
Apr 2008
216
Thanks! Is there anyway to prevent it from happening?


Jul 18, 2012 9:21 PM

Online
Feb 2010
12805
Ichigo-Sora said:
Thanks! Is there anyway to prevent it from happening?


Yeah, you can use another code for the banner besides the header. This way it will be the same on all pages. I would suggest #inline_content since you're not using it. First remove the banner from your old codes, then use this add on:

http://myanimelist.net/forum/?topicid=393581

Just use the one that goes behind the list (by default its the snow) and set that to contain your banner image instead of the snow- the background position will need to be centered top and set to no repeat. If its hard to get right you can post back here and I can adjust the settings.
Jul 19, 2012 5:41 AM
Offline
Mar 2012
1
And how to delete the banners and make list like that:



?
Jul 19, 2012 6:14 AM

Online
Feb 2010
12805
Fettycom said:
And how to delete the banners and make list like that:



?


See this tutorial on removing stuff easily:

http://myanimelist.net/forum/?topicid=464437&show=0#post1

Then use that display: none code on the LEFT SIDE BUTTONS in your custom CSS. Then increase the width of the #list_surround to your liking (found after OTHER CODES). You may also need to adjust the left amount to move it to the left, and the position of the BANNER.
Jul 19, 2012 9:17 PM

Offline
Apr 2008
216
Shishio-kun said:
Ichigo-Sora said:
Thanks! Is there anyway to prevent it from happening?


Yeah, you can use another code for the banner besides the header. This way it will be the same on all pages. I would suggest #inline_content since you're not using it. First remove the banner from your old codes, then use this add on:

http://myanimelist.net/forum/?topicid=393581

Just use the one that goes behind the list (by default its the snow) and set that to contain your banner image instead of the snow- the background position will need to be centered top and set to no repeat. If its hard to get right you can post back here and I can adjust the settings.


That did the trick! Thanks for all the help ^^


Aug 29, 2012 4:09 AM

Offline
May 2012
129
i think my picture for the banner is quite big, how can i make it the right size???
only a part of the picture shows up because of the big pixels, and i tried adjusting the width and height but the results are not the ones i want?? please help.
Aug 29, 2012 4:26 AM

Offline
Jan 2012
1578
moon_love said:
i think my picture for the banner is quite big, how can i make it the right size???
only a part of the picture shows up because of the big pixels, and i tried adjusting the width and height but the results are not the ones i want?? please help.


Try to put following line in the code:

Or simply resize your background in any graphic editor
Sep 11, 2012 5:23 PM
Offline
Feb 2012
6916
Thanks for the layout! ^^

Will probably mess around with CSS code more though...been awhile since I used it lol.
Changed pictures but idk about them still...
Sep 12, 2012 9:02 AM
Offline
Feb 2012
6916
Ok I ended up leaving it like this...first two images on both are a little animated for the text on it.

Anime List


Code:


Manga List


Code:
-Deactivated-Sep 12, 2012 9:09 AM
Sep 14, 2012 8:20 AM

Online
Feb 2010
12805
lolwutfool said:
Ok I ended up leaving it like this...first two images on both are a little animated for the text on it.

Anime List


Code:


Manga List


Code:


Very good, like the colors!
Jan 6, 2013 1:29 AM

Offline
Jun 2012
1
Hi there, I was wondering where I could change the background of the theme from a grey color to an image? I tried messing about with the CSS, but I wasn't successful. Please help!
- Louise ~ ^^
Jan 6, 2013 10:06 AM

Online
Feb 2010
12805
lettertothewind said:
Hi there, I was wondering where I could change the background of the theme from a grey color to an image? I tried messing about with the CSS, but I wasn't successful. Please help!


The very top line of code- it has an image link in parenthesis. You change it out with one of your own like I did here (see the part in bold at the top).





Make sure you save changes with the blue button at the bottom under the box and don't save it twice in a row or else it will revert back to the unchanged CSS.
Jan 10, 2013 10:39 PM

Online
Feb 2010
12805
What happened to the question about changing the bar color at the bottom lol?

Well, it is the copyright image which is at the bottom of the CSS. You can change the image there with the manga list version for a blue bottom bar. Otherwise, you'll have to recolor the image yourself in a graphics program.

here it is for easy downloading:
http://i34.tinypic.com/e1vup.png
Jan 31, 2013 2:08 PM
Offline
Apr 2012
3
Hey, I was wondering if i can make the background behind the lists transparent to make the background i put on easier to see?
Jan 31, 2013 3:02 PM

Online
Feb 2010
12805
jstrait17 said:
Hey, I was wondering if i can make the background behind the lists transparent to make the background i put on easier to see?


Make .list_surround's background transparent. Or use a translucent color, see tutorial on it here
myanimelist.net/forum/?topicid=440525
Jan 31, 2013 3:19 PM

Offline
Feb 2011
6109
Shishio-kun said:
jstrait17 said:
Hey, I was wondering if i can make the background behind the lists transparent to make the background i put on easier to see?


Make #list_surround's background transparent. Or use a translucent color, see tutorial on it here
myanimelist.net/forum/?topicid=440525


Fixed. :p
Jan 31, 2013 3:50 PM
Offline
Apr 2012
3
Shishio-kun said:
jstrait17 said:
Hey, I was wondering if i can make the background behind the lists transparent to make the background i put on easier to see?


Make .list_surround's background transparent. Or use a translucent color, see tutorial on it here
myanimelist.net/forum/?topicid=440525


thanks! appreciate the help.
Mar 6, 2013 6:20 PM
Offline
Jan 2012
1184
thanks for the CSS :3 i made the anime list with this template ^^

and the background list tutorial i made it too :)
Jun 1, 2013 3:26 AM

Offline
Oct 2012
2
I have a problem.
http://imgur.com/bipqY27,dXLm4Rs#0
Please help!
Jun 1, 2013 12:03 PM

Online
Feb 2010
12805
silenth said:
I have a problem.
http://imgur.com/bipqY27,dXLm4Rs#0
Please help!


You're using the wrong kinda links for your custom images, use direct link types as outlined in tutorials here on that kinda thing.

On the light text, go into the top of the code and find the * under LIST FONT. Replace it with #list_surround, #list_surround a. This should fix the text color.
Jan 24, 2014 9:38 PM

Offline
Apr 2008
125
I'm wondering how I would go about making it so that the line I'm hovering over becomes highlighted?
I like the compactness of this layout for my manga list, though with that compactness I'm having some issues with my eyes straying and losing track of which line I was looking at.
Leader of Whiteout Scans
Current project: ReLIFE
Jan 25, 2014 2:25 AM

Offline
Apr 2012
181
One simple way is by adding this code

tbody:hover .td1, tbody:hover .td2 {
background-color: #000;
opacity: 0.4;
}



#000 --> black
can be changed by whatever color you want

opacity: 0.4
looks better than a solid color, also can be changed between 0.0 and 1.0, where 0.0 means totally transparent and 1.0 means solid color.
al_exsJan 25, 2014 2:28 AM
Jan 25, 2014 6:09 AM

Offline
Apr 2008
125
al_exs said:
One simple way is by adding this code

tbody:hover .td1, tbody:hover .td2 {
background-color: #000;
opacity: 0.4;
}



#000 --> black
can be changed by whatever color you want

opacity: 0.4
looks better than a solid color, also can be changed between 0.0 and 1.0, where 0.0 means totally transparent and 1.0 means solid color.


Thanks a bunch! Exactly what I was looking for!
Leader of Whiteout Scans
Current project: ReLIFE
Aug 6, 2017 8:07 AM

Online
Feb 2010
12805
Fixed these back after Photobucket nonsense
Sep 20, 2017 6:57 PM

Offline
Nov 2012
127
I think some of the image links for the headers in the manga version are missing

Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.

Sep 21, 2017 6:33 AM

Online
Feb 2010
12805
devilsrider said:
I think some of the image links for the headers in the manga version are missing



OK I took some time to repair it and recreated them. You have to reinstall the manga list layout CSS
Sep 21, 2017 12:06 PM

Offline
Nov 2012
127
Shishio-kun said:
devilsrider said:
I think some of the image links for the headers in the manga version are missing



OK I took some time to repair it and recreated them. You have to reinstall the manga list layout CSS


Thank you!
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.

Dec 5, 2017 2:03 PM

Offline
Aug 2009
282
So sorry I've been quite inactive the last couple of months, years, whatever. Anyway, I just took some time to swap all of the Photobucket images and uploaded some new ones to Tinypic in order to repair my anime list. I'll fix the manga list soon, as well. Maybe I'll do a nicer looking text and images in Photoshop; I just did some fast editing with paint.net. I haven't been using CSS for years, so I just did some quick fixes here and there from what I remembered. Here it is for anyone still using this list layout:
RodnessDec 5, 2017 2:07 PM
Sep 29, 2019 4:04 PM

Offline
Nov 2012
127
tinypic is dead, and it seems like this layout is broken again :(
Signature removed. Please follow the signature rules, as defined in the Site & Forum Guidelines.

Sep 29, 2019 8:28 PM

Online
Feb 2010
12805
devilsrider said:
tinypic is dead, and it seems like this layout is broken again :(



To repair the layout, you have to upload the broken tinypic link to the Wayback Machine and then download one of the old copies of the image to your PC or laptop, the upload that to Imgur, and paste the new image link into your CSS and replace all the old Tinypic links this way.
https://archive.org/web/

I'm working on a video on how to do this now, so it should be shared later, and I might open a thread up where ppl can post their broken CSS to get repaired later
Reply Disabled for Non-Club Members
Pages (4) « First ... « 2 3 [4]

More topics from this board

» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )

Shishio-kun - Jul 21, 2017

388 by Shishio-kun »»
Oct 14, 1:27 PM

» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )

Shishio-kun - Apr 15, 2010

7925 by Kiara »»
Oct 13, 10:21 AM

Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )

Shishio-kun - Feb 16, 2023

64 by NightmareTala »»
Oct 5, 1:08 PM

Sticky: » [ SIGNATURES ~ PROFILES] All guides, generators, and templates

Shishio-kun - Feb 16, 2023

35 by iluvmozu »»
Oct 4, 11:41 PM

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

Valerio_Lyndon - Apr 19, 2018

1262 by Shishio-kun »»
Sep 22, 4:35 AM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login