Forum Settings
Forums

[CSS Modern] ShelterStyle by Takana --- Koe no Katachi layout (09/04/2017) ---

Pages (3) [1] 2 3 »
Must be a Club Member to Reply 
#1
Nov 10, 2016 4:46 PM

Offline
Joined: Nov 2009
Posts: 1630
This is a custom layout for modern template lists (anime/manga). If you don't know how to install the codes, use the Beginner's Tutorial (click here).

If there are problems: install the latest version, or check the Repair Sticky for patches and updates (found here).

All premade modern layouts can be found in the gallery by clicking here.

If you have any questions, please ask in here instead of messaging me directly.
---Updated---


Attention:

*Update for 29/03/2017: there was a huge problem for ShelterV3, the list repeating itself if you have greater than 300 anime. Problem has been fixed, the code is replaced, you just need to copy it again. Sorry for the inconvenience.

*FIXES FOR BROKEN DROPBOX LINKS (15/03/2017): go here

*If you're having problems with displaying the cover images on Firefox, add this code on top of your CSS
@\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";


List configuration:


Installing the layout


TROUBLESHOOTING: Please refer to here for the list of commonly questions and how to solve them before you ask!

-----------------------------------------------o0o-----------------------------------------------

Koe no Katachi layout (09/04/2017)


- LINK -


Shelter Style Layout V3
(Seiren theme)


Preview


Changes:

  • Back to the traditional style
  • Simplistic design which is easy to customize


Banner download
Link




-----------------------------------------------o0o-----------------------------------------------


Shelter Style Layout V2


**please leave a comment below if you use my layout, it will motivate me a lot :P**
Note that you're fine modyfing the layout but please keep the credits!


Preview


Changes:

  • Pretty much a lighter version from V1
  • No box shadow surrounding the list
  • Note that this version does not include character's render at the bottom right




-----------------------------------------------o0o-----------------------------------------------


Shelter Style Layout V1




LIST DEMO


Codes:





If you have any questions on how to install this layout, feel free to ask me here. Any suggestion to improve is appreciated!

Modified by Shishio-kun, Aug 21, 2018 1:07 PM
 
#2
Nov 10, 2016 7:16 PM

Offline
Joined: Nov 2009
Posts: 1630
Here are some Shelter style edited themes:

Nier Automata 2B based on ShelterStyleV3 redux



-List Configuration-


-Changes-

  • Menu is now at a fixed position, you can access the menu at any time while scrolling down the list
  • Change the top bar menu, newer looks.
  • Added light-particle effects
  • Status menu (watching, completed, etc) is now fixed on top of the screen when scrolling down the list.



-Download banner here-
http://i.imgur.com/c1UTBP3.jpg

-Codes-




-----------------------------------------------o0o-----------------------------------------------


A custom made layout for Kimi no Na wa.





    Note that:
  • When hovering on any status button (watching, completed, dropped and so on), a matching gif image will appear in place of a still black & white image
  • Improve the look from my Shelter Style layout.





-----------------------------------------------o0o-----------------------------------------------


This is a layout I specifically made for Violet Evergarden

I had fun making this, by combining gif images with a matching color theme (primarily black and white).





    Note that:
  • When hovering on any status button (watching, completed, dropped and so on), a matching gif image will appear in place of a still black & white image
  • Improve the look from my Shelter Style layout.





-----------------------------------------------o0o-----------------------------------------------


Here's a remake of Violet Evergarden layout using ShelterStyleV3.

Violet Evergarden ShelterStyleV3



-List Configuration-


-Download banner here-
http://imgur.com/OW7SuKI

-Codes-



-----------------------------------------------o0o-----------------------------------------------


Aria theme


-Download banner here-
http://i.imgur.com/cExBZLn.jpg

-Codes-
Original Source: https://www.dropbox.com/sh/d6t6jr62naflj1f/AAAlfDGB_cEnt2bqWuEJb4V5a?dl=0&preview=Aria-ShelterStyleCustomization.txt

Code



Gurren Lagann


-Download banner here-
http://i.imgur.com/s8lSr2c.jpg

-Codes-
Original source: https://www.dropbox.com/sh/d6t6jr62naflj1f/AAAlfDGB_cEnt2bqWuEJb4V5a?dl=0&preview=TTGL-ShelterStyleCustomization.txt

Code



Modified by Shishio-kun, Aug 21, 2018 12:44 AM
 
#3
Nov 11, 2016 3:20 PM

Offline
Joined: Nov 2009
Posts: 1630
More themes to choose from

Bungaku Shoujo theme


-Download banner here-
2 banners you can choose from: 1 | 2

-Other backgrounds you can choose from-
Link here

-Codes-Original Source: https://www.dropbox.com/sh/d6t6jr62naflj1f/AAAlfDGB_cEnt2bqWuEJb4V5a?dl=0&preview=Bungaku+Shoujo-ShelterStyleCustomization.txt







---o0o---



Love Live theme


-Download banner here-
2 banners you can choose from: 1 | 2

-Other backgrounds you can choose from-
Link here

-Codes-
Original source: https://www.dropbox.com/sh/d6t6jr62naflj1f/AACuIgmRnBImJ0xUD9N_j9y6a/Lovelive-ShelterStyleCustomization.txt?dl=0


Code:




Gungraves theme


-Download banner here-
Banners you can choose from: 1

-Other backgrounds you can choose from-
I found the best one xD

-Codes-
Original source: https://www.dropbox.com/sh/d6t6jr62naflj1f/AAA_ABLGmHqzKhsPw8CT5DTla/Gungraves-ShelterStyleCustomization.txt?dl=0


Modified by Shishio-kun, Aug 21, 2018 12:41 AM
 
#4
Nov 12, 2016 5:33 PM

Offline
Joined: Nov 2009
Posts: 1630
---Updating---


Shelter Style Layout V2
(Hibike ! Euphonium theme)


Preview


Changes:

  • Pretty much a lighter version from V1
  • No box shadow surrounding the list
  • Note that this version does not include character's render at the bottom right




edit by Shishio-kun: shelterV2 link is down, but you can add this to the top of the CSS codes to use it again with the Shelter1 style.




Modified by Shishio-kun, Aug 21, 2018 12:36 AM
 
#5
Nov 14, 2016 9:25 PM

Offline
Joined: Nov 2009
Posts: 1630
Alright, here is probably my last update and fixes to the layout, but the most important one:

-Update-


  • The banner can now resize proportionally with the width of 1000px (finally found a way to keep the layout intact without setting a fixed value for the banner image!)

    For example:


  • Improve the look of the avatar image.

 
#6
Nov 16, 2016 10:58 PM

Offline
Joined: Nov 2009
Posts: 1630
Here are some commonly asked questions that I have been getting. Although the instructions are there but hardly anyone read them xD

-Troubleshooting-

1/ My cover images are small, I don't know why


2/ The layout is missing functions such as tags, studio names, etc.



 
#7
Dec 13, 2016 9:41 PM

Offline
Joined: Nov 2009
Posts: 1630
A custom made layout for Kimi no Na wa.





    Note that:
  • When hovering on any status button (watching, completed, dropped and so on), a matching gif image will appear in place of a still black & white image
  • Improve the look from my Shelter Style layout.



Modified by Shishio-kun, Aug 21, 2018 12:17 AM
 
#8
Dec 13, 2016 9:42 PM

Offline
Joined: Nov 2009
Posts: 1630
This is a layout I specifically made for Violet Evergarden

I had fun making this, by combining gif images with a matching color theme (primarily black and white).





    Note that:
  • When hovering on any status button (watching, completed, dropped and so on), a matching gif image will appear in place of a still black & white image
  • Improve the look from my Shelter Style layout.



Modified by Shishio-kun, Aug 21, 2018 12:40 AM
 
#9
Dec 18, 2016 8:51 PM

Offline
Joined: Aug 2016
Posts: 211
Takana_no_Hana said:
A custom made layout for Kimi no Na wa.





    Note that:
  • When hovering on any status button (watching, completed, dropped and so on), a matching gif image will appear in place of a still black & white image
  • Improve the look from my Shelter Style layout.





t doesn't work (i mean the url)
Modified by __KonichiwA__, Dec 18, 2016 9:09 PM
 
Dec 18, 2016 9:07 PM

Offline
Joined: Nov 2009
Posts: 1630
@__KonichiwA__

It is working. PLEASE copy exactly what you see in the quote section. DO NOT click on any dropbox links,

This is one line of code for the whole layout, LEAVE IT ALONE, DON'T CLICK ON IT. Thanks.



Also, please change any USERNAME you see below to your MAL name in order to display the correct anime covers. I bolded it for you.

/* Generated cover: change USERNAME in this line of code to your MAL username in order to display the cover */

@import '//mal-image.appspot.com/all/USERNAME/?code=.data.image%20a%5Bhref%5E%3D%22%2F%5BTYPE%5D%2F%5BID%5D%2F%22%5D%20%7B%20background%3A%20url(%5BURL%5D)%3B%20%7D%0A.data.image%20a%5Bhref%5E%3D%22%2F%5BTYPE%5D%2F%5BID%5D%2F%22%5D%20img%20%7B%20display%3A%20none%3B%20%7D';
Modified by Takana_no_Hana, Dec 18, 2016 9:10 PM
 
Dec 18, 2016 9:13 PM

Offline
Joined: Aug 2016
Posts: 211
[quote=Takana_no_Hana message=49014664]@__KonichiwA__

It is working. PLEASE copy exactly what you see in the quote section. DO NOT click on any dropbox links,

This is one line of code for the whole layout, LEAVE IT ALONE, DON'T CLICK ON IT. Thanks.



When i click the link this shows up "Error (404)"
 
Dec 18, 2016 9:15 PM

Offline
Joined: Nov 2009
Posts: 1630
__KonichiwA__ said:


When i click the link this shows up "Error (404)"


Well, you don't click on the link but leave it as it is. This is one line of code for the whole layout, why would anyone want to copy hundred lines of code instead of just one? I don't understand.
 
Dec 18, 2016 9:16 PM

Offline
Joined: Aug 2016
Posts: 211
Takana_no_Hana said:
__KonichiwA__ said:


When i click the link this shows up "Error (404)"


Well, you don't click on the link but leave it as it is. This is one line of code for the whole layout, why would anyone want to copy hundred lines of code instead of just one? I don't understand.


So what do i do?
 
Dec 18, 2016 9:19 PM

Offline
Joined: Nov 2009
Posts: 1630
__KonichiwA__ said:
Takana_no_Hana said:


Well, you don't click on the link but leave it as it is. This is one line of code for the whole layout, why would anyone want to copy hundred lines of code instead of just one? I don't understand.


So what do i do?


Is my installing instruction that hard to follow? What part do you not understand?

Please copy EXACTLY what you see here, no you don't need to click on any links. And change the red bolded text to your MAL username:

/* A custom made Kimi no Na wa layout basde on Shelter Style V2 by Takana no Hana
** Visit Shishio's club for more premade layouts
** If you're interested in my layout, visit here: https://myanimelist.net/forum/?topicid=1567864
*/

/* Generated cover: change USERNAME in this line of code to your MAL username in order to display the cover */

@import '//mal-image.appspot.com/all/USERNAME/?code=.data.image%20a%5Bhref%5E%3D%22%2F%5BTYPE%5D%2F%5BID%5D%2F%22%5D%20%7B%20background%3A%20url(%5BURL%5D)%3B%20%7D%0A.data.image%20a%5Bhref%5E%3D%22%2F%5BTYPE%5D%2F%5BID%5D%2F%22%5D%20img%20%7B%20display%3A%20none%3B%20%7D';

@import
('https://dl.dropboxusercontent.com/u/118667597/ShelterCSS/KiminoNawaCustommade.css');{}
 
Dec 18, 2016 9:21 PM

Offline
Joined: Aug 2016
Posts: 211
Takana_no_Hana said:
__KonichiwA__ said:


So what do i do?


Is my installing instruction that hard to follow? What part do you not understand?

Please copy EXACTLY what you see here, no you don't need to click on any links. And change the red bolded text to your MAL username:

/* A custom made Kimi no Na wa layout basde on Shelter Style V2 by Takana no Hana
** Visit Shishio's club for more premade layouts
** If you're interested in my layout, visit here: https://myanimelist.net/forum/?topicid=1567864
*/

/* Generated cover: change USERNAME in this line of code to your MAL username in order to display the cover */

@import '//mal-image.appspot.com/all/USERNAME/?code=.data.image%20a%5Bhref%5E%3D%22%2F%5BTYPE%5D%2F%5BID%5D%2F%22%5D%20%7B%20background%3A%20url(%5BURL%5D)%3B%20%7D%0A.data.image%20a%5Bhref%5E%3D%22%2F%5BTYPE%5D%2F%5BID%5D%2F%22%5D%20img%20%7B%20display%3A%20none%3B%20%7D';

@import
('https://dl.dropboxusercontent.com/u/118667597/ShelterCSS/KiminoNawaCustommade.css');{}


OH MY F*CKING LIFE, I SEE IT CLEARLY NOW SORRY FOR BEING SOOOOOOO DUMB :3, HAHAHAHAHAHAHA SORRY FOR WASTING UR TIME :3
 
Dec 18, 2016 9:31 PM

Offline
Joined: Aug 2016
Posts: 211
__KonichiwA__ said:
Takana_no_Hana said:


Is my installing instruction that hard to follow? What part do you not understand?

Please copy EXACTLY what you see here, no you don't need to click on any links. And change the red bolded text to your MAL username:



OH MY F*CKING LIFE, I SEE IT CLEARLY NOW SORRY FOR BEING SOOOOOOO DUMB :3, HAHAHAHAHAHAHA SORRY FOR WASTING UR TIME :3


It's still not working :(
 
Dec 18, 2016 9:33 PM

Offline
Joined: Nov 2009
Posts: 1630
__KonichiwA__ said:
__KonichiwA__ said:


OH MY F*CKING LIFE, I SEE IT CLEARLY NOW SORRY FOR BEING SOOOOOOO DUMB :3, HAHAHAHAHAHAHA SORRY FOR WASTING UR TIME :3


It's still not working :(

The layout is a modern layout. You're using the classic one. Refer to here for the installing instruction

Come on man, I stick the instruction into my first post at the very first line.
 
Dec 18, 2016 9:37 PM

Offline
Joined: Aug 2016
Posts: 211
Takana_no_Hana said:
__KonichiwA__ said:


It's still not working :(

The layout is a modern layout. You're using the classic one. Refer to here for the installing instruction

Come on man, I stick the instruction into my first post at the very first line.


I am using a modern layout
 
Dec 18, 2016 9:42 PM

Offline
Joined: Nov 2009
Posts: 1630
__KonichiwA__ said:
I am using a modern layout

Then it should be working. Just follow the installation steps.
 
Dec 18, 2016 9:46 PM

Offline
Joined: Aug 2016
Posts: 211
Takana_no_Hana said:
__KonichiwA__ said:
I am using a modern layout

Then it should be working. Just follow the installation steps.


OK NVM THANKS
 
Dec 23, 2016 6:07 PM

Offline
Joined: Nov 2009
Posts: 1630
---Updating---


List configuration:


Installing the layout


TROUBLESHOOTING: Please refer to here for the list of commonly questions and how to solve them before you ask!

Shelter Style Layout V3
(Seiren theme)


Preview


Changes:

  • Back to the traditional style
  • Simplistic design which is easy to customize


Banner download
Link


Modified by Takana_no_Hana, Dec 25, 2016 4:24 PM
 
Jan 2, 2017 3:42 PM

Offline
Joined: Nov 2009
Posts: 1630
Here's a little bit "mix and smash" of the Violet Evergarden theme with ShelterStyleV3

Here's a remake of Violet Evergarden layout using ShelterStyleV3.

Violet Evergarden ShelterStyleV3



-List Configuration-


-Download banner here-
http://imgur.com/OW7SuKI

-Codes-

Modified by Takana_no_Hana, Jan 6, 2017 3:58 AM
 
Jan 17, 2017 6:58 PM
Offline
Joined: Apr 2015
Posts: 5
I installed Shelter Style Layout V1, then used the Tags Updater mentioned in this post https://myanimelist.net/forum/?topicid=1544259&show=0#post9 and resulted in tags being lined up like this



Can you figure out the problem?
Modified by AhmadMysra, Jan 17, 2017 7:17 PM
 
Jan 17, 2017 7:21 PM

Offline
Joined: Nov 2009
Posts: 1630
ahmad_mysra said:

Can you figure out the problem?


You don't. The codes are conflicted with each other. The tags updater is made specifically for Endless Summer layout. You can't use the tags updater in conjunction with my layout.
 
Jan 22, 2017 5:13 AM

Offline
Joined: Apr 2016
Posts: 419


I modified your Violet Garden style layout into my desired style, hope you don't mind.
 
Jan 22, 2017 5:34 AM

Offline
Joined: Nov 2009
Posts: 1630
@CzeroC: feel free. You can rewrite the credit as "Layout designed by Takana no Hana - Edited by CzeroC"
 
Jan 22, 2017 5:35 AM

Offline
Joined: Apr 2016
Posts: 419
Takana_no_Hana said:
@CzeroC: feel free. You can rewrite the credit as "Layout designed by Takana no Hana - Edited by CzeroC"


Thank you, i really like your designs, keep up the good work.
 
Feb 5, 2017 1:24 AM
Carnage Fortuna

Offline
Joined: Feb 2012
Posts: 7524
I reeeeeaaally love your Kimi no Na wa list layout and I would like to customize it with images & animated GIFs of my own. So far, I've been analyzing the CSS and checking out which respective images are equivalent to their Imgur links. Been playing around with this in the list style preview so far.

Of course, I will rewrite the credit section as well while properly giving credit to you.
 
Feb 5, 2017 1:54 AM

Offline
Joined: Nov 2009
Posts: 1630
LunyRed said:
I reeeeeaaally love your Kimi no Na wa list layout and I would like to customize it with images & animated GIFs of my own. So far, I've been analyzing the CSS and checking out which respective images are equivalent to their Imgur links. Been playing around with this in the list style preview so far.

Of course, I will rewrite the credit section as well while properly giving credit to you.

Cool, I'd love to see your end's result :p. Though be advised that the layout itself can be heavy to load if you abuse too much gifs or high-quality/big size images.

And might I ask, did you make the current wallpaper on your anime list? This image
 
Feb 5, 2017 4:50 AM
Carnage Fortuna

Offline
Joined: Feb 2012
Posts: 7524
Takana_no_Hana said:
Cool, I'd love to see your end's result :p. Though be advised that the layout itself can be heavy to load if you abuse too much gifs or high-quality/big size images.

And might I ask, did you make the current wallpaper on your anime list? This image

Thanks! :p And I will! \o/ Haha! Even though I enjoy making long animated sequences for my GIFs, I'll do my best to hold back. ;3 I'll only be using animated GIFs for the category buttons including the rollover images. Also, I'll be mindful of the file size so I might not use PNG formats for my banner and stuff.

That wallpaper wasn't made by me. My friend gave it to me as a surprise gift. Well I was pleasantly surprised! :p And he's being very modest about this wallpaper!
 
Feb 7, 2017 7:10 AM
なのだ

Offline
Joined: Nov 2014
Posts: 4591
Awesome layouts! I'm going to use one of them when I get some more time to customize it.

But I have a question:
I noticed covers don't load for me in Firefox. They work in Chrome. Small ones on list work in both browsers. It happens on Seiren and Violet Evergarden layouts when I tried them and even on the one you are using now. But it works in @CzeroC 's list.
Nvm, it works on other PC. I guess I need to fix my Firefox at work.
nvm again lol

I also wonder what does this import do?
@import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);

I always copy and reupload css or img files myself just in case, but I'm not sure what to do with this thing.
Modified by Yukikaze_sama, Feb 7, 2017 7:54 AM
 
Feb 7, 2017 7:46 AM

Offline
Joined: Nov 2009
Posts: 1630
@Terkhev:

For some unknown reasons, Firefox browser is blocking part of my layout's code when I host them on dropbox.

This code:


It's the code that you need to add on top of your CSS. It's the code for the covers. If you want the cover to display on firefox, add the code directly to MAL layout's coding box.

Like this:


You can check my MAL on Firefox again.
 
Feb 7, 2017 7:54 AM
なのだ

Offline
Joined: Nov 2014
Posts: 4591
Thanks, it works now. It also blocked it when I hosted same css on 000webhost btw.

Speaking about this code, how does it work? I mean, I remember covers imports before modern style was added, but it doesn't seem to be the same thing.
I really have no idea about all that stuff, so sorry if it's stupid question xD
Modified by Yukikaze_sama, Feb 7, 2017 8:24 AM
 
Feb 7, 2017 8:20 AM

Offline
Joined: Nov 2009
Posts: 1630
Terkhev said:
Thanks, it works now. It also blocked it when I hosted same css on 000webhost btw.

Yeah =/, I don't use firefox anymore so I don't know about the problem until lately when someone told me.
Speaking about this code, how does it work? I mean, I remember covers imports before modern style was added, but it doesn't seem to be the same thing.
I really have no idea about all that stuff, so sorry if it's stupid question xD

Thanks to @Doomcat55 and his covers generator.
The selector I'm using to display covers is .data.image a

The code you asked is basically equivalent to the red line of code below. The blue line of code is what the cover generator will generate.
The rest is the cover positions.

Here's the full code:

@import "https://malcat-gen.appspot.com/series?template=.data.image a[href*="/${id}/"]:before { background-image: url(${series_image}); }";



.data.image a[href*="/14751/"]:before{
background-image:url('https://myanimelist.cdn-dena.com/images/anime/11/60085.jpg');
}


a img{
height: 300px !important;
width: 200px !important;
background-size: contain !important;
display: block !important;
border: solid gold 3px !important;
}

.data.image a:before{
height: 300px;
width: 200px;
background-size: contain;
display: block;
border: solid red 3px;
content: "";
position: absolute;
}
 
Feb 9, 2017 7:48 PM
Carnage Fortuna

Offline
Joined: Feb 2012
Posts: 7524
Hmhm.. OK!

After playing around with the CSS, I've already figured out which image URL is which from the list preview. So far I've only made the category buttons (including the rollover images) and they're looking great! My only concern right now is the text for each category button. I've only just realized that the text was never part of the image files.

However, I do like the rollover effect for the text, where it gets wrapped around by a drop shadow. So I'd like to ask how can I modify the font for the category text, and how can certain effects be applied on the text itself, such as drop shadows or even a stroke?

With my image choices right now, the text is hardly readable.. ^^" Here is a sneak peek. I'm still far from done as I haven't prepared the background images yet, nor the banner.

----

Next up, I found some leftover renders from the CSS.


Uhm, I don't really know where would they show up. ^^" I'm only looking at the list layout from the preview and the left side of the screen has the Customize section, so yeah..

If I provide my own renders, will I be able to see them displayed in my list? Either way, I'm just curious.

Once I find something else that's confusing me, I'll be back in this thread for help.
 
Feb 9, 2017 8:15 PM

Offline
Joined: Nov 2009
Posts: 1630
@LunyRed:

You can change the font style here:
.status-menu-container .status-menu .status-button {
	padding:0 !important;
    position: relative;
    display: table-cell;
    font-family: 'Tangerine', cursive;
    text-align: center;
    vertical-align: bottom !important;
    font-size: 22px;
	font-weight:600 !important;
    color: #fff;
	width:125px;
	height:74px;
	z-index:10;
	background-size:cover;
	background-position:50% 50%;
	background-repeat:no-repeat;
border-radius:5px !important; 

	top:2px;
}


As for the text effect when hovering, or when you're in a category:

.status-menu-container .status-menu .status-button.on {
    color: #fff;
    font-weight: bold;
	text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
	border: #fff 1px solid;	
	box-sizing: border-box;
	box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000;
}

.status-menu-container .status-menu .status-button:hover {
	border: #fff 1px solid;	
	box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000;
	text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
		box-sizing: border-box;
    background-color: transparent;
	color: #fff;
    -moz-transition-property: all;
    -o-transition-property: all;
    -webkit-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}


Becareful though, and yeah there are a lot of unused codes that I put them in /* */, you can just delete them if necessary.
On the other hand, the render will appear at the bottom right of your list, like this:
 
Feb 12, 2017 4:54 AM
Carnage Fortuna

Offline
Joined: Feb 2012
Posts: 7524
@Takana_no_Hana:

Thank you! I was able to successfully change the font. I'm now using Century Gothic with a font size of 10.

I'm confused with changing the colors because the hex values I know for colors are always 6 digits, so when I saw #FFF, I immediately assumed it's color white. Moreover, I'm really lost about the second set of codes right there... The desired effect that I want would simply be: 1px of drop shadow for idle text (so the text will be easily readable even on bright backgrounds) while 2px of drop shadow during rollover or active text.

There's also one minor change that I would like some assistance with. I'm pretty sure the height of the distance between the category buttons and the anime covers can be adjusted. I'm referring to this:

I only would like to move the covers down by a few pixels, preferably just 100 pixels downwards. Which part is it from the code? If so, then I'd like to apply the changes to all 6 categories.

This layout will be complete once I finish the main banner above the category buttons. It's the only thing I'm missing.

I'll consider about adding renders into this list design. Thanks for all the help!
 
Feb 12, 2017 5:27 AM

Offline
Joined: Nov 2009
Posts: 1630
@LunyRed:

Alright, this is kinda advanced so follow carefully.

1. The hex code for white and black can be shortened into 3 digits (since they're the same letter that repeats 6 times). For any different color, use 6 digits.
2. The selector for the "category idle text" is
.status-menu-container .status-menu .status-button


For the hovering category text:
.status-menu-container .status-menu .status-button:hover


For the active category text:
.status-menu-container .status-menu .status-button.on


3. This is tricky, since you will need to change the values in a lot of places.

The first step is to search for this selector and change this specific value
.list-unit {
padding-top:500px;
}

Change it to 400px

After that, search for this selector
.list-unit.watching .list-status-title:after {
margin-top: -500px !important;
}

Change it to -400px

The ".list-unit.watching .list-status-title:after" selector is equivalent to "watching category", so you will need to do the same for the other 5 categories.
 
Feb 12, 2017 11:34 PM
Carnage Fortuna

Offline
Joined: Feb 2012
Posts: 7524
@Takana_no_Hana

First thing I did for now was apply the changes to #3 with the padding and margin. Adjusting the padding did move the covers but so did the the avatar & the 3 buttons (Sort, Stats, and Filters). Adjusting the margin only moves the background image up or down. Here's what it looked like when padding-top:500px; was changed to 400px and margin-top: -500px !important; to -400px.

And here's another screenshot when I changed the values to 600px and -600px respectively.

I thought I got it right but I didn't. ~_~ Soooooooo, I came to the conclusion that adjusting this is making things much more complicated. ^^" Hence, I just modified a couple of my background images so that they would display better.

For #1, that makes it clear. I understand it now, thanks!

For #2, I found the corresponding line for "category idle text" and that's exactly where the line for the font family for category buttons are located.

For hovering and active, I found them as well. These are the 2 lines that are common between them:
text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;

border: #fff 1px solid;

I'm completely unsure but can the first line of text be copied into the "category idle text" so it can finally have a shadow even when it's idle? I still don't know which values should I modify exactly.

----

Well my revisions for this Kimi no Na wa list layout are almost complete. I've already finished my banner as well. The only thing I need atm is to modify the text in the category buttons and I should be able to use this layout finally.

I appreciate all the help. Thank you!
 
Feb 13, 2017 12:04 AM

Offline
Joined: Nov 2009
Posts: 1630
@LunyRed: oh yeah you're right, since I forgot to double check. It's hardcoded along side with a lot of stuffs, changing it would lead to more changes. My apology. It's better and simpler to adjust your background rather than changing the whole codes.

I'm completely unsure but can the first line of text be copied into the "category idle text" so it can finally have a shadow even when it's idle? I still don't know which values should I modify exactly.

Yeah that's correct. The code you mentioned creates a shadow effect for the text. You can control the shadow intensity by changing the number of pixels, just experiment with it.
 
Feb 13, 2017 6:04 AM
Carnage Fortuna

Offline
Joined: Feb 2012
Posts: 7524
@Takana_no_Hana: It's OK, no biggie. :D If it's hardcoded, then I surely wouldn't want to touch those sections anymore.

So I tried to copy that line and re-adjusted the hex values. I was able to grab myself a nice blue color from the 6-digit hex values to use as the color of the shadow effect but, for some weird reason, every time I change the hex values from #000.......the avatar on the left keeps getting pushed down, and it's been bugging me. I reinstalled the CSS twice starting from the original Kimi no Na wa CSS just so I could troubleshoot what went wrong with the avatar placement... I compared most of the code from the original, and the latest one I had edited always had the avatar moved downward by about....50 pixels, I think? In order to keep the formatting the same as the original, I had no choice but to keep the color of the drop shadow to #000. Doesn't look like there are any changes with the hover and active buttons, but I'll take it rather than ruin the coding.

Well, here it is at last! This personally edited list layout is good to go! :D

https://myanimelist.net/animelist/LunyRed

And my god, I love how my list looks right now! <3 This is gorgeous and I'm in love with my new list design! >////< You have all my thanks for the amazing list layout and the CSS support! :D Btw, that wallpaper behind the list might be temporary as I really haven't prepared a better one yet. (It looks like it's possible to have different wallpapers for every category, which is awesome!)

I'm planning to use another one from the list designs up there, for my manga list. It just so happens that the current banner for my manga list is already 1000 pixels in width. :)
 
Feb 13, 2017 6:57 AM

Offline
Joined: Nov 2009
Posts: 1630
@LunyRed: wow, great job. Your list looks awesome.
Though you might want to follow this option, since your list has quite a few options enabled which weren't intended to display (the tag is missing, and the rating isn't necessary)

Follow this
 
Feb 13, 2017 4:38 PM

Offline
Joined: Feb 2017
Posts: 11
Hey there! I'm new at MAL and i'm already doing a experiment with this layout:



Im working on the css, already change a few things and images and it's working (believe it or not, u can watch my anime list). And I found this thing, and there's a few more, on css:



I don't find it on the anime list, I even completed a anime to see if that thing pop-up but nothing.
The thing is what the hell is that? Anyone can explain me?
 
Feb 13, 2017 4:48 PM
Carnage Fortuna

Offline
Joined: Feb 2012
Posts: 7524
@Takana_no_Hana: Thank you very much! :D I enjoyed designing the images & GIFs I used for this list design and I learned a few things about the CSS too when I was installing this layout. Also, thank you for designing this Shelter-style layout as well!

I did what you suggested and disabled a few options. I never noticed any changes until you pointed them out, but as long as it'll improve the overall appearance of my list layout, then that's all that matters.

I'm going to install another similar layout later for my manga list. I'll be back here if I encounter any issues, or probably once I finish it 100%. ;)
 
Feb 13, 2017 6:35 PM

Offline
Joined: Nov 2009
Posts: 1630
Anzurk said:
Hey there! I'm new at MAL and i'm already doing a experiment with this layout:



Im working on the css, already change a few things and images and it's working (believe it or not, u can watch my anime list). And I found this thing, and there's a few more, on css:



I don't find it on the anime list, I even completed a anime to see if that thing pop-up but nothing.
The thing is what the hell is that? Anyone can explain me?


Oh it's the unused part, you can just delete them if you want. If you use notepad++ or any coding program, change them to CSS mode and you will notice there's a lot of codes that have been "green out". You can either leave them alone or delete them.


Those parts were the place holders when I was making the layout. I was experimenting with different selectors but in the end I didn't use them. Just don't worry about it.
 
Feb 13, 2017 6:55 PM

Offline
Joined: Feb 2017
Posts: 11
Takana_no_Hana said:
Anzurk said:
Hey there! I'm new at MAL and i'm already doing a experiment with this layout:



Im working on the css, already change a few things and images and it's working (believe it or not, u can watch my anime list). And I found this thing, and there's a few more, on css:



I don't find it on the anime list, I even completed a anime to see if that thing pop-up but nothing.
The thing is what the hell is that? Anyone can explain me?


Oh it's the unused part, you can just delete them if you want. If you use notepad++ or any coding program, change them to CSS mode and you will notice there's a lot of codes that have been "green out". You can either leave them alone or delete them.


Those parts were the place holders when I was making the layout. I was experimenting with different selectors but in the end I didn't use them. Just don't worry about it.


Oh sorry, i didn't repair that was a comment. I have to install notepad++
And what a great layout, arigato gozaimasu! :P
 
Feb 15, 2017 7:46 PM

Offline
Joined: Nov 2009
Posts: 1630
After a few days in the making, I finally finished the layout for Nier Automata ft. 2B

Nier Automata 2B based on ShelterStyleV3 redux



-List Configuration-


-Changes-

  • Menu is now at a fixed position, you can access the menu at any time while scrolling down the list
  • Change the top bar menu, newer looks.
  • Added light-particle effects
  • Status menu (watching, completed, etc) is now fixed on top of the screen when scrolling down the list.



-Download banner here-
http://i.imgur.com/c1UTBP3.jpg

-Codes-




-----------------------------------------------o0o-----------------------------------------------
 
Feb 18, 2017 3:32 PM

Offline
Joined: Dec 2015
Posts: 7
Hi, I am using the Gurren Lagann layout, and it works great, except for the fact that my curser doesn't show up when I'm in the part with the list. It shows up when it's on the background, just not when it's on the list. It's not really a big problem, but it is a bit annoying. If there is any way to fix this it would be a big help.
 
Feb 18, 2017 4:52 PM

Offline
Joined: Nov 2009
Posts: 1630
Issei_Kirigaya said:
Hi, I am using the Gurren Lagann layout, and it works great, except for the fact that my curser doesn't show up when I'm in the part with the list. It shows up when it's on the background, just not when it's on the list. It's not really a big problem, but it is a bit annoying. If there is any way to fix this it would be a big help.

Alright, I fixed it for all the layout. I updated the codes so you don't need to do anything.
 
Feb 18, 2017 5:10 PM

Offline
Joined: Dec 2015
Posts: 7
Takana_no_Hana said:
Issei_Kirigaya said:
Hi, I am using the Gurren Lagann layout, and it works great, except for the fact that my curser doesn't show up when I'm in the part with the list. It shows up when it's on the background, just not when it's on the list. It's not really a big problem, but it is a bit annoying. If there is any way to fix this it would be a big help.

Alright, I fixed it for all the layout. I updated the codes so you don't need to do anything.

Sorry for the trouble, but now the curser doesn't show at all.
Modified by Issei_Kirigaya, Feb 18, 2017 5:18 PM
 
Top
Pages (3) [1] 2 3 »