Honaris's Blog

Back to Honaris's Blog

IDs and Classes
These are the styles that are applied to various parts of the page, below is a list of these that are present in the list, and where they are/what they do. Prefixes for the styles signify what they are.

# - The hash is at the beginning of ID names
. - The full stop/period is at the beginning of classes
N/A - If there is neither of the above it is most likely referring to a HTML element.
: - These indicate selectors, conditions that when filled apply.
* - Just a star applies to everything, can be used several ways.

body - This is essentially the entire page, generally containing background & font information.
---
#mal_control_strip - Entire strip at the top of the page.
#mal_cs_links - "Add To List, Home, Anime List, Manga List".
#mal_cs_otherlinks - "You are viewing your anime list, History, Forum, Export".
#mal_cs_listinfo - "(Your Username), Log Out".
#mal_cs_pic - Only visible when logged out. Like This
#mal_cs_powered - This Also #search, #searchBox and #searchListButton are inside it.
#search - Contains #searchBox and #searchListButton
#searchBox - Textbox for searching.
#searchListButton - The magnifying glass image. This
---
#list_surround - The list as a whole.
.status_selected - Whichever status is currently selected, (All Anime, Currently Watching, Completed, etc...)
.status_not_selected - The rest which are not selected.
.td1 - The rows of each status alternate between this and .td2 allowing variety.
.td2 - See above.
.table_header - "#, Anime Title, Score, Progress, etc..." Top of every category.
.header_title - The text portion of the header of each category.
.header_cw - Currently Watching/Reading header.
.header_completed - Completed header.
.header_onhold - On Hold header.
.header_dropped - Dropped header.
.header_ptw - Plan To Watch/Read header.
.category_totals - Totals at the bottom of each category.
.animetitle - Applies only to the Anime names in the list.
#copyright - Very bottom of page.
#inlineContent - Not normally visible, can be used for extra things.
---
a - All links
a:hover - Links when hovered over.
a:visited - Links that have been visited/clicked before.
small - Applies to text like "Airing, Not Aired Yet, etc..."

That will do it for the list mostly. Onto stuff you can actually do.

Simple bit first, you can combine the things above.
div#list_surround a:hover - Applies to all the links within the div that has an ID list_surround when they are hovered over.

Sometimes you may notice that your code doesn't do what it is supposed to but you've not made a mistake. This is possibly due to a conflicting declaration. If you give something a colour but it is given a different colour elsewhere, your declaration gets overwritten. You can get around this by using !important. Add that to the end of a code line and it will overwrite other declarations.

If you have two classes you are applying the same styles to then to keep the code clean you can list it like

Styling the expanded entries
When you click "More" on an anime entry it expands the cell and provides more information, this can be styling by using the following...
A common piece of code to put in here is "padding-left: 43px;", this moves the text in line with the anime title above it, though the amount may need changing depending on your list.

That introduced conditions, [id^=more] essentially looks for elements that have IDs containing "more". This can be used to do some things otherwise not possible or normally difficult.

Bordering the list
The following code borders the sides of the list without bordering the insides which can be annoying, this also won't border the whole way round all the categories, leaving them seperate.
This only borders the cells that have a width of 30 and 70, which is the outside ones, on the far left and right.

Adding Extra Text
One thing quite a few people do is add text, usually to the copyright section saying "Design by...", this is be done with the following code.
This will add the text after what is already there, you can use :before to place it at the beginning. "display: block" will force the added text to appear as a new line instead of attaching straight onto the sentence already there.

Using inlineContent
The #inlineContent is on the page but normally hidden, by using CSS to show it we can do various things with it. In the example below I am just adding a random image to the page in the bottom right corner.
That will show an image of height and width 100px that is stuck in the bottom right corner. This is also an example of just how to use !important on the end of a line by the way.

Hiding "Airing" Text
Should you want to hide this text you could do it using small however this would also hide the "Edit - More" text, if you only want to hide the "Airing" text then use the following...
The way the '+' works is by moving down a html element rather than moving into the nested element as the normal way does. See Here for an illustrated example.

Custom Header Text
If you don't use images for headers, you are stuck with the usual header text, however this can be changed through some creative CSS.
That will hide the original text and display the 'Custom Header' in it's place.

Overlapping Elements
You can cause parts of the page to appear in front of or behind each other using something called the z-index. The z-index works like any other CSS declaration...

• z-index: -1;

Where the green number can be anything, positive or negative. The higher the number the closer to the front it is. By default it is 0 so by setting the z-index of an element to -1 it will appear behind everything else.