My anime list stilius

[mattusha]

Lengvas gidas kaip atnaujinti savo anime lista.
1 Žingsnis: susirandame MyListStyle

Arba paspaudžiame šitą nuorodos http://myanimelist.net/editprofile.php?go=stylepref

Jeigu čia nusigavot jums turi rodyti taip.

Spoileris:

2 Žingsnis: Pasidarome nuosavą ID stilių

Dabar spaudžiame advanced style css editor apvestą raudonai

Spoileris:

Pastaba jeigu nepasirodys lentelė nepanikuokit:
Tiesiog spaudžiam "I understand.." apvestą raudonai.
Tai jums sukurs nuosavą css failą.
Jeigu pamatysit kažką panašaus į šitaip žingsnį įveikėm!

Spoileris:

3 Žingsnis paspaudžiame ant nuosavo id stliaus.
Pastaba: jūsų kodas bus kitoks.

Spoileris:

Jeigu išmes lentelę su daug skaičių ir raidžių žingsnį įveikėm!

Spoileris:

4 Žingsnis ištriname visą css kodą mums to neprireiks.
Jeigu viską gerai padarėm turi atrodyti taip.

Spoileris:

5 Žingsnis Pasirenkame css koda.
Anime list :

Kodas :

Spoileris:

/*
MAIN BACKGROUND
By default, there's no image in this part of the code. Its just a background color: #B9B9B9.
(the default image of the angel is in the next code #inlineContent)
Change the color to what you want or add an image here.
The font family for the list can also be changed here.

For more info or questions on this code:
http://myanimelist.net/forum/?topicid=412787
*/
body {
background: url(none) repeat scroll 0 0 #B9B9B9;
font-family: arial,sans-serif;
font-size: 100%;
color: #322B3B;
}

/*
SECOND BACKGROUND (with angel)
The background behind the list but in front of the main background.
By default, for its own image it has the render of the angel Kanade. You can change her with another render or even background image here.
All the other codes should be left alone.
*/
#inlineContent {
background: url("http://ihostimages.x10.mx/images/WseZKhPw4NDt7G.png") no-repeat fixed center top transparent !important;
display: inline-block !important;
height: 1200px !important;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 2000px !important;
z-index: -1 !important;
}
/*
HEADER
The List header which by default says My Anime List
can be changed out here.
*/
#list_surround {
background: url("http://i44.tinypic.com/15s9esp.jpg") no-repeat scroll 50% 1px transparent;
font-size: 81.25%;
line-height: 1;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 227px;
width: 920px;
}
/*
OTHER CODES
Other codes to change the rest of the layout.
For questions and explanation on changing colors check here:
http://myanimelist.net/forum/?topicid=412787
*/
[cellspacing="0"] {
border-collapse: collapse;
line-height: 17px;
}
a {
-moz-transition: all 0.25s ease-in-out 0s;
color: #EEEEEE;
text-decoration: none;
text-shadow: none;
}
a:hover {
color: #AC2034;
text-shadow: 0 1px rgba(255, 255, 255, 0.15);
}
td.table_header, td.td1, td.td2, td.status_selected, td.status_not_selected, td.category_totals {
-moz-box-sizing: border-box;
border: 0 none #CCCCCC;
height: 36px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
td.table_header {
background-color: rgba(65, 35, 95, 0.6);
}
td.table_header:nth-of-type(1) {
border-radius: 3px 0 0 0;
}
td.table_header:nth-of-type(2) {
text-align: left;
}
td.table_header:nth-of-type(4) {
border-radius: 0 3px 0 0;
}
td.table_header:nth-of-type(5) {
border-color: transparent;
display: none;
}
td.td1 {
-moz-transition: all 0.25s ease-in-out 0s;
background-color: rgba(136, 147, 169, 0.6);
}
td.td2 {
-moz-transition: all 0.25s ease-in-out 0s;
background-color: rgba(151, 164, 183, 0.6);
}
tr:hover td.td1, tr:hover td.td2 {
background-color: rgba(72, 64, 87, 0.6);
font-size: 15px;
}
td.td1:nth-of-type(2), td.td2:nth-of-type(2) {
text-align: left;
}
td.td1:nth-of-type(3), td.td2:nth-of-type(3) {
font-size: 16px;
}
tr:hover td.td1:nth-of-type(3), tr:hover td.td2:nth-of-type(3) {
font-size: 18px;
}
td.td1:nth-of-type(5), td.td2:nth-of-type(5) {
border-color: transparent;
display: none;
}
td.status_not_selected, td.status_selected {
border: 0 none !important;
height: auto !important;
padding: 0 8px;
text-align: center !important;
width: 16.667% !important;
}
td.status_not_selected a, td.status_selected a {
background-color: rgba(64, 60, 90, 0.6);
background-image: -moz-linear-gradient(rgba(64, 60, 90, 0.6), rgba(56, 52, 80, 0.6));
border-color: rgba(48, 44, 64, 0.5);
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
display: block !important;
font-weight: bold;
padding: 8px;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}
td.status_selected a {
background-color: rgba(180, 32, 48, 0.6);
background-image: -moz-linear-gradient(rgba(180, 32, 48, 0.6), rgba(172, 24, 40, 0.6));
border-color: rgba(164, 16, 32, 0.5);
}
td.status_not_selected a:hover, td.status_selected a:hover {
background-color: #403C5A;
background-image: -moz-linear-gradient(#403C5A, #383450);
border-color: #201C3A;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}
td.status_selected a:hover {
background-color: #B42030;
background-image: -moz-linear-gradient(#B42030, #AC1828);
border-color: rgba(148, 0, 24, 0.5);
}
td.category_totals {
-moz-transition: all 0.25s ease-in-out 0s;
background-color: transparent;
border-radius: 0 0 3px 3px;
color: rgba(51, 51, 51, 0);
text-align: center;
}
td.category_totals:hover {
background-color: rgba(72, 64, 87, 0.6);
color: #EEEEEE;
}
.header_cw *, .header_completed *, .header_onhold *, .header_dropped *, .header_ptw * {
font-size: 19px;
height: 60px;
line-height: 24px;
padding-bottom: 4px;
text-align: right;
vertical-align: bottom;
}
.header_title {
border-radius: 4px 4px 4px 4px;
display: inline-block;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15);
}
#grand_totals {
-moz-transition: all 0.25s ease-in-out 0s;
background-color: rgba(72, 64, 87, 0.6);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: #EEEEEE;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
#copyright {
background-color: rgba(180, 32, 48, 0.6);
border-radius: 3px 3px 3px 3px;
color: #EEEEEE;
line-height: 17px;
margin-top: 10px;
padding: 8px;
text-align: center;
}
body #mal_cs_listinfo, body #mal_cs_links, body #mal_cs_otherlinks, body #mal_cs_powered {
-moz-box-sizing: border-box;
-moz-transition: all 0.4s ease 0s;
background: none no-repeat scroll 100% 0 transparent;
border: 0 none;
height: 0 !important;
overflow: hidden;
padding: 32px 0 0;
position: absolute;
right: 4px;
text-align: center;
top: 4px;
width: 150px;
z-index: 10;
}
body #mal_cs_listinfo:hover, body #mal_cs_links:hover, body #mal_cs_otherlinks:hover, body #mal_cs_powered:hover {
height: 200px !important;
padding-top: 32px;
width: 150px;
}
body #mal_cs_listinfo div, body #mal_cs_links div, body #mal_cs_otherlinks div, body #mal_cs_powered div, body #mal_cs_powered dd {
-moz-transition: opacity 0.4s ease-in-out 0s;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 3px 0 0 0;
font-size: 0 !important;
line-height: 0;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0;
}
body #mal_cs_listinfo:hover div, body #mal_cs_links:hover div, body #mal_cs_otherlinks:hover div, body #mal_cs_powered:hover div, body #mal_cs_powered:hover dd {
opacity: 1;
}
body #mal_cs_listinfo div:nth-of-type(2), body #mal_cs_links div:nth-of-type(2), body #mal_cs_otherlinks div:nth-of-type(2), body #mal_cs_powered div:nth-of-type(2) {
border-radius: 0 0 3px 3px;
padding: 4px 0 8px;
}
body #mal_cs_listinfo a, body #mal_cs_links a, body #mal_cs_otherlinks a, body #mal_cs_powered a {
background-color: rgba(64, 60, 90, 0.6);
border-radius: 3px 3px 3px 3px;
display: block;
font: 13px/17px arial,sans-serif;
margin: 4px 12px 0;
padding: 3px 0;
text-decoration: none;
}
body #mal_cs_listinfo a:nth-of-type(1), body #mal_cs_links a:nth-of-type(1), body #mal_cs_otherlinks a:nth-of-type(1), body #mal_cs_powered a:nth-of-type(1) {
margin-top: 0;
}
body #mal_cs_listinfo a:hover, body #mal_cs_links a:hover, body #mal_cs_otherlinks a:hover, body #mal_cs_powered a:hover {
background-color: #403C5A;
}
body #mal_cs_listinfo strong a strong {
font-weight: normal;
}
body #mal_cs_otherlinks strong {
color: #333333;
display: block;
font: bold 13px/17px arial,sans-serif !important;
padding: 0 4px 4px;
text-shadow: 0 1px 1px #FFFFFF;
}
body #mal_cs_otherlinks strong a {
background: none repeat scroll 0 0 transparent;
border-radius: 0 0 0 0;
color: #333333;
display: inline;
font: bold 13px/17px arial,sans-serif !important;
margin: 0;
padding: 0;
text-shadow: 0 1px 1px #FFFFFF;
}
body #mal_cs_powered a {
background-color: rgba(255, 255, 255, 0.6) !important;
border-radius: 3px 0 0 0 !important;
display: block !important;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0 !important;
}
body #mal_cs_powered:hover a {
opacity: 1;
}
body #mal_cs_powered a img {
background: url("http://invise.s3.amazonaws.com/mal/mal.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6);
border-radius: 3px 3px 3px 3px;
display: block;
height: 0;
margin: 0 12px;
padding: 23px 0 0 126px;
width: 0;
}
body #mal_cs_powered a img:hover {
background-color: #403C5A;
}
body #mal_cs_powered #search {
border-radius: 0 0 3px 3px;
padding: 8px;
position: relative;
}
body #mal_cs_powered #search #searchBox {
-moz-box-sizing: border-box;
border-color: #BCBCBC #D6D6D6 #D6D6D6;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
color: #333333;
display: inline-block;
font-family: arial,sans-serif;
font-size: 13px;
height: 28px;
padding-left: 6px;
padding-right: 24px;
vertical-align: top;
width: 100%;
}
body #mal_cs_powered #search #searchBox:hover, body #mal_cs_powered #search #searchBox:focus {
border-color: #ACACAC #C6C6C6 #C6C6C6;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
body #mal_cs_powered #search #searchListButton {
background: url("http://invise.s3.amazonaws.com/mal/icon-go.png") no-repeat scroll 0 0 transparent;
border-radius: 3px 3px 3px 3px;
height: 0;
margin: 0;
padding: 16px 0 0 16px;
position: absolute;
right: 12px;
top: 14px;
width: 0;
}
body #mal_cs_listinfo {
background-image: url("http://invise.s3.amazonaws.com/mal/icon1.png");
right: 106px;
}
body #mal_cs_listinfo:hover {
background-image: url("http://invise.s3.amazonaws.com/mal/icon1-over.png");
}
body #mal_cs_links {
background-image: url("http://invise.s3.amazonaws.com/mal/icon2.png");
right: 72px;
z-index: 9;
}
body #mal_cs_links:hover {
background-image: url("http://invise.s3.amazonaws.com/mal/icon2-over.png");
}
body #mal_cs_otherlinks {
background-image: url("http://invise.s3.amazonaws.com/mal/icon3.png");
right: 38px;
z-index: 8;
}
body #mal_cs_otherlinks:hover {
background-image: url("http://invise.s3.amazonaws.com/mal/icon3-over.png");
}
body #mal_cs_powered {
background-image: url("http://invise.s3.amazonaws.com/mal/icon4.png");
right: 4px;
z-index: 7;
}
body #mal_cs_powered:hover {
background-image: url("http://invise.s3.amazonaws.com/mal/icon4-over.png");
}

#mal_control_strip {
background: transparent !important;
}
td#mal_cs_pic a img {
display: none;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right: 0 none !important;
}

Mangos list'o kodas :

Spoileris:

/*
MAIN BACKGROUND
Change the main background image here.
By default the background is Rei Ayanami from Evangelion.
You can also change the font family here for most of the list.

For more info on this code go to:
http://myanimelist.net/forum/?topicid=412787
*/
body {
background: url(http://ihostimages.x10.mx/images/sFave7nBC0c9.jpg) fixed #B9B9B9;
color: #322B3B;
font-family: arial,sans-serif;
font-size: 100%;
background-size: cover;
}

/*
SECONDARY BACKGROUND
This background is located behind the list but in front of the main background.
By default there is no background here but you can add one if you wish, it will be in front of the main background.
*/
#inlineContent {
background: url() no-repeat fixed center top transparent !important;
display: inline-block !important;
height: 1200px !important;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 2000px !important;
z-index: -1 !important;
}

/*
HEADER
The List header which by default says My Manga List
can be changed out here.
*/
#list_surround {
background: url("http://i41.tinypic.com/34nh0e9.jpg") no-repeat scroll 50% 1px transparent;
font-size: 81.25%;
line-height: 1;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 227px;
width: 920px;
}

/*
OTHER CODES
Other codes to change the rest of the layout.
For questions and explanation on changing colors check here:
http://myanimelist.net/forum/?topicid=412787
*/
[cellspacing="0"] {
border-collapse: collapse;
line-height: 17px;
}
a {
-moz-transition: all 0.25s ease-in-out 0s;
color: #EEEEEE;
text-decoration: none;
text-shadow: none;
}
a:hover {
color: #AC2034;
text-shadow: 0 1px rgba(255, 255, 255, 0.15);
}
td.table_header, td.td1, td.td2, td.status_selected, td.status_not_selected, td.category_totals {
-moz-box-sizing: border-box;
border: 0 none #CCCCCC;
height: 36px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
td.table_header {
background-color: rgba(65, 35, 95, 0.6);
}
td.table_header:nth-of-type(1) {
border-radius: 3px 0 0 0;
}
td.table_header:nth-of-type(2) {
text-align: left;
}
td.table_header:nth-of-type(4) {
border-radius: 0 3px 0 0;
}
td.table_header:nth-of-type(5) {
border-color: transparent;
display: none;
}
td.td1 {
-moz-transition: all 0.25s ease-in-out 0s;
background-color: rgba(136, 147, 169, 0.6);
}
td.td2 {
-moz-transition: all 0.25s ease-in-out 0s;
background-color: rgba(151, 164, 183, 0.6);
}
tr:hover td.td1, tr:hover td.td2 {
background-color: rgba(72, 64, 87, 0.6);
font-size: 15px;
}
td.td1:nth-of-type(2), td.td2:nth-of-type(2) {
text-align: left;
}
td.td1:nth-of-type(3), td.td2:nth-of-type(3) {
font-size: 16px;
}
tr:hover td.td1:nth-of-type(3), tr:hover td.td2:nth-of-type(3) {
font-size: 18px;
}
td.td1:nth-of-type(5), td.td2:nth-of-type(5) {
border-color: transparent;
display: none;
}
td.status_not_selected, td.status_selected {
border: 0 none !important;
height: auto !important;
padding: 0 8px;
text-align: center !important;
width: 16.667% !important;
}
td.status_not_selected a, td.status_selected a {
background-color: rgba(64, 60, 90, 0.6);
background-image: -moz-linear-gradient(rgba(64, 60, 90, 0.6), rgba(56, 52, 80, 0.6));
border-color: rgba(48, 44, 64, 0.5);
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
display: block !important;
font-weight: bold;
padding: 8px;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
}
td.status_selected a {
background-color: rgba(180, 32, 48, 0.6);
background-image: -moz-linear-gradient(rgba(180, 32, 48, 0.6), rgba(172, 24, 40, 0.6));
border-color: rgba(164, 16, 32, 0.5);
}
td.status_not_selected a:hover, td.status_selected a:hover {
background-color: #403C5A;
background-image: -moz-linear-gradient(#403C5A, #383450);
border-color: #201C3A;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}
td.status_selected a:hover {
background-color: #B42030;
background-image: -moz-linear-gradient(#B42030, #AC1828);
border-color: rgba(148, 0, 24, 0.5);
}
td.category_totals {
-moz-transition: all 0.25s ease-in-out 0s;
background-color: transparent;
border-radius: 0 0 3px 3px;
color: rgba(51, 51, 51, 0);
text-align: center;
}
td.category_totals:hover {
background-color: rgba(72, 64, 87, 0.6);
color: #EEEEEE;
}
.header_cw *, .header_completed *, .header_onhold *, .header_dropped *, .header_ptw * {
font-size: 19px;
height: 60px;
line-height: 24px;
padding-bottom: 4px;
text-align: right;
vertical-align: bottom;
}
.header_title {
border-radius: 4px 4px 4px 4px;
display: inline-block;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.15);
}
#grand_totals {
-moz-transition: all 0.25s ease-in-out 0s;
background-color: rgba(72, 64, 87, 0.6);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: #EEEEEE;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
#copyright {
background-color: rgba(180, 32, 48, 0.6);
border-radius: 3px 3px 3px 3px;
color: #EEEEEE;
line-height: 17px;
margin-top: 10px;
padding: 8px;
text-align: center;
}
body #mal_cs_listinfo, body #mal_cs_links, body #mal_cs_otherlinks, body #mal_cs_powered {
-moz-box-sizing: border-box;
-moz-transition: all 0.4s ease 0s;
background: none no-repeat scroll 100% 0 transparent;
border: 0 none;
height: 0 !important;
overflow: hidden;
padding: 32px 0 0;
position: absolute;
right: 4px;
text-align: center;
top: 4px;
width: 150px;
z-index: 10;
}
body #mal_cs_listinfo:hover, body #mal_cs_links:hover, body #mal_cs_otherlinks:hover, body #mal_cs_powered:hover {
height: 200px !important;
padding-top: 32px;
width: 150px;
}
body #mal_cs_listinfo div, body #mal_cs_links div, body #mal_cs_otherlinks div, body #mal_cs_powered div, body #mal_cs_powered dd {
-moz-transition: opacity 0.4s ease-in-out 0s;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 3px 0 0 0;
font-size: 0 !important;
line-height: 0;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0;
}
body #mal_cs_listinfo:hover div, body #mal_cs_links:hover div, body #mal_cs_otherlinks:hover div, body #mal_cs_powered:hover div, body #mal_cs_powered:hover dd {
opacity: 1;
}
body #mal_cs_listinfo div:nth-of-type(2), body #mal_cs_links div:nth-of-type(2), body #mal_cs_otherlinks div:nth-of-type(2), body #mal_cs_powered div:nth-of-type(2) {
border-radius: 0 0 3px 3px;
padding: 4px 0 8px;
}
body #mal_cs_listinfo a, body #mal_cs_links a, body #mal_cs_otherlinks a, body #mal_cs_powered a {
background-color: rgba(64, 60, 90, 0.6);
border-radius: 3px 3px 3px 3px;
display: block;
font: 13px/17px arial,sans-serif;
margin: 4px 12px 0;
padding: 3px 0;
text-decoration: none;
}
body #mal_cs_listinfo a:nth-of-type(1), body #mal_cs_links a:nth-of-type(1), body #mal_cs_otherlinks a:nth-of-type(1), body #mal_cs_powered a:nth-of-type(1) {
margin-top: 0;
}
body #mal_cs_listinfo a:hover, body #mal_cs_links a:hover, body #mal_cs_otherlinks a:hover, body #mal_cs_powered a:hover {
background-color: #403C5A;
}
body #mal_cs_listinfo strong a strong {
font-weight: normal;
}
body #mal_cs_otherlinks strong {
color: #333333;
display: block;
font: bold 13px/17px arial,sans-serif !important;
padding: 0 4px 4px;
text-shadow: 0 1px 1px #FFFFFF;
}
body #mal_cs_otherlinks strong a {
background: none repeat scroll 0 0 transparent;
border-radius: 0 0 0 0;
color: #333333;
display: inline;
font: bold 13px/17px arial,sans-serif !important;
margin: 0;
padding: 0;
text-shadow: 0 1px 1px #FFFFFF;
}
body #mal_cs_powered a {
background-color: rgba(255, 255, 255, 0.6) !important;
border-radius: 3px 0 0 0 !important;
display: block !important;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0 !important;
}
body #mal_cs_powered:hover a {
opacity: 1;
}
body #mal_cs_powered a img {
background: url("http://invise.s3.amazonaws.com/mal/mal.png") no-repeat scroll 50% 6px rgba(64, 60, 90, 0.6);
border-radius: 3px 3px 3px 3px;
display: block;
height: 0;
margin: 0 12px;
padding: 23px 0 0 126px;
width: 0;
}
body #mal_cs_powered a img:hover {
background-color: #403C5A;
}
body #mal_cs_powered #search {
border-radius: 0 0 3px 3px;
padding: 8px;
position: relative;
}
body #mal_cs_powered #search #searchBox {
-moz-box-sizing: border-box;
border-color: #BCBCBC #D6D6D6 #D6D6D6;
border-radius: 2px 2px 2px 2px;
border-style: solid;
border-width: 1px;
color: #333333;
display: inline-block;
font-family: arial,sans-serif;
font-size: 13px;
height: 28px;
padding-left: 6px;
padding-right: 24px;
vertical-align: top;
width: 100%;
}
body #mal_cs_powered #search #searchBox:hover, body #mal_cs_powered #search #searchBox:focus {
border-color: #ACACAC #C6C6C6 #C6C6C6;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
body #mal_cs_powered #search #searchListButton {
background: url("http://invise.s3.amazonaws.com/mal/icon-go.png") no-repeat scroll 0 0 transparent;
border-radius: 3px 3px 3px 3px;
height: 0;
margin: 0;
padding: 16px 0 0 16px;
position: absolute;
right: 12px;
top: 14px;
width: 0;
}
body #mal_cs_listinfo {
background-image: url("http://invise.s3.amazonaws.com/mal/icon1.png");
right: 106px;
}
body #mal_cs_listinfo:hover {
background-image: url("http://invise.s3.amazonaws.com/mal/icon1-over.png");
}
body #mal_cs_links {
background-image: url("http://invise.s3.amazonaws.com/mal/icon2.png");
right: 72px;
z-index: 9;
}
body #mal_cs_links:hover {
background-image: url("http://invise.s3.amazonaws.com/mal/icon2-over.png");
}
body #mal_cs_otherlinks {
background-image: url("http://invise.s3.amazonaws.com/mal/icon3.png");
right: 38px;
z-index: 8;
}
body #mal_cs_otherlinks:hover {
background-image: url("http://invise.s3.amazonaws.com/mal/icon3-over.png");
}
body #mal_cs_powered {
background-image: url("http://invise.s3.amazonaws.com/mal/icon4.png");
right: 4px;
z-index: 7;
}
body #mal_cs_powered:hover {
background-image: url("http://invise.s3.amazonaws.com/mal/icon4-over.png");
}



#mal_control_strip {
background: transparent !important;
}
td#mal_cs_pic a img {
display: none;
}
#mal_cs_pic, #mal_cs_listinfo, #mal_cs_links {
border-right: 0 none !important;
}

Dabar pasirenkame norimą stilių apačioje ir nukopijuojame jo kodą.
Kai išsirinkome norimą stilių nukopijuojame jį ir įklijuojame į tuščią lauką.
6 Žingsnis Išsaugome kodą įklijuotą lauke ir spaudžiame raudonai apvestą update CSS.

Spoileris:

Jeigu viskas gerai išmes šitą žinutę.

7 Žingsnis patvirtiname stilių.
Paspaudžiame šitą nurodą :http://myanimelist.net/editprofile.p...do=changestyle
Paspaudžiame rodyklę ir spustelime ant savo nuosavo stiliaus.

Spoileris:

Dabar paspaudžiame change list styles apvestą raudonai.

Spoileris:

Kai išsaugosite nustatymus pamatysite tai

Spoileris:

Jei norite susikurti antrą stiliu mangai paspauskite čia http://myanimelist.net/editprofile.p...pref&do=cssadv

Visus savo css stilius pamtysite čia http://myanimelist.net/editprofile.p...pref&do=cssadv

[Augis24]

Neblogas dalykelis, bet butu gerai, jei isverstum i lietuviu kalba, nes vis gi ne visi cia susirinkusieji moka anglu ir tai turetu daugiau naudos, nei vien tik pakopintas

[mattusha]

Išvaizda

Spoileris:

Kodas

Spoileris:

/*
BACKGROUND IMAGE
This is the main background image for the whole page.
Change the image link to the background you want!
For more help see here:
http://myanimelist.net/clubs.php?cid=19736
*/

body {
color: #595959;
background-image:
url(http://i878.photobucket.com/albums/a...style-bg.png);
background-repeat: repeat;
background-attachment: scroll;
}

/*
CURRENTLY WATCHING/READING HEADER
This is the header above currently watching/reading. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_cw {
background-image:url(http://i878.photobucket.com/albums/a...WATCHING.png);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:white;
font-family:;
font-size:;
}



/*
COMPLETED HEADER
This is the header above completed animes and manga. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_completed {
background-image:url(http://i878.photobucket.com/albums/a...COMPLETE.png);
height: 243px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:white;
font-family:;
font-size:;
}



/*
ON-HOLD HEADER
This is the header above your animes/mangas on-hold. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_onhold {
background-image:url(http://i878.photobucket.com/albums/a...s-ONHOLD.png);
height: 256px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:white;
font-family:;
font-size:;
}



/*
DROPPED HEADER
This is the header above your dropped animes/mangas. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind the list.
*/
.header_dropped {
background-image:url(http://i878.photobucket.com/albums/a...-DROPPED.png);
height: 200px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:white;
font-family:;
font-size:;
}



/*
PLAN TO WATCH/READ HEADER
This is the header above the anime/manga you plan to see or read on your list. Increase the height if your image doesn't fit the header. Lower the margin-bottom below zero to move it behind

the list.
*/
.header_ptw {
background-image:url(http://i878.photobucket.com/albums/a...-PLANNED.png);
height: 236px;
margin-bottom: 0px;
background-color: transparent;
background-repeat: no-repeat;
color:;
font-family:white;
font-size:;
}

/*
REMOVE HEADER COLOR
You need this code to remove the default background colors from the header and override any related codes. You're supposed to use your own images or the default ones for the header, so this

color is set to transparent so it won't get in the way. If you want the color back for some reason, remove this section.
*/
.header_title {
background-color: transparent !important;
}

/*
OTHER CODES
Stuff I had to add after site changes. You need this otherwise the headers won't be visible.
*/
tbody
{background-color: transparent;
background-image: none;}


/*
REMOVE HEADER TEXT
These codes remove the original text like "Completed" and "Currently Watching" from
each category on the list. Some people will want the text gone so they can have their own custom logos. But if you want the text back, you have to remove this whole section. It shouldn't

affect the images in any way.
*/
.header_title, .table_header a, .table_header {
color: gray !important;
color: transparent !important;
font-size: 1px !important;
font-size: 0px !important;
font-size: 0 !important;
font-size: 0pt !important;
}

body {
font-weight: light;
background-position: top left;
background-repeat: repeat;
background-color: #fce700;
}
#list_surround {
width:600px;}


/*FONT COLORS
"a" codes are the colors of the anime titles.
td1 and td2 are the other colors on the list.
The last section controls the fonts of the bottom.

*/
a {
color:white;
text-decoration:none;
}
a:visited {
color:white;
text-decoration:none;
}

a:hover, a:visited:hover {
color:black;
text-decoration:underline;
}
.td1,
.td2 {
background-image: url(none) !important;
background-color: black;
border-width:1;
border-color: #fce700;
padding:2px;
color: aliceblue;
}
.category_totals,
#grand_totals,
#copyright {
background-image: url(none) !important;
background-color: #fce700;
border-width:2;
border-color: black;
padding:2px;
color: gray;
}
/*OTHER CODES
*/
#list_surround {
margin:auto;
background-image:url();
}

.td1:HOVER,
.td2:HOVER {
background-color:#fce700;
border-width:1;
padding:2px;
}
.status_selected {
background-color:black;
padding:2px;
color:white;
text-decoration: blink;
}
.status_not_selected {
background-color:black
;
padding:2px;
color:white;
}
.status_selected a{
color:yellow;
}
.status_not_selected a{
color:white;
}
.thickbox {
color:yellow;
font-family:fantasy;
font-size:12px;
}
.header_title {
height:52px;
padding:2px;
}
.category_totals {
height:30px;
}
#copyright, #grand_totals {
text-align: center;
margin:0 auto;
}

#inlineContent {
background: url(http://img404.imageshack.us/img404/7...yleoverlay.png) no-repeat fixed center top transparent !important;
display: inline-block !important;
height: 1000px !important;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 1300px !important;
z-index: -1 !important;
}

/*LIST BORDERS
You can change the color of the border with border-color. You can increase the size of the border by increasing the px amount after border-width.
*/
.status_selected, .category_totals, .td1, .status_not_selected, .td2,#grand_totals, #copyright {
border-color: #1C1C1C;
border-style: solid;
border-width: 1px;}

Išvaizda

Spoileris:

Kodas

Spoileris:

/* IMPORTS AND BODY
This is the MATH part of the layout. Don't touch it unless you know what you're doing */
@import url(http://veriti.opendrive.com/files/OV..._general.css);
/* Remove the following line if you don't want to use my top bar redux */
@import url(http://veriti.opendrive.com/files/OV..._top_bar.css);

body{
/* Set up a background image: */
background-image: url("http://ihostimages.x10.mx/images/xqAfF31r9GakhWR.jpg");

/* Set up a point of transformation. This is the point
* of image that should always be at the top and
* preserve it's location at these offsets.
* If you don't understand how it works, 50% 50% should
* be ok in most cases. Default: point to Okabe's face.
*/
background-position: 60% 18%;

/* Set up fonts you want to use and preferred basic size.
* It will look for the first font at the list, then for
* the second, etc. The last parameter describes a generic
* font family, which will be used if none of the fonts are
* on the user PC. The size can be also set using keywords
* like xx-small, google for font-size if you want more info
*/
font-family: 'Segoe UI', 'Century Gothic', sans-serif;
font-size: 11px;
}

/*LIST HOVER COLOR
This configures the look of the part with sort links:
* the border and the background.
* Colors are in rgba format which means first three values
* define a color in Red-Green-Blue mode and the last one
* sets up an opacity of the color: rgba(R,G,B,a)
* Use color picker in Photoshop (or other image editor),
* Opera Dragonfly or Rainbow Firefox extension to get desired
* RGB values and then play with opacity until you get what you
* wanted.
*/

tr:hover [class^="td"] {
background-color: rgba(4, 150, 100, 0.9) !important;
}

.table_header{
background-color: rgba(0,0,0,0.4);
border-color: rgba(255,255,255,0.25);
}


.table_header, .table_headerLink{
/* Color of the sort links. I used short hex notation here but
* you may use whatever you want, rgb, rgba or full-hex. This
* won't be mentioned below, the way to change colors is the same
*/
color: #FFF;

/* Remove the following line if you want links to be underlined */
text-decoration: none;
}

.table_headerLink:hover{
/* This configures a light white glow on hovered links
* Changing colors should be enough here so I'll leave it for you.
* It's the same rgba we've encountered.
*/
text-shadow: rgba(255,255,255,0.4) -1px -1px 3px, rgba(255,255,255,0.4) 1px 1px 3px;
}

/* The look of the rest of the table
* Configures background, border and text color for non-links
* I made it a bit more opaque than sorting headers
*/
.td1, .td2{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
color: #FFF;
}

/* This is for the links in the rest of the table */
.td1 a, .td2 a{
text-decoration: none; /* Removes underline for these */
color: #ffc700; /* Paints links orange */
}

/* Glow effect on link hover. The same text-shadow property */
.td1 a:hover, .td2 a:hover{
text-shadow: #9d9d31 -1px -1px 3px, #9d9d31 1px 1px 3px;
}


/* This makes all text in tables bold except for Edit - More */
#list_surround td[class^='td']:first-child, #list_surround td[class^='td']:nth-child(n+3), .animetitle{font-weight:bold}

/* CSS sprite for Currently Watching, Completed, Dropped, etc...
* Note there is only one image used for all headers. I've made an
* inverted version for bright layouts:
* http://s004.radikal.ru/i206/1203/ca/77c100a4bb4d.png
* or you can make one yourself. It's not that difficult.
*/
.header_title{
background-image: url(http://i027.radikal.ru/1203/c6/d9bba44c784b.png);
}

/* Block displaying category totals
* It's redesigned to be the part of the table layout
* and you've already encountered all the properties here
* so it won't be hard for you to customise this.
* Note that a different shadow colors used for glow effect
*/
.category_totals{
background-color: rgba(0,0,0,0.5);
border-color: rgba(255,255,255,0.25);
color: #fff;
font-weight: bold;
text-shadow: orange 1px 1px 2px,cyan -1px -1px 2px;
}

/* Text displaying global totals */
#grand_totals{
color: #fff;
font-size: larger;
font-weight: bold;
text-shadow: #c51 -1px -1px 3px, #c51 1px 1px 3px, #c51 1px -1px 4px, #c51 -1px 1px 3px;
/* The following line makes it ALL-CAPS */
text-transform: uppercase;
}

/* Modifying copyright section. It's designed to look similar
* to the whole layout, ok?
*/
#copyright{
background-color: rgba(0,0,0,0.6);
border-color: rgba(255,255,255,0.25);
}

/* Modifying the text color in copyright section */
#copyright, #copyright a{
color: #FFF;
}

/* Configures a CSS sprite for the bar at the bottom */
.status_not_selected a, .status_selected a{
background-image: url('http://i060.radikal.ru/1203/28/2c26e350723d.png');
}

Išvaizda

Spoileris:

Kodas

Spoileris:

#mal_control_strip {
background-color: transparent !important;
background-image: url("http://i.imgur.com/fv1Pc.png") !important;
}
.header_title {
background-color: blanchedAlmond;
border-radius: 5px 5px 0 0;
color: #FFFFFF;
height: 4px;
}
body {
background-attachment: fixed;
background-color: LightGoldenRodYellow;
background-image: url("http://i39.tinypic.com/9bdduv.png");
background-position: left bottom;
background-repeat: no-repeat, repeat-x;
}
.table_header {
background-color: blanchedAlmond;
border-width: 1px;
font-weight: 700;
padding: 5px 7px 5px 4px;
}
#inlineContent {
background-image: url("http://i40.tinypic.com/69paiv.png");
bottom: 0;
display: block !important;
height: 150px;
margin-left: -50px;
position: fixed;
width: 900px;
}
.animetitle, .animetitle:visited {
color: indianRed;
font-family: Verdana,Arial;
font-size: 18px;
}
.td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright {
color: indianRed;
font-family: tahoma;
}
#list_surround {
margin: auto;
padding-top: 18px;
width: 800px;
}
.status_not_selected, .status_selected {
border-radius: 8px 8px 0 0;
cursor: pointer;
height: 14px;
margin: 0 15px;
outline: 0 none;
padding: 0 8px;
width: auto !important;
}
tr:hover [class^="td"] {
background-color: papayaWhip;
}
.category_totals, .td1, .td2, #grand_totals, #copyright {
border-width: 0;
padding: 2px;
}
.status_selected {
background-color: blanchedAlmond;
margin: 0;
padding: 4px;
text-decoration: none;
}
.status_not_selected {
background-color: blanchedAlmond;
color: #A52A2A;
padding: 4px;
}
.category_totals {
height: 30px;
}
#copyright, #grand_totals {
margin: 0 auto;
padding: 0 0 64px;
text-align: center;
}
.td1 a:hover, .td2 a:hover {
text-shadow: -1px -1px 3px white, 1px 1px 3px #FA8072;
}
.td1, .td2 {
border-color: salmon;
border-style: inset;
border-width: 0 0 1px !important;
padding: 8px 6px;
}
.status_selected:hover {
background-image: url(http://i44.tinypic.com/2q1usfn.png);
border: 0 dotted #A52A2A !important;
}
a, a:visited {
text-decoration: none;
}
.status_selected a, .status_not_selected a {
color: indianRed;
font-family: impact;
}
[align="center"] {
text-align: center;
}
body div#list_surround br, body div#list_surround br, .header_title span {
display: none;
}

[Perla]

Labai dėkoju už pamoką. Laiko turėdama šį savaitgalį būtinai paeksperimentuosiu.

[fasian]

Geros pamokas bet gerai kad jas kazkaip dar labiu suspaustum i spoilerius

[mattusha]

Daugiau rasite css stiliu ir kitokių gudrybių anglų kalba čia.