MyAnimeList.net

Forums

Recent Posts | My Watched Topics | My Ignored Topics | Search

Customize your list! All CSS (list) tutorials and add-ons!
MyAnimeList.net Forum »» Club Discussion »» Shishio's Custom Lists & Profiles - NEW: cards, CSS tricks, and list contest + a fix for missing images! »» Customize your list! All CSS (list) tutorials and add-ons!

This topic has been locked and is no longer available for discussion.
 
#1
03-28-12, 9:12 PM

Offline
Joined: Feb 2010
Posts: 2752
Easy beginner's tutorial on using CSS
Start here- it will teach you how to set your own wallpaper (background), custom fonts, and also how to use any premade layout on your list. Super easy and fun! When done you will be able to use all the other list tutorials below.
Beginner's Tutorial



Please read: To use these tutorials and add-ons below properly, you must be using the Advanced Style CSS editor on this page for your list customization: http://myanimelist.net/editprofile.php?go=stylepref
All these list tutorials and add-ons use that. If you aren't, just use the Beginner's Tutorial at the top to get started- its super easy!




Easily editing any layout

Editing CSS can be easy and fun this way. Even beginners can do it!


Using Inspect Element - live editing, find codes, and sample different styles





































Misty border around list

Border around whole list page



Small add-ons for your list


Custom Cursor
Add the weather to your list!















Coding for multiple resolutions, phones, and browsers
These CSS hacks will provide for better compatibility on your list in other browsers and resolutions when codes work differently on them.


Set specific CSS to target specific browsers-advanced-
Set specific CSS to target phones and/or different computer screen resolutions individually
-advanced-




Finding CSS codes and hacking selectors
These tricks will help you find the codes you need and also hack them when they aren't working in your layout.

Viewing and finding CSS codes
How to view/copy anyone's codes
Using Inspect Element - live editing, find codes, and sample different styles
How to use Firebug (very powerful CSS tool)
-advanced-
Get any CSS code
-advanced-

CSS selector hacks
Code priority and !important
-advanced-
Fixing selectors broken by MAL's CSS edit box
-advanced-
Set specific CSS to target specific browsers-advanced-
Set specific CSS to target phones and/or different computer screen resolutions individually
-advanced-








More stuff

Hahaido's Tips and Tricks
Club officer Hahaido shares a plethora of his own useful tricks for list design in his topic.
http://myanimelist.net/forum/?topicid=443937

Seaven's Complete Guide
A guide on becoming skilled in CSS, art design, and making proper wallpapers for your list.
http://myanimelist.net/forum/?topicid=1319115

Suggest tutorial ideas
http://myanimelist.net/forum/?topicid=439909

Don't need a tutorial? Got a question instead? Ask here or check the FAQ:
http://myanimelist.net/forum/?topicid=200323

Must have add-ons for list designers!
http://myanimelist.net/forum/?topicid=416051
Modified by Shishio-kun, 01-01-15, 3:54 PM
 
This topic has been locked and is no longer available for discussion.
Top
Help     FAQ     About     Contact     Terms     Privacy     AdChoices