Ok after months and months of the same old list look...it's still the same! LOL. What can I say, I like the style and how the colors go with the wallpaper. Well I ended up wasting a Sunday afternoon/evening on this, tweaking the list so it looks nicer.
I actually played with the CSS feature and I think it turned out ok, considering I don't know CSS, html, or any coding for that matter. I ended up browsing all the entries in the MAL awards thread. Then when I found something I liked, I right click viewed source and scanned the code. After that I'd copy and paste into my CSS, fiddling with the colors and some of the other variables. Took a while with trial and error to figure what changed what. I think that's where I wasted most of my time.
Here's what I did (you can skip this paragraph if your not interested): I fixed the list by locking it to the width of the webpage, so if you maximize the browser, the list is no longer covering her face. I added some text boxes arounds the totals, so you can actually read them now. I also found and inserted the code so you can read what's in the boxes when you hover over score, rated, etc... I originally used a template for the style and I think it was made before they added those boxes so it wasn't included in my original list. I still need to find out how to make it so those tools tip boxes fit the text, instead of stretching all the way to the right. I changed the opacity of the main anime title bars, so you can't see through them. Also I changed a few text colors here and there.
I even made an easy title bar for the currently viewing, completed, etc... bars. I borrowed the idea of using an icon in the corner from tangellofello's list. Ended up taking a picture from a Credit page of the manga that the wallpaper is from. Then using a free photo software to change the color from pink to black(I think I went grayscale and adjusted the brightness). Next I used IRFanView to shrink it and add the bar extension using canvas resize. In either the left or right box, you have to take the width of the icon, then input the number that adds up to the total width of your list (You can adjust the width of your list under Profile>Edit>My List Settings). Lol, finally I used MS Paint to touch up the Ying Yang sign which had sorta disappeared when I shrunk it. If only I had Photoshop & knew how to use it, I could have done all that with one program instead of three. I'm thinking about getting a photoshop like program, so I could maybe put some characters from the manga in an overlay on the title bar. I just have no clue how to cut out a character from the background. Maybe use the eraser feature, but that would take forever. Also I think I'd like to make the currently viewing text, larger and with a more interesting font, maybe a cursive one.
All in all I'm happy with it. The only thing that bugs me about it, and it may just be my computer, but I've noticed some little white lines on the title bars (the ones that I made) appear after a while. Also some black lines on my panel/profile screens above the big green bar. Both of these disappear if hit cntrl+F5. So I wonder what they could be. Anyone else experience this? Or am I just crazy?
Update:
I changed the opacity of individual elements, changed the fonts in the header bars, and added a highlight bar. If anyone wants to know how I did a specific thing or what code is used for a certain feature in my list, feel free to ask.
 |
ngarngar | Sep 8, 2007 12:53 PM
i like it what u did in ur animelist...
|
 |
kio | Jun 4, 2007 4:44 PM
Thanks for the suggestion! I've tried it before, but cuts off a bit of the picture, and I figured if your bothering to look at the rest of the list (it's long) then the background isn't as important. Maybe if I resize the background properly, I'll re-enable the fixed background option. I'm curious if I can change the opacity for the different lists, like I could keep the currently watching at 80 and set the rest at 100. That way if you do look at the other parts it will be a little bit easier to read. |
 |
tainteddonut | Jun 4, 2007 3:53 PM
I like it. For a first time foray into CSS it looks great. One thing I'd suggest you do though is change background-attachment to fixed. This will make it so that your wallpaper doesn't scroll off the screen when people look at your longer lists like Plan to Watch and Show All.
|
|
kio | Jun 4, 2007 2:16 PM
On second thought, it maybe that my list only looks right at 1152x864 resolution. The wallpaper is a bit large at 1600x1200 and 224KB, meaning it's no good for modem users (you poor souls!). I've tried resizing the wall paper in the past, but I didn't like the placement of the picture in relation to the list. Right now the woman frames the list nicely on the right side, but with a smaller resolution she shifts more towards the middle. So what I ended up doing was compressing the pic down from 429KB to it's current size. I'm afraid if I go any lower it will really look bad. I just checked out the compressed pic at different resolutions and it already doesn't look that great (you can see lots of errors at the lower resolution where the picture is much larger). I suppose I could try cropping the original to reduce it's file size, but that's gonna take some trial and error, until I can find the right placement of her.
|