Forum Settings
Forums
#1
Nov 10, 2009 2:55 PM

Offline
Joined: Aug 2008
Posts: 2009
If you have any questions or need help with CSS, List Design, and/or anything else having to do with Anime/Manga list; post here!

*Check out the tutorials first before posting.
Modified by spineslayer, Nov 10, 2009 8:13 PM
 
#2
Nov 12, 2009 4:36 AM
Offline
Joined: Aug 2009
Posts: 5
I could use a little help. I'm completely new to CSS, but I dabbled in HTML way back when, and I usually pick up on things pretty quickly, so I decided to give it a try and do some serious decorating on my lists, starting with my manga list.

I skimmed some tutorials and browsed through others' lists, taking a peek at the source codes, then I made some graphics and was ready to begin. All went well at first—I got the big things (the background and the top header image) to work to my satisfaction, but when I tried to add the section header images, they wouldn't show up. No subsequent edits to anything I hadn't already successfully edited had any effect. The font colors won't change, the table backgrounds and borders are nonexistent no matter how I edit them, etc.

All that was to say that if someone who knows a bit more than me would be so kind as to take a look to see what's the problem, I would be most appreciative. Clearly something is missing, conflicting, or just plain wrong, but I've spent several hours trying to figure it out with no success, so at this point I must turn to someone else's expertise.

Thanks very much in advance.
 
#3
Nov 12, 2009 12:36 PM

Offline
Joined: Feb 2009
Posts: 151
To Terene ->

You forgot this curly brace (marked in red).
 
#4
Nov 12, 2009 12:46 PM
Offline
Joined: Aug 2009
Posts: 5
Ah, thanks a million! I wonder how I missed that—I checked that part four or five times, and even rewrote it. Well, at least it's all working now! I'm glad to know the error wasn't something more fundamental, which means I at least was doing something right. Thanks again.
 
#5
Nov 16, 2009 8:25 AM

Offline
Joined: Feb 2008
Posts: 2028
Is it possible to have multiple cursors on a list?, say when it hover overs a link it changes to the second one, but while it isn't over any link it's the first one?
 
#6
Nov 16, 2009 9:58 AM

Offline
Joined: Oct 2006
Posts: 508
Sephor said:
Is it possible to have multiple cursors on a list?, say when it hover overs a link it changes to the second one, but while it isn't over any link it's the first one?

Yep, just put the main cursor in the body and the secondary one in either 'a' or 'a:hover' :)
 
#7
Nov 16, 2009 10:39 AM

Offline
Joined: Feb 2008
Posts: 2028
Alright thanks. Tried that but it didn't seem to work before.
 
#8
Nov 17, 2009 3:13 PM

Offline
Joined: Aug 2009
Posts: 61
where do i go on advanced css and what do i put so i can put this as my title above the list



 
#9
Nov 17, 2009 3:18 PM

Offline
Joined: Aug 2008
Posts: 2009
changeable-fate said:
where do i go on advanced css and what do i put so i can put this as my title above the list


#list_surround
{
margin-left:px;
width:px;
padding-top: ;
padding-left: ;

padding-top:;
background-image: url(image url here);
background-repeat:no-repeat;
background-position:;
}
Though You'll have to fill in the other parts to what ever you want it at.
Modified by spineslayer, Nov 17, 2009 3:52 PM
 
Nov 17, 2009 5:15 PM

Offline
Joined: Aug 2009
Posts: 61
oh ty i hope you don't mind me asking alot more questions from time to time do you?:o



 
Nov 17, 2009 8:17 PM

Offline
Joined: Aug 2008
Posts: 2009
go for it ;)
 
Nov 18, 2009 3:36 PM

Offline
Joined: Aug 2009
Posts: 61
ok since i don't like advanced ccs cuase im bad at it>.>.... i would like help on "edit my profile"

i want my first and second rows to be purplish yet transparent(not the text) so i can see some of the white backround


if its to much to ask do u know what t o put for these? just the ones i need for the purple

Text Color
Background Color
Font Size
Font
Padding
Border Style
Border Width
Border Color


Alternating RowRow 2 Properties
Text Color
Background Color
Font Size
Font
Padding
Border Style
Border Width
Border Color
Modified by changeable-fate, Nov 18, 2009 3:41 PM



 
Nov 19, 2009 6:03 PM

Offline
Joined: Aug 2008
Posts: 2009
You will have to make it semi-transparent background for your rows. Like what I did for mine, here. So you'll have to use CSS for this to place an image on your list. Which cannot be done in "edit my list". As far as getting it to be alternating someone else will have to help you with that.
Taking it from experience, when I first started out I had no clue what I was doing and it would be best for you with filling in the rest would be trial and error. You can also pick up some examples by right clicking on somebodies anime/manga list> then click on "view page source". This will give you the CSS of their list. It can be used to see what others have put into for certain widths, paddings, font size, ect.

Here is a quick reference from Ranivus's tutorial... which is great for beginners, so I would check out his tutorial if I were you.
Modified by spineslayer, Nov 19, 2009 6:22 PM
 
Nov 20, 2009 1:52 PM

Offline
Joined: Aug 2009
Posts: 61
ohh ty so much i've been wondering how to do that now i'll have a great example:]

also since im an amature i forgot how to make a new css (a new one) and delete my others can i ask for help?

also i can't make any backround big enough for my animelist:[ how do i do that?
like everytime i upload it on photoshop it crops it really small so it's not the sice its suppose to be

ex: i want this img to be big enough for the full thing..


and sometimes when i get img's urls for my backround it goes away after awhile or won't show up at all so i need help finding a provider where i can upload it's original size and so it won't go away.
Modified by changeable-fate, Nov 23, 2009 8:32 PM



 
Nov 28, 2009 1:24 AM

Offline
Joined: Jul 2009
Posts: 560
This doesn't really have to do with anything about making a list, as I already have a made list...but its more about uploading.
So, I've managed to upload my anime list very nicely, but I'm having trouble uploading my manga list. Whenever I try to upload it the anime list I created is used for the manga list aswell. I don't know how to upload them seperately and not have the same list design for both anime and manga. I've been playing around with the site for about 30 mins and I still can't find it; it would be a big help if you could tell me how.

Thanks a trillion in advance!

 
Nov 28, 2009 5:51 PM

Offline
Joined: Aug 2008
Posts: 2009
@Yamine
Go to Edit My Profile> My List Style Tab> Change My List Style> Then select your seperate list for anime or manga list> Then hit Change List Styles.

@changeable-fate
In photoshop, when you open an image in photoshop it usually condenses the image so you can see the whole thing, But it doesn't actually resize the image. If you want to view the actual size go to view tab> select actual pixels.

Now if you want to change the size of the actual image you go to Image tab> Image Size> change whatever pixel dimensions for width and height> then click OK.
*Though remember if you do decide to make an image bigger by resizing it, the pixels will become distorted.

I use Imageshack which keeps the size of the image you upload.
Modified by spineslayer, Nov 28, 2009 6:14 PM
 
Dec 11, 2009 9:13 PM

Offline
Joined: Aug 2009
Posts: 81
So i was toying abit with anime list,got headers and background.Now something that for me is completely imposible to gues how to do it:is there some command to set opacity of the list or only option for transparent/solid color?
 
Dec 11, 2009 10:00 PM

Offline
Joined: Aug 2008
Posts: 2009
@Myrwyss- You will have to create a semi-transparent background with the opacity you want it at then place it as the background image.

Here is my semi-transparent background for my list as an example:


Places you then need to place are at: .td1 .td1:hover .td2 .td2:hover and .table_header

For example, here is mine:

*make sure your background-color: ; is left like this.
**Also make sure you make the width to whatever size you made your list... I see you made it to 600 pixels so make it to that size. Since it's the same width as mine, you could just use the same dimensions I used.
***If you want to have a different color semi-transparent table header like you have in your list... you will have to make separate one for your .table_header
Modified by spineslayer, Dec 11, 2009 11:22 PM
 
Dec 12, 2009 9:43 AM

Offline
Joined: Aug 2009
Posts: 81
Ok,thanks alot for help,will try that then:D
 
Dec 14, 2009 6:29 PM

Offline
Joined: Mar 2008
Posts: 1007
Wondering if anyone had any clue why my cursor is not showing outside of the list?

I checked the code from lists with cursors always on, and kinda applied the same thing to mine, but it's still not showing up correctly :/
I'm not familliar with CSS at all, so I don't really know what to do, that's why any help would be appreciated :D

Also wondering if there was a good tutorial on how to do overlay lying around somewhere...
 
Dec 14, 2009 8:59 PM

Offline
Joined: Oct 2006
Posts: 508
@Dust2Dust: I guess the the way the list is positioned sometimes affects the cursor; for your particular list, try removing 'position: absolute;' and 'right: 10px;' from 'div#list_surround' replace them with 'margin: 80px 20px auto auto;' (or your choice of top, right, bottom, & left margin). See if that helps.
 
Dec 14, 2009 10:35 PM

Offline
Joined: Mar 2008
Posts: 1007
Yep, that worked nicely! Thanks a lot for your help!

Now I need to learn more about overlay : )
 
Dec 16, 2009 11:18 PM

Offline
Joined: Aug 2008
Posts: 2009
It would be nice if somebody could make a CSS tutorial for overlays. Because I am too new with this.

Hint Hint towards scorpedo :D
 
Dec 17, 2009 9:32 PM

Offline
Joined: Oct 2006
Posts: 508
Heh :P

My method to use overlays involved sacrificing the 'grand totals' so that I have an image overlay instead. I recently saw Spawwvy's great list who is using an even better method that won't sacrifice any section if you wan't to check his out.

I'm not a CSS pro but I might get around to making a tutorial eventually.
For now, a few tips:
Regardless of how you do the overlay, you won't be able to click links if the overlay image is covering them (even the transparent part of the image). You will either have to:
1. Try and keep the overlay image small so it doesn't cover too much of the list, or
2. Make use of CSS's 'z-index' property and have clickable links on top of the overlay like my list does. (ie. give the 'a { }' CSS rule a z-index higher than the overlay rule)

If you have Firefox, i recommend the Firebug add-on. When you want to test small changes in your list's CSS, you can tweak the code and see how it changes your design instead of constantly re-uploading all the code to MAL.
 
Dec 19, 2009 10:12 AM
Offline
Joined: Aug 2009
Posts: 5
I am no expert by any stretch of the imagination (my current lists represent my first attempt at CSS), and I definitely don't have the graphics skills some of you people do, but I managed an overlay for my manga list. (Kindly ignore how pathetically sparse and yaoi-infested the content is if you do take a peek.) I made my overlay the background image for the copyright section. Spawwvy's method that scorpedo mentioned is much snazzier, though, but I just thought I'd throw another example and method out there.

My list also demonstrates the impossibility of clicking links covered by the overlay, all for the sake of a couple falling petals. I should probably sacrifice the petals for the sake of clickability, but I'm stubborn like that.
 
Jan 24, 2010 6:07 AM

Offline
Joined: Jul 2009
Posts: 421
EDIT: never mind.
Modified by poketonip, Jan 24, 2010 6:24 PM
 
Feb 16, 2010 3:14 AM

Offline
Joined: Feb 2008
Posts: 2028
hm...couldn't find it the guide thought there was something for it there since i haven't looked at it in a while. But i was wondering if it is possible to use one large image for the background of the anime list.
Rather then have it use a small portion of the image for each entry.. This possible?, looked terrible when i tried using a image with certain design/marks on them, since it just repeated same part over and over again. Maybe i missed something somewhere, it's my first time using a image for the background of my list that has designs/marks in it. Since i usually just used one plain color.
 
Feb 18, 2010 12:26 PM

Offline
Joined: Aug 2009
Posts: 80
Can someone please tell me how to add an image on top of the categories menu (Show all/watching/completed, etc...)? I can't figure it out for the life of me. xD
 
Feb 19, 2010 8:40 PM

Offline
Joined: Aug 2008
Posts: 2009
@Gamer4life - Add this bottom half to your list surround section. Though you may have to play around with the width and padding top pixels to fit your image perfectly how you want it.

#list_surround
{
margin: 0px 150px;
width: 600px;
padding-top: 200px;

background-image: url(your image url here);
background-repeat: no-repeat;
background-position: top center;
}
Modified by spineslayer, Feb 19, 2010 8:45 PM
 
Feb 19, 2010 11:44 PM

Offline
Joined: Aug 2009
Posts: 80
@spineslayer

Ah, so it was list_surround... makes sense. I greatly appreciate the help, thank you. ^.^
 
Feb 20, 2010 2:33 AM
Offline
Joined: Feb 2010
Posts: 3
my question is, what program do people use when making their sig? i really want to try to make one. Thanks
 
Feb 20, 2010 6:07 AM

Offline
Joined: Jul 2009
Posts: 421
We use photoshop, but you can also use GIMP or even Paint (can you?). If you want a php sig, now that's a different thing. It's complicated.

Plus you're on the wrong topic. lol.
 
Mar 5, 2010 9:09 AM
Offline
Joined: Jan 2009
Posts: 1
Hi guys! I have a question. :)

How to turn the tabs in images? I want to use specials image with "Currently Watching", "Completed" etc. and with direct link (&status=1 etc.).

Example:



Thank you in advance! :D
 
Dec 22, 2010 5:42 AM

Offline
Joined: Feb 2008
Posts: 2028
Pretty big bump. But i didn't feel like making a new thread. So i was wondering if it was possible to split lists, so say watching and on-hold would be on the left side and completed, dropped on the right side, and plan to watch in the bottom middle.

Thread doesn't seem very active....;_;... Or people don't want to share how to do things to noobs....
Don't even know if there is a newer thread for these questions.
 
Dec 24, 2010 11:01 AM

Offline
Joined: Oct 2008
Posts: 223
Sephor said:
Pretty big bump. But i didn't feel like making a new thread. So i was wondering if it was possible to split lists, so say watching and on-hold would be on the left side and completed, dropped on the right side, and plan to watch in the bottom middle.

From having a glance at the html code, I couldn't see anything that we can identify each of the different tables by (no ids or classes) so looks like its not possible.
 
Mar 2, 2011 4:39 AM

Offline
Joined: Apr 2010
Posts: 206
On my Anime list I have background images for headings, most of them work but the last two sections "plan to watch and dropped" display no image. Below is part of the css script.
Thanks for any responses;
(p.s. how do you hide/show the plan to watch/dropped sections of the list? thanks again!)

.header_drop {
background-image: url('http://img580.imageshack.us/img580/5271/droppedc.png';);
background-repeat: no-repeat;
background-attachment: scroll;
}

.header_completed {
background-image: url('http://img138.imageshack.us/img138/6858/completedg.png';);
background-repeat: no-repeat;
background-attachment: scroll;
}

.header_onhold {
background-image: url('http://img153.imageshack.us/img153/5717/onholdp.png';);
background-repeat: no-repeat;
background-attachment: scroll;
}

.header_pwt {
background-image: url('http://img153.imageshack.us/img153/2200/plan2watch.png';);
background-repeat: no-repeat;
background-attachment: scroll;
}


 
Mar 2, 2011 7:45 AM

Offline
Joined: Oct 2008
Posts: 223
The header class for dropped is .header_dropped not .header_drop.

Plan to watch is also .header_ptw.
 
Mar 2, 2011 10:19 AM

Offline
Joined: Oct 2010
Posts: 18
My issues are following:

* Can't change the Text Color on text "summaries" like these:
TV: 5, OVA: 0, Movies: 0, Spcl.: 0, Eps: 1,092, DL Eps: 0, Days: 0.00, Mean Score: 8.6, Score Dev.: 0.49
TV: 12, OVA: 1, Movies: 9, Spcl.: 3, Eps: 1, DL Eps: 0, Days: , Mean Score: 0.0, Score Dev.: 0
TV: 52, OVA: 5, Movies: 33, Spcl.: 5, Eps: 2,042, DL Eps: 0, Days: 0, Mean Score: 22.9, Score Dev.: 0.24

They are located Below the respective "completed" "watched" "plan to watch" and so on.
I need to change this colour since my background wallpaper is white in that general area so you can't see what it says.

* My background wallpaper repeats itself. Even tho i've put it on no-repeat.
I'm trying to get it so when you scroll, the background dosnt follow or move or change.
Like my friends animelist here: http://myanimelist.net/profile/Sleeperzzz
Compared to mine: http://myanimelist.net/animelist/Cornholio77
 
Mar 3, 2011 12:53 AM

Offline
Joined: Apr 2010
Posts: 206
iamnoone said:
The header class for dropped is .header_dropped not .header_drop.

Plan to watch is also .header_ptw.


thanks so much iamnoone
- code was generated from; so didn't know there were syntax errors http://www.blacktower.info/malhelp/

p.s. does anyone know who to make the background image look the same no matter the resolution?
Modified by kol2537, Mar 3, 2011 1:19 AM


 
Mar 5, 2011 2:03 AM

Offline
Joined: Oct 2008
Posts: 10
Hi,

I can't edit Advanced CSS File. I want to change my list style, but nothing changes in my advance css file. Is it somekind of a bug?
 
Mar 5, 2011 4:50 AM

Offline
Joined: Oct 2008
Posts: 10
Bug fixed. Site is just slower than it used to be. I just had to w8 longer.
 
Mar 5, 2011 8:44 PM

Offline
Joined: Mar 2009
Posts: 2096
Cornholio77 said:
My issues are following:

* Can't change the Text Color on text "summaries" like these:
TV: 5, OVA: 0, Movies: 0, Spcl.: 0, Eps: 1,092, DL Eps: 0, Days: 0.00, Mean Score: 8.6, Score Dev.: 0.49
TV: 12, OVA: 1, Movies: 9, Spcl.: 3, Eps: 1, DL Eps: 0, Days: , Mean Score: 0.0, Score Dev.: 0
TV: 52, OVA: 5, Movies: 33, Spcl.: 5, Eps: 2,042, DL Eps: 0, Days: 0, Mean Score: 22.9, Score Dev.: 0.24

They are located Below the respective "completed" "watched" "plan to watch" and so on.
I need to change this colour since my background wallpaper is white in that general area so you can't see what it says.

* My background wallpaper repeats itself. Even tho i've put it on no-repeat.
I'm trying to get it so when you scroll, the background dosnt follow or move or change.
Like my friends animelist here: http://myanimelist.net/profile/Sleeperzzz
Compared to mine: http://myanimelist.net/animelist/Cornholio77


To change the text color for the category "summaries" just look for where your CSS says:
.category totals {
}
And inside those brackets {} add color: #aaaaaa (change the aaaaaa to whatever your color value is)

About the background, I don't know where you put it on no-repeat, but in BODY {} you have nothing there where it says:
background-attachment: ;
background-repeat: ;
background-position: ;
Just replace those three lines with:
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top center;
(Can edit that "top center" to "top left" or whatever you want it to be.)
 
Mar 6, 2011 5:25 PM

Offline
Joined: Mar 2010
Posts: 122
Cornholio77 said:
My issues are following:

* Can't change the Text Color on text "summaries" like these:
TV: 5, OVA: 0, Movies: 0, Spcl.: 0, Eps: 1,092, DL Eps: 0, Days: 0.00, Mean Score: 8.6, Score Dev.: 0.49
TV: 12, OVA: 1, Movies: 9, Spcl.: 3, Eps: 1, DL Eps: 0, Days: , Mean Score: 0.0, Score Dev.: 0
TV: 52, OVA: 5, Movies: 33, Spcl.: 5, Eps: 2,042, DL Eps: 0, Days: 0, Mean Score: 22.9, Score Dev.: 0.24

They are located Below the respective "completed" "watched" "plan to watch" and so on.
I need to change this colour since my background wallpaper is white in that general area so you can't see what it says.

* My background wallpaper repeats itself. Even tho i've put it on no-repeat.
I'm trying to get it so when you scroll, the background dosnt follow or move or change.
Like my friends animelist here: http://myanimelist.net/profile/Sleeperzzz
Compared to mine: http://myanimelist.net/animelist/Cornholio77


To change the color of the category totals this is what you use:

.category_totals {
color: red;
//you may change the "red" to your preferred color;
}

To make the background "fixed" basically what you do is you add this to ur css:

body {
background-attachment: fixed;
}
Modified by Drize, Mar 7, 2011 7:06 PM
 
Mar 10, 2011 12:47 AM
Offline
Joined: Oct 2010
Posts: 9
At the moment, my list looks like this: http://myanimelist.net/mangalist/Estupratom

I would like the background image to stay fixed and only the list is mobile. The background is this: http://img696.imageshack.us/img696/3928/fundobasebn.jpg


And the moment I'm using this CSS:

 
Mar 10, 2011 12:56 AM

Offline
Joined: Mar 2009
Posts: 65246
Change the Background-Attachment to 'fixed'.
 
Mar 11, 2011 11:20 PM
Offline
Joined: Oct 2010
Posts: 9
this way?


{
color:#DBDBDB;
border:0;
font-family:Verdana;
font-size:12px;
font-weight:normal;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
body {
background:#181818 url(http://img197.imageshack.us/img197/9566/fundobase2.jpg) repeat-y scroll center bottom;
}
#list_surround {
background:#181818;
border-bottom:1px solid #292929;
border-left:1px solid #292929;
border-right:1px solid #292929;
height:100%;
left:141px;
margin:239px auto 30px auto;
position:relative;
width:584px;
}
 
Mar 28, 2011 10:56 AM

Offline
Joined: Jan 2011
Posts: 3
Hi!
Sorry for my bad English.
I want to move the table down how and where to do it?

http://img692.imageshack.us/i/11665236.jpg
 
Mar 28, 2011 11:03 AM

Offline
Joined: Oct 2010
Posts: 1027
Hi there, I see your a fellow opera user :p

I don't think there is an option to move your table down.
 
Mar 28, 2011 11:18 AM

Offline
Joined: May 2008
Posts: 4069
@ StrikerSan: try adding this to your custom css style:

#list_surround { padding-top: 500px; }


I also recommend changing the background-attachment on BODY to scroll and not repeating the background:
BODY {
background-attachment: scroll;
background-repeat: no-repeat;
}
Modified by saka, Mar 28, 2011 11:22 AM

I am a banana.
 
Mar 29, 2011 4:15 AM

Offline
Joined: Jan 2011
Posts: 3
Thanks to all.
Ultimately decided not to kill the brain, and put the other wallpaper.

P.S
Supergrunt8 said:
Hi there, I see your a fellow opera user :p

I don't think there is an option to move your table down.


This is what is abnormal?
 
Top
Pages (11) [1] 2 3 » ... Last »