New
Feb 24, 2013 4:24 PM
#751
Shishio-kun said: ...no you remove only the slashes and asterix so you the mal_miku_m style import takes effect on your list. From looking at your page this is the CSS you're trying to import according to your box on the manga list @import "https://dl-web.dropbox.com/get/Public/MAL_Miku_Style_Monsterguy.css?w=AABz3rPt7n2yzl4mIVS73lW400-Yq5Ji9WblcjA8L8NkuA";/**/ /*****************/ /* @import "https://dl.dropbox.com/s/du8lbf36y7nu8hf/MAL_Miku_Style_M.css";/**/ */ /*****************@import "https://dl-web.dropbox.com/get/Public/MAL_Miku_Style_Monsterguy.css?w=AABz3rPt7n2yzl4mIVS73lW400-Yq5Ji9WblcjA8L8NkuA";/**/ /*****************/ /* @import "https://dl.dropbox.com/s/du8lbf36y7nu8hf/MAL_Miku_Style_M.css";/**/ */ /*****************/ It makes a blank page when I install it on my own list. The same blank I see when I look at your manga list. When I remove the asterix and slashes as I said like so- @import "https://dl-web.dropbox.com/get/Public/MAL_Miku_Style_Monsterguy.css?w=AABz3rPt7n2yzl4mIVS73lW400-Yq5Ji9WblcjA8L8NkuA"; @import "https://dl.dropbox.com/s/du8lbf36y7nu8hf/MAL_Miku_Style_M.css"; @import "https://dl-web.dropbox.com/get/Public/MAL_Miku_Style_Monsterguy.css?w=AABz3rPt7n2yzl4mIVS73lW400-Yq5Ji9WblcjA8L8NkuA"; @import "https://dl.dropbox.com/s/du8lbf36y7nu8hf/MAL_Miku_Style_M.css"; With that setup, I get this. It makes this in the image below. This is the mal miku m style import showing thru as intended in your own css edit box. ![]() The top import from your dropbox isn't working cuz you're using the wrong kinda link. Use the public link. Log into dropbox and find it in the public folder like in the example below. ![]() Click on that and paste that into the import link as you're supposed to. I've emboldened what you're supposed to replace with your public link. You may have to enable public folders first as well if you haven't. https://www.dropbox.com/help/16/en @import "https://dl-web.dropbox.com/get/Public/MAL_Miku_Style_Monsterguy.css?w=AABz3rPt7n2yzl4mIVS73lW400-Yq5Ji9WblcjA8L8NkuA"; The import tutorial you're referring to is probably Veriti's. Its in the import tutorial, just go to Expert tutorials under Customize your list on the front page menu. Also put some kinda regular CSS code under your imports in the box. Otherwise it doubles, as you can see above. 11000moreofheavyusers.txt? :O |
Feb 24, 2013 4:35 PM
#752
dperolio said: 11000moreofheavyusers.txt? :O Oh lol, thats from experimenting with more CSS and the generators. I believe its #more CSS from multiple "heavy" lists with literally thousands of titles. I forgot what the exact purpose of it was. I think it was to cover people whose computers crashed when they tried to use the generators for their huge lists. It also might have been a speed test on covers. |
Feb 24, 2013 5:21 PM
#753
LOL, I created a Public map on my own and did not activate it, thnx for the links. Now with activation, the Public map has manually showed up and renamed my other map into "Public(old)" !!! Let me explain to you how I did things that I got that strange link: First still NOT activated map I opened, and I literally duble clicked the "___.css" file so that I got that stange link...:s You were right. At the time when you captured my code, I was experimenting indeed...hehehe Now you can go see my manga list also in chrome...:XD ![]() Once again thnx to the activation code/link for dropbox(https://www.dropbox.com/enable_public_folder) now everything works fine !!! PS: Oh, becouse I didn't know what code to write, I wrote after the >>@import ".css"<< a comment code >>;/**/<<, what dubled the code, but now at least it works in all browsers...;) |
MonsterguyFeb 24, 2013 5:34 PM
Feb 24, 2013 6:12 PM
#754
Looks really good, congratulations! |
Feb 25, 2013 4:18 AM
#755
Hey Shishio-kun, can you please explain me how to make this anime-cover-effect.![]() |
Feb 25, 2013 3:21 PM
#756
Hey guys :) just noticed something that i would like to fix but dont know how to do so. On my list as i select a row the row extends and you might see a pic and my comment to it. As you distance your cursor from the row the row minimizes. Can I somehow avoid this? say, I selected a row and as I distance from the row the row keeps extended? Cause if i want to edit my tags and i accidentally move the mouse the row minimizes. So basically i wanted to have the row keep in the extended mode even when I am on my let's say second screen ( often check something on the other screen so i want to keep it extended, problem just got one mouse xD). As you move to the next row the previous row should minimize, so just one row a time in that extended mode. I think it should be somehow possible, still i want to avoid any further laggs by keeping the extend mode of the row. Offtopic: dunno where I read it, also didnt check the previous posts yet, but is there going to be a Anime Cover preview Tutorial? If yes, I also would really appreciate it, since it's often used and requested. I mean just like there Monsterguy said: ![]() having the tags underneath the preview or edit it further as in the already available tuts in the club. |
Feb 25, 2013 4:04 PM
#757
CrAziiJaN21 said: Hey Shishio-kun, can you please explain me how to make this anime-cover-effect. ![]() This trick/effect can only be seen in Mozilla firefox, but as far as I tried other browsers like IE or chrome don't show the same... Still, I also don't know how exactly this trick is made, good question from you there !!! SylakentH_ said: Hey guys :) just noticed something that i would like to fix but dont know how to do so. On my list as i select a row the row extends and you might see a pic and my comment to it. As you distance your cursor from the row the row minimizes. Can I somehow avoid this? say, I selected a row and as I distance from the row the row keeps extended? Cause if i want to edit my tags and i accidentally move the mouse the row minimizes. So basically i wanted to have the row keep in the extended mode even when I am on my let's say second screen ( often check something on the other screen so i want to keep it extended, problem just got one mouse xD). As you move to the next row the previous row should minimize, so just one row a time in that extended mode. I think it should be somehow possible, still i want to avoid any further laggs by keeping the extend mode of the row. Sorry, but part of the code for my preview in manga list that you quoted from me, was stolen from you. So I know what's bothering you. But I have another option, and that is, that I click "Edit" from the whole manga or anime. After that a new window opens itself, and there I can do with my mause whatever I want...hehehe SylakentH_ said: Offtopic: dunno where I read it, also didnt check the previous posts yet, but is there going to be a Anime Cover preview Tutorial? If yes, I also would really appreciate it, since it's often used and requested. I mean just like there Monsterguy said: ![]() having the tags underneath the preview or edit it further as in the already available tuts in the club. Yeah, it would be awesome, just look how good it becomes: ![]() ![]() ![]() ![]() Where ever, or how ever those covers are used, it just looks so nice to me, so I decided myself to create something like a Preview, but the problem are tags, and their positioning with at the same time the option of editing their content !!! PS: Oh if many are interested, I can also share/donate this "Preview" codes, but I don't know where to post them, and the whole layout was not created by me to begin with. So if I'm not mistaken this does not belong into donated codes, or does it ??? |
MonsterguyFeb 25, 2013 8:45 PM
Feb 25, 2013 6:21 PM
#758
clone4 said: Monsterguy said: clone4 said: Ok, what do I do to my css to get rid of the rated section on my list, and also what is the code to get the covers to show up beside the list, when you hover over the titles, instead of on the list? Thank you for your time. Here, I found this CSS code to be usefull to me, but I don't know about you... 1. At the top of CSS code just copy and paste the following(only one !!!): - for manga list: /*********************/ /* Manga Cover Image */ /*********************/ @import "http://dl.dropbox.com/u/49469857/MAL/premade/manga.css"; - for anime list: /*********************/ /* Anime Cover Image */ /*********************/ @import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css"; 2.At the bottom just copy and paste this: /* Cover Image */ :hover .hide { display:block !important; position:fixed; top:180px; left:300px; width:225px; height:350px; background-color: rgba(0, 0, 0, 0.6); border: 30px solid transparent; -moz-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -o-border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; border-image:url(https://dl.dropbox.com/s/h35wdxbaxjtvnal/border.png) 30 30 round; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; background-repeat: no-repeat; background-size: contain; } /* Preview text */ :hover .hide:before { content:"Preview a "; white-space: pre; display:block; font-weight: bold; padding: 3px; font-size: 18px; margin-top:-30px; background-color: blue } If you want to move or change the visual look (like moving the cover image to some other place, or something else) just change the parameters above(in the code), as you desire. I don't have much knowladge from CSS coding, but still I hope this helped, why codes I'm using are written very clearly, and all my respect goes to their designers... ;) I'm sorry that code isn't working, it shows the same preview for everyone and makes my list really slow, maybe there's something wrong with the rest of my code that interferes with it. Ups, my mistake, why there is no "+" in the code where it had to be !!! I'm really sorry, maybe it got removed while I copy-pasted things... Here, replace the previous two columns of CSS with this: /* Cover Image */ :hover+.hide { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-clip: padding-box !important; background-color: transparent; background-repeat: no-repeat; background-size: contain; border-color: transparent; border-style: solid; border-width: 11px 2px 11px 11px; display: block !important; height: 327px; left: 300px; position: fixed; top: 180px; width: 231px; } /* Preview text */ :hover+.hide:before { background-color: transparent; content: "Preview"; text-align: center !important; display: block; font-size: 29px; font-weight: lighter; margin-top: -47px; padding: 3px; white-space: pre; color: firebrick; font-family: nosifer; } I tested it myself and it should work on your list as well !!! Look how it looks like now: ![]() |
MonsterguyFeb 25, 2013 8:11 PM
Feb 26, 2013 6:49 AM
#759
Thank you, Monsterguy. It isnt the answer for my questions but fine too. :) But if i wanne have the cover on the right side, what i have to do? Change in the code left: xxx px to right: xxx px? |
CrAziiJaN21Feb 26, 2013 7:08 AM
Feb 26, 2013 12:50 PM
#760
CrAziiJaN21 said: Thank you, Monsterguy. It isnt the answer for my questions but fine too. :) But if i wanne have the cover on the right side, what i have to do? Change in the code left: xxx px to right: xxx px? If you leave as it is: left: XXX px Than this will mean you start on the border of your left side of the screen. So this means more XXX px, more to the right (here you need to write big numbers to move it from one side of the screen to the other, so try at least "a few hundred px". But if you change it to the: right: XXX px Than I believe you will start on the border of your right side of the screen, and more XXX px would mean more to the left. ADVICE: here make sure not to write negative numbers of "XXX px", why in that case DVD covers will not be seen on your screen !!! NOTE: similar goes for values "top" and "bottom" as well, so you can move the cover where ever you want on the screen, but make sure to use only 1 from the following so "top" or "bottom", and only 1 from the following as well so only "left" or only"right", understood ??? |
MonsterguyFeb 26, 2013 12:54 PM
Feb 26, 2013 1:18 PM
#761
Monsterguy said: CrAziiJaN21 said: Hey Shishio-kun, can you please explain me how to make this anime-cover-effect. ![]() This trick/effect can only be seen in Mozilla firefox, but as far as I tried other browsers like IE or chrome don't show the same... Still, I also don't know how exactly this trick is made, good question from you there !!! SylakentH_ said: Hey guys :) just noticed something that i would like to fix but dont know how to do so. On my list as i select a row the row extends and you might see a pic and my comment to it. As you distance your cursor from the row the row minimizes. Can I somehow avoid this? say, I selected a row and as I distance from the row the row keeps extended? Cause if i want to edit my tags and i accidentally move the mouse the row minimizes. So basically i wanted to have the row keep in the extended mode even when I am on my let's say second screen ( often check something on the other screen so i want to keep it extended, problem just got one mouse xD). As you move to the next row the previous row should minimize, so just one row a time in that extended mode. I think it should be somehow possible, still i want to avoid any further laggs by keeping the extend mode of the row. Sorry, but part of the code for my preview in manga list that you quoted from me, was stolen from you. So I know what's bothering you. But I have another option, and that is, that I click "Edit" from the whole manga or anime. After that a new window opens itself, and there I can do with my mause whatever I want...hehehe SylakentH_ said: Offtopic: dunno where I read it, also didnt check the previous posts yet, but is there going to be a Anime Cover preview Tutorial? If yes, I also would really appreciate it, since it's often used and requested. I mean just like there Monsterguy said: ![]() having the tags underneath the preview or edit it further as in the already available tuts in the club. Yeah, it would be awesome, just look how good it becomes: ![]() ![]() ![]() ![]() Where ever, or how ever those covers are used, it just looks so nice to me, so I decided myself to create something like a Preview, but the problem are tags, and their positioning with at the same time the option of editing their content !!! PS: Oh if many are interested, I can also share/donate this "Preview" codes, but I don't know where to post them, and the whole layout was not created by me to begin with. So if I'm not mistaken this does not belong into donated codes, or does it ??? haha ok thats also an option, well i'll go with editing the anime simply xD and yeah there are so many different kinds of cover previews still i would really appreciate it if there were some kind of special tuts for these btw i also would like to have these tag cover codes you've used :D |
Feb 26, 2013 1:49 PM
#762
Monsterguy said: CrAziiJaN21 said: Thank you, Monsterguy. It isnt the answer for my questions but fine too. :) But if i wanne have the cover on the right side, what i have to do? Change in the code left: xxx px to right: xxx px? If you leave as it is: left: XXX px Than this will mean you start on the border of your left side of the screen. So this means more XXX px, more to the right (here you need to write big numbers to move it from one side of the screen to the other, so try at least "a few hundred px". But if you change it to the: right: XXX px Than I believe you will start on the border of your right side of the screen, and more XXX px would mean more to the left. ADVICE: here make sure not to write negative numbers of "XXX px", why in that case DVD covers will not be seen on your screen !!! NOTE: similar goes for values "top" and "bottom" as well, so you can move the cover where ever you want on the screen, but make sure to use only 1 from the following so "top" or "bottom", and only 1 from the following as well so only "left" or only"right", understood ??? I think i understand it, thank you for your explanation. :) |
Feb 27, 2013 3:42 AM
#763
http://myanimelist.net/forum/?topicid=440525 the code I took from one of the tutorial in the link above seems to not working probably it's this one: /* LIST BACKGROUND Change the list background image with this code, by putting a new image link in the parenthesis. You can change scroll to fixed to keep the image still as you scroll down the page. */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: url("http://img696.imageshack.us/img696/6039/hellgirl.jpg") repeat fixed left top transparent !important; } the image link above is dead, change it to a different one to see the result. It gets quite messy. Here's the link I provide. http://i537.photobucket.com/albums/ff335/VforVendetta19031992/Konachancom-124685sample-1.jpg?t=1343872587 |
Feb 27, 2013 7:37 AM
#764
Feb 27, 2013 10:01 AM
#765
clone4 said: quick question, on my animelist when I hover over a links a black box appears around it, and I would like to make it transparent around the links,how can I do this? .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-color: transparent; border-width: 0; padding: 2px; } That should do it, hopefully. |
Feb 27, 2013 10:05 AM
#766
I tried to make my animelist work in Chrome but it still looks rather chaotic. I don't want to change the codes any more though because I think it will affect the look in Firefox. My renders aren't even shown in Chrome although I moved them into the header classes. Would it be possible to make my list look good in both Firefox and Chrome? |
Feb 27, 2013 10:21 AM
#767
Lirina said: clone4 said: quick question, on my animelist when I hover over a links a black box appears around it, and I would like to make it transparent around the links,how can I do this? .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-color: transparent; border-width: 0; padding: 2px; } That should do it, hopefully. Thank you got the transparency part working, but it's still remove the grey lines on my list every time I hover over the links do to know how I can fix that? |
Feb 27, 2013 11:46 AM
#768
Lirina said: I tried to make my animelist work in Chrome but it still looks rather chaotic. I don't want to change the codes any more though because I think it will affect the look in Firefox. My renders aren't even shown in Chrome although I moved them into the header classes. Would it be possible to make my list look good in both Firefox and Chrome? Thankfully a hack will let you target Chrome only. http://myanimelist.net/forum/?topicid=397909 btw Chrome has a Firebug Lite but last I checked its useless compared to Firefox Firebug. You're better off with Chrome's default inspector. |
Feb 27, 2013 12:43 PM
#769
clone4 said: Lirina said: clone4 said: quick question, on my animelist when I hover over a links a black box appears around it, and I would like to make it transparent around the links,how can I do this? .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-color: transparent; border-width: 0; padding: 2px; } That should do it, hopefully. Thank you got the transparency part working, but it's still remove the grey lines on my list every time I hover over the links do to know how I can fix that? Find .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-color: transparent; border-width: 0; padding: 0; } remove border-width: 0; |
Feb 27, 2013 12:50 PM
#770
Takana_no_Hana said: http://myanimelist.net/forum/?topicid=440525 the code I took from one of the tutorial in the link above seems to not working probably it's this one: /* LIST BACKGROUND Change the list background image with this code, by putting a new image link in the parenthesis. You can change scroll to fixed to keep the image still as you scroll down the page. */ .category_totals, .td1, .td2, #grand_totals, #copyright { background: url("http://img696.imageshack.us/img696/6039/hellgirl.jpg") repeat fixed left top transparent !important; } the image link above is dead, change it to a different one to see the result. It gets quite messy. Here's the link I provide. http://i537.photobucket.com/albums/ff335/VforVendetta19031992/Konachancom-124685sample-1.jpg?t=1343872587 I guess we can't use that trick anymore due to browser changes so I've deleted that section of the tutorial until a way can be found. The only thing I can think of atm to prevent the glitching background image is something like table but this targets headers too and isn't a solution just anyone including you can use .. I'll try to look into finding a solution in the future but I'm pretty swamped with other things so hopefully someone else might find an answer for you sooner. |
Feb 27, 2013 5:47 PM
#771
Shishio-kun said: clone4 said: Lirina said: clone4 said: quick question, on my animelist when I hover over a links a black box appears around it, and I would like to make it transparent around the links,how can I do this? .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-color: transparent; border-width: 0; padding: 2px; } That should do it, hopefully. Thank you got the transparency part working, but it's still remove the grey lines on my list every time I hover over the links do to know how I can fix that? Find .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-color: transparent; border-width: 0; padding: 0; } remove border-width: 0; Thank you |
Feb 27, 2013 7:38 PM
#772
SylakentH_ said: haha ok thats also an option, well i'll go with editing the anime simply xD and yeah there are so many different kinds of cover previews still i would really appreciate it if there were some kind of special tuts for these btw i also would like to have these tag cover codes you've used :D Well yeah, you would really need a turitorial for that...:XD All those codes are so complicated, anyone would almost certanly need to redeisign your whole list layout there. What is, at the end quite a lot of work, but not impossibile !!! PS: Though you can always look at the codes I'm using, but simply copy-pasting a whole sections does not always work. I had expirience lately that the list has instead of better gone worse..."fail-big-time" |
MonsterguyFeb 27, 2013 7:47 PM
Mar 1, 2013 6:32 AM
#773
I kind of solved all my problems on my manga list, but why must configuring comments "directly" be so hard on my layout ??? I see it much more useful to just change them with the "Edit" that is next to "More". Than a new window open's where you can configure many things, and among them "Tags" that are later shown as "Comments (usually empty):" on my layout !!! Still is there a way to move buttons "Cancel" and "Save" under Tags/Comments directly, when you edit Tags/Comments ??? |
MonsterguyMar 4, 2013 4:44 AM
Mar 4, 2013 10:20 AM
#774
Just wondering when you guys code, do you just type the CSS in Microsoft Word and then applying it to your list or is there a specific program that you use to help you code? Also, when you first began coding how did you know where to start assuming that you didn't look at the Beignner's Guide? How did you come up with such intricate design? x-x I've seen sites other than MAL that uses CSS such as Gaia and I always wonder how people just start coding in a matter of seconds. I don't really understand how people just do that when there is no CSS code template or anything. If anyone can enlighten me, then please do because right now I feel like you need to be an expert to be able to start coding. |
Mar 4, 2013 12:28 PM
#775
Monsterguy said: I kind of solved all my problems on my manga list, but why must configuring comments "directly" be so hard on my layout ??? I see it much more useful to just change them with the "Edit" that is next to "More". Than a new window open's where you can configure many things, and among them "Tags" that are later shown as "Comments (usually empty):" on my layout !!! Still is there a way to move buttons "Cancel" and "Save" under Tags/Comments directly, when you edit Tags/Comments ??? You can manipulate the tag edit field with this code: input.inputtext, textarea.textarea, textarea.inputtext { } There you can enter height and width and this also moves the Cancel/Save button. Well, probably someone comes up with a better solution. |
Mar 4, 2013 12:50 PM
#776
Meira said: Just wondering when you guys code, do you just type the CSS in Microsoft Word and then applying it to your list or is there a specific program that you use to help you code? Also, when you first began coding how did you know where to start assuming that you didn't look at the Beignner's Guide? How did you come up with such intricate design? x-x I've seen sites other than MAL that uses CSS such as Gaia and I always wonder how people just start coding in a matter of seconds. I don't really understand how people just do that when there is no CSS code template or anything. If anyone can enlighten me, then please do because right now I feel like you need to be an expert to be able to start coding. I personally would never start learning CSS on MAL. You're completely limited by their HTML and if you want a heavily customized list, you're forced to manipulate things you wouldn't normally want to do in CSS. Also, MAL uses almost no classes and is all table-based (which you'll pretty rarely use in HTML nowadays--- it was used for layout structuring a decade ago, but no longer). So you have to really know your selectors and others things that can be and are very useful in CSS, but you won't necessarily use them that often. Really you would just be making it really hard on yourself to start learning CSS here, imo. I would start by learning HTML, then CSS. Preferably from a site like http://www.w3schools.com; that's how I started out anyway. If you don't really care about learning CSS and just want to customize your list a bit, I'm sure there are enough tutorials in this club to help you out, and if not, you can always ask for more specific help here. As for a text editor, I recommend http://www.sublimetext.com/2 though I really love plain old Notepad as well (I'm probably one of the last people in the world that still uses it for coding, but I really like minimalism of it). Definitely don't use a WYSIWYG editor like Microsoft Word. |
dperolioMar 4, 2013 12:53 PM
Mar 5, 2013 6:14 AM
#777
Lirina said: You can manipulate the tag edit field with this code: input.inputtext, textarea.textarea, textarea.inputtext { } There you can enter height and width and this also moves the Cancel/Save button. Well, probably someone comes up with a better solution. Woooooah !!! This is amazing. thank you very, very much. I can enlarge the window so much now, that my mouse can "almost" move freely at screen, after giving/inserting fixed position command that is. Once again thanx !!! PS: spelling mistakes at first, sorry |
MonsterguyMar 6, 2013 7:04 AM
Mar 5, 2013 2:35 PM
#778
Meira said: Just wondering when you guys code, do you just type the CSS in Microsoft Word and then applying it to your list or is there a specific program that you use to help you code? Typing into Word would be incredibly tedious. I use Firebug to code extremely fast, it gives you previews and is an inspecting tool which you can look at and customize codes by just cycling through all the possible selectors and properties ("background-color" for example) and values (like "blue") and putting in your own custom settings and amounts (like "50px" wide). You can copy and paste from it or type your codes into it if you want as well. Similar tools are in other browsers. Meira said: Also, when you first began coding how did you know where to start assuming that you didn't look at the Beignner's Guide? How did you come up with such intricate design? x-x On the first thing, ppl either start by readjusting other people's codes for their tastes (like simply changing background images) or implement their own ideas (like adding a red border with a CSS ccode). On the second thing, you just need creativity and a vision, then know-how to implement it with codes, this requires knowledge of CSS... you can also make a planned layout in Photoshop or similar tool then adjust whatever HTML layout you are using to look like it. Meira said: I've seen sites other than MAL that uses CSS such as Gaia and I always wonder how people just start coding in a matter of seconds. I don't really understand how people just do that when there is no CSS code template or anything. If anyone can enlighten me, then please do because right now I feel like you need to be an expert to be able to start coding. The way they do it in a matter of minutes: when you know CSS codes by heart like "background-color:red", height/width codes, z-index etc then you can look at any website and think of ways to adjust it. For example I can look at Youtube and say "Background-color: black; would be better on the main background then the default white background." Using Firebug I can easily find the parts that I would need to add the code to. Don't need to be an expert, just need to have a creative idea and know what codes to do with it. You can learn many codes from this group using my tutorials and premade lists then just adjust your list. You can also learn Firebug. btw my tutorials are made for making CSS simple on MAL, not really teaching CSS like a class. However the codes, techniques, and some of the tricks can be carried over to other sites. Many sites have "body" selector for example and same height and width codes work on theirs usually. However MAL is weirdly designed as said and imo sorta outdated, also on other sites you'll encounter new things never seen here like flash perhaps. Becoming a master of it, you'd need a class, online course, or to make your own free site and use that W3schools site which covers web coding in great detail. Also CSS only covers design aspects, there is other kinds of coding like Javascript for other web page functions. You also do want to learn HTML which CSS is actually made to customize. |
Shishio-kunMar 5, 2013 2:40 PM
Mar 6, 2013 4:32 PM
#779
Um how to crop the images i want to make? |
Mar 6, 2013 4:45 PM
#780
GoldenBRS said: Um how to crop the images i want to make? Already a topic "How to resize and crop images" on it (using free programs): http://myanimelist.net/forum/?topicid=419631 All you need is a graphics design tool, even Microsoft Paint can crop and resize images as shown in the topic above. Usually its under resize/crop etc. I crop an image in Gimp in my video at this part: http://youtu.be/rBR9t6AKyCE?t=4m35s I also go over resizing with Gimp in that video. |
Mar 7, 2013 3:42 PM
#781
Help! I watched the video(which was a huge help) but as far as attaching links to my buttons, I am still having issues. I am not trying to link my list or anything like that, but another page all together. Any help would be appreciated. |
"What color do you want to be?" -Shiina Mashiro |
Mar 7, 2013 3:44 PM
#782
mora404 said: Help! I watched the video(which was a huge help) but as far as attaching links to my buttons, I am still having issues. I am not trying to link my list or anything like that, but another page all together. Any help would be appreciated. As I replied on the front page, thats not really enough info for me to give you any specific answer, but you just put the website links after the equal sign the same way you put MAL links after them as seen in the video. You can post the webpages you're linking too and I might be able to simply add them for you this one time. |
Mar 7, 2013 3:55 PM
#783
Shishio-kun said: mora404 said: Help! I watched the video(which was a huge help) but as far as attaching links to my buttons, I am still having issues. I am not trying to link my list or anything like that, but another page all together. Any help would be appreciated. As I replied on the front page, thats not really enough info for me to give you any specific answer, but you just put the website links after the equal sign the same way you put MAL links after them as seen in the video. You can post the webpages you're linking too and I might be able to simply add them for you this one time. Sorry, I'm not very computer savvy. I made up two pages on photbucket that I want to link to the two buttons I made on my profile. When I followed your directions it does not create a link but makes it so I can the see the code in the picture. On photobucket it lists direct link, html code, and img code. Maybe I am using the wrong link code? |
mora404Mar 7, 2013 4:01 PM
"What color do you want to be?" -Shiina Mashiro |
Mar 7, 2013 4:32 PM
#784
Mar 7, 2013 4:46 PM
#785
Ok I tried to follow what you said and the code is now listed through my profile. I tried to copy the profile here but it didn't work. If you can take a look maybe you can see what Im doing wrong? |
"What color do you want to be?" -Shiina Mashiro |
Mar 7, 2013 5:30 PM
#786
Mar 7, 2013 5:42 PM
#787
Yeah it works. :) However, now I find the pages I made are really small. Any easy way to fix it? |
"What color do you want to be?" -Shiina Mashiro |
Mar 7, 2013 5:50 PM
#788
mora404 said: Yeah it works. :) However, now I find the pages I made are really small. Any easy way to fix it? Its the fault of Photobucket probably- they might have resized it when its uploaded. When you upload them try to find the option for resizing them and leave it at one you like (unchanged preferably). The option is there when you upload but might be hard to find the new Photobucket is confusing compared to the old one imo. |
Mar 7, 2013 6:28 PM
#789
Ok, one last question and I promise not to bother you anymore. If you look at my profile and click on who, me? it brings you straight to photobucket but if you click on my art it brings you to the page I made. Why do you think they are different? |
"What color do you want to be?" -Shiina Mashiro |
Mar 9, 2013 7:29 AM
#790
I just noticed that in my list,when I click the "More" button the info won't show up like it's supposed to. Here's my list : http://myanimelist.net/animelist/Xyphos_ Should I just ignore it since it's no big deal ? or Is there something I can do.... to fix it. I did remove all the the embeded CSS in the base layout and that fixed it. EDIT : No need to answer I just removed the more button as a solution since I don't want to do much work. |
Xyphos_Mar 11, 2013 2:59 AM
Mar 9, 2013 1:17 PM
#791
Xyphos_ said: I just noticed that in my list,when I click the "More" button the info won't show up like it's supposed to. Here's my list : http://myanimelist.net/animelist/Xyphos_ Should I just ignore it since it's no big deal ? or Is there something I can do.... to fix it. I did remove all the the embeded CSS in the base layout and that fixed it. umm, probably the first reason in your case would be, because you are using >>table:hover+.hide{<< in your file >>1.css<< where you are calling for DVD covers, but .hide is used for function "More" as well !!! I'm using >>#list_surround table:nth-of-type(n+4) tbody:hover .animetitle:after { <<, along with >>@import url(http://dl.dropbox.com/u/78192465/MyAnimeList/Kore%20wa%20Zombie%20Desuka/Covers.css);<<, to call for DVD covers, and like that "More" function works. Although, along with that I also use additional codes at the end of my "Main.css" file (as in your case the file would be called): /******************************************************/ /* "More", that is after the Title and after "Edit" */ /* ---http://myanimelist.net/forum/?topicid=551625--- */ /******************************************************/ .borderRBL { height: 412px; } .borderRBL:hover { height: 412px; } .hide{ background: orange; } object[classid*=":D27CDB6E-AE6D-11cf-96B8-444553540000"], object[codebase*="swflash.cab"], object[data*=".swf"], object[type="application/x-shockwave-flash"], object[src*=".swf"], embed[type="application/x-shockwave-flash"], embed[src*=".swf"], embed[allowaccess], embed[flashvars], embed[wmode] { height: 100% !important; width: 100% !important; } object[classid*=":D27CDB6E-AE6D-11cf-96B8-444553540000"]:hover, object[codebase*="swflash.cab"]:hover, object[data*=".swf"]:hover, object[type="application/x-shockwave-flash"]:hover, object[src*=".swf"]:hover, embed[type="application/x-shockwave-flash"]:hover, embed[src*=".swf"]:hover, embed[allowaccess]:hover, embed[flashvars]:hover, embed[wmode]:hover { height: 100%; width: 100%; } This allows me to even watch youtube video's, very efficiently...hehehe On the other hand I'm not so sure, why the "More" function could also show you DVD covers for background... You might need an expert's opinion on this (I'm a noob with CSS codes) !!! _ _ _ _ _ _ _ _ BTW, the problem I'm facing, on my manga list, is that only one function works on my layout, so either "MENU" (where I'm using newly created icon "DISPLAY"), or only function "More" !!! Why is that so ??? For "MENU" / "DISPLAY" I'm using those codes that interfere with function "More": /**********************/ /*MENU / DISPLAY ICON */ /**********************/ div > table:first-of-type { background: url("https://dl.dropbox.com/u/144008148/List_Manga/1/Display%20in%20menu/Display2_not_selected.png") no-repeat scroll 100% 0 transparent; display: block; height: 26px !important; overflow: hidden; padding-top: 26px !important; position: fixed; right: 0px; table-layout: fixed; text-align: center; top: 40px; width: 111px !important; background-size:100% 100%; z-index: 6; -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } /*****************/ /*MENU / DISPLAY ICON HOVER*/ /*****************/ div > table:first-of-type:hover { background: url("https://dl.dropbox.com/u/144008148/List_Manga/1/Display%20in%20menu/Display2_selected.png") no-repeat scroll 100% 0 transparent !important; height: auto !important; width: auto !important; } div > table:first-of-type tbody { height: 32px !important; overflow: hidden; } div > table:first-of-type tr { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6); border-radius: 20px 0px 0px 20px; display: block; padding: 8px 0 4px; } div > table:first-of-type td { background: none repeat scroll 0 0 rgba(255, 255, 255, 0); display: block; width: 100%; } div > table:first-of-type a { background-color: rgba(64, 60, 90, 0.6); border-radius: 0px 20px 0px 20px; color: #FFFFFF; display: block; font: 13px/17px 'Arial',sans-serif; margin: 0 12px 4px; padding: 3px 16px; text-decoration: none; } div > table:first-of-type a:hover { background-color: red; color: white; } @media screen and (-webkit-min-device-pixel-ratio:0){ div > table:first-of-type{ height: 0px !important; } HELP PLEASE !!! PS: spelling mistakes at first, sorry |
MonsterguyMar 9, 2013 2:31 PM
Mar 10, 2013 7:29 AM
#792
Ok for those that don't understand what I'm facing, look at my problem directly. First I load the page and everything would be normal with "DISPLAY" function: ![]() Than, I click on More: ![]() And at the same time I look at "DISPLAY" function where this appears: ![]() (on a side note I have youtube video to show itself in comments, yes) Let me also tell you that I have noticed also the fact that if you click on the same "More" function as you have clicked before, than DISPLAY will become normal again: ![]() ![]() _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ And this is how I want it at the end, but with "DISPLAY" (!!!) : ![]() What means to move "Currently Reading, ... ,All manga", but leave "More" function alone in the table: ![]() _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ Big progress, why now I'm able to move "Currently Reading, ... ,All manga" as I want with those codes: /* RIGHT SIDE BUTTONS */ #list_surround .status_selected, #list_surround .status_not_selected { background-color:red; display:block; height:18px; right:0px; padding:0px; position:fixed; top:60px; width:120px; /* Rounded Edges */ border:1px solid transparent; border-radius: 3px; -webkit-background-clip: padding-box !important; background-clip: padding-box !important; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { top:80px; } #list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected { top:100px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { top:120px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { top:140px; } #list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected { top:160px; } If only I know how to transform it into this form: #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks, #mal_cs_powered { box-sizing: border-box; -moz-box-sizing: border-box; -moz-transition: all 0.4s ease 0s; -webkit-transition: all 0.4s ease 0s; -o-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; background: none no-repeat scroll 100% 0 transparent; border: 0 none; height: 0 !important; overflow: hidden; padding: 32px 0 0 !important; position: fixed; right: 4px; text-align: center; top: 4px; z-index: 10; width: 150px !important; } #mal_cs_listinfo:hover, #mal_cs_links:hover, #mal_cs_otherlinks:hover, #mal_cs_powered:hover { height: 200px !important; padding-top: 32px !important; } #mal_cs_listinfo div, #mal_cs_links div, #mal_cs_otherlinks div, #mal_cs_powered div, #mal_cs_powered dd { -moz-transition: opacity 0.4s ease-in-out 0s; -webkit-transition: opacity 0.4s ease-in-out 0s; -o-transition: opacity 0.4s ease-in-out 0s; transition: opacity 0.4s ease-in-out 0s; background-color: rgba(255, 255, 255, 0.6); border-radius: 3px 0 0 0; font-size: 0 !important; line-height: 0; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_listinfo:hover div, #mal_cs_links:hover div, #mal_cs_otherlinks:hover div, #mal_cs_powered:hover div, #mal_cs_powered:hover dd { opacity: 1; } #mal_cs_listinfo div:nth-of-type(2), #mal_cs_links div:nth-of-type(2), #mal_cs_otherlinks div:nth-of-type(2), #mal_cs_powered div:nth-of-type(2) { border-radius: 0 0 3px 3px; padding: 4px 0 8px !important; } #mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a { background-color: rgba(64, 60, 90, 0.6) !important; border-radius: 3px 3px 3px 3px; display: block; font: 13px/17px 'Arial', sans-serif !important; margin: 4px 12px 0; padding: 3px 0 !important; text-decoration: none; } #mal_cs_listinfo a:nth-of-type(1), #mal_cs_links a:nth-of-type(1), #mal_cs_otherlinks a:nth-of-type(1), #mal_cs_powered a:nth-of-type(1) { margin-top: 0; } #mal_cs_listinfo a:hover, #mal_cs_links a:hover, #mal_cs_otherlinks a:hover { background-color: red !important; } #mal_cs_listinfo strong a strong { font-weight: normal; } #mal_cs_otherlinks strong { color: green; display: block; font: bold 13px/17px 'Arial',sans-serif !important; padding: 0 4px 4px; /*text-shadow: 0 1px 1px #FFFFFF;*/ } #mal_cs_otherlinks strong a { background: none transparent !important; border-radius: 0 0 0 0; color: black !important; display: inline; font: bold 13px/17px 'Arial',sans-serif !important; margin: 0; padding: 0; /*text-shadow: 0 1px 1px #FFFFFF;*/ } #mal_cs_powered a { background-color: green !important; border-radius: 3px 0 0 0 !important; display: block !important; margin: 0 !important; opacity: 0; padding: 8px 0 0 !important; } #mal_cs_powered:hover a { opacity: 1; } #mal_cs_powered a img { -moz-transition: all 0.25s ease-in-out 0s; -webkit-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0poweredaimg.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6); border-radius: 3px 3px 3px 3px; display: block; height: 0; margin: 0 12px; padding: 23px 0 0 126px; width: 0; } #mal_cs_powered a img:hover { background-color: red; } #mal_cs_powered #search { border-radius: 0 0 3px 3px; padding: 8px !important; position: relative; } #searchBox { box-sizing: border-box; -moz-box-sizing: border-box; border-color: #BCBCBC #D6D6D6 #D6D6D6; border-radius: 2px 2px 2px 2px; border-style: solid; border-width: 1px; color: #333333; display: inline-block; font-family: arial,sans-serif; font-size: 13px; height: 28px; padding-left: 6px !important; padding-right: 24px !important; vertical-align: top; width: 100px; } #searchBox:hover, #searchBox:focus { border-color: #ACACAC #C6C6C6 #C6C6C6; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; } #searchListButton { background: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon0searchbutton.png") no-repeat scroll 0 0 transparent !important; border-radius: 3px 3px 3px 3px; height: 0; margin: 0; padding: 16px 0 0 19px !important; position: absolute; right: 12px !important; top: 14px !important;/ width: 0; } #mal_cs_listinfo { background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon1db.png"); right: 106px; } #mal_cs_listinfo:hover { background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon1over.png"); } #mal_cs_links { background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon2wx.png"); right: 72px !important; z-index: 9; } #mal_cs_links:hover { background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon2over.png"); } #mal_cs_otherlinks { background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon3tt.png"); right: 38px !important; z-index: 8; } #mal_cs_otherlinks:hover { background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon3over.png"); } #mal_cs_powered { background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon4i.png"); right: 4px !important; z-index: 7; position: fixed !important; } #mal_cs_powered:hover { background-image: url("http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/icon4over.png"); } #mal_control_strip { background: transparent !important; } #mal_cs_pic img { display: none; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } Does anybody know how to do this ??? _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ SOLVED !!! |
MonsterguyMar 11, 2013 6:13 AM
Mar 11, 2013 12:56 PM
#793
How to put the text on the pic go left? |
Mar 11, 2013 2:57 PM
#794
mora404 said: Ok, one last question and I promise not to bother you anymore. If you look at my profile and click on who, me? it brings you straight to photobucket but if you click on my art it brings you to the page I made. Why do you think they are different? One is a direct link which you get from the boxes on the side of a pic, the other appears to be an album or "image's page with links" link where you see those boxes, I think. |
Mar 11, 2013 3:02 PM
#795
Xyphos_ said: I just noticed that in my list,when I click the "More" button the info won't show up like it's supposed to. Here's my list : http://myanimelist.net/animelist/Xyphos_ Should I just ignore it since it's no big deal ? or Is there something I can do.... to fix it. I did remove all the the embeded CSS in the base layout and that fixed it. EDIT : No need to answer I just removed the more button as a solution since I don't want to do much work. Not sure how to fix that so it doesn't clash with the cover codes atm. I haven't looked into it much ast there didn't appear to be a simple solution at a glance. I'm aware there's issues with more button but its not highly requested compared to other things atm nor a "list ruiner" so imo so its low priority of mine to investigate sorry, but I will look into eventually unless it gets more troublesome. I'm hoping someone will save me the time of testing it out and find a solution. It might be really simple! |
Mar 11, 2013 3:12 PM
#796
GoldenBRS said: How to put the text on the pic go left? Not enough info you need to say what part too since it can vary.. but probably text-align: left; |
Mar 12, 2013 5:18 AM
#797
Xyphos_ said: I just noticed that in my list,when I click the "More" button the info won't show up like it's supposed to. Here's my list : http://myanimelist.net/animelist/Xyphos_ Should I just ignore it since it's no big deal ? or Is there something I can do.... to fix it. I did remove all the the embeded CSS in the base layout and that fixed it. EDIT : No need to answer I just removed the more button as a solution since I don't want to do much work. Well, I kind of felt bad that the guy I have for example does not know something I can help, and because I like that layout so much I decided to play with it a little. The resoult was that I "enabled" the "More" function for you: ![]() Still, I have done some changes, becouse of the codes, I hope you don't mind. If you like it, tell me and I will give the modified codes back to you !!! |
Mar 12, 2013 6:11 AM
#798
Shishio-kun said: *Text of wisdom* *Text of wisdom* *Text of wisdom* Looks like this problem has been on for a while.I can totally understand why it's low priority. Monsterguy said: *Text of wisdom* *Text of wisdom* *Text of wisdom* *img* *Text of wisdom* *Text of wisdom* *Text of wisdom* COOL! ( ´∀`) lol don't feel bad bro .. it's just that... I'm just .... like any other geek/otaku.... lazy xD It's totally cool that you got the more button working,the closest I got it to work without changing anything else is just the info floating like a cover. Then I didn't care anymore... focused on other stuff and lastly removed that nasty button c: . |
Mar 12, 2013 6:22 AM
#799
Oh you replaced the #more CSS with animetitle thats a pretty smart way to fix things! We should probably change all these DVD cover codes over to animetitle instead of more so there's no future errors at all, cuz now people are starting to use #more panel.. more and more. |
Mar 12, 2013 8:05 AM
#800
Xyphos_ said: Shishio-kun said: *Text of wisdom* *Text of wisdom* *Text of wisdom* Looks like this problem has been on for a while.I can totally understand why it's low priority. Eh on second thought I will look into this later tonight and try and come up with a solution for future ppl while still using #more CSS.. since only a few people are using your cover style but already two people are asking about the more button it possibly means it would be an issue later. Probably just have to rewrite the way we've been using the .hide code to reveal the cover, I hope lol. |
More topics from this board
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
387 |
by nSubaruNatsuki
»»
3 hours ago |
|
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 templatesShishio-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 |
|
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |