Forum Settings
Forums

[CSS - Modern] Starter Layouts: Transparent with 6 adjustable colors + clear!

Must be a Club Member to Reply 
#1
Apr 15, 2016 12:29 AM

Offline
Joined: Feb 2010
Posts: 5984
This is a Premade Layout for the modern list style, find them all here:
http://myanimelist.net/forum/?topicid=1499058

To learn how to install a premade layout, use this tutorial:
https://myanimelist.net/forum/?topicid=1499052


How to use

Installing: Just click a thumbnail below to get the code for the layout. If you don't know how to add a layout to your list, click the spoiler below for text instructions. I have video tutorials and additional info here too: http://myanimelist.net/forum/?topicid=1499052



Changing wallpaper. Remember! Upload your desired wallpaper (background) after installing the layout you want. You can use one off your PC or mobile device! I also provide links to the wallpaper used in the example pics above each thumbnail.



Other changes! Customize the layout with notes in the code or the tips at the bottom of the post, ask if you need another customization I don't have here.




Code: http://pasted.co/f3bbf2f4
Wallpaper: https://i.imgur.com/Zp6U2SE.jpg




Code: http://pasted.co/16f52808
Wallpaper:https://i.imgur.com/Zp6U2SE.jpg



Code: http://pasted.co/afd5a1c7
Wallpaper: http://i.imgur.com/AF3au7J.jpg



Code: http://pasted.co/b9fafdda
Wallpaper: http://i.imgur.com/lGn8AvZ.jpg



Code: http://pasted.co/4a43f762
Wallpaper: http://i.imgur.com/Dr6abNF.jpg



Code: http://pasted.co/27484b4c
Wallpaper: http://i.imgur.com/kIbQrwc.jpg



Code: http://pasted.co/84390e32
Wallpaper: http://i.imgur.com/ismfIhc.jpg



Code: http://pasted.co/0bd6cbde
Wallpaper: http://i.imgur.com/ylAhife.jpg



Code: http://pasted.co/9989b3f5
Wallpaper: http://i.imgur.com/27I7sTx.jpg







Customizing further
Here are some other changes you can make, I already discussed how to install these and change the backgrounds at the top of the post.

Changing colors and opacity/transparency of the list table
In your layout code, go to BACKGROUND AND BORDER COLOR OF CATEGORY LINKS or BACKGROUND AND BORDER COLOR OF LIST (near the bottom) these three sections color the tables and there are instructions on changing the color and opacity. By changing the numbers you'll change the colors and opacity. You have to save after.


Making tables more or less transparent (adjusting opacity)
In your layout code, go to BACKGROUND AND BORDER COLOR OF CATEGORY LINKS or BACKGROUND AND BORDER COLOR OF LIST, and find the fourth number in parenthesis. Change the fourth number (opacity) to a lesser number like .3 for more transparency. Raise to a higher number like .8 for less transparency. Change this to 0 for completely clear. You have to save after.


Example here.



How to add preview pics


How to change font types
You have to save after.


How to change font colors


How to change list color
Modified by Shishio-kun, May 19, 2018 7:31 PM
 
#2
Apr 28, 2016 5:20 PM

Offline
Joined: May 2015
Posts: 31
Whats the wallpaper link for the kaneki one?
 
#3
May 1, 2016 5:09 AM

Offline
Joined: Oct 2013
Posts: 2258
SilentSuicideHD said:
Whats the wallpaper link for the kaneki one?

I found it here: https://wall.alphacoders.com/big.php?i=545916
 
#4
Feb 25, 2017 1:17 PM

Offline
Joined: Oct 2013
Posts: 457
Thanks Shishio-kun. Much appreciated.
 
#5
Aug 21, 2017 10:21 AM

Offline
Joined: Feb 2010
Posts: 5984
Clear layout added.
 
#6
Feb 12, 2018 7:48 PM

Offline
Joined: Jul 2015
Posts: 19
Hi,

For some reasons I can't access the code page. Is it because I'm using Chrome? But I also tried to on Safari but it didn't load at all. Help!


Modified by pingouin-chan, Feb 12, 2018 7:51 PM
 
#7
Feb 12, 2018 8:36 PM

Offline
Joined: Feb 2010
Posts: 5984
pingouin-chan said:
Hi,

For some reasons I can't access the code page. Is it because I'm using Chrome? But I also tried to on Safari but it didn't load at all. Help!




What layout are you trying to get? I can just post the code here. Later, I'll try to remember to copy the codes to an alternative text-hosting site.
 
#8
Feb 12, 2018 8:52 PM

Offline
Joined: Jul 2015
Posts: 19
That's quick. I like the first blue. Thanks so much (^-^).
 
#9
Feb 12, 2018 9:44 PM

Offline
Joined: Feb 2010
Posts: 5984
pingouin-chan said:
That's quick. I like the first blue. Thanks so much (^-^).


np!


/* FOR MORE HELP SEE HERE:
http://myanimelist.net/clubs.php?cid=19736
*/


/* DISTANCE OF LIST FROM TOP
Increase or decrease the px amount to change the distance from the top. */
.header {
padding-bottom: 400px;
}


/* CUSTOM BACKGROUND IMAGE SETTINGS*/
body {
background-size: cover;
background-attachment: fixed;
}



/* HEADERS AND TABLE LINK FONT */
a {
color: white !important;
font-family: arial;
}

/* CATEGORY HEADER FONT */
.list-unit .list-status-title .text {
color: white !important;
font-family: arial;
}

/* CATEGORY HEADER BACKGROUND COLOR */
.list-unit .list-status-title {
background-color: transparent !important;
}

/* LIST LINK FONT */
.list-table .list-table-data .data a{
color: white !important;
font-family: arial;
}

/* LIST NON-LINK FONT */
body{
color: silver !important;
font-family: arial;
}

/* TAGS EDIT FONT */
.list-table .list-table-data .tags .edit{
color: white !important;
font-family: arial;
}

/* LINK COLOR ON HOVER*/
a:hover,
.list-table .list-table-data .data a:hover{
color: cyan !important;
}




/*BACKGROUND AND BORDER COLOR OF CATEGORY LINKS
The first number in the parenthesis is the amount of red (0-255).
The second number in the parenthesis is the amount of green (0-255).
The third number in the parenthesis is the amount of blue (0-255).
The fourth number in the parenthesis is the amount of opacity (.0 to 1).

Change the fourth number (opacity) to a lesser number like .3 for more transparency. Raise to a higher number like .8 for less transparency.
*/
.status-menu-container{
background-color: rgba(0,50,150,.8) !important;
border: 1px white solid !important;
}


/* BACKGROUND AND BORDER COLOR OF LIST
See BACKGROUND AND BORDER COLOR OF CATEGORY LINKS above for guide on using RGBA colors.
*/
.list-block{
background-color: rgba(0,50,150,.6) !important;
border: 1px white solid !important;
}


/*BACKGROUND COLOR OF ROWS ON HOVER
See BACKGROUND AND BORDER COLOR OF CATEGORY LINKS above for guide on using RGBA colors.
*/
tbody[class*="list-item"]:hover,
.list-table tbody:nth-of-type(2n+1):hover {background-color:rgba(0,0,0,.5) !important;}



/*OTHER CODES*/
.list-table > tbody:nth-of-type(2n+1),
.list-table, .list-container,
.list-table .list-table-header .header-title{
background-color: transparent !important;
border: 0 transparent solid !important;
}
.list-table .list-table-data .data{
border: 0 transparent solid !important;
}
.status-menu-container {
border-bottom: transparent 0 solid;
}
 
May 9, 2018 9:44 PM

Offline
Joined: Feb 2010
Posts: 5984
@legendarywarrior

Try the new white layout at the top of the page, this one:
http://pasted.co/f3bbf2f4

It's the default layout, but with transparent tables and you can use the background of your choice. Then, after it's in, scroll down on this page to Customizing and then Making tables more or less transparent (adjusting opacity). There's instructions there on making the table more and less transparent until you get it how you want it.
 
May 10, 2018 11:31 PM

Offline
Joined: Dec 2017
Posts: 144
@Shishio-kun Thanks it finally worked out well.
 
Top