Forum Settings
Forums

[CSS - CLASSIC] Reposition your list and/or wallpaper quickly and easily

Must be a Club Member to Reply 
#1
Jan 24, 2012 5:01 AM

Offline
Joined: Feb 2010
Posts: 4432
This topic is part of our CSS Tutorials and Add-ons section:
http://myanimelist.net/forum/?topicid=419405


People ask this all the time so here's codes to reposition your list! There's probably already a ton of codes in your CSS altering everything, so add one of the these three to the bottom and it will override all your changes. Make sure you only use the text in spoiler tag! Adding stuff from outside the spoiler tag will conflict with the code and it won't take effect.

The Right Side code puts the list right on the left side. Add to the px amount to move it away from the right side (right: 100px moves it 100px from the right side). Same goes for the Left Side code. With the Centering code, add to the right or left to move it left of right from the very center of the page.


RIGHT SIDE EXAMPLE

To move list to the right side
Just add this code in the spoiler to the bottom of your CSS edit box! Increase the number after right if you want to move the list away from the right some more.




LEFT SIDE EXAMPLE

To move list to left side
Just add this code in the spoiler to the bottom of your CSS edit box! Increase the number after left if you want to move the list away from the left some more.




CENTERED LIST EXAMPLE

To center list
Just add this code in the spoiler to the bottom of your CSS edit box!




If the codes left/right moving codes above aren't working
For left-side positioning, try adding this to the bottom in addition to the codes from above.

#list_surround {
margin: inherit !important;
}



And for right-side positioning, try adding this to the bottom in addition to the codes from above.

#list_surround {
margin: inherit !important;
left: inherit !important;
}





Move list up and down
Add this to the bottom, then adjust the amount after top. Adding a negative amount should move the list up. Adding a positive amount will move it down.





Repositioning where wallpaper starts from
This just applies to your main background. Just add this code to the bottom, and use it as your "background repositioner". Use the whole code in the spoiler tag and follow its instructions to change where your background starts from.


Modified by Shishio-kun, Sep 1, 2016 8:57 PM
 
#2
Apr 20, 2012 8:35 PM

Offline
Joined: Jul 2007
Posts: 5304
Ok so if you look at my list, which is one of the premade layouts that you have on here. You will notice that for starters, that the 2nd border down on the list doesn't line up with the top border. How Do i fix that?

Next, and this is quite obvious but my text does not line up correctly, i want each "title" to be on each individual text line like it shows in your examples above. Instead my text just word wraps around, making it look really messy and hard to read. So that i need help with and if you look at my text, everything is very cramped together, i need to space that out some how and fit accordingly on my page.

Also my entire list is alligned to the left as you can see, but its to far over, i want to move slightly over to the right so it does not look cramped. Also my "background" image, i want positioned in such a way that the girl is off to the right side so it looks more neat, and not in the center like it is now.

I used all of the basic tuts displayed in the BBcode to try and change things but this is my end result, just a few things i need to fix regarding that.



 
#3
Apr 20, 2012 9:32 PM

Offline
Joined: Jul 2008
Posts: 1515
link9us said:
Ok so if you look at my list, which is one of the premade layouts that you have on here. You will notice that for starters, that the 2nd border down on the list doesn't line up with the top border. How Do i fix that?

Next, and this is quite obvious but my text does not line up correctly, i want each "title" to be on each individual text line like it shows in your examples above. Instead my text just word wraps around, making it look really messy and hard to read. So that i need help with and if you look at my text, everything is very cramped together, i need to space that out some how and fit accordingly on my page.

Also my entire list is alligned to the left as you can see, but its to far over, i want to move slightly over to the right so it does not look cramped. Also my "background" image, i want positioned in such a way that the girl is off to the right side so it looks more neat, and not in the center like it is now.

I used all of the basic tuts displayed in the BBcode to try and change things but this is my end result, just a few things i need to fix regarding that.


from my knowledge
u have too much stuff for the pre-made template
goto http://myanimelist.net/editprofile.php?go=listpreferences and cut down on those columns

As seen in the sample img only
"-Anime title
-Score
-Episode"
columns were checked

moving the list right would mean changing a lot of the code i think, since from wut i see the values are exact - anchoring the images to specific points
 
#4
Apr 20, 2012 10:06 PM

Offline
Joined: Jul 2007
Posts: 5304
ClearSinz said:
link9us said:
Ok so if you look at my list, which is one of the premade layouts that you have on here. You will notice that for starters, that the 2nd border down on the list doesn't line up with the top border. How Do i fix that?

Next, and this is quite obvious but my text does not line up correctly, i want each "title" to be on each individual text line like it shows in your examples above. Instead my text just word wraps around, making it look really messy and hard to read. So that i need help with and if you look at my text, everything is very cramped together, i need to space that out some how and fit accordingly on my page.

Also my entire list is alligned to the left as you can see, but its to far over, i want to move slightly over to the right so it does not look cramped. Also my "background" image, i want positioned in such a way that the girl is off to the right side so it looks more neat, and not in the center like it is now.

I used all of the basic tuts displayed in the BBcode to try and change things but this is my end result, just a few things i need to fix regarding that.


from my knowledge
u have too much stuff for the pre-made template
goto http://myanimelist.net/editprofile.php?go=listpreferences and cut down on those columns

As seen in the sample img only
"-Anime title
-Score
-Episode"
columns were checked

moving the list right would mean changing a lot of the code i think, since from wut i see the values are exact - anchoring the images to specific points


Thanks ok i did that, now with another layout design that i am using, just to check various designs, it does not matter what sample layout i use but my text is still cramped together and not lining up with my sub title headings. This i need to fix before i go back to my custom layout.



 
#5
Apr 20, 2012 10:30 PM

Offline
Joined: Jul 2008
Posts: 1515
link9us said:
ClearSinz said:
link9us said:
Ok so if you look at my list, which is one of the premade layouts that you have on here. You will notice that for starters, that the 2nd border down on the list doesn't line up with the top border. How Do i fix that?

Next, and this is quite obvious but my text does not line up correctly, i want each "title" to be on each individual text line like it shows in your examples above. Instead my text just word wraps around, making it look really messy and hard to read. So that i need help with and if you look at my text, everything is very cramped together, i need to space that out some how and fit accordingly on my page.

Also my entire list is alligned to the left as you can see, but its to far over, i want to move slightly over to the right so it does not look cramped. Also my "background" image, i want positioned in such a way that the girl is off to the right side so it looks more neat, and not in the center like it is now.

I used all of the basic tuts displayed in the BBcode to try and change things but this is my end result, just a few things i need to fix regarding that.


from my knowledge
u have too much stuff for the pre-made template
goto http://myanimelist.net/editprofile.php?go=listpreferences and cut down on those columns

As seen in the sample img only
"-Anime title
-Score
-Episode"
columns were checked

moving the list right would mean changing a lot of the code i think, since from wut i see the values are exact - anchoring the images to specific points


Thanks ok i did that, now with another layout design that i am using, just to check various designs, it does not matter what sample layout i use but my text is still cramped together and not lining up with my sub title headings. This i need to fix before i go back to my custom layout.


try unchecking type and tags just to see what happens...
the creators probably made the designs according to the things they had checked off, therefore u must do the same otherwise (if u want to include your own categories) that would mean changing some of the values in the code (such as the width)
 
#6
Apr 20, 2012 10:34 PM

Offline
Joined: Feb 2010
Posts: 4432
link9us said:
Ok so if you look at my list, which is one of the premade layouts that you have on here. You will notice that for starters, that the 2nd border down on the list doesn't line up with the top border. How Do i fix that?

Next, and this is quite obvious but my text does not line up correctly, i want each "title" to be on each individual text line like it shows in your examples above. Instead my text just word wraps around, making it look really messy and hard to read. So that i need help with and if you look at my text, everything is very cramped together, i need to space that out some how and fit accordingly on my page.

Also my entire list is alligned to the left as you can see, but its to far over, i want to move slightly over to the right so it does not look cramped. Also my "background" image, i want positioned in such a way that the girl is off to the right side so it looks more neat, and not in the center like it is now.


Fix the cramped font issue by increasing your list width, then you get something like this:


I don't think there's list width notes in there since its not a beginners layout, but you can add this to the bottom and then increase or decrease the px amount as you please.


#list_surround{
width: 650px;}


Also you can try to lower the font size. The layout isn't really meant to have its font's customized, but you can use these to lower the font size and make them clearer:


.animetitle {
font-size: 14px;
}

body {
color: white;
font-size: 14px;}


Finally you can give your list some padding to make things less cramped too:

.td1, .td2 {
padding: 1px;
}


Don't make it one or two more pixels tho, unless you want everything very far apart.

I don't see what border you're talking about. Is this the same layout?

These aren't BBcodes they're CSS codes. This is the CSS tutorial list:
http://myanimelist.net/forum/?topicid=419405&show=0#post1

And on that list under level 2 tutorials, is the tutorial that covers list spacing and stuff:
http://myanimelist.net/forum/?topicid=393535
 
#7
Apr 20, 2012 10:39 PM

Offline
Joined: Feb 2010
Posts: 4432
ClearSinz said:


try unchecking type and tags just to see what happens...
the creators probably made the designs according to the things they had checked off, therefore u must do the same otherwise (if u want to include your own categories) that would mean changing some of the values in the code (such as the width)


He has a good point on changing the categories, since you'll save space. Its optional tho. But if you want to just go here and uncheck anything that can be determined to be unnecessary, then save:
http://myanimelist.net/editprofile.php?go=listpreferences

"Type" is an unnecessary category imo since people can tell from the # of episodes or the nme what kinda it is generally, and if its important you can always list OVA/movie/etc in the tags section.
 
#8
Apr 21, 2012 2:35 AM

Offline
Joined: Jul 2007
Posts: 5304
Shishio-kun said:
link9us said:
Ok so if you look at my list, which is one of the premade layouts that you have on here. You will notice that for starters, that the 2nd border down on the list doesn't line up with the top border. How Do i fix that?

Next, and this is quite obvious but my text does not line up correctly, i want each "title" to be on each individual text line like it shows in your examples above. Instead my text just word wraps around, making it look really messy and hard to read. So that i need help with and if you look at my text, everything is very cramped together, i need to space that out some how and fit accordingly on my page.

Also my entire list is alligned to the left as you can see, but its to far over, i want to move slightly over to the right so it does not look cramped. Also my "background" image, i want positioned in such a way that the girl is off to the right side so it looks more neat, and not in the center like it is now.


Fix the cramped font issue by increasing your list width, then you get something like this:


I don't think there's list width notes in there since its not a beginners layout, but you can add this to the bottom and then increase or decrease the px amount as you please.


#list_surround{
width: 650px;}


Also you can try to lower the font size. The layout isn't really meant to have its font's customized, but you can use these to lower the font size and make them clearer:


.animetitle {
font-size: 14px;
}

body {
color: white;
font-size: 14px;}


Finally you can give your list some padding to make things less cramped too:

.td1, .td2 {
padding: 1px;
}


Don't make it one or two more pixels tho, unless you want everything very far apart.

I don't see what border you're talking about. Is this the same layout?

These aren't BBcodes they're CSS codes. This is the CSS tutorial list:
http://myanimelist.net/forum/?topicid=419405&show=0#post1

And on that list under level 2 tutorials, is the tutorial that covers list spacing and stuff:
http://myanimelist.net/forum/?topicid=393535


Wow thanks alot those lines of code fixed all of my issues. Looks alot better



 
#9
May 29, 2013 12:43 AM

Offline
Joined: Jun 2009
Posts: 12
Wanted to move the list to the lift and have the poster-hover to the right
but couldn't move the list at all even tho i added the code..

 
May 29, 2013 12:20 PM

Offline
Joined: Feb 2010
Posts: 4432
The code above the one you added from this topic is interfering with it. Delete the part in bold and blue from your own CSS.

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
.hide:before {
background: transparent;
content: "Poster";
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}
Read more at http://myanimelist.net/forum/?topicid=563993#0wErfJXFt7x0l1uF.99
 
May 29, 2013 8:56 PM

Offline
Joined: Jun 2009
Posts: 12
Shishio-kun said:
The code above the one you added from this topic is interfering with it. Delete the part in bold and blue from your own CSS.

/* PREVIEW MSG ABOVE COVERS
Remove content: "preview"; to remove the PREVIEW text.
Change the text in quotations after content to what you want it to say above your cover pic.
Top and width controls the position of the text.
*/
.hide:before {
background: transparent;
content: "Poster";
padding-bottom: 5px;
position: absolute;
text-align: center;
width: 225px;
top: -25px;
border-radius: 25px 25px 0 0;
}
Read more at http://myanimelist.net/forum/?topicid=563993#0wErfJXFt7x0l1uF.99


Worked Arigatou (Y) You're awesome XD
 
Jun 1, 2013 3:59 AM

Offline
Joined: Jun 2012
Posts: 5
can you find what's wrong in these codes: (I really wanted to move the list on the left side, but nothing happens even though, I had already put the code

Modified by Shishio-kun, Jun 1, 2013 11:31 AM

[br] keep walking

My MAL:My Anime List
 
Jun 1, 2013 11:41 AM

Offline
Joined: Feb 2010
Posts: 4432
karurO2 said:
can you find what's wrong in these codes: (I really wanted to move the list on the left side, but nothing happens even though, I had already put the code


First of all the code has to be put at the bottom not the top, and with that reviewer's layout you'll need margin: inherit; too.

#list_surround {
left: 1px !important;
margin: inherit !important;
position: absolute !important;
}
 
Jun 24, 2013 10:05 AM
Offline
Joined: Oct 2011
Posts: 5
Hi! I wanted to move my list to the right, but when I added the code you have up there nothing happened, so I implemented it with this:
#list_surround {
margin: inherit !important;
}
As a result my list was moved to the left O.o Can you help me correcting it, please?

 
Jun 24, 2013 12:10 PM

Offline
Joined: Feb 2010
Posts: 4432
VoidLaneX said:
Hi! I wanted to move my list to the right, but when I added the code you have up there nothing happened, so I implemented it with this:
#list_surround {
margin: inherit !important;
}
As a result my list was moved to the left O.o Can you help me correcting it, please?




Ok try adding this to the bottom:

#list_surround {
margin: inherit !important;
left: inherit !important;
}
 
Jun 25, 2013 4:47 AM
Offline
Joined: Oct 2011
Posts: 5
Thanks, it worked perfectly!
 
Feb 22, 2014 3:53 PM

Offline
Joined: Jan 2014
Posts: 352
Shishio kun i used the Code to move my list to the left and i added it at the bottom like u said but my list hasn't moved to the left at all can u tell me whats wrong ?

@import "https://dl.dropboxusercontent.com/u/102421246/MAL/CSS/Lists/SaoTopbar.css";
@import "http://dl.dropbox.com/u/49469857/MAL/premade/anime.css";
@import "http://dl.dropbox.com/u/78340470/CSSforFoxgirls.css";
* {
text-decoration: none;
}
body {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("http://imageshack.com/a/img856/3696/ej29.jpg");
background-position: 0 50%;
background-repeat: no-repeat no-repeat;
background-size: cover;
font-family: candara;
#list_surround {
position: absolute !important;
left: 1px !important;}
}
#inlineContent {
background-repeat: no-repeat no-repeat;
display: inline-block !important;
height: 3000px !important;
left: 0 !important;
margin: auto !important;
position: fixed;
top: 0 !important;
width: 3000px !important;
z-index: -4 !important;
}
#list_surround {
background-attachment: scroll;
background-image: url("http://i43.tinypic.com/vf8nqs.png");
background-position: 6% 0;
background-repeat: no-repeat no-repeat;
background-size: 112% auto;
font-size: 81.25%;
height: 250px;
left: 18%;
line-height: 1;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 229px;
position: absolute;
top: 0;
width: 650px;
}
.td1, .td2 {
transition: background-color 0.5s linear 0s;
}
td[class^="td"]:nth-of-type(2) {
width: 429px !important;
}
tr:hover .animetitle {
color: #ACF6FF;
font-weight: bold !important;
text-shadow: 2px 1px 2px black;
transition: all 0.25s ease 0s;
}
tr:hover [class^="td"] {
background-color: rgba(242, 166, 3, 0.9);
transition: all 0.4s ease 0s;
}
a {
color: black;
text-shadow: none;
}
td:nth-of-type(3) {
background-image: url("http://i42.tinypic.com/5mjv8.png");
background-position: 14px 2px;
background-repeat: no-repeat;
background-size: 21px 21px;
padding-top: 3px;
}
tr:hover td:nth-of-type(3) {
background-image: url("http://i40.tinypic.com/2me67gz.png");
background-size: 21px 21px;
transition: all 0.4s ease 0s;
}
a:hover {
color: red !important;
font-weight: bold !important;
text-shadow: 1px 1px 1px black !important;
}
.td1:nth-of-type(5), .td2:nth-of-type(5) {
border-right: 2px solid white !important;
}
.td1:nth-of-type(1), .td2:nth-of-type(1) {
border-left: 2px solid white !important;
}
.table_header:first-of-type {
border-left: 2px solid white !important;
border-radius: 20px 0 0 0;
border-top: 2px solid white !important;
}
.table_header:nth-of-type(5) {
border-right: 2px solid white !important;
border-top: 2px solid white !important;
}
.table_header:nth-of-type(2) {
text-align: left;
}
td.table_header:nth-of-type(2), td.table_header:nth-of-type(3), td.table_header:nth-of-type(4), td.table_header:nth-of-type(5) {
background-image: url("none");
border-top: 2px solid white;
}
.table_header:nth-of-type(5) {
border-bottom-right-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 20px;
}
.table_header, .td1, .td2, .category_totals {
background-color: rgba(255, 255, 255, 0.6);
border: 0 none;
padding: 3px;
text-align: center;
vertical-align: top;
}
.td1:nth-of-type(2), .td2:nth-of-type(2) {
text-align: left;
}
.table_header:nth-of-type(6) {
display: none;
width: 0;
}
small {
color: #B73C3F;
font-weight: bold;
}
.table_header, .td1, .td2, .category_totals {
color: black;
}
[cellspacing="0"] {
line-height: 17px;
}
.category_totals {
background-color: rgba(255, 255, 255, 0.4);
border: 2px solid white;
border-radius: 0 0 12px 12px;
text-align: center;
}
.category_totals:hover {
background-color: rgba(196, 30, 14, 0.7);
color: #FFFFFF;
}
[class^="header_"] * {
background-repeat: no-repeat no-repeat;
font-size: 0;
height: 200px;
line-height: 24px;
padding-bottom: 0;
text-align: right;
vertical-align: bottom;
}
.header_title {
border-radius: 4px 4px 4px 4px;
color: #FFFFFF;
display: inline-block;
font-style: italic;
height: auto;
padding: 0 8px 0 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
#grand_totals {
background-color: rgba(255, 255, 255, 0.4);
border: 0 none;
border-radius: 3px 3px 3px 3px;
color: #FFFFFF;
line-height: 20px;
min-height: 20px;
padding: 8px;
text-align: center;
vertical-align: middle;
}
.status_not_selected {
opacity: 0.8;
right: -201px !important;
transition: all 0.4s ease 0s;
z-index: 0;
}
.status_not_selected:hover {
color: transparent;
opacity: 1 !important;
right: 2% !important;
transition: all 0.4s ease 0s;
z-index: 2 !important;
}
.status_selected, .status_not_selected {
display: block;
}
.status_selected a, .status_not_selected a, .status_selected:hover a, .status_not_selected:hover a {
color: transparent;
display: block;
height: 100px;
opacity: 0;
right: 4px;
width: 300px;
}
.header_cw {
background-color: transparent;
background-image: url("http://i44.tinypic.com/e6vdya.png");
background-position: -26% 59%;
background-repeat: no-repeat no-repeat;
background-size: 75% auto;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
}
.header_completed {
background-color: transparent;
background-image: url("http://i41.tinypic.com/34njjw8.png");
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
z-index: 0;
}
.header_onhold {
background-color: transparent;
background-image: url("http://i43.tinypic.com/fbz70y.png");
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
}
.header_dropped {
background-color: transparent;
background-image: url("http://i44.tinypic.com/357j192.png");
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
}
.header_ptw {
background-color: transparent;
background-image: url("http://i41.tinypic.com/345d25w.png");
background-repeat: no-repeat no-repeat;
height: 200px;
margin-bottom: -44px;
margin-top: -15px;
}
#list_surround .status_selected, #list_surround .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i44.tinypic.com/33mbj1h.png");
background-position: 0 0;
background-repeat: no-repeat no-repeat;
display: block;
height: 100px;
padding: 0;
position: fixed;
right: 24px;
top: 170px;
width: 300px;
}
#list_surround .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i40.tinypic.com/2w33igk.png");
right: 24px;
top: 270px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i43.tinypic.com/2ibyya1.png");
background-position: 0 0;
background-size: 300px 100px !important;
height: 100px !important;
right: 24px;
top: 370px;
width: 300px !important;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i42.tinypic.com/2nla7h0.png");
right: 24px;
top: 470px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i44.tinypic.com/iqdjpu.png");
right: 24px;
top: 570px;
}
#list_surround .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected + .status_not_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_selected, #list_surround .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected + .status_not_selected {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i43.tinypic.com/am6002.png");
background-position: 0 0;
background-repeat: no-repeat no-repeat;
right: 24px;
top: 670px;
}
:hover + .hide {
background-color: rgba(255, 255, 255, 0.4);
background-position: 50% 50% !important;
background-repeat: no-repeat !important;
background-size: auto auto !important;
border-color: white;
border-radius: 25px 25px 25px 25px;
border-style: solid;
border-width: 2px;
display: block !important;
height: 250px;
left: 27px;
padding: 39px 22px 9px 10px;
position: fixed;
top: 315px;
width: 183px;
}
.hide:before {
background: none repeat scroll 0 0 transparent;
border-radius: 25px 25px 0 0;
color: white;
content: "";
padding-bottom: 5px;
position: absolute;
text-align: center;
top: 10px;
width: 262px;
}
.td1:nth-of-type(6), .td2:nth-of-type(6) {
background-color: rgba(255, 255, 255, 0.5) !important;
border-color: white;
border-radius: 15px 15px 15px 15px;
border-style: solid;
border-width: 2px;
display: none;
height: auto;
left: 32px;
padding: 10px;
position: fixed;
top: 634px;
width: 183px;
}
#copyright, #copyright:hover {
background-color: rgba(196, 30, 14, 0.7);
border-radius: 5px 5px 5px 5px;
bottom: 0;
color: white;
padding: 2px;
width: 100%;
}
#copyright:hover {
}
#copyright:before {
color: black;
content: " Design by SylakentH_";
font-size: 12px;
padding-right: 10px;
}
#copyright:after {
color: gold;
content: " ";
padding-left: 20px;
}
#copyright a {
}
a[href=""], [href=""] {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i43.tinypic.com/6gg481.png");
background-position: left top;
background-repeat: no-repeat;
color: gold;
#list_surround {
position: absolute !important;
left: 1px !important;}
The beauty of humans is that they say one thing then do another, but at the same time that can also be their ugliest side.
 
Feb 22, 2014 4:38 PM

Offline
Joined: Feb 2010
Posts: 4432
problem is at the end of

a[href=""], [href=""] {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i43.tinypic.com/6gg481.png");
background-position: left top;
background-repeat: no-repeat;
color: gold;


close it with a bracket

a[href=""], [href=""] {
background-attachment: scroll;
background-color: transparent;
background-image: url("http://i43.tinypic.com/6gg481.png");
background-position: left top;
background-repeat: no-repeat;
color: gold;}
 
Mar 11, 2014 12:01 AM

Offline
Joined: Sep 2011
Posts: 250
@Shishio-kun, I added a wallpaper just now to my anime list and I am trying to reposition my list to the right side, but nothing's happened yet. I copied and pasted both the codes that you put here, like if the first one is not working, then we need to put another code in addition tot he first one right? I tried them both, nothing has changed yet :(( COuld you please help me out here? Thanks :D
 
Mar 11, 2014 12:13 AM

Offline
Joined: Jan 2012
Posts: 1570
I'm not Shishio, is it OK? Do you want just to move a list to the right side? Find this:

#list_surround
{
margin: 0 auto;
width: 920px;
}


and change the code as shown here:

#list_surround
{
position: relative;
left: 100%;
margin-left: -920px;
width: 920px;
}
 
Mar 11, 2014 12:18 AM

Offline
Joined: Sep 2011
Posts: 250
Hahaido said:
I'm not Shishio, is it OK? Do you want just to move a list to the right side? Find this:

#list_surround
{
margin: 0 auto;
width: 920px;
}


Oh thank you very much, I will try it now :D
and change the code as shown here:

#list_surround
{
position: relative;
left: 100%;
margin-left: -920px;
width: 920px;
}
 
Jul 24, 2015 9:19 AM

Offline
Joined: Jul 2015
Posts: 823
I put in the code to move the list upwards, but it moved to the left instead.
 
Jul 24, 2015 1:15 PM

Offline
Joined: Feb 2010
Posts: 4432
Doomcat55 said:
I put in the code to move the list upwards, but it moved to the left instead.


Add it to the bottom of your CSS so it overrides previously code- it probably moved it up a little and left alot. Add !important with a space in front after the amount with top.

You must center it too probably.
 
Jul 24, 2015 2:13 PM

Offline
Joined: Jul 2015
Posts: 823
Thanks, it's working now.

I'm using the Futuristic pre-made style (Black Rock Shooter), and the header logo (that says My Anime List) moved offscreen when the list was raised. Can it be made to stay in place?
 
Jul 24, 2015 2:24 PM

Offline
Joined: Feb 2010
Posts: 4432
Doomcat55 said:
Thanks, it's working now.

I'm using the Futuristic pre-made style (Black Rock Shooter), and the header logo (that says My Anime List) moved offscreen when the list was raised. Can it be made to stay in place?


That part under TITLE controls the logo and its attached to the list table itself. You can use the 1px part and increase it to move it down atm. like

/*
TITLE
The List header which by default says My Anime List
can be changed out here.
*/

#list_surround {
background: url("http://i.imgur.com/WiyHZEq.png") no-repeat scroll 50% 100px transparent;
font-size: 81.25%;
line-height: 1;
margin: 0 auto;
padding-bottom: 10px;
padding-top: 0px;
width: 920px;
}
 
Jul 24, 2015 2:40 PM

Offline
Joined: Jul 2015
Posts: 823
Perfect! Thanks for everything!
 
Sep 14, 2015 10:43 AM
Offline
Joined: Jun 2015
Posts: 2
Can someone please help me with my background picture? I'm trying to get it to fill the whole page and scroll with you when you scroll (if that can be done). I'm sorry if someone already asked something like this but I can't see all other comments. If it helps, I'm using iPhone...
 
Dec 16, 2015 7:43 PM

Offline
Joined: Jul 2013
Posts: 359
fixed bbcodes in 1st post.


╒════════════════════════╕
✦ 
anime list | manga list | css list layouts
╘════════════════════════╛
 
May 5, 2016 2:09 PM

Offline
Joined: Jun 2015
Posts: 5
Can someone help me to make my list transparent?

Thats my code: meow
 
May 5, 2016 5:44 PM

Offline
Joined: Jul 2015
Posts: 823
Lollii said:
Can someone help me to make my list transparent?

Thats my code: meow
Go to this bit near the top of your code:
.td1
{background-color: #e0dad4;}
.td2, .table_header
{background-color: #cfc6bf;}
and change it to
.td1
{background-color: rgba(207, 198, 191, .5);}
.td2, .table_header
{background-color: rgba(224, 218, 212, .5);}
The last number in each color code (.5 in what I gave you) controls the transparency. 1 is fully solid, 0 is fully transparent.
 
May 6, 2016 4:51 AM

Offline
Joined: Jun 2015
Posts: 5
Thanks :)