Forum Settings
Forums

[CSS] ~ Colorful ~ Puella layout! Personalized covers, reviews, and your favorite Magical Girl!

Pages (2) [1] 2 »
Must be a Club Member to Reply 
#1
May 27, 2013 3:03 PM

Offline
Joined: Feb 2010
Posts: 6054
This layout is custom CSS. If you don't know how to install it, use the easy Beginner's Tutorial in this section:
http://myanimelist.net/forum/?topicid=419405

The design has anime and manga list versions. For more layouts check the full list of Premade Layouts:
http://myanimelist.net/forum/?topicid=318587[/b]


I've taken a requested layout made by TheHolyPotato and added many cool features. There are multiple magical girls you can have on your layout (including all 5!).

Update 2015: new links for the source codes.

Update 2014: layouts fixed up for more compatibility, 5 girl/random versions and manga versions added

Sayaka Miki version, with tags turned on. Rows and buttons light up with your cursor, and covers will enlarge with the cursor too! If you have them turned on, your tags and mini-reviews will appear conveniently under the anime titles!





How to install
You can pick the version of the layout you want below. Just click the link above the screenshot of the version you want. It will take you to the CSS code for that pic which you can add to your CSS edit box here on MAL and save! Thats all. For the best look, make sure you check the Tags box on this page and update your settings. If you really don't want to use tags, or wanna make other adjustments, check the next part of the post!




Anime list versions


Madoka with bow



Madoka looking elegant



Homura with shield



Homura glowing



Homura falling



Sayaka Miki



Tomoe Mami



Sakura



Clean version (no magical girl)



All 5 girls
This version has all five girls, with a different girl on each category page!

http://tny.cz/4f6dc123



Randomly changing magical girl
Every time you refresh or change the page, it chooses randomly from any of these 5 renders: Madoka with bow, Homura with shield, Sayaka Miki, Tomoe Mami, or Sakura.

http://tny.cz/4fe6f593



Manga list versions


Madoka with bow


Clean version (no magical girl)


5 girls version

This version has all 5 girls, a different magical girl on each category page.

http://tny.cz/7e2a8d5d




Fixing the left menu buttons in place
You can fix the category buttons on the left side of the screen as in the example below by adding these codes to your CSS edit box. It will remove the All Anime button tho, since fixing the buttons makes it inaccessible on most screen resolutions.

http://tny.cz/4fa761bb



Changing the images and color settings
I put a lot of notes in the code for changing the images and settings. If you have a question on something you can't find there please ask here in this topic!



If you don't wanna use Tags on your list
If you don't use Tags on your list, it will throw off the rounded corners at the top of the list table. You can add these codes to your CSS to try and fix that.

http://tny.cz/5e1912fc



List width and position changes with screen resolution
Depending on the screen resolution, the list width will change and other elements will reposition themselves to fit that screen. These codes are at the bottom of the CSS, so if you want to customize that you'll need to find the codes that pertain to your screen resolution. If there's a problem let me know here.



Backup spoiler code
In case the above links don't work, you can get the clean version of the layout from this spoiler code. you can then add the render you want on your layout manually in the parenthesis under InlineContent. They are listed below the spoiler.

Code


Links to Magical Girl renders
Modified by Shishio-kun, Oct 31, 2018 11:21 PM
 
#2
May 27, 2013 4:14 PM

Offline
Joined: Oct 2012
Posts: 247
Woah thanks for this shishio :O The only reason I didnt put on the tags with this layout is because the right side got all messed up. Like the top right corner lost its roundness and all the rows were different lengths. What did you do to fix that?
This is what I mean
Modified by TheHolyPotato, May 27, 2013 7:24 PM


 
#3
May 27, 2013 8:44 PM

Offline
Joined: Feb 2010
Posts: 6054
TheHolyPotato said:
Woah thanks for this shishio :O The only reason I didnt put on the tags with this layout is because the right side got all messed up. Like the top right corner lost its roundness and all the rows were different lengths. What did you do to fix that?
This is what I mean


Thank you, I also had put your original version of this layout in our 2013 hall of fame:
http://myanimelist.net/forum/?topicid=599027

On the corner roundness, everyone uses last of type to round the right corner, but when you're using tags on this layout style it is still the last of type but now its no longer visible on the top, and the second to last of type becomes the end of the table. So this controls it:

.table_header:nth-last-of-type(2)

you add nth- before last of type and (x), where x is how many you wanna go back from the end. Phew!

So use for your list:

.table_header:nth-last-of-type(2) {
border-radius: 0 10px 0 0;
}


Might wanna lower width a little too.
 
#4
May 28, 2013 5:04 AM

Offline
Joined: Oct 2012
Posts: 247
Hmm it doesn't seem to be working :/ What am I doing wrong?
I put the code at the end but it still doesn't change?


 
#5
May 28, 2013 12:03 PM

Offline
Joined: Feb 2010
Posts: 6054
TheHolyPotato said:
Hmm it doesn't seem to be working :/ What am I doing wrong?
I put the code at the end but it still doesn't change?


Second to last set (below) isn't closed with a bracket so codes added below it can't take affect. A lot of ppl's codes are like this for some reason.

* {
-webkit-transition:all 0.25s ease-in-out;
transition:all 0.25s ease-in-out;
 
#6
May 28, 2013 12:46 PM

Offline
Joined: Oct 2012
Posts: 247
Wow I feel like an idiot -_- thanks again.


 
#7
May 28, 2013 10:08 PM

Offline
Joined: Feb 2010
Posts: 6054
I've made some adjustments to these layouts and updated the screenshots, so the header text on the table will be a little clearer and the colors match each magical girl! Also there's notes in the code on where you can adjust those colors if you want. Also there's a solution for people who don't want to use tags but want the best look overall.
 
#8
Aug 6, 2013 10:49 PM

Offline
Joined: Mar 2012
Posts: 27
Hello,
i would like to know if you have the manga version of the side buttons (on the left)), if not do you at least have the original so i can edit them myself?? like instead of watching i can put reading and so on..
thanks in advance
My Anime List
DropBox <--- best app ever!!!
 
#9
Aug 13, 2013 7:55 AM

Offline
Joined: Feb 2010
Posts: 6054
devileyes said:
Hello,
i would like to know if you have the manga version of the side buttons (on the left)), if not do you at least have the original so i can edit them myself?? like instead of watching i can put reading and so on..
thanks in advance


I don't have the original or manga alternates- HolyPotato made those buttons- but I've asked him about it! If something comes up he or I will try to post links here.
 
Aug 13, 2013 3:11 PM

Offline
Joined: Mar 2012
Posts: 27
Shishio-kun said:
devileyes said:
Hello,
i would like to know if you have the manga version of the side buttons (on the left)), if not do you at least have the original so i can edit them myself?? like instead of watching i can put reading and so on..
thanks in advance


I don't have the original or manga alternates- HolyPotato made those buttons- but I've asked him about it! If something comes up he or I will try to post links here.

alright thanks alot mate i really appreciate it :)
My Anime List
DropBox <--- best app ever!!!
 
Aug 18, 2013 2:04 PM

Offline
Joined: Oct 2012
Posts: 247
Ok got the manga buttons n stuff edited. I don't know how big the header text is compared to the ones I made so if someone could fiddle with that, that'd be great. If not I'll do it later.

Reading button: http://i.imgur.com/CdokEMa.png
Reading Header: http://i.imgur.com/r8TRp5n.png
Plan to read button: http://i.imgur.com/mOB1pcO.png
Plan to read header: http://i.imgur.com/uH0pl1M.png
All manga button: http://i.imgur.com/mxyGxdy.png


 
Sep 7, 2013 10:47 PM

Offline
Joined: Jun 2013
Posts: 64
When using Internet Explorer my anime list looks perfect but when I look at my list using Google Chrome the rows are still different lengths do you know of any way to fix this so the rows are the same length using Google Chrome.
 
Sep 8, 2013 11:32 AM

Offline
Joined: Feb 2010
Posts: 6054
Vanvonhunter said:
When using Internet Explorer my anime list looks perfect but when I look at my list using Google Chrome the rows are still different lengths do you know of any way to fix this so the rows are the same length using Google Chrome.


Ok thank you for bring that problem to my attn! I wasn't aware of it and its prob my fault when I was converting it in the past and I overlooked the sides in Chrome. But I added a fix to the layouts which can be added onto any CSS:


@media screen and (-webkit-min-device-pixel-ratio:0) {

.td1:nth-of-type(2), .td2:nth-of-type(2){
width: 73% !important;
}

.animetitle {
padding-left: 5px;
}

}



You should be able to add it to the bottom of any of these Mahou templates, just make sure its at the very bottom after the two closing brackets at the bottom. In the templates, I added it before @media all and (min-device-width: 1001px).

I haven't gotten a chance to look at the fix in Chrome in many resolutions, so if someone with a screen resolution of 1600 or more and a smaller one between 1000 and 1200 can tell if it looks even in Chrome I'd appreciate it a lot! Also there is a small unevenness with the very top of the table by the word progress, but thats not the issue (I'll look into this another time after this is working ok), its if the sides of the table are even or not.
 
Sep 8, 2013 12:28 PM

Offline
Joined: Jun 2013
Posts: 64
Thanks that fixed my problem but I changed the width to 75% because otherwise the headers were longer than the rest of the list.

@media screen and (-webkit-min-device-pixel-ratio:0) {

.td1:nth-of-type(2), .td2:nth-of-type(2){
width: 75% !important;
}

.animetitle {
padding-left: 5px;
}

}

Modified by Shishio-kun, Sep 8, 2013 12:45 PM
 
Sep 8, 2013 12:45 PM

Offline
Joined: Feb 2010
Posts: 6054
Wow good!

Hmm can someone do me a favor and try this too real fast, and tell me if the headers line up, and whats your screen resolution if you know please? Mine is 1366px, so I go by that, need other resolutions like 1024px or wider than 1366

@media screen and (-webkit-min-device-pixel-ratio:0) {

.td1:nth-of-type(2), .td2:nth-of-type(2),
.table_header:nth-of-type(2){
width: 73% !important;
}


.animetitle {
padding-left: 5px;
}

}
 
Sep 8, 2013 1:14 PM

Offline
Joined: Jun 2013
Posts: 64
Shishio-kun said:
Wow good!

Hmm can someone do me a favor and try this too real fast, and tell me if the headers line up, and whats your screen resolution if you know please? Mine is 1366px, so I go by that, need other resolutions like 1024px or wider than 1366

@media screen and (-webkit-min-device-pixel-ratio:0) {

.td1:nth-of-type(2), .td2:nth-of-type(2),
.table_header:nth-of-type(2){
width: 73% !important;
}


.animetitle {
padding-left: 5px;
}

}


My screen resolution is 1366 x 768 and using the above code still shows the headers longer than the rest of the list.
 
Sep 18, 2013 9:07 AM

Offline
Joined: Jun 2013
Posts: 64
TheHolyPotato said:
Ok got the manga buttons n stuff edited. I don't know how big the header text is compared to the ones I made so if someone could fiddle with that, that'd be great. If not I'll do it later.

Reading button: http://i.imgur.com/CdokEMa.png
Reading Header: http://i.imgur.com/r8TRp5n.png
Plan to read button: http://i.imgur.com/mOB1pcO.png
Plan to read header: http://i.imgur.com/uH0pl1M.png
All manga button: http://i.imgur.com/mxyGxdy.png


Been using this on my manga list and was wondering if you could redo the Completed, On-Hold, and Dropped headers to because I like the larger font headers you picked for the manga list.
 
Oct 13, 2013 5:30 PM

Offline
Joined: Oct 2012
Posts: 247
Sorta half-assed the headers, redid them for manga lists

Reading: http://i.imgur.com/OWi79tP.png
Completed: http://i.imgur.com/qgcVOFM.png
On Hold: http://i.imgur.com/KVv7E0r.png
Dropped: http://i.imgur.com/HVrzRMz.png
Plan to Read: http://i.imgur.com/o4RuvMU.png


 
Oct 13, 2013 6:40 PM

Offline
Joined: Jun 2013
Posts: 64
TheHolyPotato said:
Sorta half-assed the headers, redid them for manga lists

Reading: http://i.imgur.com/OWi79tP.png
Completed: http://i.imgur.com/qgcVOFM.png
On Hold: http://i.imgur.com/KVv7E0r.png
Dropped: http://i.imgur.com/HVrzRMz.png
Plan to Read: http://i.imgur.com/o4RuvMU.png


Thanks for redoing them they look great.
 
Jan 2, 2014 5:35 AM

Offline
Joined: Apr 2011
Posts: 1043
Is there any way to resolve this problem:

----> CLICK HERE!
 
Jan 2, 2014 9:09 AM

Offline
Joined: Jun 2013
Posts: 64
mshitsugaya10 said:
Is there any way to resolve this problem:

----> CLICK HERE!


If I remember correctly you just have to go under custom headers in your CSS and change the margin-top: -200px; to (ex: -150 or -100) or to the distance you like for Completed header, Onhold header, Dropped header, and PTW header.
 
Jan 3, 2014 10:30 AM

Offline
Joined: Apr 2011
Posts: 1043
Vanvonhunter said:
mshitsugaya10 said:
Is there any way to resolve this problem:

----> CLICK HERE!


If I remember correctly you just have to go under custom headers in your CSS and change the margin-top: -200px; to (ex: -150 or -100) or to the distance you like for Completed header, Onhold header, Dropped header, and PTW header.



Thank you so much! My problem with my list was finally solved!~
 
Feb 7, 2014 11:39 PM

Offline
Joined: Feb 2010
Posts: 6054
Aeowina said:
I have a minor problem: The images for the anime or manga wont show up. The box is left a pinkish-purple solid color. It isn't because of incomplete loading - because I've refreshed many times, etc. How do I fix this?


You didn't copy the imports from the top of the CSS. just recopy the whole layout and make sure you include the imports at the top
 
Mar 4, 2014 10:41 AM

Offline
Joined: Oct 2011
Posts: 42
The links doesn't work, but only the clean version of this layout. (Which is on my anime list) But I really wanted the other magical girls to be there in the layout when I click on a different page or refresh it. How or where do I put the render pictures of the girls so I can see that??


the power of imagination makes us infinite
 
Mar 4, 2014 1:03 PM

Offline
Joined: Feb 2010
Posts: 6054
XsapphireblueX said:
The links doesn't work, but only the clean version of this layout. (Which is on my anime list) But I really wanted the other magical girls to be there in the layout when I click on a different page or refresh it.


The CSS links don't work now? When I click them they load fine. For example:

https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaMadokaBow.css

https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaRandom.css

these are loading fine for me...



How or where do I put the render pictures of the girls so I can see that??


... always read comments in the CSS code for that stuff first. Scroll down and look for secondary background:

/*
SECONDARY BACKGROUND
Goes behind the list but in front of the main background. Image links to a character render in the parenthesis after background. Add or remove the word "contain" (without quotations) after background-size if you want them to be fit or not fit into the entire page.
*/

#inlineContent {
background: url() no-repeat scroll right bottom transparent;
background-size: ;
display: inline-block !important;
height: 100%;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 100%;
z-index: -1 !important;
}
 
Apr 12, 2014 3:28 PM

Offline
Joined: Mar 2010
Posts: 40
Is there a way to change to color of the shared anime, search, ect. icons in the top right-hand corner? I thought it would be the the lines here...

.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
}
.hide:hover {
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px;
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
position:absolute;
z-index:1;
}

...but changing them did nothing. Any help would be greatly appreciated
 
Apr 12, 2014 3:52 PM

Offline
Joined: Feb 2010
Posts: 6054
ona5200 said:
Is there a way to change to color of the shared anime, search, ect. icons in the top right-hand corner? I thought it would be the the lines here...

.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
}
.hide:hover {
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px;
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
position:absolute;
z-index:1;
}

...but changing them did nothing. Any help would be greatly appreciated


Thats your pink bar import (top of CSS), you have to take codes from there and write over the changes. Some of those top bar codes can't be written over in the CSS edit box, so if they don't work you have to import them to your list (recently updated topic).
 
Apr 12, 2014 7:49 PM

Offline
Joined: Mar 2010
Posts: 40
Shishio-kun said:
ona5200 said:
Is there a way to change to color of the shared anime, search, ect. icons in the top right-hand corner? I thought it would be the the lines here...

.hide {
background-color:rgba(248, 162, 200, 0.701961);
background-position:50% 50%;
background-repeat:no-repeat no-repeat;
background-size:cover;
border:1px solid #FFFFFF;
border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
border-top-left-radius:7px;
border-top-right-radius:0;
display:inline-block !important;
height:55px;
margin-left:33px;
margin-top:-65px;
position:absolute;
width:35px;
}
.hide:hover {
background-color:transparent;
background-repeat:no-repeat no-repeat;
background-size:cover;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-top-left-radius:20px;
border-top-right-radius:20px;
box-shadow:rgba(63, 52, 60, 0.54902) 0 0 8px 8px;
margin-left:-140px;
padding-right:150px;
padding-top:220px !important;
position:absolute;
z-index:1;
}

...but changing them did nothing. Any help would be greatly appreciated


Thats your pink bar import (top of CSS), you have to take codes from there and write over the changes. Some of those top bar codes can't be written over in the CSS edit box, so if they don't work you have to import them to your list (recently updated topic).


OOOOOH, Thanks for the help. Editing just the pictures seem easy enough and since I have it backed up no harm in messing with it.

*Edit* Yea very easy, Thank again for your help.
Modified by ona5200, Apr 12, 2014 9:26 PM
 
Apr 24, 2014 5:56 PM

Offline
Joined: Mar 2014
Posts: 2643
So, The alignment on many of the titles is odd, and inconsistent.

http://oi61.tinypic.com/2hwmkib.jpg

As you can see in the image, some of them appear underneath the images, and some appear just barely to the right of them.

Also, the score, started date, and finished date are all out of place.

I've tried copying this no tags fix to the top of my CSS code:
@import "https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaNoTagsFix.css";

But that didn't work either...

Does anybody know what could be causing this?
Modified by vigorousjammer, Apr 24, 2014 6:08 PM
::End of Transmission::


 
Apr 25, 2014 2:39 AM

Offline
Joined: Aug 2013
Posts: 503
vigorousjammer said:
So, The alignment on many of the titles is odd, and inconsistent.

http://oi61.tinypic.com/2hwmkib.jpg

As you can see in the image, some of them appear underneath the images, and some appear just barely to the right of them.

Also, the score, started date, and finished date are all out of place.

I've tried copying this no tags fix to the top of my CSS code:
@import "https://dl.dropboxusercontent.com/u/78340470/Club%20layouts/Featured/MagicaNoTagsFix.css";

But that didn't work either...

Does anybody know what could be causing this?
My guess is that it's caused by the fact that you have different list settings i.e. what to show not all lists support any settings without editing.




 
May 26, 2014 9:56 PM

Offline
Joined: Feb 2010
Posts: 6054
I've made major updates to all versions of this layout. The most important change is I fixed the annoying glitch (see here) in Google Chrome where you get a gap in your list table when you have too many columns!

Plus, there's a NEW version with ALL the magical girls on it, and they appear on their own individual category pages- just click the side buttons to make that girl appear!

Improved original versions
You can get and reinstall the improved versions of the original layouts from the first page of this topic. I've replaced all the original codes with the updates.

New version with all 5 magical girls!
1 magical girl is on her respective category according to what the side buttons show. So if you click the button with Sayaka on it, you'll go to the Sayaka page (dropped anime). I can't add this to the first post since IMG is broken still, so I'll link it here:






All the improvements with visual examples:




Adding the update to your customized Colorful layouts
I know alot of people customize this layout, and there's no patch you can simply add so you get only the improvements and keep your customizations. But in these improved versions, I've moved all the image and color codes to the top of the CSS. So you should have an easy time replacing the images and colors in these improved defaults so they look like your customized version but with all the improvements!



Did I miss something?
I looked over all these layouts, but let me know if I overlooked something here so I can make the proper changes fast.
Modified by Shishio-kun, May 30, 2014 8:31 PM
 
May 30, 2014 8:34 PM

Offline
Joined: Feb 2010
Posts: 6054
I've created two new manga versions of this layout! Thanks HolyPotato for the manga buttons reskins.

New manga version with all 5 magical girls!
Each magical girl is in the background for her respective category according to what the side buttons show. So if you click the button with Sayaka on it, you'll go to the Sayaka page (dropped manga). I can't add this to the first post since IMG is broken still, so I'll link it here:



Clean manga version
A version for manga lists with no magical girl in the background.
Modified by Shishio-kun, Jun 5, 2014 11:32 AM
 
Aug 31, 2014 7:48 AM
Offline
Joined: Feb 2014
Posts: 1
All the links are down for me, can you do something ?

Thanks
Modified by Heimdell, Aug 31, 2014 8:00 AM
 
Aug 31, 2014 9:18 AM

Offline
Joined: Feb 2010
Posts: 6054
Heimdell said:
All the links are down for me, can you do something ?

Thanks


There won't be a alternative place to download the linked layouts in this topic for a bit- but you can get the Madoka ver from the front post (see bottom). And on the front page of the club, is an alternative to the missing covers and toolbar.
 
Oct 20, 2014 11:51 AM

Offline
Joined: Mar 2014
Posts: 8
Hi, I am currently using this layout but some of the import urls are not working (Dropbox error 404/509), particularly the ones for fixed left menu buttons, randomly changing renders and top icon bar, also for the thumbnails. Can anyone please provide a possible fix or alternative source for the css codes? Thank you. (I have generated my own css for the thumbnails using Blink, but have no idea what to do about the others.)
 
Nov 5, 2014 9:38 PM

Offline
Joined: Sep 2014
Posts: 437
Sorry to be a bother,but none of the links are working for me,whenever I click on the link above the screenshot to view the CSS code,it says:

Error (404)
We can't find the page you're looking for. Check out our Help Center and forums for help, or head back to home.

Is it my laptop(i'm using a Chromebook) that isn't letting me see the CSS-code or are the links not working right now?

By the way,this layout is so cute and amazing :D
 
Nov 5, 2014 11:39 PM

Offline
Joined: Feb 2010
Posts: 6054
Seashell-Xion said:
Sorry to be a bother,but none of the links are working for me,whenever I click on the link above the screenshot to view the CSS code,it says:

Error (404)
We can't find the page you're looking for. Check out our Help Center and forums for help, or head back to home.

Is it my laptop(i'm using a Chromebook) that isn't letting me see the CSS-code or are the links not working right now?

By the way,this layout is so cute and amazing :D


No the links are just dead, see Site Problems on the front page top or stickies in the forum for explanation. In the future the links will be restored but I'm updating other topics right now and its real time consuming.

You can still get the original Madoka one from the spoiler at the bottom of the first post I believe, and then add the top bar you want from the topbar topic linked on the front page (those are all fixed). The dark pink one used in this layout is there
 
Nov 6, 2014 3:18 PM

Offline
Joined: Sep 2014
Posts: 437
Shishio-kun said:
Seashell-Xion said:
Sorry to be a bother,but none of the links are working for me,whenever I click on the link above the screenshot to view the CSS code,it says:

Error (404)
We can't find the page you're looking for. Check out our Help Center and forums for help, or head back to home.

Is it my laptop(i'm using a Chromebook) that isn't letting me see the CSS-code or are the links not working right now?

By the way,this layout is so cute and amazing :D


No the links are just dead, see Site Problems on the front page top or stickies in the forum for explanation. In the future the links will be restored but I'm updating other topics right now and its real time consuming.

You can still get the original Madoka one from the spoiler at the bottom of the first post I believe, and then add the top bar you want from the topbar topic linked on the front page (those are all fixed). The dark pink one used in this layout is there


Oh ok, thank you very much !!! ^_^
 
Feb 22, 2015 3:50 AM
Offline
Joined: Mar 2014
Posts: 2
I can´t find the dropbox page, it´s says Error (404) :S
 
Feb 22, 2015 7:26 AM

Offline
Joined: Feb 2010
Posts: 6054
SpiritHazel said:
I can´t find the dropbox page, it´s says Error (404) :S


You have to use the spoiler code at the bottom of the OP (see previous posts before yours) and add the render you want. Then add topbars and covers from other topics. Site problems and fixes sticky, and forum index sticky, both also linked on the front page- they'll help with that alot. You need to use those till whenever I update this topic, I would hope after exams (this week).
 
Mar 3, 2015 8:22 AM

Offline
Joined: Mar 2015
Posts: 14
all your provided layout are awesome
thank you very much and keep up the good work =)
 
Mar 3, 2015 8:31 AM

Offline
Joined: Mar 2015
Posts: 14
#inlineContent {
background: url(http://i.imgur.com/ySWfIXW.png

http://i.imgur.com/4M34eu4.png

http://i.imgur.com/oRvoKr5.png

http://i.imgur.com/AfeIdHX.png

http://i.imgur.com/yOyaozk.png

http://i.imgur.com/DD77Pw6.png

http://i.imgur.com/s6v57lb.png

http://i.imgur.com/aRlZg1P.png
) no-repeat scroll right bottom transparent;
background-size: ;
display: inline-block !important;
height: 100%;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 100%;
z-index: -1 !important;
}
Read more at http://myanimelist.net/forum/?topicid=606489#Lk7iDa0o7HLeaPTo.99


can i put multiple link for ramdomly shows ??
 
Mar 4, 2015 6:03 AM

Offline
Joined: Feb 2010
Posts: 6054
LouiseWhite said:
#inlineContent {
background: url(http://i.imgur.com/ySWfIXW.png

http://i.imgur.com/4M34eu4.png

http://i.imgur.com/oRvoKr5.png

http://i.imgur.com/AfeIdHX.png

http://i.imgur.com/yOyaozk.png

http://i.imgur.com/DD77Pw6.png

http://i.imgur.com/s6v57lb.png

http://i.imgur.com/aRlZg1P.png
) no-repeat scroll right bottom transparent;
background-size: ;
display: inline-block !important;
height: 100%;
left: 0 !important;
margin: auto !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
width: 100%;
z-index: -1 !important;
}
Read more at http://myanimelist.net/forum/?topicid=606489#Lk7iDa0o7HLeaPTo.99


can i put multiple link for ramdomly shows ??


That won't work. But I've fixed up this layout a lot and there are new source links; there's a anime version with the random girl link in the first post you can use
 
Mar 4, 2015 6:05 AM

Offline
Joined: Feb 2010
Posts: 6054
I've made a lot of dramatic updates the first post-
* new versions of the layouts with working cover and top bar links
* links to the layouts are restored
* added the links to the manga versions
 
Mar 9, 2015 5:26 PM

Offline
Joined: Jan 2013
Posts: 440
I have modified this layout to change the way the covers pop out, as well as a few other minor things.

Modified sections:


Full code for reference:


Would someone please explain how to move the edit button to the right of the anime title? Or how to make it so that tags display 24 pixels down when logged in and 10 pixels down when logged out?

EDIT: changed lines are highlighted in bold
Modified by ixsetf, Mar 9, 2015 5:51 PM
I don't have a signature.
 
Mar 14, 2015 8:29 PM

Offline
Joined: Apr 2011
Posts: 24
Um, Maybe a stupid question but how do you take the little mini picture's next to the names of the anime on the list off the code? I would really just like the list as it would be less cluttered. Thanks.
“To run with the wolf was to run in the shadows, the dark ray of life, survival and instinct. A fierceness that was both proud and lonely, a tearing, a howling, a hunger and thirst. Blessed are they who hunger and thirst. A strength that would die fighting, kicking, screaming, that wouldn't stop until the last breath had been wrung from its body. The will to take one's place in the world. To say 'I am here.' To say 'I am.”


 
Jan 10, 2016 6:08 AM
Offline
Joined: Jun 2015
Posts: 53
Hi, great tutorial! Never thought I could do anything like this so thank you!

One question: How do I change the top right corner of my list?
 
Jan 10, 2016 7:24 AM

Offline
Joined: Jul 2013
Posts: 378
Punk434says said:
Hi, great tutorial! Never thought I could do anything like this so thank you!

One question: How do I change the top right corner of my list?


maybe pick something from this topic
 
Jan 11, 2016 7:06 AM
Offline
Joined: Jun 2015
Posts: 53
nymphiae said:
Punk434says said:
Hi, great tutorial! Never thought I could do anything like this so thank you!

One question: How do I change the top right corner of my list?


maybe pick something from this topic


Thanks! I have one more issue :P

After finishing my manga list, most display images of the manga don't show, and for the ones that do show, they are the wrong ones and they're for anime. Could you please help me fix this?
 
Jan 11, 2016 11:23 AM

Offline
Joined: Aug 2013
Posts: 503
Punk434says said:
nymphiae said:


maybe pick something from this topic


Thanks! I have one more issue :P

After finishing my manga list, most display images of the manga don't show, and for the ones that do show, they are the wrong ones and they're for anime. Could you please help me fix this?
Think you'll find it here.
Modified by Pico-tan, Jan 11, 2016 11:27 AM




 
Top
Pages (2) [1] 2 »