New
Nov 27, 2013 3:46 PM
#51
Add at the bottom of the css: .header_cw td, .header_completed td, .header_onhold td, .header_dropped td, .header_ptw td { vertical-align: bottom; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { margin-bottom: 36px !important; /* 32 of line height + 2*2px padding */ } also add in .header_title .header_title{ margin-bottom: -36px; } |
Nov 28, 2013 2:06 AM
#52
Thank you very much :D but it ALMOST working ^^ As you can see here https://dl.dropboxusercontent.com/u/55985962/03.jpg on watching/completed/on hold/dropped it's working but on plan to watch doesn't :( Current code @import "http://fonts.googleapis.com/css?family=Varela+Round"; @import "http://fonts.googleapis.com/css?family=Margarine"; @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; body { background-attachment: fixed; background-image: url("https://dl.dropboxusercontent.com/u/55985962/fora/MALanime.jpg"); background-size: cover; } body { background-position: 0px 15%; } .header_title { background-color: transparent; background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png"); color: white; font-family: 'calibri',cursive; font-size: 26px; text-align: center; text-shadow: 3px 3px 3px #000000; margin-bottom: -36px; } .table_header { background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png"); } .animetitle, .animetitle:visited { color: white; font-family: 'calibri',sans-serif; font-size: 14px; text-shadow: 0 2px 1px #000000; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: 'calibri',sans-serif; font-size: 12px; text-shadow: 0 2px 1px #000000; } #list_surround { width: 700px; } #list_surround { position: absolute !important; right: 100px !important;} #list_surround { margin: inherit !important; left: inherit !important; } #list_surround { position: absolute !important; top: 10px;} body { background-color: #FBFDE8; background-repeat: no-repeat; } #list_surround { background-image: url(""); left: 2px; position: absolute; } a { text-decoration: none; } a:visited { text-decoration: none; } a:hover, a:visited:hover { color: #D3D3D3; text-decoration: underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png"); border-width: 0; padding: 2px; } .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ2.png"); border-width: 0; padding: 2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } .status_selected { background-color: black; color: white; display: none; padding: 2px; text-decoration: blink; } .status_not_selected { background-color: black; color: white; display: none; padding: 2px; } .status_selected a { color: blue; display: none; } .status_not_selected a { color: white; display: none; } .thickbox { color: cyan; font-family: 'Happy Monkey',cursive; font-size: 12px; text-shadow: 2px 2px 2px #000000; } .header_title { height: 32px; padding: 2px; border-top-left-radius: 20px; border-top-right-radius: 20px; } .table_header { border-width: 0; font-weight: bold; padding: 2px; } .category_totals { height: 30px; text-align: center; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } #copyright, #grand_totals { margin: 0 auto; text-align: center; border-radius: 20px; } /* Anime List only 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-watching.png); height: 250px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-completed.png); height: 250px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-onhold.png); height: 250px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-droped.png); height: 250px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-plan.png); height: 250px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; 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;} .header_cw td, .header_completed td, .header_onhold td, .header_dropped td, .header_ptw { vertical-align: bottom; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { margin-bottom: 36px !important; /* 32 of line height + 2*2px padding */ } |
Nov 28, 2013 3:08 AM
#53
Try @import "http://fonts.googleapis.com/css?family=Varela+Round"; @import "http://fonts.googleapis.com/css?family=Margarine"; @import "https://dl.dropboxusercontent.com/u/78340470/anime.css"; @import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css"; @import "http://dl.dropbox.com/u/78340470/Icon%20Style%20Menu%20Bar/IconStyleCSSFixedwithCategory.css"; body { background-attachment: fixed; background-image: url("https://dl.dropboxusercontent.com/u/55985962/fora/MALanime.jpg"); background-size: cover; } body { background-position: 0px 15%; } .table_header { background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png"); } .animetitle, .animetitle:visited { color: white; font-family: 'calibri',sans-serif; font-size: 14px; text-shadow: 0 2px 1px #000000; } .td1, .td2, a, a:visited, .category_totals, .table_header, #grand_totals, #copyright { color: white; font-family: 'calibri',sans-serif; font-size: 12px; text-shadow: 0 2px 1px #000000; } #list_surround { width: 700px; } #list_surround { position: absolute !important; right: 100px !important;} #list_surround { margin: inherit !important; left: inherit !important; } #list_surround { position: absolute !important; top: 10px;} body { background-color: #FBFDE8; background-repeat: no-repeat; } #list_surround { background-image: url(""); left: 2px; position: absolute; } a { text-decoration: none; } a:visited { text-decoration: none; } a:hover, a:visited:hover { color: #D3D3D3; text-decoration: underline; } .category_totals, .td1, .td2, #grand_totals, #copyright { background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png"); border-width: 0; padding: 2px; } .category_totals:hover, .td1:hover, .td2:hover, #grand_totals:hover, #copyright:hover { background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ2.png"); border-width: 0; padding: 2px; } #copyright:after { content: " Custom CSS by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } .status_selected { background-color: black; color: white; display: none; padding: 2px; text-decoration: blink; } .status_not_selected { background-color: black; color: white; display: none; padding: 2px; } .status_selected a { color: blue; display: none; } .status_not_selected a { color: white; display: none; } .thickbox { color: cyan; font-family: 'Happy Monkey',cursive; font-size: 12px; text-shadow: 2px 2px 2px #000000; } .table_header { border-width: 0; font-weight: bold; padding: 2px; } .category_totals { height: 30px; text-align: center; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } #copyright, #grand_totals { margin: 0 auto; text-align: center; border-radius: 20px; } .header_cw, .header_completed, .header_onhold, .header_dropped, .header_ptw { height: 282px; background-position: left top; background-repeat: no-repeat; } /* Anime List only 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-watching.png); } /* 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-completed.png); } /* 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-onhold.png); } /* 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-droped.png); } /* 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(https://dl.dropboxusercontent.com/u/55985962/fora/animeMAL/anime-plan.png); } /* 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 { margin-top: 250px; height: 32px; padding: 2px; color: white; font-family: 'calibri',cursive; font-size: 26px; text-align: center; text-shadow: 3px 3px 3px #000000; border-radius: 20px 20px 0 0; background-color: transparent; background-image: url("https://dl.dropbox.com/u/57348187/MAL/PROZ.png"); } |
Nov 28, 2013 4:31 AM
#54
Now is all good :D Arigatou! |
Jul 16, 2014 8:55 PM
#55
How can I make this- (http://www.dafont.com/trigun.font?text=Watching) into a header? |
Jul 17, 2014 5:38 AM
#56
Igneel_Grandine said: How can I make this- (http://www.dafont.com/trigun.font?text=Watching) into a header? You download and install the font to your computer, than make the headers with the font in any graphic design program that uses fonts (all of them afaik). |
Jul 17, 2014 7:11 PM
#57
Shishio-kun said: Igneel_Grandine said: How can I make this- (http://www.dafont.com/trigun.font?text=Watching) into a header? You download and install the font to your computer, than make the headers with the font in any graphic design program that uses fonts (all of them afaik). Thanks! |
Jul 28, 2014 3:07 PM
#58
Hi, I'm having an issue with the .png sprite not being displayed. Code: /* Math part of the layout, don't change unless you know what you're doing */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css"; /* Top bar */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body{ /* Set up a background image: */ background-image: url("http://files.enjin.com/60394/lay/hh1200pu.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: 'Calibri', 'Myriad', 'Segoe UI', 'Century Gothic', sans-serif; font-size: 12px; } /*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 * 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 */ .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 ins 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 Headers * There is only one image used for all headers. * http://files.enjin.com/60394/lay/HeaderSpr.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url ([url=http://files.enjin.com/60394/lay/HeaderSpr8b.png]http://files.enjin.com/60394/lay/HeaderSpr8b.png); } /* Block displaying category totals * It's redesigned to be the part of the 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); } #copyright:after { content: " Custom CSS by Veriti. Original edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } /* 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://i.imgur.com/rSgqF.png'); } /* upd 1th March 2012*/ /* upd 20th December 2012 import links rehosted, images rehosted*/ And here's a fast link to the PNG in question: http://files.enjin.com/60394/lay/HeaderSpr.png It is the same dimensions as the original sprite and the elements are to size... A headscratcher, this The link is not broken, but it just won't display as headers. |
Red_TuesdayJul 28, 2014 3:12 PM
Jul 28, 2014 5:11 PM
#59
Red_Tuesday said: Fixed it :) The pic's link was entered twice, once in a bracket and once without one.Hi, I'm having an issue with the .png sprite not being displayed. Code: /* Math part of the layout, don't change unless you know what you're doing */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css"; /* Top bar */ @import "http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"; body{ /* Set up a background image: */ background-image: url("http://files.enjin.com/60394/lay/hh1200pu.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: 'Calibri', 'Myriad', 'Segoe UI', 'Century Gothic', sans-serif; font-size: 12px; } /*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 * 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 */ .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 ins 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 Headers * There is only one image used for all headers. * http://files.enjin.com/60394/lay/HeaderSpr.png * or you can make one yourself. It's not that difficult. */ .header_title{ background-image: url ([url=http://files.enjin.com/60394/lay/HeaderSpr8b.png]http://files.enjin.com/60394/lay/HeaderSpr8b.png); } /* Block displaying category totals * It's redesigned to be the part of the 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); } #copyright:after { content: " Custom CSS by Veriti. Original edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } /* 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://i.imgur.com/rSgqF.png'); } /* upd 1th March 2012*/ /* upd 20th December 2012 import links rehosted, images rehosted*/ And here's a fast link to the PNG in question: http://files.enjin.com/60394/lay/HeaderSpr.png It is the same dimensions as the original sprite and the elements are to size... A headscratcher, this The link is not broken, but it just won't display as headers. @import url("http://dl.dropbox.com/u/78340470/MahouLayoutCSS/MahouCSS.css"); @import url("http://dl.dropbox.com/u/78340470/MahouLayoutCSS/Topbar%20redux.css"); body { background-image: url("http://files.enjin.com/60394/lay/hh1200pu.jpg"); background-position: 60% 18%; font-family: 'Calibri','Segoe UI','Century Gothic',sans-serif; font-size: 12px; } 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: #FFFFFF; text-decoration: none; } .table_headerLink:hover { text-shadow: -1px -1px 3px rgba(255, 255, 255, 0.4), 1px 1px 3px rgba(255, 255, 255, 0.4); } .td1, .td2 { background-color: rgba(0, 0, 0, 0.6); border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; } .td1 a, .td2 a { color: #FFC700; text-decoration: none; } .td1 a:hover, .td2 a:hover { text-shadow: -1px -1px 3px #9D9D31, 1px 1px 3px #9D9D31; } #list_surround td[class^="td"]:first-child, #list_surround td[class^="td"]:nth-child(n+3), .animetitle { font-weight: bold; } .header_title { background-image: url("http://i61.tinypic.com/1075sue.png"); } .category_totals { background-color: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; font-weight: bold; text-shadow: 1px 1px 2px #FFA500, -1px -1px 2px cyan; } #grand_totals { color: #FFFFFF; font-size: larger; font-weight: bold; text-shadow: -1px -1px 3px #CC5511, 1px 1px 3px #CC5511, 1px -1px 4px #CC5511, -1px 1px 3px #CC5511; text-transform: uppercase; } #copyright { background-color: rgba(0, 0, 0, 0.6); border-color: rgba(255, 255, 255, 0.25); } #copyright:after { content: " Custom CSS by Veriti. Background edit by Shishio-kun. Google 'Shishio's Custom Lists' for more designs and info."; } #copyright, #copyright a { color: #FFFFFF; } .status_not_selected a, .status_selected a { background-image: url("http://i.imgur.com/rSgqF.png"); } |
Jul 28, 2014 5:16 PM
#60
Oiomi said: Fixed it :) The pic's link was entered twice, once in a bracket and once without one. Brilliant! I guess I falsely assumed the example I used had to be 100% identical except for the links :) Thanks a million :D |
Aug 30, 2014 3:49 AM
#61
Hey shishio! I'm having a problem with the headers. I posted the jpg. links in my CSS but now the headers have a white box behind them instead of being transparent. http://imgur.com/dR0iWuh,SHC1yL4,u3BniLW,b5VSEHc,1Z0g1yq#0 ^ this is the link to the images. Help me ! |
[i]"Yet each man kills the thing he loves, [/i]By each let this be heard, Some do it with a bitter look, Some with a flattering word, The coward does it with a kiss, The brave man with a sword!'' ~Oscar |
Aug 30, 2014 6:56 AM
#62
geniobastardo said: well you already mentioned the problem. Jpeg does not supporttransparent backgrounds.Hey shishio! I'm having a problem with the headers. I posted the jpg. links in my CSS but now the headers have a white box behind them instead of being transparent. http://imgur.com/dR0iWuh,SHC1yL4,u3BniLW,b5VSEHc,1Z0g1yq#0 ^ this is the link to the images. Help me ! |
Aug 30, 2014 7:45 AM
#63
Oiomi-chan said: geniobastardo said: well you already mentioned the problem. Jpeg does not supporttransparent backgrounds.Hey shishio! I'm having a problem with the headers. I posted the jpg. links in my CSS but now the headers have a white box behind them instead of being transparent. http://imgur.com/dR0iWuh,SHC1yL4,u3BniLW,b5VSEHc,1Z0g1yq#0 ^ this is the link to the images. Help me ! It was png. actually. Sorry for the wrong statement. I tried uploading with both the formats but with the same aftermath. I think something's wrong with the code. |
geniobastardoAug 30, 2014 8:08 AM
[i]"Yet each man kills the thing he loves, [/i]By each let this be heard, Some do it with a bitter look, Some with a flattering word, The coward does it with a kiss, The brave man with a sword!'' ~Oscar |
Aug 30, 2014 8:50 AM
#64
geniobastardo said: It was png. actually. Sorry for the wrong statement. I tried uploading with both the formats but with the same aftermath. I think something's wrong with the code. I don't see how its the code- your image on Imgur you linked us to has the white background (no transparency behind it). So in between when you made the image and uploaded the pic, something else added the white background. You probably didn't save or export the header image in your graphic design program as a PNG, or you didn't make the background transparent in the program (probably this based on what you said). Also your header is transparent on your list... the only thing with the white background is the header pic itself on Imgur. |
Aug 30, 2014 9:01 AM
#65
Shishio-kun said: geniobastardo said: It was png. actually. Sorry for the wrong statement. I tried uploading with both the formats but with the same aftermath. I think something's wrong with the code. I don't see how its the code- your image on Imgur you linked us to has the white background (no transparency behind it). So in between when you made the image and uploaded the pic, something else added the white background. You probably didn't save or export the header image in your graphic design program as a PNG, or you didn't make the background transparent in the program (probably this based on what you said). Also your header is transparent on your list... the only thing with the white background is the header pic itself on Imgur. oh yes I messed up when I downloaded the images. Thanks for the reminder! |
[i]"Yet each man kills the thing he loves, [/i]By each let this be heard, Some do it with a bitter look, Some with a flattering word, The coward does it with a kiss, The brave man with a sword!'' ~Oscar |
Nov 14, 2014 1:00 PM
#66
Nov 14, 2014 4:05 PM
#67
Milk_is_Special said: Can someone help me with my headers, I moved them down because they weren't in the right place but then this happened: You took away all the height for some reason. You can raise height back to 100px or so to see the headers again. The margin-bottom should be 0, unless you want to move the headers toward and behind the list, then you adjust the numbers as it says in the code (below 0, as in negative numbers). |
Nov 14, 2014 4:40 PM
#68
Shishio-kun said: Ok, thank you very much for your fast response.Milk_is_Special said: Can someone help me with my headers, I moved them down because they weren't in the right place but then this happened: You took away all the height for some reason. You can raise height back to 100px or so to see the headers again. The margin-bottom should be 0, unless you want to move the headers toward and behind the list, then you adjust the numbers as it says in the code (below 0, as in negative numbers). |
May 19, 2015 11:47 AM
#69
Hi, I also have the problem that my watching image wont show up and it doesn't matter which image I use. Although it seems like others had this problem before, I just don't get it. I used the same code as in the description: /* Anime List only CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i62.tinypic.com/11b124i.jpg); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* COMPLETED HEADER This is the header above your anime/manga that's completed. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_completed { background-image:url(http://i62.tinypic.com/11b124i.jpg ); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* ON-HOLD HEADER This is the header above your animes/mangas on-hold. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_onhold { background-image:url(http://i56.tinypic.com/j7gs3b.jpg); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* DROPPED HEADER This is the header above your dropped animes/mangas. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_dropped { background-image:url(http://i52.tinypic.com/2a62ulu.jpg); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } /* PLAN TO WATCH HEADER This is the header above the anime/manga you plan to see or read on your list. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_ptw { background-image:url(http://i62.tinypic.com/2573d6d.jpg); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; 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 { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } |
May 19, 2015 10:11 PM
#70
You have an extra closing bracket at the bottom of your CSS, one of these: } it screws up codes added underneath it. Remove it then try to add new codes |
Jun 4, 2015 10:09 PM
#72
Hello Shishio-kun, this is my first post on all MAL, I want to thank you for these great tutorials of yours, I have managed to make a list style that is very to my liking, however I wish to do something and I have not found a way to do it. I wish to make it so my header's image is on the "top layer of the page" so to speak. Here's a concept image so you can get what I mean: http://i.imgur.com/qFj0hlk.png As you can see, the character's legs sit on top of the list and any text. Is there a way to achieve this? Here's my list, just in case you're interested. :) http://myanimelist.net/animelist/Lightless_Reaper |
Jun 5, 2015 2:39 AM
#73
Lightless_Reaper said: Hello Shishio-kun, this is my first post on all MAL, I want to thank you for these great tutorials of yours, I have managed to make a list style that is very to my liking, however I wish to do something and I have not found a way to do it. I wish to make it so my header's image is on the "top layer of the page" so to speak. Here's a concept image so you can get what I mean: http://i.imgur.com/qFj0hlk.png As you can see, the character's legs sit on top of the list and any text. Is there a way to achieve this? Here's my list, just in case you're interested. :) http://myanimelist.net/animelist/Lightless_Reaper Yes its possible, you need to edit the header like so: 1. Make the header large enough to show the whole character 2. Give it a z-index code to go in front of the list, for example this should work: z-index: 10 !important; 3. Reposition it over the list like in the example 4. Give it pointer events none so you click thru it and it won't get in the way pointer-events: none That should be fine to do that. Let us know here if there's a part you get stuck on or aren't sure how to do |
Jun 5, 2015 8:11 AM
#74
Shishio-kun said: Yes its possible, you need to edit the header like so: 1. Make the header large enough to show the whole character 2. Give it a z-index code to go in front of the list, for example this should work: z-index: 10 !important; 3. Reposition it over the list like in the example 4. Give it pointer events none so you click thru it and it won't get in the way pointer-events: none That should be fine to do that. Let us know here if there's a part you get stuck on or aren't sure how to do First of all, thank you for your help. I followed your instructions, but they didn't really work as expected: I used your header tutorial (The fist post on this thread), I wanted to edit the "Watching" section, the code for that part is the following: .header_cw { background-image:url(http://i56.tinypic.com/343qcn6.jpg); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } You told me to add z-index: 10 !important; and pointer-events: none; which I did, but even then, when I adjusted the image to it overlayed the list, I would always get this: the header still got under the list. So, I decided to google a bit and found out that you'd need to add position:relative; in order for z-index: 10 !important; to work, Maybe this was just my case but when I put that part of code everything was fixed and now it looks like this: to anyone who might want to do this in the future: Do note that moving the header a bit may be needed in order for it to go where you need it to be. I thought I should post this to inform anyone interested. my final code went like this: CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i.imgur.com/ajtIEXt.png); height:355px; margin-bottom: -100px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; position:relative; z-index: 10 !important; left:45px; pointer-events: none; } Thank you so much for your help, Shishio-kun! :D |
Aug 5, 2015 7:23 AM
#75
Why the 'margin-bottom' disappears from my .header_cw section?it will always have this leave a gap and its causing the image not to appear. .header_cw { background-image:url(http://i56.tinypic.com/343qcn6.jpg); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } |
LegeonXAug 5, 2015 7:28 AM
Aug 16, 2015 2:57 AM
#76
LegeonX said: Why the 'margin-bottom' disappears from my .header_cw section?it will always have this leave a gap and its causing the image not to appear. .header_cw { background-image:url(http://i56.tinypic.com/343qcn6.jpg); height: 90px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } And old MAL glitch, you can try to add the selector (code title) again and then the stuff you want, or import the entire CSS to dodge glitches (there's a topic on this) |
Nov 15, 2015 8:06 AM
#77
How do i make the background transparanet? Tried doing one but failed badly. http://imagehost4.online-image-editor.com/oie_upload/images/1516400700T30X7/transparent.png |
Dec 4, 2015 4:30 AM
#78
Shishio-kun said: /* /* 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 { color: gray !important; color: transparent !important; font-size: 1px !important; font-size: 0px !important; font-size: 0 !important; font-size: 0pt !important; } Add pointer-events: none; |
Dec 7, 2015 7:53 AM
#79
Lightless_Reaper said: Shishio-kun said: Yes its possible, you need to edit the header like so: 1. Make the header large enough to show the whole character 2. Give it a z-index code to go in front of the list, for example this should work: z-index: 10 !important; 3. Reposition it over the list like in the example 4. Give it pointer events none so you click thru it and it won't get in the way pointer-events: none That should be fine to do that. Let us know here if there's a part you get stuck on or aren't sure how to do First of all, thank you for your help. I followed your instructions, but they didn't really work as expected: I used your header tutorial (The fist post on this thread), I wanted to edit the "Watching" section, the code for that part is the following: .header_cw { background-image:url(http://i56.tinypic.com/343qcn6.jpg); height: 200px; margin-bottom: 0px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; } You told me to add z-index: 10 !important; and pointer-events: none; which I did, but even then, when I adjusted the image to it overlayed the list, I would always get this: the header still got under the list. So, I decided to google a bit and found out that you'd need to add position:relative; in order for z-index: 10 !important; to work, Maybe this was just my case but when I put that part of code everything was fixed and now it looks like this: to anyone who might want to do this in the future: Do note that moving the header a bit may be needed in order for it to go where you need it to be. I thought I should post this to inform anyone interested. my final code went like this: CURRENTLY WATCHING HEADER This is the header above currently watching/reading. Increase the amount after "height:" if your image doesn't fit the header. Lower the margin-bottom below zero if you wish the header move it behind the list. If in Google Chrome your header has little to no height and doesn't increase when you try to change it, then replace "height:" with "padding-top:". */ .header_cw { background-image:url(http://i.imgur.com/ajtIEXt.png); height:355px; margin-bottom: -100px; background-color: transparent; background-repeat: no-repeat; color:; font-family:; font-size:; position:relative; z-index: 10 !important; left:45px; pointer-events: none; } Thank you so much for your help, Shishio-kun! :D I was looking for the exact same thing!! Thank you both <3 You saved my life :D |
"If you wish so ardently for your life to disappear then give it to me!" |
Jan 31, 2016 10:39 AM
#80
Hi this is my first time posting here, and I ran into a bit of a problem when I tried to use the sample images to test out the custom headers. Instead of being fixed to their positions, the images 'follow' the screen within their assigned positions (URL: http://myanimelist.net/animelist/Goton_no_Hebi?status=1). I've tested running some other user's CSS styles to test if this is a recurring issue with my system or browser, but that doesn't seem to be the case, meaning that there is some issue with my code. Please help! |
Jan 31, 2016 1:35 PM
#81
Never mind, it turns out I had everything set to 'fixed' instead of 'static'. |
Oct 22, 2016 4:38 PM
#82
Hi Quick question about jasc. How do I save the combined picture (my custom image + cool text word) without the white background? My custom image has a checkered background, and when I convert the pic to jpg/gif/png from jasc it automatically puts the white background in it? What do I do? |
Dec 26, 2018 4:15 AM
#83
Does anyone know how to get rid of these subheaders? http://prntscr.com/lzp1gh |
Dec 26, 2018 5:03 PM
#84
If you just want to remove them entirely, try adding this code to the bottom of your own. It should do what you want./* Remove Column Headers */ [class^="header_"] + table { display: none; } |
Dec 26, 2018 6:39 PM
#85
Valerio_Lyndon said: If you just want to remove them entirely, try adding this code to the bottom of your own. It should do what you want. /* Remove Column Headers */ [class^="header_"] + table { display: none; } thanks for taking care of that :D |
More topics from this board
» theme helpthreat - Jul 5 |
5 |
by Zaryf
»»
Aug 21, 5:46 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1261 |
by KiranaStarr
»»
Aug 16, 5:48 PM |
|
» [CSS] ⭐️ Customize your List Cursor + Cursor FixesShishio-kun - Mar 8, 2021 |
30 |
by Shishio-kun
»»
Jul 28, 3:17 AM |
|
» How To Have Different Banner/Cover image & Background Image For Manga & Anime ListsYasminaRegina - Jul 25 |
2 |
by YasminaRegina
»»
Jul 26, 1:02 AM |
|
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
52 |
by LucaBalsa
»»
Jul 6, 2:02 PM |