Forum Settings
Forums
New
Reply Disabled for Non-Club Members
Pages (2) « 1 [2]
Aug 30, 2012 10:17 PM

Offline
Jan 2012
1578
MM-Rosiie said:

And now to remove the break between the anime title and "airing". I've been testing it but to no avail.

Remember I gave the advice to you? That how does it works:

The code, again:

or just import my link to your CSS - http://dl.dropbox.com/u/78192465/MyAnimeList/CSS/Airing.css
HahaidoAug 30, 2012 10:20 PM
Sep 3, 2012 7:41 PM

Offline
Jul 2011
4463
@Hahaido:

After putting the code from your CSS link into a document and importing from my own dropbox:

(Though honestly, after a while I don't really mind it.)

@Shishio-kun:

I tried to update the pictures... but it reverted back to having no pictures (and the old pictures for some). I just take the generated CSS and, export it and link it. Yet it's not working. @_@

For now I'm using The .animetitle class from http://myanimelist.net/forum/?topicid=436031. Works like the one you gave me. (I think I'll try the #more CSS generator later)

Edit: -holds head- Now my background suddenly stopped working. Even when I change the URL it's a black screen. :A:
MirorinSep 3, 2012 8:36 PM
Sep 3, 2012 10:59 PM

Offline
Jan 2012
1578
MM-Rosiie said:

After putting the code from your CSS link into a document and importing from my own dropbox:

I love you, MM-Rosiie! Will you marry me? :P

Use following code instead of all your CSS and "Everything gonna be alright, everything gonna be ok..." (for Anime list):

If will not working you'll have to marry me!

P. S. you should to remember, each time you add new anime/manga into your list you have to regenerate CSS to show newly added anime/manga cover. If you're using Covers Uploader you need just generate CSS and choose the title you want (don't need to generate all CSS code again), then copy/paste the code you get into your CSS that contains your covers.
HahaidoSep 3, 2012 11:40 PM
Sep 4, 2012 8:57 PM

Offline
Jul 2011
4463
Sorry, but I already have a hubby (my Fuji). :P

I copied the CSS code into the edit box. The airing and covers are still not working. But if I use a premade .animetitle list from here then all the covers show up. I think my Covers Uploader has a problem or something? Maybe it's my computer. But I'll just use the premade one, since I've generated the covers list a bunch of times and it still isn't working.

And the airing thing... I don't care about it anymore. As long as I can see the covers I'm happy. XD

Thank you for all the help, Hahaido & Shishio-kun! Much appreciated.

Edit: Seems like I have the missing cover problem for the other picture layouts too. Tried the square layout and was missing like 4 pictures (and they were empty - they were suppose to be filled by a default picture. The default picture works on like 2, and the others are grey boxes...) Maybe some code just don't work with my computer?
MirorinSep 29, 2012 8:39 PM
Oct 26, 2012 1:10 AM
Offline
Jan 2012
135
The covers are not showing up in the new design even though I added the

part in the list, it won't work. However adding it to MAL box and then using firefug to type table in the line, it works. Possible errors and suggestions? I posted the preview here
Oct 26, 2012 1:50 AM

Offline
Jan 2012
1578
Hinaya said:
The covers are not showing up in the new design even though I added the

In your CSS following line:
#list_surround:nth-of-type(1n+4) tbody:hover .animetitle

must be replaced with:
#list_surround table:nth-of-type(1n+4) tbody:hover .animetitle

and entire section should be imported
Oct 26, 2012 4:49 AM
Offline
Jan 2012
135
Arigatou that worked ^_^
Nov 23, 2012 7:15 AM

Offline
Jun 2011
83
Hi! I finally figured out how to add the Covers thanks to your tutorials but I still am not sure of the code to move the title.. Like for one Chuunibyou demo Koi ga Shitai! goes right through the cover picture...

I got this code in your CSS generator:



but I have no idea what to do with it now.. I'm confused!
FrauKoujiroNov 23, 2012 7:21 AM
Duhuhu...
Nov 23, 2012 7:30 AM

Offline
Jan 2012
1578
TyrantsEye said:

but I have no idea what to do with it now.. I'm confused!

Hi there! The generated code should be placed on a file hosting service and imported into your CSS. Use Dropbox, for example (read the tutorial from the first post of this thread)

P. S. what anime on your avatar?
HahaidoNov 23, 2012 7:33 AM
Nov 23, 2012 8:19 AM

Offline
Jun 2011
83
Hahaido said:
TyrantsEye said:

but I have no idea what to do with it now.. I'm confused!

Hi there! The generated code should be placed on a file hosting service and imported into your CSS. Use Dropbox, for example (read the tutorial from the first post of this thread)

P. S. what anime on your avatar?


how can I import it into CSS? I downloaded Dropbox already and ive been reading posts but now i'm just confused and i'm not sure how i'm supposed to save the code or what i'm doing really, sorry i'm really new to

I uploaded the cover photo's and did that with no problem( I think) I don't know why i'm confused about this part o-O
the avatar is from Chuunibyou demo Koi ga Shitai!
FrauKoujiroNov 23, 2012 8:23 AM
Duhuhu...
Nov 23, 2012 12:40 PM

Offline
Apr 2012
181
1st.- Need an account on Dropbox, if you recently make one you need to enable the public folder with this link https://www.dropbox.com/enable_public_folder.

2nd.- paste the generated code in a plain text file(in Notepad, Notepad++) and save it as .css, and copy the file to the public folder of your Dropbox account.

3rd.- copy the link to the Advanced CSS editor in MAL into a import line.
@import "url.here"
Nov 23, 2012 1:18 PM

Offline
Jun 2011
83
al_exs said:
1st.- Need an account on Dropbox, if you recently make one you need to enable the public folder with this link https://www.dropbox.com/enable_public_folder.

2nd.- paste the generated code in a plain text file(in Notepad, Notepad++) and save it as .css, and copy the file to the public folder of your Dropbox account.

3rd.- copy the link to the [url=http://myanimelist.net/editprofile.php?go=stylepref&do=cssadv]Advanced CSS editor in MAL into a import line.
@import "url.here"


okay thank you! I will try that :-) so if I have the album cover code and then I make another code for the fix?
Duhuhu...
Nov 23, 2012 10:33 PM

Offline
Jan 2012
1578
TyrantsEye said:

so if I have the album cover code and then I make another code for the fix?

It would be better if you had one instance of code for a particular purpose. So, replace your previous code with a newly generated. Or add new lines into it
Dec 3, 2012 2:05 AM

Offline
Jan 2012
1578
I added list of the layouts that I made to the 1st post
Jan 5, 2013 10:00 PM

Offline
Feb 2010
12631
omh I love how you've organized the top post! This is extremely good.
Jan 5, 2013 11:06 PM

Offline
Jan 2012
1578
Shishio-kun said:
omh I love how you've organized the top post! This is extremely good.

Nothing special but thanks! If I had more time it would be much better!
Jan 5, 2013 11:43 PM

Offline
Feb 2010
12631
Hahaido said:
Shishio-kun said:
omh I love how you've organized the top post! This is extremely good.

Nothing special but thanks! If I had more time it would be much better!


A little at a time makes a big difference in the long run. This club took three years of small steps to get to where it is now, and finally soon adding videos to the front menu!
Feb 20, 2013 11:18 PM

Offline
Jan 2012
1578
Hint 6. Top bar menu guide


/* Top bar menu */
#mal_control_strip
/* Customizing properties*/
{
position: fixed !important; /* fixed - to fix the position of top bar menu; absolute - scrolling the menu with a page */
display: block;
/* Menu position */
left: 10px !important;
margin-left: 5px !important;
top: 20px !important;
margin-top: 15px !important;
/* Menu size */
width: 100px !important;
height: 50px !important;
/* Menu background */
background: rgba(0, 0, 0, 1) !important; /* If skip this property then default background will be displayed; none - to disable any backgrounds; url(link_to_image) - to display you own picture as a background */
}

/* Top bar menu all links*/
#mal_control_strip a

/* All links effects when mouse hovers on*/
#mal_control_strip a:hover

/* Using custom font settings. Will be applied to all menu links and text */
#mal_control_strip, #mal_control_strip a, #mal_control_strip td, #mal_control_strip td div {
font-family: 'font_name' !important; /* Your custom font */
color: #FFFFFF !important; /* Font color*/
font-weight: bold; /* Font weight */
font-size: 16px !important; /* Font size */
}

/* Username, Logout */
#mal_cs_listinfo
/* Username */
#mal_cs_listinfo strong a
#mal_cs_listinfo div:first-of-type
/* Logout*/
#mal_cs_listinfo div:last-of-type
#mal_cs_listinfo div a[href*="logout"]

/* Add to List, Home, Anime List, Manga List */
#mal_cs_links
/* Add to List */
#mal_cs_links div a[href*="addtolist"]
#mal_cs_links div:first-of-type a:first-of-type
/* Home */
#mal_cs_links div:first-of-type a:last-of-type
#mal_cs_links div a[href$="http://myanimelist.net"]
/* Anime List */
#mal_cs_links div:last-of-type a:first-of-type
#mal_cs_links div a[href*="animelist"]
/* Manga List */
#mal_cs_links div:last-of-type a:last-of-type
#mal_cs_links div a[href*="mangalist"]

/* History, Forum, Export, Log in, Create an Anime List, Learn more */
#mal_cs_otherlinks
/* History */
#mal_cs_otherlinks div a[href*="history"]
/* Forum */
#mal_cs_otherlinks div a[href*="forum"]
/* Export */
#mal_cs_otherlinks div a[href*="export"]
/* Log in */
#mal_cs_otherlinks div a[href*="login"]
/* Create an Anime List */
#mal_cs_otherlinks div a[href*="register"]
/* Learn more */
#mal_cs_otherlinks div a[href*="faq"]

Additions
HahaidoFeb 21, 2013 3:33 AM
Mar 31, 2013 11:25 PM

Offline
Jan 2012
1578
Hint 7. How to create own animation with cycling slideshow pictures



A starting visible part of your image must be identical to an ending hidden part

Images code

Animation code

Weather effects


First you need a pattern of any format, for example


Images code

Animation code
HahaidoApr 7, 2013 1:57 AM
Apr 29, 2013 5:42 AM

Offline
Jan 2012
1578
Hint 8. Category menu guide

/* Default state */
.status_not_selected a[href*="status=category_code"]
/* On mouse hover */
.status_not_selected a[href*="status=category_code"]:hover
/* Selected state */
.status_selected a[href*="status=category_code"]

select category_code from

1. Currently watching
2. Completed
3. On Hold
4. Dropped
6. Planned
7. All

Additions
HahaidoMay 8, 2013 3:42 AM
Jun 12, 2013 12:48 AM

Offline
Jan 2012
1578
Hint 9. SVG effects in CSS

Unfortunately it is impossible to use external SVG files on MAL because the file must be on the same server as HTML file. That is why we put SVG script into CSS:

Grayscale

for Firefox

filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg>#grayscale');
for Chrome

-webkit-filter: grayscale(100%);

Blur

for Firefox

filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="blur"><feGaussianBlur stdDeviation="3"/></filter></svg>#blur');
for Chrome

-webkit-filter: blur(3px);

Saturation

for Firefox

filter: filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="saturate"><feColorMatrix type="saturate" values=".5"/></filter></svg>#saturate');
for Chrome

-webkit-filter: saturate(.5);

P. S. Chrome is using its own property -webkit-filter. Firefox at the moment only can use SVG filters. You can't apply transition effects to SVG filters on mouse hover
HahaidoJun 13, 2013 12:18 AM
Jul 26, 2013 3:10 AM

Offline
Jan 2012
1578
Hint 10. Hide a scrollbar with saving scrollablity

A trick based on elements overlapping, when a parent element overlaps a child element. First you need move a scrollbar from body to #list_surround


#list_surround {
/* Fixed position list */
position: fixed;
/* List position */
left: #px;
top: #px;
/* List size */
width: #px;
height: #px;
/* Enable scrolling */
overflow-y: auto;
}


Next step is overlaping a scrollbar by parent element with a small patch


body:after {
position: fixed;
display: block;
content: '';
/* Position=scrollbar position */
left: #px;
top: #px;
/* Size */
width: #px; /* =scrollbar width (approximately 20px) */
height: #px; /* =list height */
background-color: ; /* List color */
}
HahaidoJul 26, 2013 3:16 AM
Dec 23, 2014 11:32 AM

Offline
Feb 2010
12631
http://myanimelist.net/forum/?topicid=443937&show=60#msg22700731

What is this for exactly? I don't know how to use it right. All it does is remove random parts of my layout.


I also wrote my own animated scrollbar with the tip here. Its fairly smooth in Chrome but stutters a bit in Firefox. Any tips on how I can smooth it out more for FF?
http://myanimelist.net/forum/?topicid=1329599
Shishio-kunDec 23, 2014 1:14 PM
Dec 23, 2014 11:20 PM

Offline
Jan 2012
1578
Shishio-kun said:
http://myanimelist.net/forum/?topicid=443937&show=60#msg22700731

What is this for exactly? I don't know how to use it right. All it does is remove random parts of my layout.

I have used some of that effects in this layout
https://dl.dropboxusercontent.com/u/78192465/MyAnimeList/Guilty%20Crown/Style.css


I also wrote my own animated scrollbar with the tip here. Its fairly smooth in Chrome but stutters a bit in Firefox. Any tips on how I can smooth it out more for FF?
http://myanimelist.net/forum/?topicid=1329599

I see you animated position property, I mean LEFT, RIGHT etc. Instead of that try to animate BACKGROUND-POSITION
Dec 24, 2014 12:18 AM

Offline
Feb 2010
12631
[quote=Hahaido]
Shishio-kun said:


I also wrote my own animated scrollbar with the tip here. Its fairly smooth in Chrome but stutters a bit in Firefox. Any tips on how I can smooth it out more for FF?
http://myanimelist.net/forum/?topicid=1329599

I see you animated position property, I mean LEFT, RIGHT etc. Instead of that try to animate BACKGROUND-POSITION


Ok thank you I tried that, but I still see the stuttering no matter what I try. Its very similar to when you're riding in a fast vehicle or train and there are those occasional bumps which you block out mentally. This is kinda the same thing, I don't notice it unless I look at it directly. I think its more a computer thing that a coding thing which can't be fixed.

Also under certain settings the animation will skip a huge amount over, like it started over. Any idea why that happens? I can't recreate the settings that do that (I'd like to know so I can advise against it).
Dec 24, 2014 3:15 AM

Offline
Jan 2012
1578
Shishio-kun said:
Ok thank you I tried that, but I still see the stuttering no matter what I try. Its very similar to when you're riding in a fast vehicle or train and there are those occasional bumps which you block out mentally. This is kinda the same thing, I don't notice it unless I look at it directly. I think its more a computer thing that a coding thing which can't be fixed.

Have you enabled Hardware Acceleration? Check it in Menu -> Advanced -> General -> Use Hardware Acceleration

Also under certain settings the animation will skip a huge amount over, like it started over. Any idea why that happens? I can't recreate the settings that do that (I'd like to know so I can advise against it).

Any axample?
Dec 24, 2014 3:50 AM

Offline
Feb 2010
12631
Yes I had it enabled by default. On the second thing, I can't recreate it. It seems randomly to happen. Both issues aren't such big deals, but I'd love to have 100% smooth scrolling.

I've thought of a cool trick with this! You could have a render on both sides. Have one come in from the side for a certain time. Then it slides out and a new one scrolls back in. Kind like a revolving advertisement.
Dec 24, 2014 4:14 AM

Offline
Jan 2012
1578
Shishio-kun said:
Yes I had it enabled by default. On the second thing, I can't recreate it. It seems randomly to happen. Both issues aren't such big deals, but I'd love to have 100% smooth scrolling.

Do you have laptop or desktop?
I've thought of a cool trick with this! You could have a render on both sides. Have one come in from the side for a certain time. Then it slides out and a new one scrolls back in. Kind like a revolving advertisement.

It's easy to do. You just need to make a layout that animation will suits well with
Apr 15, 2015 8:42 AM

Offline
Feb 2008
61
can I make a request here for premade mylist layout ?
Apr 15, 2015 9:05 AM

Offline
Jan 2012
1578
Of course, you can. But I don't make people requests, so it doesn't affect anything
May 9, 2015 11:33 AM
Offline
May 2014
1
Hey Hahaido, is there anywhere else where I could access your list style codes? I'm sure you've been notified numerous times already but your public dropbox is disabled. The Saber list style that won Shishio's latest minimalistic list style competition is absolutely gorgeous and I would really like to use that one.
Jun 24, 2015 2:51 PM
Offline
May 2015
7
http://hl.cloudvent.net/

If you still want his code, find it on his website.
Reply Disabled for Non-Club Members
Pages (2) « 1 [2]

More topics from this board

» theme help

threat - Jul 5

5 by Zaryf »»
Aug 21, 5:46 AM

» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )

Valerio_Lyndon - Apr 19, 2018

1261 by KiranaStarr »»
Aug 16, 5:48 PM

» [CSS] ⭐️ Customize your List Cursor + Cursor Fixes

Shishio-kun - Mar 8, 2021

30 by Shishio-kun »»
Jul 28, 3:17 AM

» How To Have Different Banner/Cover image & Background Image For Manga & Anime Lists

YasminaRegina - Jul 25

2 by YasminaRegina »»
Jul 26, 1:02 AM

Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )

Shishio-kun - Nov 17, 2023

52 by LucaBalsa »»
Jul 6, 2:02 PM
It’s time to ditch the text file.
Keep track of your anime easily by creating your own list.
Sign Up Login