[CSS] Hahaido&#039;s tips to stylize your layout

Offline

Jan 2012

1578

It isn't. But check up your CSS:

#list_surround:nth-of-type(1n+4) tbody:hover .animetitle
{
display: block !important;
background-position: right !important;
background-repeat: no-repeat !important;
background-size: 225px 320px !important;
position: relative: !important;
margin-right: 100px !important;
}

Must be:

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle
{
display: block !important;
background-position: right !important;
background-repeat: no-repeat !important;
background-size: 225px 320px !important;
position: relative: !important;
margin-right: 100px !important;
}

May 24, 2012 2:05 AM

#5

Hinaya

Offline

Jan 2012

135

Done!!!!! Just final tweaks before i start experimenting over the next edits!

HinayaMay 24, 2012 2:25 AM

May 24, 2012 3:03 AM

#6

Offline

Jan 2012

1578

Also you may use:

.td1 small, .td2 small
{
display: none !important;
}

to remove "Airing" and "Rewatching" titles, which break the elements aligning.

HahaidoMay 24, 2012 3:28 AM

May 27, 2012 5:19 AM

#7

Offline

Jan 2012

1578

Hint 3. Extra fonts

* if new font is too small or big to resize it:

font-size: 14px; /* change the value in px for best result */

* if the characters of the new font are too thin or thick to change it weight:

font-weight: normal; /* also use bold, bolder, lighter or numeric equivalent from 100 to 900 instead of normal */

P. S. all users who view your list will be able to see the fonts that you use

HahaidoAug 30, 2012 1:50 AM

May 27, 2012 10:50 AM

#8

Offline

Feb 2010

12631

Hahaido said:
Hint 3. Extra fonts

* if new font is too small or big to resize it:

font-size: 14px; /* change the value in px for best result */

* if the characters of the new font are too thin or thick to change it weight:

font-weight: normal; /* also use bold, bolder, lighter or numeric equivalent from 100 to 900 instead of normal */

If someone viewing my page doesn't have the font installed on their computer, will they be able to see the font anyways?

May 27, 2012 12:04 PM

#9

Offline

Jan 2012

1578

Of course! That feature is provided by font-face. Example CSS:

@font-face
{
font-family: 'font_name';
font-style: normal;
font-weight: 400;
src:
local('font_name'),
url('path_to_font') format('font_format');
}

This code is checking your system for a font installed. If you don't have then it download a font.
First I wanted to make a hint how to use font-face. But I've decided that using a special service is much easier way.

HahaidoMay 27, 2012 12:24 PM

May 29, 2012 3:19 AM

#10

Offline

Feb 2010

12631

Hahaido said:
Of course! That feature is provided by font-face. Example CSS:

@font-face
{
font-family: 'font_name';
font-style: normal;
font-weight: 400;
src:
local('font_name'),
url('path_to_font') format('font_format');
}

This code is checking your system for a font installed. If you don't have then it download a font.
First I wanted to make a hint how to use font-face. But I've decided that using a special service is much easier way.

Wow it really worked! Thanks. I'm using a couple of your tips for a Touhou layout. I've always wanted one in this club.

May 31, 2012 2:29 AM

#11

Offline

Feb 2010

12631

When I use Tip 1 with an anime title CSS hover (like on my current anime list), is there a way for you to move the text part of the title above the pic, instead of in the middle, and without disturbing the pic?

for example:

May 31, 2012 10:07 AM

#12

Hinaya

Offline

Jan 2012

135

Ano san, I'm not a CSS code expert but I didn't like the fact that the name of the anime overlaps the cover pic in your list. I compared it with mine but the pic and the name were apart. Your whole list was great but that overlapping didn't seem right with such a classy design. I apologize priorly if you don't like me making a remark on your design ^_^"

May 31, 2012 11:44 AM

#13

Livin in the 90s

Offline

Jan 2011

75

I like the idea of having the covers with the list, but like Hinaya says the overlapping is not for me. I do want to ask if theres a way to, instead of having the covers appear on the line with the title, can the covers appear in a fixed position elsewhere? like for example off the list and apart of the background as you scroll down.
I'm making a new list, and I wanted to ask ahead of time so you guys have time to ponder about it. :]
As always thanks for your help.

May 31, 2012 12:48 PM

#14

Offline

Jan 2012

1578

LordSilen said:
I do want to ask if theres a way to, instead of having the covers appear on the line with the title, can the covers appear in a fixed position elsewhere?

Something like this?

Shishio-kun said:
When I use Tip 1 with an anime title CSS hover (like on my current anime list), is there a way for you to move the text part of the title above the pic, instead of in the middle, and without disturbing the pic?

At the moment I don't know how

May 31, 2012 1:04 PM

#15

Livin in the 90s

Offline

Jan 2011

75

Hahaido said:

LordSilen said:
I do want to ask if theres a way to, instead of having the covers appear on the line with the title, can the covers appear in a fixed position elsewhere?

Something like this?

Yeah, is it easy to position? I'm not done editing my list enough, to add this yet, but at least I know its possible. thanks!

Jun 1, 2012 1:39 AM

#16

Offline

Feb 2010

12631

Hinaya said:
Ano san, I'm not a CSS code expert but I didn't like the fact that the name of the anime overlaps the cover pic in your list. I compared it with mine but the pic and the name were apart. Your whole list was great but that overlapping didn't seem right with such a classy design. I apologize priorly if you don't like me making a remark on your design ^_^"

Its because you have enough list width, but if you get an anime with a really long name it might overlap but that won't happen. Whats does ano san mean?

Jun 1, 2012 1:41 AM

#17

Offline

Feb 2010

12631

Hahaido said:

LordSilen said:
I do want to ask if theres a way to, instead of having the covers appear on the line with the title, can the covers appear in a fixed position elsewhere?

Something like this?

Shishio-kun said:
When I use Tip 1 with an anime title CSS hover (like on my current anime list), is there a way for you to move the text part of the title above the pic, instead of in the middle, and without disturbing the pic?

At the moment I don't know how

Its ok, I found some ways, and got some cool varying styles to go with this Touhou premade!

btw can I have the code you fixed the image with? It seems like with hover you'd get the flickering if you moved it out there.

Jun 1, 2012 2:25 AM

#18

Offline

Jan 2012

1578

Shishio-kun said:

btw can I have the code you fixed the image with? It seems like with hover you'd get the flickering if you moved it out there.

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle span
{
display: none !important;
}

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle
{
display: block !important;
background-repeat: no-repeat !important;
background-size: 180px 256px !important;
position: relative !important;
margin-top: 4px !important;

width: 180px !important;
height: 256px !important;
margin-left: auto !important;
margin-right: auto !important;
}

tr:hover .td1, tr:hover .td2
{
filter: alpha(opacity=100) important;
-moz-opacity: 1 !important;
opacity: 1 !important;

background-color: #FFFFFF !important;
line-height: 295px;
}

HahaidoJun 3, 2012 12:08 AM

Jun 2, 2012 8:06 PM

#19

Livin in the 90s

Offline

Jan 2011

75

Ok, I installed it and the covers show, kinda. the cover seems to be obscured because it appears within the text space? So it appears to highlight the anime title for some reason.
Also how did you separate it from the list and affix the cover art somewhere else. I wanted to be able to place the cover in one fixed position.
The list:
http://myanimelist.net/animelist/LordSilen&status=1&order=0
Heres my whole code,
(your code specifically is just before the "#list_surround .status_selected" text block.)

Beware though its really messy due to recent customization.

_SilenJun 2, 2012 8:13 PM

Jun 3, 2012 12:21 AM

#20

Offline

Jan 2012

1578

LordSilen said:
the cover seems to be obscured because it appears within the text space?

Add to your CSS:

.animetitle
{
background-size: 0px 0px;
width: 0px !important;
height: 0px !important;
}

Edit following code:

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle
{
display: block !important;
background-repeat: no-repeat !important;
background-size: 180px 256px !important;
position: absolute !important;
margin-top: 4px !important; // Insert your value

width: 180px !important;
height: 256px !important;
margin-left: 786px !important; // Insert your value
}

Shishio-kun said:
When I use Tip 1 with an anime title CSS hover (like on my current anime list), is there a way for you to move the text part of the title above the pic, instead of in the middle, and without disturbing the pic?

I've found the way out!

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle:before
{
display: block !important;
content: ' ';
width: 100% !important;
height: 50% !important;
}

Preview:

HahaidoJun 3, 2012 2:02 AM

Jun 3, 2012 12:55 AM

#21

Offline

Feb 2010

12631

Hahaido said:

Shishio-kun said:
When I use Tip 1 with an anime title CSS hover (like on my current anime list), is there a way for you to move the text part of the title above the pic, instead of in the middle, and without disturbing the pic?

I've found the way out!

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle:before
{
display: block !important;
content: ' ';
width: 100% !important;
height: 50% !important;
}

Preview:

Wow I love that, just in time it should be useful for new premade layouts. Is there a way to move it to the top? I have my own methods but yours is much simpler and should be less prone to bugs.

Shishio-kunJun 3, 2012 1:30 AM

Jun 3, 2012 1:28 AM

#22

Livin in the 90s

Offline

Jan 2011

75

Hahaido said:

LordSilen said:
the cover seems to be obscured because it appears within the text space?

Add to your CSS:

.animetitle
{
background-size: 0px 0px;
width: 0px !important;
height: 0px !important;
}

Edit following code:

#list_surround:nth-of-type(1n+4) tbody:hover .animetitle
{
display: block !important;
background-repeat: no-repeat !important;
background-size: 180px 256px !important;
position: absolute !important;
margin-top: 4px !important; // Insert your value

width: 180px !important;
height: 256px !important;
margin-left: 786px !important; // Insert your value
}

Shishio-kun said:
When I use Tip 1 with an anime title CSS hover (like on my current anime list), is there a way for you to move the text part of the title above the pic, instead of in the middle, and without disturbing the pic?

I've found the way out!

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle:before
{
display: block !important;
content: ' ';
width: 100% !important;
height: 50% !important;
}

Preview:

Strange, when i edited it like you said, none of the covers show anywhere, on or off the list. Sorry if i'm just failing to notice something obvious, this code is a little beyond my understanding.

Jun 3, 2012 1:33 AM

#23

Offline

Jan 2012

1578

Shishio-kun said:

Is there a way to move it to the top?

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle:before
{
display: block !important;
content: ' ';
width: 100% !important;
height: 5% !important;
margin-bottom: -95% !important;
}

LordSilen said:

Strange, when i edited it like you said, none of the covers show anywhere, on or off the list.

#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle
{
display: block !important;
background-repeat: no-repeat !important;
background-size: 180px 256px !important;
position: absolute !important;
margin-top: 10px !important;

width: 180px !important;
height: 256px !important;
margin-left: 786px !important;
}

HahaidoJun 3, 2012 2:01 AM

Jun 3, 2012 9:15 AM

#24

Livin in the 90s

Offline

Jan 2011

75

No luck, its same as before.
Are the covers trying to display one the left side of the list? if so it would go off screen since my list in on the extreme left.
heres the code i have in there.

every time i put in "#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle" it reverts back to "#list_surround:nth-of-type(1n+4) tbody:hover .animetitle"?

_SilenJun 3, 2012 9:24 AM

Jun 3, 2012 11:32 AM

#25

al_exs

Offline

Apr 2012

181

LordSilen said:
No luck, its same as before.
Are the covers trying to display one the left side of the list? if so it would go off screen since my list in on the extreme left.
heres the code i have in there.

every time i put in "#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle" it reverts back to "#list_surround:nth-of-type(1n+4) tbody:hover .animetitle"?

I recomend you to use all the script in the dropbox, and use import lines, cuz this is one of the problems I found when using the MAL css box, some codes can't save right, and with the css in your dropbox you can modify the code in notepad(I use Notepad++) and save it, and reload the page to see the changes, its much easier and faster than have the theme code in css box in MAL.

Jun 3, 2012 12:36 PM

#26

Offline

Feb 2010

12631

LordSilen said:
No luck, its same as before.
Are the covers trying to display one the left side of the list? if so it would go off screen since my list in on the extreme left.
heres the code i have in there.

every time i put in "#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle" it reverts back to "#list_surround:nth-of-type(1n+4) tbody:hover .animetitle"?

If you find the codes change its because MAL filtered them out on save with the CSS edit box. You have to import those codes. It filters out some specific words completely ("script" is one I believe). Some get by when you add \ to the underscore but on their second save the \ are removed.

Jun 3, 2012 2:45 PM

#27

Livin in the 90s

Offline

Jan 2011

75

ahhh, ok i get it now. I knew that you could import but i didn't really see the importance of it until now. Its weird that MAL would try to filter that.
It works now to try to separate the text and the cover if possible and move it over. time to fiddle with some numbers.
Thanks by the way al_exs i didnt realize that i could do that, :)
and to Hahaido for putting up with my ignorance.

Jun 24, 2012 10:57 PM

#28

Offline

Jan 2012

1578

Hint 4. Extra comments

Preview:

Code:

Download the NEW version of Covers Uploder

Follow the screenshot steps:

After the work is done upload an extracted CSS to Dropbox*. Or put directly into your CSS.

* - how to use Dropbox in tutorial. Or use any other file sharing service

HahaidoJun 26, 2012 1:24 AM

Jun 25, 2012 9:17 PM

#29

Offline

Jan 2012

1578

Hint 5. Aligning anime/manga titles (for the lists that have pictures instead of titles - see Hint 2. Put a cover image into a list line)

Code:

HahaidoJun 26, 2012 12:34 AM

Aug 28, 2012 4:56 PM

#30

Offline

Jul 2011

4463

For hint 2.
I tried something like this at the top when I watched to try different fonts, but it doesn't seem to work. Am I doing something wrong or can I only have 1 font?

@import url(http://fonts.googleapis.com/css?family=Life+Savers);
@import url(http://fonts.googleapis.com/css?family=Headland+One);

Everything with font family #1 works, but when I try "font family:Headland One;", I think it changes to Arial or some default font.

Aug 28, 2012 9:23 PM

#31

VeriTi

Offline

Nov 2011

304

@MM-Rosiie
You are allowed to use as many as you want (I'm using two in my WIP and it works in all browsers) so you're probably doing something wrong. Right now I don't see @import url(http://fonts.googleapis.com/css?family=Headland+One); in your code so I can't check what is wrong.

Aug 28, 2012 10:03 PM

#32

Offline

Jan 2012

1578

MM-Rosiie said:
For hint 2.

Lets leave questions about fonts and look at your code. The covers of anime titles are appearing below the titles. So, you miss the code:

that corresponds for the covers aligning and should be imported as well. To simplify the work with covers use CSS Generator

HahaidoAug 28, 2012 10:10 PM

Aug 28, 2012 10:55 PM

#33

al_exs

Offline

Apr 2012

181

Maybe if you add the quotes:

@import url("http://fonts.googleapis.com/css?family=Life+Savers");
@import url("http://fonts.googleapis.com/css?family=Headland+One");

at least for me your list works well when I add the quotes(Adding first the font and change Arial to Headline One in the header).

I don't really know, but I think that sometimes the font api did not work properly.

Aug 28, 2012 11:12 PM

#34

Offline

Jan 2012

1578

I think a font name below the 'import' section should be quoted: font-family: 'Headland One'

Aug 29, 2012 7:39 AM

#35

Offline

Jul 2011

4463

Thanks for the help.

Adding quotes doesn't seem to change anything though.

Hahaido said:

Lets leave questions about fonts and look at your code. The covers of anime titles are appearing below the titles. So, you miss the code:

Hm. I added that and it didn't do anything?

Aug 29, 2012 8:01 AM

#36

VeriTi

Offline

Nov 2011

304

@ MM-Rosiie
You won't see Headland One on sort links.
Somewhere in your code look for
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color: white;
font-family: Arial;
}
as you may see, at first a and a:visited selectors set the font to Arial, and at second .table_header is also set to Arial so it will override your Headland One code (because this piece is below), it's easily seen in Dragonfly or Firebug.

A simple solution if you don't care about code neatness would be:
.table_headerLink {
font-family: 'Headland One';
}

Aug 29, 2012 8:31 AM

#37

Offline

Jul 2011

4463

@VeriTi

Oh thanks!

How do I adjust text sizes (other than the header) though?

And for Hint 2.
I added the import link for my list,
@import url(https://dl.dropbox.com/u/101477602/animelist.css);
but there have been no visible changes - there's still no picture(at least on my computer).

And I've also tried to get rid of the overlapping of the picture and titles, but haven't been able to either (I've managed to have it overlap text on the right side now...)

Is there a way to stop it breaking between the anime title and "airing"? Even if I expand the list width (say to like 1000px), it still puts Airing on the bottom. Example:

MirorinAug 29, 2012 5:31 PM

Aug 30, 2012 1:06 AM

#38

Innocentius

Offline

Mar 2012

34

if i use this trick, will all users who view my list able to see the font i use? like those unusual fonts that not all users have it installed on their system?

Aug 30, 2012 1:47 AM

#39

Offline

Jan 2012

1578

Yes, I already answered

MM-Rosiie said:

Is there a way to stop it breaking between the anime title and "airing"?

Experiment with:

HahaidoAug 30, 2012 2:57 AM

Aug 30, 2012 6:28 AM

#40

Offline

Jul 2011

4463

@Hahaido:

It doesn't seem to be affecting it. Even if I put it to 0px, 1000px, -1000px, nothing changes.

And I'm still missing pictures for some of my titles, and I can't figure out why?

Aug 30, 2012 7:06 AM

#41

Offline

Jan 2012

1578

MM-Rosiie said:
@Hahaido: It doesn't seem to be affecting it. Even if I put it to 0px, 1000px, -1000px, nothing changes.

You should to import that code

And I'm still missing pictures for some of my titles, and I can't figure out why?

Bug in the program. Fixed. Download the program again and regenerate CSS

HahaidoAug 30, 2012 7:10 AM

Aug 30, 2012 10:03 AM

#42

Offline

Jul 2011

4463

Hahaido said:
You should to import that code

... uh I imported it to https://dl.dropbox.com/u/101477602/code.css but still not affecting anything.

Bug in the program. Fixed. Download the program again and regenerate CSS

This one is still not showing even after doing that though. (But the rest have.)

Aug 30, 2012 10:28 AM

#43

VeriTi

Offline

Nov 2011

304

@MM-Rosiie
To fix pic use text editor. Look for:
http://cdn.myanimelist.net/images/anime/4/37937.jpg
replace with:
http://cdn.myanimelist.net/images/anime/10/39429.jpg

Aug 30, 2012 11:13 AM

#44

Offline

Jan 2012

1578

MM-Rosiie said:

This one is still not showing even after doing that though. (But the rest have.)

In your source:

delete @import "http://dl.dropbox.com/u/78340470/animetitle.css"; line. And when importing a code delete 's' char in 'https'

HahaidoAug 30, 2012 11:17 AM

Aug 30, 2012 11:39 AM

#45

Offline

Jul 2011

4463

Deleted the import (and s's) and replaced the image link, but it's still the same with no picture.

Aug 30, 2012 5:07 PM

#46

Offline

Feb 2010

12631

uwinaako said:
if i use this trick, will all users who view my list able to see the font i use? like those unusual fonts that not all users have it installed on their system?

If you referring to Hint 3, I used it for the Touhou premade layout it works.

Aug 30, 2012 5:19 PM

#47

Offline

Feb 2010

12631

MM-Rosiie said:
Deleted the import (and s's) and replaced the image link, but it's still the same with no picture.

Is the CSS below one you created from an animetitle CSS generator? If so which generator, and did you add that title very recently?

@import "http://dl.dropbox.com/u/101477602/myanimelist.css";

Shishio-kunAug 30, 2012 5:26 PM

Aug 30, 2012 6:31 PM

#48

Offline

Jul 2011

4463

@Shishio-kun:

I probably added that anime the day it came out, so about the start of July. I created the CSS with the cover uploader (link provided in link 2).

Oh and I've also tried putting it directly into the CSS box and same result.

Aug 30, 2012 8:12 PM

#49

Offline

Feb 2010

12631

Shishio-kun said:

MM-Rosiie said:
@Shishio-kun:

I probably added that anime the day it came out, so about the start of July. I created the CSS with the cover uploader (link provided in link 2).

Oh and I've also tried putting it directly into the CSS box and same result.

OK. I ask cuz I think that it somehow missed that anime for some reason, or the CSS was made before you added that show to your list. Everytime you add a new show you need to update the generator CSS so its current from now on. Anyhow I made an updated file for you, hosted it from my dropbox (it will be there temporarily to see if this fixes it), and tested it out on your list and that show comes up. Just replace the top import lines and only that. Save your current code before you add these, then replace them with these and save, then see if it works. Give the list a second and refresh to make sure it had time to load the CSS and covers.

@import "http://dl.dropbox.com/u/78340470/CSSforCatgirls.css";
@import url(http://fonts.googleapis.com/css?family=Life+Savers);
@import url(http://fonts.googleapis.com/css?family=Raleway:100);
@import url(http://veriti.opendrive.com/files/OV81MjgxODdfcXZZMkg/mal_top_bar.css);
@import "http://dl.dropbox.com/u/78340470/MM-Rosiie_animetitle.css";

Also I took out two dead import links you had. Let us know here how this works out. The reason it didn't imo is the cover CSS you had were dead links and not for your specific anime titles, at least atm, but the one I added is for your covers. Also later you'll need to replace that import with your own anime title CSS later since I won't host forever, if you don't know how to replace it let us know and we'll show you. Phew!

Shishio-kunAug 30, 2012 9:48 PM

Aug 30, 2012 9:49 PM

#50