link9us said: I have a question relating to my profile and using Jasc animation. When dropping an image that has already been cut out of another wallpaper such as a character model into the existing background image that you want for your custom profile. How do i get rid of the "white background". When i drag and drop the image into the other image, the white back ground remains and i want to cut that out if possible. So the character model is only showing on the image and not the white background that was used when i opened the image pic with the program. Also how do i trim the image, like if i wanted to trim the bottom or the top of the image a little. My photo that i used also does not have that much room to write text, is thier a way to stretch it down vertically so i have more room. Just sightly. thanks! You shouldn't have a white background on the render character at all in JASC. Make sure you downloaded it as a PNG image and not a JPG image. If its JPG it will lose its transparent background and get a white bg. If it is a PNG and still has a white bg, then try to change the animation properties to transparent background. First right click the render and choose animation properties, then choose transparent and OK. You'll probably get a checkerboard background and it won't have that white background when you move it into the pic. Otherwise, I would say the image didn't have the transparent bg in the first place. Crop option will cut the image out. After you click the crop icon point and hold the cursor over the pic and it'll let you make an outline. When you choose the outlined area hit "crop" (see it on the bar) and then it'll crop it. See here: http://i40.tinypic.com/35bgifp.jpg There isn't a stretching option in JASC I think, but there is in Paint, but this is usually very bad looking in the end. JASC has a resize option tho to make it bigger, you can always do that and crop it if you need to. http://i39.tinypic.com/1z33qr6.jpg |
| @ Hinaya 1. No, they may have different dimensions. Whether their size changes or not depends on image host you're using and code you're making/adjusting. width/height/background-size may change size. 2. What do you mean by text options? If you're looking for properties that adjust text, then look here: http://w3schools.com/cssref/default.asp for 'color', all 'text' and all 'font' properties. 4. Just adjust it so it fits into your general style. This is what all of us do, and it's not difficult. |
 |
Hinaya said: Except first, all the other problems are somewhat sorted out. I uploaded the pics and then to the list. Result- Each one of em' was cropped from top left. They were mostly in the format of 700X800 or around. I guess that was the problem. Possible remedies? Since it was looking too much odd so I reverted the list to the last setting I made You'll need to change the background positioning then, probably. Make it top center instead of top left. Also you should make them the same size as the header takes up; we can increase the size too if you don't know how. Its hard to say without seeing the layout. You can un-revert and we might be able to give you some suggestions. |
| Ok i have some questions regarding this Jasc animation. Know that i am a real complete noob at creating profiles. I am trying to create something similar along the lines of this guys profile. http://myanimelist.net/profile/Zealotus accept with URL clickable links, i'll get to that later though. For now i am just trying to focus on the design. Now i know Jascc animation comes with some pre set animation styles. First of all i created this girl image holding up a paper, and inside that i was going to use my Welcome logo or what ever, something like " Welcome Hope you enjoy your stay" or something along those lines. In any case. When i uploaded the frame for that picture I right clicked on it and went to "insert animation effects" I used the "Rotate colors effect for the image" I though it looked neat, i don't know if you can download extra image effects, that would be nice, but for now ill just use this one. Then i went to "insert Text effect" this is where i write out my text on the image. For this effect i used the "backlight" effect which kind of gives it a glittering glow. A few problems i am having with this, first. When i write out the text, by default it wants to place the text at the bottom of the piece of paper that the the girl is holding. I need to be able to some how move the text position to the top of that paper so i have more room to write my welcome logo. OK another thing is "How do i apply the effects to the other image. When i drag and drop the frame into my main profile page the effects that i added to not carry over, just the image is transferred. So i need help with that. Another thing is when i re size the animation for the frame, it tends to create a "white background" again, as you can see. If i drop the original frame over, it works just fine transparent but its to large, i have to make it smaller obviously. In any case this is my pathetic attempt at starting a profile, i really am no good at this. But this is only going to be my very front page, not my entire profile. I am going to attach other frames and photo's to the bottom and then add a border around the entire thing which is something else i don't know how to do yet but im not at that point quite yet. Or maybe you know what, scratch all that, what do you think about just hooking both frames together, instead of re sizing the one girl image to such a small state that no one can even read it, i might just place side by side next to the image and then do all my writing and stuff in the original image. Also when i use the text command on the toolbar, it only allows me to write barely a sub heading, and it says it won't fit into the image. Well how em i supposed to write my entire biographies then like that other guy did with his profile, if i can't add no more then a few lines of text, cause it runs off the page completely. Maybe i should try another program because this seems limited, either that or i just don't know what the heck im doing. lol This is my first ever attempt at really using any type of Photoshop, so that is why i am really new to it. How would i go about hooking two frames together and then useing a border outline. That will look neater at least. Any suggestions, tips, advice would be really appreciated, thanks! |
ArtimesGamerApr 21, 2012 2:06 PM
  |
link9us said: It gives you options to move the text wherever you want, as soon as you hit OK after typing your text, just move the cursor around don't hit anything else. Choose "insert text" after you've clicked the image you're inserting the text to. It sounds like you're trying to transfer an image with rotated colors (which has multiple frames of animation) to a one frame image, you can't do that. You can only transfer one frame to one frame at a time. If you want to transfer multiple frames, you have to transfer it to something that is multiple frames. I just take animation 2 and copy and paste it after itself till its equal number of frames to Animation1 (with the rotated colors) and then select all/copy the frames of animation1 and paste them into animation2 (which you also select all). Then it carries over the rotate color effect. You may need to activate propagate paste before this (scroll throught the toolbar and find it). I answered the questions about the white background above. JASC is not limited- you just need to make your text font smaller and space it better. Do a small line then start a new line when you write posts, don't make it one long line of text otherwise it becomes one long line and the program will say it won't fit... This is the wrong way to write text in JASC for something like a bio: http://i41.tinypic.com/2qkktw7.jpg You'd end up with this:  This is the right way: http://i43.tinypic.com/npjkv5.jpg Then you get something like this:  I answered a question about clickable links somewhere in this topic, a few pages back I'm sure. It might also be in the Beginner's tutorial. I gave away one of my old profile graphics here, maybe it will help: http://myanimelist.net/forum/?topicid=399811 |
| For this list http://myanimelist.net/animelist/Yoonster, where in the code would i have to change to eliminate the spacing between the header and table / table data? (accidentally had them) I've set the header heights to 100px and made the images 100px, so the spacing was in my header image was not intentional |
ClearSinzApr 22, 2012 12:31 AM
| @ ClearSinz The images are actually 84px high. So add this to every header: height: 84px; |
|
| I've changed my list to have the pics for Completed, Watching etc. My Anime List The pictures for the those are these: There were not final ones but I wanted to check if it's was going to work. Result- You can see for yourself. Possible solutions? |
VeriTi said: @ ClearSinz The images are actually 84px high. So add this to every header: height: 84px; ah tvym omg ur right blah... *faceplam* things happen when ur tired XD Hinaya said: I've changed my list to have the pics for Completed, Watching etc. My Anime List The pictures for the those are these: There were not final ones but I wanted to check if it's was going to work. Result- You can see for yourself. Possible solutions? you have to resize ur images to the size of the boxes which are (in this case) 273 x130 |
ClearSinzApr 22, 2012 1:02 AM
| Hi everybody, I'm quite a beginner and not that experienced with CSS yet, so i'm working on my animelist design and would be happy if i can get some help tweaking it. I've already looked through the FAQ Question's several times, but i still have some questions: - How can i move the "completed", "on-hold" etc deeper (below the Header)? - How can i change my font color of specific parts like "Anime Title", "Score" etc.? (More like what parts of my codes are about those) - How can i change the color of the table rows(alternating colors after a row)? - How can i make the font of a link bigger when a cursor is on the link? - and is there a way to make the list round without using an extra image? Here is my Code: Sorry if it is messy. I just copied too many passages that i lost track of what should be what and where. Thanks in forward ^_^ |
  |
| @ Lelouch_X 1. The selector I'd use would be #list_surround table:first-of-type and then use different position codes (position, left/right, top/bottom). Look at the fixed category menu thread, although you would use position: relative or position:absoulte. 2. .td1:nth-child(3){color:black} .td2:nth-child(3){color:red} this will change text color for 'Score' (well, actually for everything in 3rd row). I added a different colors for different 'alternating rows'. For anime titles there is an .animetitle class. 3. It's pretty simple: .td1{background: red;} .td2{background:blue;} Use whatever you need instead of 'background' property. 4. a:hover{font-size: 20pt;} You can use different selectors like .animetitle:hover for titles I must admit, I find font-jumping effect really awful because it can alter dimensions of the already rendered page, which is annoying because after you move your mouse over a link the point you were moving a cursor to may change, yes. And also the following shit is possible: hover over something -> it increases in size -> dimensions of the table change -> something is no longer in focus -> it decreases in size -> it appears exactly under a cursor -> goto 2 5. There is a border-radius property. More info here. Not sure where to use it on list, however. |
|
| First of all thank you for the reply, i really appreciate it =) I solved the first problem, with padding-top of the list surround part. But if i move the list, the categories with "Completed", "All Anime" will move too... Is there a way how i can ONLY move the category links or the Table? And i want to reduce the space between the category links, so that it can fit the place of the header, like you can see it on my Animelist here: http://myanimelist.net/animelist/Lelouch_X And it would be great if you can tell me where i should put the code-parts into my CSS code, i'm kinda confused >_< |
Lelouch_XApr 28, 2012 12:52 PM
|
| Y u no use selector I given? It can solve even your space between links problem: #list_surround table:first-of-type{width: auto !important} because width of category links is directly specified in the HTML code as 100% It doesn't matter where to add it. Just not between already existent braces, obviously. The pieces at the bottom of code usually get priority over the ones above them, if other priority conditions are the same. |
|
Hinaya said: So I've set the rough setting for the final list. This is how it looks now My List. I wanna know if there's some way to have just the text in the list and no background colour for it. Also I only want to reduce the opacity of the text. I want the pics for Completed, Watching etc. to look like the way they originally are without any opacity settings. Is there any way for doing so? I want the cards to be on the extreme left and not beside the list. Also can anyone here give the code so that the extra text of copyright is sent at the bottom of the page, irrespective of the size of the list, I tried doing it on my own but it didn't work. It always got removed when I updated my CSS. to take out the opacity As for the text with no background im assuming ur talking about the table rows.. for opacity for text only add opacity: some value what ever you want (ie- 0.5); in The copyright stuff can be relocated by adding under #copyright , just play around with the numbers (marked by XX) and pick an algnment if you choose to for desired result having the cards on the extreme left is beyond me, I can gave u a number and value on how many px to move it left, but the final look varies on ur resolution Veriti or Shishio prob would know a something to keep on the left regardless of resolution |
ClearSinzApr 30, 2012 9:42 PM
| Lots of great info thanks! I was wondering if I could get a little bit of help, I just finished my first list using a template from here and I made some custom buttons. I was just wondering how to make the entire button click-able. Because right now I can only click on a small parts of each button and not the entire thing... The Code Also I just have another question...is there any way to create an extra button besides the six general ones that I have? I have this greasemonkey script installed that fixes the MAL Tag problem and lets me create my own custom tags but it messes up the custom buttons that I made. So I wanted to create an extra button for that. Thanks in so much :) |
SevenMay 1, 2012 12:48 AM
 |
| @ Abbyrose This should do: td[class^="status"] a{display:block;width:100%;height:100%} This expands every link in buttons to occupy all possible space inside a block they're in. You can not create buttons (with actions, not just "do nothing") using just CSS, and there is no feature on MAL itself that allows you to do sth similar. You can do it using JavaScript, but it is beyond my knowledge so I'm unable to assist you here. |
|
Abbyrose said: Lots of great info thanks! I was wondering if I could get a little bit of help, I just finished my first list using a template from here and I made some custom buttons. I was just wondering how to make the entire button click-able. Because right now I can only click on a small parts of each button and not the entire thing... The Code Also I just have another question...is there any way to create an extra button besides the six general ones that I have? I have this greasemonkey script installed that fixes the MAL Tag problem and lets me create my own custom tags but it messes up the custom buttons that I made. So I wanted to create an extra button for that. Thanks in so much :) Whats the MAL tag problem and how and what does your script do exactly? We could create a new link button from a part in the top bar, if you're just replacing links or something with this script. VeriTi said: @ Abbyrose This should do: td[class^="status"] a{display:block;width:100%;height:100%} This expands every link in buttons to occupy all possible space inside a block they're in. You can not create buttons (with actions, not just "do nothing") using just CSS, and there is no feature on MAL itself that allows you to do sth similar. You can do it using JavaScript, but it is beyond my knowledge so I'm unable to assist you here. Oh that code will be of great use to me in one of my tutorials! |
Shishio-kun said: Abbyrose said: Lots of great info thanks! I was wondering if I could get a little bit of help, I just finished my first list using a template from here and I made some custom buttons. I was just wondering how to make the entire button click-able. Because right now I can only click on a small parts of each button and not the entire thing... The Code Also I just have another question...is there any way to create an extra button besides the six general ones that I have? I have this greasemonkey script installed that fixes the MAL Tag problem and lets me create my own custom tags but it messes up the custom buttons that I made. So I wanted to create an extra button for that. Thanks in so much :) Whats the MAL tag problem and how and what does your script do exactly? We could create a new link button from a part in the top bar, if you're just replacing links or something with this script. Basically what the script does is it creates a drop down menu at the top of the page, that you are able to click on and off that has the tags created in it. When I have grease monkey enabled the script it is automatically linked in the first button that I have made. But then it messes up because the first button is sharing two links. Is there any way to separate out the two links so that the Custom Tag link is in its own link? Though from the looks of it I think I might have to change something in the Greasemonkey Javascript in order to do this. This is what it does when grease monkey enabled |
|
| Whoa thats an interesting script. Can you link me to its source? Maybe it can be rewritten to target a link from your top bar instead. |
| Sure thanks so much for helping me I really appreciate it! Sorry but I am going to annoy you with a couple more questions...Is there a way to make the custom headers go in front of the anime list rather then behind it? I have been trying to move a couple of my headers lower but every time I do this the headers end up going behind my list rather than in front of it. Just one last question I promise! how do I change the custom buttons that I have made to a fixed position? I have tried changing some of the ccs code but it just makes my buttons disappear. |
SevenMay 2, 2012 8:47 AM
|
Abbyrose said: Shishio-kun said: Abbyrose said: Lots of great info thanks! I was wondering if I could get a little bit of help, I just finished my first list using a template from here and I made some custom buttons. I was just wondering how to make the entire button click-able. Because right now I can only click on a small parts of each button and not the entire thing... Whats the MAL tag problem and how and what does your script do exactly? We could create a new link button from a part in the top bar, if you're just replacing links or something with this script. Basically what the script does is it creates a drop down menu at the top of the page, that you are able to click on and off that has the tags created in it. When I have grease monkey enabled the script it is automatically linked in the first button that I have made. But then it messes up because the first button is sharing two links. Is there any way to separate out the two links so that the Custom Tag link is in its own link? Though from the looks of it I think I might have to change something in the Greasemonkey Javascript in order to do this. This is what it does when grease monkey enabled Ok, here's how to customize and separate the buttons when using this script (for myself other people's reference later): |
| @Abbyrose I came up with two ways you can have your custom tag button thing. The only thing you'll have to do is create and add the background image for it (and reposition/resize it if you want) One way is the button is on the right side and is its own separate button. Add to the bottom of your CSS: #custom_tags_header { background-color: red; left: 450px; top: -200px; right: 0px; margin: auto; position: absolute; height: 100px; width: 100px; opacity: 10 !important;} #custom_tags_toggle1 { background-color: blue; left: 725px; position: absolute; top: 300px; height: 100px; width: 100px; opacity: 10 !important;} #custom_tags_toggle2 { background-color: green; left: 725px; position: absolute; top: 300px; height: 100px; width: 100px; opacity: 10 !important;} You should get something like this:  The new green spot is supposed to be the new button for the tags thing. I think you know how to add background-images, so add them to the custom tags toggles 1 and 2. Let me know how it looks on your end etc... Also if what you want it is an extra button on top the other left side buttons, you have to change your CSS a little: You can add an image to the green button (#custom_tags_toggle2) afterwards which is supposed to be on top of the other left side buttons. The codes to control this are on the bottom of the new CSS. There's a blue button (#custom_tags_toggle1) behind that the green button btw, you should change too since it might reveal later for some reason.  Buttons on top of buttons on top of buttons behind buttons- its a button orgy! |
Abbyrose said: Sorry but I am going to annoy you with a couple more questions...Is there a way to make the custom headers go in front of the anime list rather then behind it? I have been trying to move a couple of my headers lower but every time I do this the headers end up going behind my list rather than in front of it. Just one last question I promise! how do I change the custom buttons that I have made to a fixed position? I have tried changing some of the ccs code but it just makes my buttons disappear. To move the header in front add: position: relative; top: 11px; Should work. Adjust top as you please. If not let me know. I don't see any buttons in a fixed position, so I don't know what buttons you mean exactly. If you changed them to a fixed position and they vanished, then they probably disappeared since they were moved off the page in a fixed position (so you'll never see them at all). The top and left settings probably set them off the page. A good default way to start something's fixed position is: position: fixed; left: 0px; top: 0px; this way your fixed thing starts at the top left of the screen, and you can move it as you please. The next fixed thing you can put at top: 150px; so it is 150 below that first one, etc. |
| Forgot one important thing for the tags-script button codes, you also have to add this to your CSS so the buttons don't end up behind anything: #custom_tags_toggle1, #custom_tags_toggle2{ z-index: 10 !important; } |
| Thanks everything works great, though I am having some trouble. I want the menu on the left with the buttons I created to be in a fixed position but I can't get it to work. I tried using position: fixed; left: 0px; top: 0px; but I couldn't get it right also is there anyway to get rid or the text that says Available Custom Tags that is in the Custom Tags button? |
|
Abbyrose said: Thanks everything works great, though I am having some trouble. I want the menu on the left with the buttons I created to be in a fixed position but I can't get it to work. I tried using position: fixed; left: 0px; top: 0px; but I couldn't get it right also is there anyway to get rid or the text that says Available Custom Tags that is in the Custom Tags button? /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/qv0cw.png) repeat scroll 0 0 transparent; display:block; height:110px; left:0px; padding:0; position:fixed; top:0px; width:200px; } ^ This is an excerpt of your code modified for fixed positioning. You need to make yours something like this. It worked for me when I used your code to test it out, but if its not working still, leave it in so I can investigate it sometime tomorrow. Its way easier to figure out what to tweak that way. Also after you start making everything positioned in a fixed way, they will be in completely different positions from the absolute position. Some may even go off the page and you have to reposition everything. Learning Firebug makes this kinda thing way easier, but its not too hard anyhow. As for the text thing, add color: transparent; font-size: 0; to the toggle button codes at the bottom. They remove text. You only need one but I'm Mr. Overkill lol. |
Hinaya said: Quick questions: 1. I used that code what ClearSinz gave me for removing opacity from the tags Both of em' worked for twice but soon reverted to normal. I checked my code thrice but the setting were the same as I was suggested. What are possible errors? 2. Again I used a given code to have the copyright things at the bottom I did that but my list turned topsy-turvy. Almost the basic setting I had when I started to edit my basic beginner's Hatsune Miku settings. So instead of doing that, suggest me a code to increase the distance b/w the entries of anime/manga Did you know everytime you save your CSS, the box will end up displaying the CSS you had previously just changed, not the one you saved changes to. So you need to actually refresh the page when you save, to have the CSS in the box that you added changes to. You can also go back in your browser and you'll have the CSS you just changed too. (really confusing i know) I'm sorry you're having problems, but there are two whole different CSS in your edit box, and some of the default CSS is mixed in there so there's three and its causing all kinds of conflict. In CSS, the lowest codes take priority if they affect the same thing. So if you made changes to the top of your CSS and the bottom had different for the same part, the bottom would still take priority and the top wouldn't matter. There's multiples of the same codes all over. Its kinda a big mess cuz of there being three, and codes added to the bottom don't take affect in your CSS cuz of you also have a lot of broken codes as well above those. Also you got some quotes in the middle of the CSS, this causes the CSS to get interupted to you can put that in the middle of it. Were you trying to add it to the copyright bottom on your list? You need your code cleaned up first big time, or else you're going to continue to have trouble, but below the pic I posted in the spoiler a cleaned up version of your code with some changes I think you're looking for. You delete and replace your entire CSS in the edit box with that code in the spoiler. If you just add it to the bottom, you'll have 4 CSS in there when you're supposed to have only one. Also it sounds like you're trying to make the list transparent and the fonts not so see-through, like in this pic, this would be the code for it if this is the case, I added these changes to the cleaned up code:  If the pic isn't an example what you're trying to do, I can make adjustments just describe them. I don't know what you're trying to do with the copyright text exactly? Can you give me an example or describe it? The vertical spacing between rows on your list you mean? You can add this to the bottom of the cleaned up CSS I gave you, but it won't work with your current one which is broken. /*PADDING The space around the words in your list. */ .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover, .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals, .status_not_selected, .table_header, .category_totals, .td2, #copyright{ padding-bottom: 4px; } |
Shishio-kunMay 3, 2012 3:12 AM
Shishio-kun said: Hinaya said: Quick questions: 1. I used that code what ClearSinz gave me for removing opacity from the tags Both of em' worked for twice but soon reverted to normal. I checked my code thrice but the setting were the same as I was suggested. What are possible errors? 2. Again I used a given code to have the copyright things at the bottom I did that but my list turned topsy-turvy. Almost the basic setting I had when I started to edit my basic beginner's Hatsune Miku settings. So instead of doing that, suggest me a code to increase the distance b/w the entries of anime/manga Did you know everytime you save your CSS, the box will end up displaying the CSS you had previously just changed, not the one you saved changes to. So you need to actually refresh the page when you save, to have the CSS in the box that you added changes to. You can also go back in your browser and you'll have the CSS you just changed too. (really confusing i know) I'm sorry you're having problems, but there are two whole different CSS in your edit box, and some of the default CSS is mixed in there so there's three and its causing all kinds of conflict. In CSS, the lowest codes take priority if they affect the same thing. So if you made changes to the top of your CSS and the bottom had different for the same part, the bottom would still take priority and the top wouldn't matter. There's multiples of the same codes all over. Its kinda a big mess cuz of there being three, and codes added to the bottom don't take affect in your CSS cuz of you also have a lot of broken codes as well above those. Also you got some quotes in the middle of the CSS, this causes the CSS to get interupted to you can put that in the middle of it. Were you trying to add it to the copyright bottom on your list? You need your code cleaned up first big time, or else you're going to continue to have trouble, but below the pic I posted in the spoiler a cleaned up version of your code with some changes I think you're looking for. You delete and replace your entire CSS in the edit box with that code in the spoiler. If you just add it to the bottom, you'll have 4 CSS in there when you're supposed to have only one. Also it sounds like you're trying to make the list transparent and the fonts not so see-through, like in this pic, this would be the code for it if this is the case, I added these changes to the cleaned up code: If the pic isn't an example what you're trying to do, I can make adjustments just describe them. I don't know what you're trying to do with the copyright text exactly? Can you give me an example or describe it? The vertical spacing between rows on your list you mean? You can add this to the bottom of the cleaned up CSS I gave you, but it won't work with your current one which is broken. /*PADDING The space around the words in your list. */ .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover, .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals, .status_not_selected, .table_header, .category_totals, .td2, #copyright{ padding-bottom: 4px; } Thanks a heaven lot for that!!!! I know the fact that after updating the CSS once, the CSS previously used is what present in the box. Looks like I still gotta take time in refining my CSS skills here ~_~ Anyways, the code you gave me was what I was searching for! I wouldn't trouble you much by again asking codes but if there's a tutorial for the copyright text settings then please reply in your post! I hope that I have a list decent enough to match my style soon. |
| @Shishio-kun I figured out what I did wrong, I was putting in too many fixed position codes because I thought it needed more than one..so it works now. But then this happens...the custom tag button becomes fixed as well and I still can't get rid of that evil text...lol. |
|
Hinaya said: Shishio-kun said: Hinaya said: Quick questions: 1. I used that code what ClearSinz gave me for removing opacity from the tags Both of em' worked for twice but soon reverted to normal. I checked my code thrice but the setting were the same as I was suggested. What are possible errors? 2. Again I used a given code to have the copyright things at the bottom I did that but my list turned topsy-turvy. Almost the basic setting I had when I started to edit my basic beginner's Hatsune Miku settings. So instead of doing that, suggest me a code to increase the distance b/w the entries of anime/manga Did you know everytime you save your CSS, the box will end up displaying the CSS you had previously just changed, not the one you saved changes to. So you need to actually refresh the page when you save, to have the CSS in the box that you added changes to. You can also go back in your browser and you'll have the CSS you just changed too. (really confusing i know) I'm sorry you're having problems, but there are two whole different CSS in your edit box, and some of the default CSS is mixed in there so there's three and its causing all kinds of conflict. In CSS, the lowest codes take priority if they affect the same thing. So if you made changes to the top of your CSS and the bottom had different for the same part, the bottom would still take priority and the top wouldn't matter. There's multiples of the same codes all over. Its kinda a big mess cuz of there being three, and codes added to the bottom don't take affect in your CSS cuz of you also have a lot of broken codes as well above those. Also you got some quotes in the middle of the CSS, this causes the CSS to get interupted to you can put that in the middle of it. Were you trying to add it to the copyright bottom on your list? You need your code cleaned up first big time, or else you're going to continue to have trouble, but below the pic I posted in the spoiler a cleaned up version of your code with some changes I think you're looking for. You delete and replace your entire CSS in the edit box with that code in the spoiler. If you just add it to the bottom, you'll have 4 CSS in there when you're supposed to have only one. Also it sounds like you're trying to make the list transparent and the fonts not so see-through, like in this pic, this would be the code for it if this is the case, I added these changes to the cleaned up code: If the pic isn't an example what you're trying to do, I can make adjustments just describe them. I don't know what you're trying to do with the copyright text exactly? Can you give me an example or describe it? The vertical spacing between rows on your list you mean? You can add this to the bottom of the cleaned up CSS I gave you, but it won't work with your current one which is broken. /*PADDING The space around the words in your list. */ .status_selected:hover, .header_title:hover, .td1:hover, #grand_totals:hover, .status_not_selected:hover, .table_header:hover, .category_totals:hover, .td2:hover, #copyright:hover, .status_selected, .header_title, .td1, #grand_totals, .status_not_selected, .table_header, .category_totals, .td2, #copyright{ padding-bottom: 4px; } Thanks a heaven lot for that!!!! I know the fact that after updating the CSS once, the CSS previously used is what present in the box. Looks like I still gotta take time in refining my CSS skills here ~_~ Anyways, the code you gave me was what I was searching for! I wouldn't trouble you much by again asking codes but if there's a tutorial for the copyright text settings then please reply in your post! I hope that I have a list decent enough to match my style soon. Good! You can increase the number by the padding-bottom at the bottom of your code to make more space between rows on your list. You've also been making a closing mistake similar to Abbyrose, you can see it pointed out in my reply to her, you should look it over so you don't repeat it again it will cause you problems if you try to fix things up later. I didn't think a copyright tutorial was in demand in any way. There isn't that much into customizing the copyright section, so I'll look into writing a tutorial for it should only take about 20 mins. You should also be aware of this topic it has links to all my stuff. http://myanimelist.net/forum/?topicid=419405&show=0#post1 |
Abbyrose said: @Shishio-kun I figured out what I did wrong, I was putting in too many fixed position codes because I thought it needed more than one..so it works now. But then this happens...the custom tag button becomes fixed as well and I still can't get rid of that evil text...lol. Oh no you haven't been closing your codes right, this is why when you've added something it doesnt seem to take effect. When you add a new line of code to a "section" (like body and its lines of codes) you have to close that section with the } symbol, called a closing bracket. Each section should have only one } at the end and thats it, anything after the closing bracket should be a whole new section or notes opened and closed with /* and */. When you add lines of code after the closing bracket, and its not the name of a section but things like background-color, it actually can null all the codes below and cause a chain reaction of errors. Please look over this image it shows what I mean: http://i49.tinypic.com/etbllv.jpg Hmm you also have two CSS codes in your edit box, and its mixed with the default code. I don't think you had this the other day. Maybe there's some weird editing bug going around and its causing people to get mixed CSS. |
Shishio-kunMay 3, 2012 1:47 PM
| I don't believe you can change the fixed positioning of the custom tag button, since its "subservient" to the positioning of the other links were are set to fixed. You'll just have to move the button to some place on the side with the others I guess. Or into the top bar. There's definitely room tho. I think this is how your code is supposed to look without all the errors and multiple CSS. It has the fixes so that your font-removal codes take place, and it looks right on your list. Body { background-image: url(http://i.imgur.com/N7rRS.jpg); background-attachment: fixed; background-position: top right; background-repeat: no-repeat; color:#ffffff; font-size:14px; font-family:myriad pro; background-color:#ffffff; } /* // Determines the positioning of your list */ #list_surround { padding-left: 30px; width:625px; } /* // All links on your list */ a { color:#e8cfed; text-decoration:none; } a:visited { color:#00C0FA; text-decoration:none; } a:hover { color:#FF7DF4; text-decoration:none; } /* // Alternating row color 1 */ .td1 { color:#e8cfed; border-width:625px; border-style:none; border-color:#00C0FA; padding:2px; background-color:#e42d62; opacity:100; filter:alpha(opacity=100); } /* // Alternating row color 2 */ .td2 { color:#e8cfed; border-width:625px; border-style:none; border-color:#00C0FA; padding:2px; background-color:#FF5CF1; } /* // This represents the "Anime Title", "Score", "# Eps" columns */ .table_header { color:#FF5CF1; border-width:625px; border-style:none; border-color:#4b4b4b; background-color:#00C0FA; padding:2px; } /* // headerLink represents the color of the links inside the_header */ .table_headerLink { color:#ffffff; } .table_headerLink:Visited { color:#ffffff; } .table_headerLink:Hover { color:#ffffff; } /* // Controls the select form decoration (the drop down select box) */ .form { border-width:625px; border-color:#ffffff; border-style:none; color:#ffffff; padding:2px; font-size:14px; font-family:myriad pro; } /* Which 'status' up top is selected? */ .status_selected { color:#fbfbfb; border-width:625px; border-style:none; border-color:#ffffff; padding:2px; background-color:#FF5CF1; } .status_not_selected { color:#fbfbfb; border-width:625px; border-style:none; border-color:#ffffff; padding:2px; background-color:#FF5CF1; } /* LEFT SIDE BUTTONS These codes control the buttons on the left side. You can replace these images as well for your own custom buttons! The first controls the Currently Watching panel, followed by Completed, On Hold, Dropped, Planned, and then All. You can replace the background image links of these buttons in parenthesis with your own images you upload to a image hosting site like Tinypic.com! If you don't know how, use Step 2 on in this tutorial: http://myanimelist.net/forum/?topicid=415315 */ #list_surround .status_selected, #list_surround .status_not_selected { background:url(http://i.imgur.com/wuOce.jpg) repeat scroll 0 0 transparent; display:block; height:85px; left:0px; padding:0; position:fixed; top:70; width:165px; } #list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected { background:url(http://i.imgur.com/J1AlK.jpg) repeat scroll 0 0 white; top:135px; } #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 { background:url(http://i.imgur.com/sCnFs.jpg) repeat scroll 0 0 transparent; top:221px; } #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 { background:url(http://i.imgur.com/gmiuP.jpg) repeat scroll 0 0 transparent; top:400px; } #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 { background:url(http://i.imgur.com/ptX5F.jpg) repeat scroll 0 0 transparent; display:inline; top:500px; } #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 { background:url(http://i.imgur.com/UgsU8.jpg) no-repeat scroll 0 0 transparent; display:inline; padding-bottom:30px; top:600px; } /* Header classes for Currently Watching, Completed, Dropped, etc... */ /* CURRENTLY WATCHING/READING HEADER This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_cw { background-image:url(http://i.imgur.com/FjEti.png); height: 320px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; position: relative; top: 02px; } /* COMPLETED HEADER This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_completed { background-image:url(http://i.imgur.com/N39NO.png); height: 377px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; position: relative; top: 35px; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_onhold { background-image:url(http://i.imgur.com/HElnK.png); height: 300px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_dropped { background-image:url(http://i.imgur.com/sJqwP.png); height: 302px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; position: relative; top: 35px; } /* PLAN TO WATCH/READ HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list. */ .header_ptw { background-image:url(http://i.imgur.com/OwC3R.png); height: 267px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; } /* REMOVE HEADER TEXT These codes remove the text like "Completed" and "Currently Watching" from each category on the list. You're supposed to make your own logos and text to replace the original header texts and put them in the background sections above. This section overrides any related codes. If you want the text back, you have to remove this whole section. */ .header_title { color: gray!important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } .category_totals { color:#ffffff; border-width:625px; border-style:none; border-color:#00C0FA; padding:2px; background-color:#00C0FA; } #grand_totals { color:#ffffff; border-width:625px; border-style:none; border-color:#00C0FA; padding:2px; background-color:#00C0FA; text-align: center; } .header_al { font-weight: regular; font-size: 14px; } /* header_al_links is thewith 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: regular; } /* 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 { padding-top: 6px; text-align: center; margin: 0 auto; width:625px; } #list_surround { position: absolute!important; right: 40px !important;} #list_surround .header_title span { display:none; } #list_surround .status_not_selected a { opacity:0; } #list_surround .status_selected a { opacity:0; } td[class^="status"] a{display:block;width:100%;height:100%} #mal\_control\_strip{ background: url(http://i.imgur.com/3x7rF.png) !important; } #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links { border-right: 0 none !important; } #custom_tags_header { background-color: transparent; left: 450px; top: -200px; right: 0px; margin: auto; position: absolute; height: 100px; width: 100px; opacity: 10 !important; color: transparent; font-size: 0;} #custom_tags_toggle1 { background-color: transparent; left: 725px; position: absolute; top: 300px; height: 100px; width: 100px; opacity: 10 !important;} #custom_tags_toggle2 { background:url(http://i.imgur.com/z8CcR.jpg); background-color: transparent; left: 810px; position: absolute; top: 225px; height: 100px; width: 125px; opacity: 10 !important; color: transparent; font-size: 0;} #custom_tags_toggle1, #custom_tags_toggle2{ z-index: 10 !important; } #custom_tags_toggle2 { background:url(http://i.imgur.com/z8CcR.jpg); background-color: transparent; left: 710px; position: absolute; top: 225px; height: 100px; width: 125px; opacity: 10 !important; color: transparent; font-size: 0;} #custom_tags_toggle1, #custom_tags_toggle2{ z-index: 10 !important; } |
Shishio-kunMay 3, 2012 2:05 PM
| Thanks Shishio-kun you're a live saver, It's finally done! |
|
| Just a quick question, how do you make it so your actual list (table) is behind a certain image in the background? For example Talon's one here: http://myanimelist.net/animelist/talon and Yves' one here: http://myanimelist.net/animelist/yves I'm just wondering how the image is on top of the list so it's like the list itself is behind the picture.. EDIT: Okay, so I think I've figured out how to do the image part. The next problem is the copyright text. How do you make it do on the bottom of the page and not on the picture I've placed on the bottom? Link to my list: http://myanimelist.net/animelist/1stEdition |
hrkjiMay 5, 2012 6:59 AM
| Hey I was changing my list but I can't find the code to have an background on the list, in preference a half transparent one. I used Css at a few years ago, I overlooked the codes dozens of times, but I can't find the code that does that even in my old list css(which had that same list background) :s The codes are almost the same for the new one and the old one, this new one has few more codes. I went to see your tutorials to see if I could find anything but I couldn't find that code. :s |
     |
EinLawliet said: Hey I was changing my list but I can't find the code to have an background on the list, in preference a half transparent one. I used Css at a few years ago, I overlooked the codes dozens of times, but I can't find the code that does that even in my old list css(which had that same list background) :s The codes are almost the same for the new one and the old one, this new one has few more codes. I went to see your tutorials to see if I could find anything but I couldn't find that code. :s The code to add a background to the list itself is: #list_surround { background: url()} put the image link in the parenthesis. If you want it half-transparent you can add this as well, and raise and lower the number between .1 and 1. #list_surround { opacity: .5;} |
1stEdition said: Just a quick question, how do you make it so your actual list (table) is behind a certain image in the background? For example Talon's one here: http://myanimelist.net/animelist/talon and Yves' one here: http://myanimelist.net/animelist/yves I'm just wondering how the image is on top of the list so it's like the list itself is behind the picture.. EDIT: Okay, so I think I've figured out how to do the image part. The next problem is the copyright text. How do you make it do on the bottom of the page and not on the picture I've placed on the bottom? Link to my list: http://myanimelist.net/animelist/1stEdition Ok first of all using the #copyright isn't how people put an image in front of their list. You use #inline_content. Theres a tutorial for that in this group, you find it through the "List add-ons" option on the front page menu.. the code you're looking for is the bottom of the first post. Replace the default image in it with yours, you may have to modify the position a little. http://myanimelist.net/forum/?topicid=393581 Second question answer: Once you use that code, you can return your copyright to normal. |
| Hello everyone! I'm here to ask something that may be simple to many people but I really don't know what to do since I'm all new to these things. If Shishio-kun or anyone could help me I would really appreciate it! Here's an example : http://ihostimages.x10.mx/images/BVZnQT8x1vSrW.png I would like to know what I should do and/or what program I could use to try to get rid of these "white backgrounds" when I'm using these type of words and some others things, sometimes even the character picture itself. I want it to be "transparent" so I can use the words/characters without a background problem like that. Since my English is not really good to explain it so well I hope you guys understand what I mean. In this topic here: http://myanimelist.net/forum/?topicid=314657 there's a good example from Shishio himself on what I would like it to look like, just check some coments below, please. (Characters or words) He can use Mio without any background and that's really good but what's even better is the transparent background from "current reading" for example, since it's not affecting Mio's picture when using it in front of her. This is just an example, I'm not really going to use that but I'd be happy to learn how to do that if possible. Thank you! |
Hawkey said: Hello everyone! I'm here to ask something that may be simple to many people but I really don't know what to do since I'm all new to these things. If Shishio-kun or anyone could help me I would really appreciate it! Here's an example : http://ihostimages.x10.mx/images/BVZnQT8x1vSrW.png I would like to know what I should do and/or what program I could use to try to get rid of these "white backgrounds" when I'm using these type of words and some others things, sometimes even the character picture itself. I want it to be "transparent" so I can use the words/characters without a background problem like that. Since my English is not really good to explain it so well I hope you guys understand what I mean. In this topic here: http://myanimelist.net/forum/?topicid=314657 there's a good example from Shishio himself on what I would like it to look like, just check some coments below, please. (Characters or words) He can use Mio without any background and that's really good but what's even better is the transparent background from "current reading" for example, since it's not affecting Mio's picture when using it in front of her. This is just an example, I'm not really going to use that but I'd be happy to learn how to do that if possible. Thank you! The process you're referring to is rendering. When you render something from an image and it becomes its own pic with a transparent background. There are some threads about renders here, sources etc, but no tutorials on how to do it yet: http://myanimelist.net/forum/?topicid=395847 http://myanimelist.net/forum/?topicid=400287 http://myanimelist.net/forum/?topicid=419631 And you can Google how to do it for your program. You can do it very quickly for this image in JASC by using the Flood Fill option (the paint bucket icon). You set the animation properties (right click) to transparent background (example below) http://i48.tinypic.com/1zl57js.jpg and then make sure the "To Canvas Color" is checked as in the pic below. Then you can set the tolerance which is how much background color gets removed, 100 is a good amount and 200 will remove the image. You should get a checkerboard background for transparency. You can also use the eraser head to clear parts of the image off. Then you save it as a PNG image, since JPEG cant save transparent backgrounds. http://i46.tinypic.com/192nis.jpg But actually, JASC isn't a good way to render images. You should use a higher level program like Photoshop or Fireworks. You can also make rendered buttons, banners, and text with cooltext.com its what I used for mine in the thread you linked. |
| @ Shishio-kun. Thank you SO MUCH for your help. I didn't know it was called "rendering", that will probably help me much more now. I'll check google if I find any tutorials later, since we don't have one here yet. Still, what you said and what you showed me, all the details, links, etc. I really appreciate it, everything here was great for me and it'll help me somehow to try to get started and even if I'm not doing it well at least I know how to try and find some picures without background now. I'll need some time for it but it's already something, then again, thank you for attention and your hard work on helping me and linking everything here. |
| How do you get the series you watch to show as images in your anime list? |
AkiYuuki said: How do you get the series you watch to show as images in your anime list? This is really hard to explain and do atm, but I'll link you to our resources for that. I am working on a premade list style that lets you do that with no trouble, and a list add on for that too so it can be added to any list. You can see a preview of it on my anime list atm but its under construction. I hope it will be done real soon but I'm swamped with other more important club updates. http://myanimelist.net/forum/?topicid=410755 http://myanimelist.net/forum/?topicid=436031 |
| @ Shishio-kun That helped a lot, thanks! |
Aaralyn said: Hi guys. I just got a problem Q,Q I wanted to change style of main logo in my animelist. Thing is, it kinda covers the list itself.. What should I change in the code to make it work properly? You needed to make some margin-top adjustments in a couple parts to fit that bigger image. I did it for you tho no problem, this is the adjusted CSS: |
More topics from this board
» [CSS - Modern] 🍰 Clarified by V.L — a responsive table-based design ( 1 2 3 )Valerio_Lyndon - Aug 1, 2022 |
111 |
by Shishio-kun
»»
1 hour ago |
|
» [CSS Modern] ⭐️ NieR Automata Menu Layout - Killingdyl ( 1 2 )killingdyl - Apr 22, 2017 |
51 |
by Mula_Niilista
»»
Mar 24, 11:20 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
18 |
by Shishio-kun
»»
Mar 19, 5:45 PM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1255 |
by Shishio-kun
»»
Mar 19, 11:21 AM |
|
» [CSS - MODERN] ⚡️ Fully-Customizable Layouts (2024 updates!) ( 1 2 3 4 5 ... Last Page )Shishio-kun - Jul 21, 2017 |
380 |
by cosmicskye
»»
Mar 12, 8:35 AM |