List Design Updated - Check It Out

saka said:
Wordpad? ...kill me now.

Get a text editor with syntax highlighting that cares about encoding...

saka said:

And yeah, you can use a lot of tricks to hide your code, like hex-encoding the @import url and hex-encoding the css itself (in a format like FF for each letter); that makes decoding difficult for non-techies but older or non-standard browsers will not be able to see your css (pretty much just IE and very old versions of other browsers).

MajorJoseph said:
I don't know if I'd call it difficult, as long as you can realise it's hex there are charts for people who don't know it already. More boring sifting through the hex than difficult, but I only know to decode it manually letter by letter.

MajorJoseph said:
Back to lists, is there a way to put a border around each category?(cw,completed, ptw, oh, dropped). Could try to border the headers and the category footers but bordering the sides of .td1 and .td2 will produce borders inside.

/* style all rows -- each row is a table for some reason*/
#list_surround table
{
border-left: 1px solid #0f0;
border-right: 1px solid #0f0;
}
/* ...but not the category headers or top links */
#list_surround table[align=center]
{
border: 0;
}

/* some really basic styles on the headers and category totals, you'll probably have image backgrounds instead */
.header_title { border-bottom: 1px solid #0f0; }
.category_totals { border-bottom: 1px solid #0f0; }

saka said:
The best way is to make your own borders in photoshop and set the images as backgrounds to the headers and .category_totals which I think is what you're going for. The tricky part is the inner cells, since I assume you only want an outside border.... I think the only way to style just the cells and not the headers is to use a "style them all then ignore the headers" approach like I did in the row hover css a couple pages back. Something like this:


...that'll put a green border around each category. Of course, you can substitute images for the table borders instead by using background: url(...) repeat-y; in the cells and a carefully sized slice from photoshop or your image editor of choice.

#list_surround table
{
border-left: 1px solid #0f0;
border-right: 1px solid #0f0;
}

#list_surround table tbody tr td[width="30"]
{
border-left: 1px solid #fbba3c;
}

#list_surround table tbody tr td[width="70"]
{
border-right: 1px solid #fbba3c;
}

.header_cw
{
height:70px;
position:relative;
top:20px;
z-index:-1;
background-image:url(http://i299.photobucket.com/albums/mm319/Oresound/animanga%20list%20design/watch.png);
}

.header_cw
{
background-image:url(http://i299.photobucket.com/albums/mm319/Oresound/animanga%20list%20design/watch.png);
height: 60px;
background-position: top;
}

.header_title
{
display: none;
}

.header_title div
{
display: none;
}

.header_title
{
display: none;
}

.header_title div
{
display: inline;
}

#searchBox
{
background-color: #000000;
color: #fbdd1d;
border: 1px solid #fbba3c;
}

saka said:
huh? ...you can hide the button no problem with a display:none and the form still works (using Enter). Still, I think it's fine the way it is and should stay there for usability. You can probably even change the image if you're clever.

saka said:
Looking at it again, replacing the image link really is not possible, since he used just an image with an id tied to some javascript. If he'd used a link around the image (the standard way), it would be trivial. *facepalm*

I tried using :before and absolute positioning to put another image over the magnifying glass. It worked, but you lose the link which is the whole point.

#list_surround
{
background-color: #ffffff;
}

.header_completed, .header_onhold, .header_dropped, .header_ptw
{
margin-top: -12px;
}

#copyright {
background: url(http://path.to/your/image.png) no-repeat top center;
padding-top: 250px; /* the height of your image, whatever it is */
padding-bottom: 550px; /* if you want space underneath still */
}

scorpedo said:
you might be looking at the anime instead of manga list saka :X

scorpedo said:
@Moony: Looks very good :) and the grand totals should be back in the future.

Yves said:

@ Moony: Possibly the most stylish anime list I've ever seen. I like the sort of 3D effect your list has where it seems like it's floating a few inches above the bg. What's the name of the font that you use for the headers?