❓ Ask for help here + See Frequently Asked Questions

ofx360 said:
Also, is it possible to see you list as someone else would see it (anime shared, etc etc), without being someone else?

VeriTi said:
@ofx360
No, it's impossible to create new hyperlinks using just CSS. You are only allowed to restyle already existing ones.

u531355 said:

You can go on this page: http://myanimelist.net/editprofile.php?go=listpreferences
and check "Style Override", then go on someone else's list and see how the anime shared thingy looks like

.status_selected, .status_not_selected {
background: red;
}

#mal_control_strip a {
z-index: 1;
}

ofx360 said:
I took the easy way out for now :P Here is how its looking so far - myanimelist.net/animelist/ofx360 - i still want to adjust a few things but i'm just gonna move on for now. I got the basic stuff done, so i can touch it up later.

If you look at it in chrome, the category bar will probably be all muffed up because i was moving everything in FF...but if you look at it in FF or IE, the top bar stuff will be unaligned because i aligned it in Chrome....*sigh* but i'll also worry about that later.

What's really bothering me is when i hit "more", that whole more drop down thing looks tragic...i have no idea what i did. I see that everything for "more" is controlled by .borderRBL, but its pretty much empty and i don't know what else is could be destroying this thing.

I would like it to just function like this it normally does, nothing fancy - yet :P

Here's my Frankenstein code again (.borderRBL is towards the bottom):

Also, you've been an enormous amount of help!

ofx360 said:
This might be no help, but this is also my first rodeo with CSS and i first started with u531355's Square Layout first (http://myanimelist.net/forum/?topicid=459189), and after about an hour or two of working on it, i realized i needed to start in a place that was FAR less complicated, lol.

I started here - http://myanimelist.net/forum/?topicid=412787, and it allowed me to better take apart the code and understand what each part, and what every addition to the code did. Now i'm here - http://myanimelist.net/animelist/ofx360

i'd say i made progress :P.

Though, Idk when i'm gonna get time to continue to work on my layout :<
----
Also thanks for the help and advice Shishio! I'll take into consideration everything you've said next time i start pecking at my layout again.

RyanSharp said:
I'm in need of help with my css on my page.
Let me first explain that I am using a layout designed by another user that I have 'stolen' for personal use which is to learn by example. I'm brand new to CSS, so perhaps I have dived directly to the deep end, but to be honest, this type of design is ideal for me which is why I can't quit.

This is what it is meant to look like... http://myanimelist.net/animelist/1NZ3RU
and this is what mines looks like... http://myanimelist.net/animelist/RyanSharp
note that the browser may confuse the imports, or at least it does on mine... >.>

BTW, only look at the 'watching', as that is the only page I have edited the list to be compatible with what I have on that part of my list.

Don't be troubled by the fact that it is exactly the same as I've actually just begun. I need to make it look exactly the same for me to adjust it and learn what the changes have done. Though you will probably understand.

Anyway, what is wrong with what what I have?
The only changes I have made is edit the @import link to import my own list of watched anime series with the links to the covers.
Is it perhaps that I haven't altered the rest that is causing this problem?
Or instead, have I set the wrong columns to be shown?

Please, I can't even begin learning this design until I actually get it to work.
I appreciate your help.

PS: If what I am doing is wrong or against the wishes of the creator, then I will immediately stop and take down anything I have relating to it. I am not using it for anything other than learning.

Gouko_Tenrou said:
I'm trying to modify the script for the MAL themes, but every time I change the image URL it turns out like this : http://i1243.photobucket.com/albums/gg544/Gouko_Tenrou/Untitled-10.jpg

What do I need to change for it to fit the entire background like this : http://i1243.photobucket.com/albums/gg544/Gouko_Tenrou/Tenshi-Wallpaper-angel-beats-31411404-1600-900-1.jpg

Please help needed

xEru said:
I need help @_@ I recently change my list styles and I have some basic CSS, I think..
so my problem is that, I want to put an image, particularly render in my manga list just like my anime list look.

The thing is, I use the Yoko render layout in my anime list so there's no problem there but in my manga list, I used a different layout but I wanted to try and add renders. I've tried copying the code of the whole render section in the anime list but the render didn't appear.

I've also tried using the new trick which puts multiple images on the line of the background.. and it didn't work either.. I've also tried putting !important on the render code but it failed. T_T Help please?

Gouko_Tenrou said:
The code for the script is :
// ==UserScript==
// @name MAL 1366px Miku/Horo Theme [by Shishio]
// @namespace http://myanimelist.net/profile/Shishio-kun" target="_blank">http://www.myanimelist.net/profile/http://myanimelist.net/profile/Shishio-kun
// @include http://*myanimelist.net/*
// @exclude http://*myanimelist.net/animelist/*
// @exclude http://*myanimelist.net/mangalist/*
// @exclude http://*myanimelist.net/rss.php*
// ==/UserScript==


//
bodybg = "http://i1243.photobucket.com/albums/gg544/Gouko_Tenrou/Tenshi-Wallpaper-angel-beats-31411404-1600-900-1.jpg";


// CSS
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}

// background shortcut (don't remove)
if ( !document.location.href.match('info.php|hidenav|hideheader') ) {
addGlobalStyle('body { background: transparent url(" '+bodybg+' ") no-repeat top center fixed !important; }');
}


// Remove MAL Logo (optional)
if ( !document.location.href.match('info.php|hidenav|hideheader') ) {
addGlobalStyle('#headerSmall{ display: none !important; }');
}

// Lower MAL menu from top (optional)
if ( !document.location.href.match('info.php|hidenav|hideheader') ) {
addGlobalStyle('#menu{ margin-top:40px !important; }');
}

// Remove space between menus at top (optional)
if ( !document.location.href.match('info.php|hidenav|hideheader') ) {
addGlobalStyle('#roadblock{ padding:0px !important; }');
}

Shishio-kun said:


Yeah it looks exceptionally good. You used the code I gave so is that satisfactory for what you were trying to fix/

Shishio-kun said:


Hmm ok your screen resolution is the same as mine and the background pic isn't cropped for the MAL layout. It needs to be something like this:

http://img217.imageshack.us/img217/8840/ddn6a9.png

with Tenshi in the same place as Horo and something else where Miku is. The blue in the middle of them is where the site content goes.

You can actually make that in the same way you made your profile. Just find a big wallpaper background and paste it over mine, and put renders where I put my original ones. It can be a fun project, you can also just patch backgrounds over those parts till you get something to your liking, and there's other premade themes.

Gouko_Tenrou said:
Problem was that I was using photobucket for the image, when i switched to imageshack it just fitted perfectly

Shishio-kun said:


You're using the Black Layout on the ani list, not the Yoko one.

Your manga list has no custom CSS from this club, its the default MAL code, so maybe its not set for whatever custom CSS you tried to put on there hence there will be no visible results. I don't see any codes you mentioned on there atm.

Also if you take a single part of a code and try to put it in other layout it often won't be successful without patching it up cuz a lot of functions need other parts of the layout code to look right, and the layout you're adding to might interfere with it.

xEru said:

Now that makes a lot of sense. So what do I have to do if I want the render to work? Without removing the layout because I kinda like the interface of it.. Or can you patched the code for custom CSS? sorry for asking too much T~T

Shishio-kun said:


Hmm do you have a style ID on your manga list to customize it, this is what I see:



If you want to keep that interface add this code to the bottom of the CSS edit box for the style ID of your manga list:

/*
YOKO RENDERS
*/
.header_cw {
background-image: url("http://img189.imageshack.us/img189/7070/yokowaitress1.png");
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 1200px;
position: fixed;
right: 0;
top: 0px;
width: 2000px;
z-index: -1;
}
.header_completed {
background: url("http://img26.imageshack.us/img26/1462/yokogunholdreplace2.png") no-repeat fixed right top transparent;
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 1200px;
position: fixed;
right: 0;
top: 0px;
width: 2000px;
z-index: -1;
}
.header_onhold {
background-image: url("http://img444.imageshack.us/img444/7811/yokogunholdreplace1.png");
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 1200px;
position: fixed;
right: 0;
top: 0px;
width: 2000px;
z-index: -1;
}
.header_dropped {
background: url("http://img341.imageshack.us/img341/2625/yokoliftup5.png") no-repeat fixed right top transparent;
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 1200px;
position: fixed;
right: 0;
top: 0px;
width: 2000px;
z-index: -1;
}
.header_ptw {
background: url("http://img690.imageshack.us/img690/9247/yokotanreplace5.png") no-repeat fixed right bottom transparent;
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
padding-top: 1200px;
position: fixed;
right: 0;
top: 0px;
width: 2000px;
z-index: -1;
}

Then switch the image links with the renders you want.

xEru said:

Ooh, well for the manga list I used a style ID.. There's already code for that current layout.. I'll try pasting the code you wrote after all the other codes..

Stark700 said:
For the manga layout, how do I edit the name and replace it with my own:



I tried editing them but turned out to not look so good. I'm also not sure exactly where to input the image in the section for the Advanced Style CSS Editor section @ the style ID section.

Any help is appreciated, thanks.

ofx360 said:
kk, a few things - http://myanimelist.net/animelist/ofx360

Looking at my list now, you see a little faint blue circle thing surrounding "more" (provided you're not color blind :P). Hover over it, it gets less transparent, cool. Click it, it turns a reddish color, nice. Un-click it, it stay the reddish color till you click elsewhere, not cool. I'd like it to fade back to the light blue once its not in use. i've used all the pseudo code i could think of, the one i'm using now is ":focus", and its giving me half the results i want. Is there something i'm over looking? Or am i doing the best i can here?

Looking at the "more" drop down, you can see the anime box art towards the right - that's fine. But i did want the box art to look more like: http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/light/preview.jpg

Where do i start with that?

ofx360 said:
kk, a few things - http://myanimelist.net/animelist/ofx360

Looking at the "more" drop down, you can see the anime box art towards the right - that's fine. But i did want the box art to look more like: http://dl.dropbox.com/u/49469857/MAL/premade/square/themes/light/preview.jpg

Where do i start with that?

ofx360 said:
Aww, none of that ended up working out :< (and i am using Firebug!)

So i guess i'll just leave it as is, looks fine enough i think.

Gonna move on to one more thing, fix browser compatibility with the Chrome hack, and then attempt to clean up my code!

So close to being done

Thanks for all the help so far!

Shishio-kun said:

#list_surround small a:focus:hover{
background: none repeat scroll 0 0 red !important;
}

Shishio-kun said:

These appear to control the thumbnail look by limiting the width and height, then changing the background position in the second set to move the thumbnail "view". I don't think you can just add that to your CSS and they'll look like that, but it should give you an idea of how its done.

ofx360 said:


Na, what i wanted it to do was stay the color red when the "more" drop down is open, but then turn back to it normal state when the "more" drop down is closed.



I'm gonna have to look into that when i get to working on it again. See if i can fit that into my code somehow.

Thanks for the tip.

Shishio-kun said:


Looks like it worked, now you just have to switch the render's URLs with the URLs from uploaded renders you want as you did with your anime list.

Shishio-kun said:
Ok :active won't work for that either, maybe someone else can think of a way to. What I would do in this case is just create a color button that pops up with the more panel and have it positioned over the button's place. You can simulate the button with the color, screencap it, render it out, then make it that way.

.hide:before {
pointer-events: none;
position: absolute;
margin-top: -25px;
margin-left: 487px;
background: red;
border-radius: 15px;
width: 40px;
line-height: 20px;
text-align: center;
content: "More";
color: #F0EBEB;
}

Arex said:
On my anime list, my cursor only changes when its on the list, i want it to be the cursor for the whole background too, anyone have an idea why its doing this>.>?