New
Jul 14, 2012 7:42 PM
#1
I was bored and made this randomly. It's an extremely simple list template that you can use if you like sword art online! You can use this list for both your animelist and mangalist; it doesn't matter. On a side note if you are just starting CSS reading through the codes should teach you about the basics of CSS editing. Full view: http://i.imgur.com/3ibGu.jpg CSS Code: Copy and paste this into your CSS editor. /* //Sword Art Online list template by Eucliwood. //Feel free to use this! //All you need to do is copy and paste this into your css editor. */ /* // Self-explanatory */ BODY { background-image: url(http://i.imgur.com/ow96x.jpg), url(http://i.imgur.com/GzEv3.gif); background-attachment: fixed; background-repeat: no-repeat, repeat; background-position: bottom center; font-family: Arial, sans-serif !important; font-size: 12px; } /* // Determines the positioning of your list */ #list_surround { margin: 0 auto !important; right: 0px; left: 0px; width: 607px; border-style: inset; border-width: 5px; border-top:none; border-bottom:none; border-color: #000000; padding-top: 340px; background:url(http://i48.tinypic.com/2lsfk76.png) no-repeat; -moz-box-shadow: 0 0 4px 4px #444444; -webkit-box-shadow: 0 0 4px 4px #444444; -o-box-shadow: 0 0 4px 4px #444444; box-shadow: 0 0 4px 4px #444444; } /* // All links on your list */ a { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { color: ; border-width: ; border-style: ; border-color: ; padding: ; background-color: ; } /* // Alternating row color 2 */ .td2 { color: ; border-width: ; border-style: ; border-color: ; padding: ; background-color: ; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color: ; border-width: ; border-style: ; border-color: ; background-color: ; padding: ; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: ; border-color: ; border-style: ; color: ; padding: ; font-size: px; font-family: ; } /* Which 'status' up top is selected? */ .status_selected { border-style: none; background-color: #ffffff; text-decoration: underline; } .status_not_selected { background-color: #ffffff; border-style: none; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { background-color: #000000; } .header_title { color: #ffffff; text-align: center; font-size: 18px; font-weight: bold; } .category_totals { text-align: center; } #grand_totals { color: #ffffff; background-color: #000000; text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: normal; } /* FIX MENU BAR TO THE TOP */ #mal\_control\_strip { position: fixed !important; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { color: #ffffff; background-color: #000000; padding-bottom: 6px; padding-top: 6px; text-align: center; margin: 0 auto; width: px; } #copyright a, #copyright a:hover { color: #ffffff; } #copyright:after { content:'Sword Art Online theme template by Eucliwood.'; display: block; } Feedbacks are welcome! If I get lots of feedback might make more templates later ^^ |
EucliwoodJul 14, 2012 9:44 PM
Jul 14, 2012 8:38 PM
#2
Overall, I like. But the image of the banner does not fit with the design I think. Then, why you let codes that have no interest? : p Otherwise one last thing, the background image is too large (1.4MB). Instead of using a png I think it would be better to use jpg and lighten a little. Eucliwood said: Feedbacks are welcome! If I get lots of feedback might make more templates later ^^ :) |
Jul 14, 2012 8:52 PM
#3
The banner is supposed to be the choice of those who use the template (they can switch it to whatever they want), i just randomly stuck an image there haha. I used a png image because i wanted the middle to be empty but otherwise jpg works fine as well |
Jul 14, 2012 9:06 PM
#4
OK for the banner image ;) The background image is too large. Generally a bg image is near 300ko. @me But the user can change that :p |
Jul 14, 2012 9:09 PM
#5
yea I dont think making the middle plain white and having it transparent is making any difference lol, ima change it, ty for the feedback |
Jul 14, 2012 9:13 PM
#6
Very Well done~ Thanks, I like being able to see the code~ |
Where there is no imagination there is no horror. || Arthur Conan Doyle || Happy Halloween! |
Jul 14, 2012 9:15 PM
#7
Suzune-chan said: Very Well done~ Thanks, I like being able to see the code~ I edited the code based on the default MAL codes and each of them should have labels explaining what they are to ^^ should be pretty easy to understand what each code does but if you still have any questions feel free to ask |
Jul 14, 2012 9:35 PM
#8
I've a small error with the banner, it's not on top of the div. Only with my browser ? Tried on my mangaList. |
Jul 14, 2012 9:37 PM
#9
Eucliwood said: Thanks. I do not have time to work on it right now. However I will next week. If I stumble upon a problem, I might send you a message. Again I thank you~Suzune-chan said: Very Well done~ Thanks, I like being able to see the code~ I edited the code based on the default MAL codes and each of them should have labels explaining what they are to ^^ should be pretty easy to understand what each code does but if you still have any questions feel free to ask |
Where there is no imagination there is no horror. || Arthur Conan Doyle || Happy Halloween! |
Jul 14, 2012 9:45 PM
#10
Shinsae said: I've a small error with the banner, it's not on top of the div. Only with my browser ? Tried on my mangaList. Try again cause I have edited the code after you told me about the background issue. |
Jul 14, 2012 9:54 PM
#11
OK that works :) I tried now, you can use position:absolute; for the #mal\_control\_strip div, if you want it to scroll. [Gomen i look for only errors :s] |
Jul 14, 2012 10:16 PM
#12
Shinsae said: OK that works :) I tried now, you can use position:absolute; for the #mal_control_strip div, if you want it to scroll. [Gomen i look for only errors :s] ie ie im glad someone is looking for the errors so i can fix it ^^ i wanted the top bar to fixed so i left it like tht |
Jul 14, 2012 10:21 PM
#13
:) |
Jul 15, 2012 6:33 PM
#14
Thanks for linking this to me man, I'll defo go through this on a later date Looks really good too :) |
Jul 15, 2012 7:04 PM
#15
Kyrrie said: Thanks for linking this to me man, I'll defo go through this on a later date Looks really good too :) ^^ |
Aug 29, 2012 11:20 AM
#16
Hey, I did SAO-style layout and this is my first programmin in CSS so there can be a lot of errors. I hope that it does not infringe the rules. Writing code modeled on the guidelines, "Shishio-kun". Link to my list: http://myanimelist.net/animelist/mechatronik32 Image: http://scr.hu/0z2/ibrr3 Code: /* http://myanimelist.net/animelist/mechatronik32 Inspired by the "Shishio-kun" August 2012 version 1.0.2 */ @import url(http://fonts.googleapis.com/css?family=Nova+Square); /* Import fonts */ @import url("https://dl.dropbox.com/u/98878693/MyAnimeList/Sword%20Art%20Online/SwordArtOnline.css"); /* Import style */ body {} ------ Sorry for my English. I'm from Poland ^^ |
mechatronik32Aug 31, 2012 3:01 AM
Aug 29, 2012 5:03 PM
#18
Great style <3 |
"A half moon, it has a dark half and a bright half, just like me…", Yuno Gasai |
Aug 29, 2012 5:08 PM
#19
mechatronik32 said: Hey, I did SAO-style layout and this is my first programmin in CSS so there can be a lot of errors. I hope that it does not infringe the rules. Writing code modeled on the guidelines, "Shishio-kun". Link to my list: http://myanimelist.net/animelist/mechatronik32 Image: http://scr.hu/0z2/ibrr3 Code: /* http://myanimelist.net/animelist/mechatronik32 Inspired by the "Shishio-kun" (tutorial) August 2012 version 1.0.1 */ @import url(http://fonts.googleapis.com/css?family=Nova+Square); /* Import fonts */ @import url("https://dl.dropbox.com/u/98878693/MyAnimeList/Sword%20Art%20Online/SwordArtOnline.css"); /* Import style */ ------ Sorry for my English. I'm from Poland ^^ Great! But I think that your list weight too much or there is some problem - on different browsers and computers it loads ~4 s., which is very slow nowadays.. (ah, but I still remember times with 56K modems xD Technology sure moves fast, to this extent that I'm complain about smth like that...eh) Wpadnij do mnie pogadać, bo też zacząłem moją przygodę z css i listami w malu (anime list moje). Nie jest to takie perfekcyjne kodowanie jak Twoje, no ale :P |
Aug 30, 2012 2:40 AM
#20
Right size of images can slow down the loading of pages in my spare time so reduce their size. I installed other browsers and my page on IE looks scary, but the Mozil and Opera already better, but scaling images seen terrible. Not know why the other browsers are not load full menu? Currently I use Google Chrome. Thank you that you like it. I'll try to fix bugs. @MordercaMuminkow Your list load ~ 6 s. :P ------ Sorry for my English. I'm from Poland ^^ |
Aug 30, 2012 3:06 AM
#21
mechatronik32 said: Your list load ~ 6 s. :P I know, it's shameful, but the shoemaker's children are ill-shod like they're saying :P And good luck with IE...according to this http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx my page won't even start loading, haha. But doesn't matter, it's off topic in some way. |
Aug 30, 2012 3:34 AM
#22
@mechatronik32 Your list loads as fast as it loads (if it isn't cached, it takes about 5-6 seconds for me) because: 1. You import the css twice (this might be a bug - I've seen Shinsae resolved it by importing the css then putting an empty body {} style) 2. The images are hosted on dropbox too, which I don't think it's a good choice. Host them on a photo host (maybe photobucket) |
koleareAug 30, 2012 3:45 AM
Aug 30, 2012 4:03 AM
#23
I changed the size of the images. I use drop box because I can edit at any time. I've seen that imports it twice (already on the works) Thanks for your help :) |
Sep 5, 2012 9:08 AM
#24
mechatronik32 said: Hey, I did SAO-style layout and this is my first programmin in CSS so there can be a lot of errors. I hope that it does not infringe the rules. Writing code modeled on the guidelines, "Shishio-kun". Link to my list: http://myanimelist.net/animelist/mechatronik32 Image: http://scr.hu/0z2/ibrr3 Code: /* http://myanimelist.net/animelist/mechatronik32 Inspired by the "Shishio-kun" August 2012 version 1.0.2 */ @import url(http://fonts.googleapis.com/css?family=Nova+Square); /* Import fonts */ @import url("https://dl.dropbox.com/u/98878693/MyAnimeList/Sword%20Art%20Online/SwordArtOnline.css"); /* Import style */ body {} ------ Sorry for my English. I'm from Poland ^^ Looks nice, but for me personally it's a little too big and the words are hard too read. It's true that is a little slow but really nice design! |
Sep 20, 2012 12:03 PM
#26
nice list, might use it once I've watched some more Sword Art Online ^^ |
Sep 21, 2012 8:19 PM
#28
Eucliwood said: I was bored and made this randomly. It's an extremely simple list template that you can use if you like sword art online! You can use this list for both your animelist and mangalist; it doesn't matter. On a side note if you are just starting CSS reading through the codes should teach you about the basics of CSS editing. Full view: http://i.imgur.com/3ibGu.jpg CSS Code: Copy and paste this into your CSS editor. /* //Sword Art Online list template by Eucliwood. //Feel free to use this! //All you need to do is copy and paste this into your css editor. */ /* // Self-explanatory */ BODY { background-image: url(http://i.imgur.com/ow96x.jpg), url(http://i.imgur.com/GzEv3.gif); background-attachment: fixed; background-repeat: no-repeat, repeat; background-position: bottom center; font-family: Arial, sans-serif !important; font-size: 12px; } /* // Determines the positioning of your list */ #list_surround { margin: 0 auto !important; right: 0px; left: 0px; width: 607px; border-style: inset; border-width: 5px; border-top:none; border-bottom:none; border-color: #000000; padding-top: 340px; background:url(http://i48.tinypic.com/2lsfk76.png) no-repeat; -moz-box-shadow: 0 0 4px 4px #444444; -webkit-box-shadow: 0 0 4px 4px #444444; -o-box-shadow: 0 0 4px 4px #444444; box-shadow: 0 0 4px 4px #444444; } /* // All links on your list */ a { color: #000000; text-decoration: none; } a:visited { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } /* // Alternating row color 1 */ .td1 { color: ; border-width: ; border-style: ; border-color: ; padding: ; background-color: ; } /* // Alternating row color 2 */ .td2 { color: ; border-width: ; border-style: ; border-color: ; padding: ; background-color: ; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color: ; border-width: ; border-style: ; border-color: ; background-color: ; padding: ; } /* // headerLink represents the color of the links inside the table_header */ .table_headerLink { color: ; } .table_headerLink:Visited { color: ; } .table_headerLink:Hover { color: ; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width: ; border-color: ; border-style: ; color: ; padding: ; font-size: px; font-family: ; } /* Which 'status' up top is selected? */ .status_selected { border-style: none; background-color: #ffffff; text-decoration: underline; } .status_not_selected { background-color: #ffffff; border-style: none; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { background-color: #000000; } .header_title { color: #ffffff; text-align: center; font-size: 18px; font-weight: bold; } .category_totals { text-align: center; } #grand_totals { color: #ffffff; background-color: #000000; text-align: center; } /* header_al is the div surrounding "User's Anime List" at the top */ .header_al { font-weight: bold; font-size: 16px; } /* header_al_links is the div with your "Profile" and "MyAnimeList home" links */ .header_al_links { } /* controls what styles you can give to all the anime titles in your list */ .animetitle { font-weight: normal; } /* FIX MENU BAR TO THE TOP */ #mal_control_strip { position: fixed !important; } /* copyright contains the "Producted by Garrett Gyssler" text DO NOT REMOVE OR HIDE THIS DIV IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO */ #copyright { color: #ffffff; background-color: #000000; padding-bottom: 6px; padding-top: 6px; text-align: center; margin: 0 auto; width: px; } #copyright a, #copyright a:hover { color: #ffffff; } #copyright:after { content:'Sword Art Online theme template by Eucliwood.'; display: block; } Feedbacks are welcome! If I get lots of feedback might make more templates later ^^ Thanks for this :D Its an awesome template, Ill definitely use this and hopefully in the future Ill be able to figure out how to use CSS and make my own hahaha ^_^ |
Sep 22, 2012 12:52 AM
#29
pycenmy said: Awesome! Will use this one! Can I try replacing the header a different picture so it won't look totally the same to others who also use this. I hope you accept requests later on, it'll be very much appreciated for users who do not know how to make those templates. Feel free to replace anything in the list; it's meant to be a template ^-^ |
More topics from this board
» This my DrawingKirika_Madeleine - Aug 24 |
3 |
by Dumb
»»
4 hours ago |
|
» My Realism Oil Painting #NSFWsalsalsalsal - Aug 17 |
4 |
by salsalsalsal
»»
9 hours ago |
|
» favorite moviesO_Peres - Sep 20 |
3 |
by Little_Sheepling
»»
Sep 21, 10:45 AM |
|
» favorite TV series/showsO_Peres - Sep 20 |
0 |
by O_Peres
»»
Sep 20, 7:34 PM |
|
» favorite mangas/in manga styleO_Peres - Sep 20 |
0 |
by O_Peres
»»
Sep 20, 7:11 PM |