Nie jesteś zalogowany.
Witam, postanowiłem uzupełnić czytane mangi przeze mnie mangi na stronie myanimelist.net, bo robię sobie coraz większe przerwy czasowe z niektórymi tytułami i chcę mieć miejsce, gdzie będę mógł sprawdzić na którym rozdziale skończyłem ostatnio czytać. No i pasowałoby, żeby fajnie takie miejsce wyglądało.
Dla list anime jest sporo gotowych motywów, jednak coś ciężko mi znaleźć jakieś dla list mang... I szczerze mówiąc, nie chce mi się przedzierać przez tematy na forach xD Ktoś miał podobnie i jest w stanie poratować linkiem lub swoim własnym przerobionym motywem? Interesuje mnie taki z okładkami tomów. Pozdro!
Offline
Interesuje mnie taki z okładkami tomów. Pozdro!
Ale wiesz, że okładki będziesz musiał sam robić? A skoro nie chce ci się szukać, to tym bardziej nie będzie ci się chciało ich dodawać.
Ja "pożyczyłem" styl od Nala_Alan.
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,500);
@import url(http://floatingcube.web44.net/more/myanimelist/material/style.css);
/* SET THEME COLOR: set the color for your anime/manga list below. The default is the myanimelist blue color. You can set it to a different color or leave it blue. */
body,
#list_surround:before {
/* Change the color here */
background-color: #2e51a2 !important;
}
/* SET ACCENT COLOR: as of now, this is the color of the plus button in the bottom right hand corner of your list. If you don't change this, then the color will be a dark grey. */
#mal_cs_links div:first-child a:first-child {
/* Uncomment the line below and change the color */
/* background-color: #777; */
}
/* SET LIST WIDTH: The default width for this theme is 730px, however, if your list needs to be wider to fit in other fields, then you can change the width here. If you would like your list to be the same width as your screen, then change the width to 100%. */
#list_surround {
width: 730px;
}
/* OPTIONAL IMAGE: if you wish to place an image on your anime/manga list, then follow the instructions below. Otherwise, ignore them. */
#list_surround:after {
/* Insert a url to an image here to display it on your anime list. */
/*background-image:url(/* replace everything inside these brackets with the url ); */
/* Set the position of the image on the page. Be sure to play around with these values until you are satisfied. Also, any part of the image below the colored part of the screen at the top of your list will be hidden. */
top:70px;
right:100px;
/* IMPORTANT: These must be set to the height and width of your image. */
height:316px;
width:200px;
}
Offline
Ten jest mój. Kod znaleziony na malu. Tak, pokazuje okładki
/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
.hide:before {
background: transparent;
color: white;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}
/*
MINI REVIEW (HOVER TAG)
Move the area around with the left and top codes.
Adjust the surrounding area of the tags by adjusting the padding.
Control the height and width of the section with the height and width codes.
If your tags/mini-reviews aren't hovering correctly or you need help understanding or adjusting the background color code, see the bottom of the original tutorial:
http://myanimelist.net/forum/?topicid=563993
*/
td[class^='td']:nth-of-type(6) {
visibility: hidden;
opacity: 0;
position: fixed;
top: 462px;
left: 0px;
background-color: rgba(20, 30, 255, 0.85) !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 1px;
font-size: 12px;
height: auto;
width: 184px;
padding: 12px 17px 16px 23px;
color: white !important;
z-index: 1;
transition: all 0.4s ease 0s;
}
/* TAG TEXT COLOR*/
tr:hover td[class^='td']:nth-of-type(6) a {
color: white !important;
}
/* OTHER SETTINGS */
:hover + .hide , tr:hover td[class^='td']:nth-of-type(6){
visibility: visible;
opacity: 1;
}
/* REMOVE HEADER
Deletes the header Tags which isn't necessary.
*/
.table_header:nth-of-type(6) {
display: none !important;
}
/* REMOVE TAG EDIT BUTTON
Deletes the Tag's edit link which will is inaccessible with this setup, use the edit button by Animetitle to edit your tags.
*/
td:nth-of-type(6) small {
display: none;
}
/* GOOGLE CHROME FIX
Adjust this amount 50px at a time if your columns are uneven in Chrome.
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
td[class^='td']:nth-of-type(2) {
width: 420px !important;}
}
#copyright, #copyright:hover {
background-color: #C41E0E;
border-radius: 5px 5px 5px 5px;
bottom: 0;
color: white;
padding: 2px;
width: 100%;
}
#copyright:hover {
}
#copyright:before {
color: white;
content: " Design by SylakentH_, got the idea from Stark700s layout. Greets!";
font-size: 12px;
padding-right: 10px;
}
#copyright:after {
color: gold;
content: " ";
padding-left: 20px;
}
#copyright a {
}
a[href=""], [href=""]
{
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i41.tinypic.com/jsejw1.png");
background-position: left top;
background-repeat: no-repeat;
padding-bottom: 5px !important;
padding-left: 29px;
}
/*
COLOR OF THE ICONS
Change the color, and adjust the opacity for brighter color.
Remove the display: none to match the selected icon to the other icons.
*/
#mal\_cs\_listinfo:before, #mal\_cs\_links:before,
#mal\_cs\_otherlinks:before, #mal\_cs\_powered:before {
background: transparent;
opacity: .9;
}
/*
BORDER OF ICONS
If you're having trouble seeing the border bottom, lower the height by a pixel or two until you see it.
*/
#mal_cs_listinfo:before, #mal_cs_links:before, #mal_cs_otherlinks:before, #mal_cs_powered:before, #mal\_cs\_listinfo:before, #mal\_cs\_links:before,
#mal\_cs\_otherlinks:before, #mal\_cs\_powered:before {
border-color: ;
border-style: ;
border-width: ;
height: 32px !important;
}
/*
BUTTONS COLOR AND BORDER
Buttons within the hover menus, not the icons themselves.
Second code is for button color on hover.
*/
#mal_cs_listinfo a, #mal_cs_links a, #mal_cs_otherlinks a, #mal_cs_powered a img{
background-color: rgba(64, 60, 90, 0.6) !important;
border-color: transparent;
border-style: solid !important;
border-width: 1px !important;
}
#mal\_cs\_listinfo a:hover, #mal\_cs\_links a:hover, #mal\_cs\_otherlinks a:hover, #mal_cs_powered a img:hover {
background-color: #403C5A !important;
}
/*
COLOR OF HOVER MENUS AND SELECTED ICONS
Remove display none from the second code to match the colors of the selected icon to the icons above.
*/
#mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div,
#mal\_cs\_powered div, #mal\_cs\_powered dd, #mal\_cs\_powered a {
background-color: rgba(255, 255, 255, 0.6) !important;
}
#mal\_cs\_listinfo:hover:before, #mal\_cs\_links:hover:before,
#mal\_cs\_otherlinks:hover:before, #mal\_cs\_powered:hover:before,
#mal\_cs\_listinfo:hover:after, #mal\_cs\_links:hover:after,
#mal\_cs\_otherlinks:hover:after, #mal\_cs\_powered:hover:after {
display: none;
background-color: ;
opacity: .2;
}
/*
COLOR OF USERNAME (for visitors)
You don't see this username on the menus when you're logged in, log out to see it.
*/
#mal\_cs\_otherlinks strong a {
color: #333333 !important;
}
#mal\_cs\_otherlinks strong a:hover {
color: blue !important;
background-color: transparent !important;
}
/*
POSITION OF TOP BAR
Change to absolute if you want it to not scroll with the page.
*/
#mal\_control\_strip
{
position: fixed !important;
background-color: transparent !important;
background-image: url(none) !important;
}
/*
OTHER CODES
If you want to change out the icon images themselves, you can scroll down through the codes and find the background images and change them with your own.
*/
#mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered {
-moz-box-sizing: border-box;
transition: all 0.4s ease 0s;
background: none no-repeat scroll 100% 0 transparent;
border: 0 none;
height: 0 !important;
overflow: hidden;
position: absolute;
right: 4px;
text-align: center;
top: 4px;
width: 150px;
z-index: 10;
}
#mal\_cs\_listinfo:hover, #mal\_cs\_links:hover, #mal\_cs\_otherlinks:hover, #mal\_cs\_powered:hover {
height: 200px !important;
padding-top: 32px;
width: 150px;
}
#mal\_cs\_listinfo div, #mal\_cs\_links div, #mal\_cs\_otherlinks div, #mal\_cs\_powered div, #mal\_cs\_powered dd {
transition: opacity 0.4s ease-in-out 0s;
border-radius: 3px 0 0 0;
font-size: 0 !important;
line-height: 0;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0;
}
#mal\_cs\_listinfo:hover div, #mal\_cs\_links:hover div, #mal\_cs\_otherlinks:hover div, #mal\_cs\_powered:hover div, #mal\_cs\_powered:hover dd {
opacity: 1;
}
#mal\_cs\_listinfo div:nth-of-type(2), #mal\_cs\_links div:nth-of-type(2), #mal\_cs\_otherlinks div:nth-of-type(2), #mal\_cs\_powered div:nth-of-type(2) {
border-radius: 0 0 3px 3px;
padding: 4px 0 8px;
}
#mal\_cs\_listinfo a, #mal\_cs\_links a, #mal\_cs\_otherlinks a, #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;
}
#mal\_cs\_listinfo a:nth-of-type(1), #mal\_cs\_links a:nth-of-type(1), #mal\_cs\_otherlinks a:nth-of-type(1), #mal\_cs\_powered a:nth-of-type(1) {
margin-top: 0;
}
#mal\_cs\_listinfo strong a strong {
font-weight: normal;
}
#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;
}
#mal\_cs\_otherlinks strong a {
background: none repeat scroll 0 0 transparent !important;
border-color: transparent !important;
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;
}
#mal\_cs\_powered a {
border-radius: 3px 0 0 0 !important;
display: block !important;
margin: 0 !important;
opacity: 0;
padding: 8px 0 0 !important;
}
#mal\_cs\_powered:hover a {
opacity: 1;
}
#mal\_cs\_powered a img {
background: url("http://i.imgur.com/fGTjBC3.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;
}
#mal\_cs\_powered a img:hover {
background-color: #403C5A;
}
#mal\_cs\_powered #search {
border-radius: 0 0 3px 3px;
padding: 8px;
position: relative;
}
#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%;
}
#mal\_cs\_powered #search #searchBox:hover, #mal\_cs\_powered #search #searchBox:focus {
border-color: #ACACAC #C6C6C6 #C6C6C6;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
#mal\_cs\_powered #search #searchListButton {
background: url("http://i.imgur.com/XqsilHp.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;
}
#mal\_cs\_listinfo {
background-image: url("http://i.imgur.com/UXZxrWI.png");
right: 106px;
}
#mal\_cs\_listinfo:hover {
background-image: url("http://i.imgur.com/VcVVnod.png");
}
#mal\_cs\_links {
background-image: url("http://i.imgur.com/LpXWTzt.png");
right: 72px;
z-index: 9;
}
#mal\_cs\_links:hover {
background-image: url("http://i.imgur.com/oPfKrOl.png");
}
#mal\_cs\_otherlinks {
background-image: url("http://i.imgur.com/ogmX9qC.png");
right: 38px;
z-index: 8;
}
#mal\_cs\_otherlinks:hover {
background-image: url("http://i.imgur.com/EEGHkbF.png");
}
#mal\_cs\_powered {
background-image: url("http://i.imgur.com/ct4BVP5.png");
right: 4px !important;
z-index: 7;
}
#mal\_cs\_powered:hover {
background-image: url("http://i.imgur.com/TUUWtaj.png");
}
td#mal\_cs\_pic a img {
display: none;
}
#mal\_cs\_pic, #mal\_cs\_listinfo, #mal\_cs\_links {
border-right: 0 none !important;
}
#mal\_cs\_listinfo, #mal\_cs\_links, #mal\_cs\_otherlinks, #mal\_cs\_powered {
padding: 32px 0 0 !important;
}
#mal\_cs\_listinfo:before,
#mal\_cs\_links:before,
#mal\_cs\_otherlinks:before,
#mal\_cs\_powered:before {
z-index: 10 !important;
content: "";
right: 0 !important;
top: 0 !important;
width: 32px !important;
position: absolute !important;
border-radius: 4px;
}
#mal\_cs\_listinfo:after{
background-image: url(http://i.imgur.com/856wzPZ.png);
}
#mal\_cs\_links:after{
background-image: url(http://i.imgur.com/rwvRyux.png);
}
#mal\_cs\_otherlinks:after{
background-image: url(http://i.imgur.com/fbWr1K4.png);
}
#mal\_cs\_powered:after{
background-image: url(http://i.imgur.com/fKvpt1F.png);
}
#mal\_cs\_listinfo:after,
#mal\_cs\_links:after,
#mal\_cs\_otherlinks:after,
#mal\_cs\_powered:after {
z-index: 10 !important;
content: "";
right: 0 !important;
top: 0 !important;
width: 32px !important;
height: 32px !important;
position: absolute !important;
}
#searchBox {
width: 128px !important;
margin-left: 1px;
}
#mal_cs_powered #search #searchListButton {
right: 15px !important;
top: 12px !important;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#searchBox {
width: 96px !important;
}
}
Ostatnio edytowany przez max-kun (2016-01-17 14:22:03)
Offline
Chodziło mi o takie coś z okładkami :p
Póki mam mało przeczytanych mang, to stosując wasze tematy lista jest dla mnie przejrzysta. Przy większej ilości szybciej idzie się rozeznać po obrazkach niż po wertowaniu tytułów Zobaczymy, czy ktoś coś jeszcze podeśle, jak nie to sobie zmienię tło w którymś temacie od was i tyle.
Offline
Tu są jakieś: http://myanimelist.net/forum/?topicid=618961
I tutaj: http://myanimelist.net/forum/?topicid=318587
Offline
DanteBanKai napisał:Chodziło mi o takie coś z okładkami :p
I gra gitara! Zmieniłem sobie tylko nagłówek na taki z KHR. Dzięki.
Inni mogą dalej podsyłać, może ktoś inny znajdzie coś dla siebie.
P.S. Nie sądziłem, że spotkam kogoś z podobnym avatarem...
Offline