Replies

Feb 9, 2018 8 years ago
Hongske
is lost in space
User Avatar

Hi there, I hope it's OK that I made this thread? I've noticed that a lot of people seem to have issues with their pet profiles or custom CSS, due to the new layout changes. Instead of cluttering up the forum with a ton of threads about the same thing, I figured it might be easier if you guys could just post here and then I (or any other volunteer) can take a look for you?

If you post an issue, please add:

  • Type of problem (pet profile or custom css)
  • Description of your problem
  • Your code (either between code tags or in a pastebin)
  • If possible, a screenshot of what it's supposed to look like. Some things aren't obviously misplaced, so this would help a lot.

[edit]If your profile content is not showing up, try using this { height: 800px!important; }Though you might have to fiddle with the height value to fit your profile ;)

[edit]The ever so awesome provided a fix that should work if your profile uses a lot of absolute positioning. So before you post, please try this html,body,,-content,{position:static!important;} .container-fluid {position:absolute;top:0;left:0;right:0;bottom:0;}

Feb 9, 2018 8 years ago
Tennie
is forever on a quest for more pets
User Avatar

I wanted to thank you for your help with my pet profile codes following all these updates. I wanted to let you now I found another quick fix for positioning problems.

I was having trouble with my pet profile content being cut off due to the sidebar code being added - my profiles were now pushed over about 180-200px to the left and I didn't want to go through and add the pixels to each piece of positioning code.

There is probably an easier way to fix it, but I found that adding {margin-left: 185px;} into my code solved a lot of the positioning problems I was facing after the updates. I don't know if that's going to stay a working fix, but it can be a quick one for some people who might not want to go in and change all their "left" positioning! Of course the 185 was just guesswork but I found it worked on my end with the profiles I had, and I just tweaked the little things as needed.

Feb 9, 2018 8 years ago
Nidoqueen
is all dressed up and naked
User Avatar
Gypheous

as of today the grey bars have gone missing, but everything is pushed too far to the left and now my entire content is in an overflow.

SPOILER (click to toggle)

<style> body, html, div, a { font-family: bookman; color: ; text-align: justify; background-color: ; } b { color: ; font-family: tahoma; font-size: 10pt; letter-spacing: 2px; } i { color: ; font-family: tahoma; font-size: 10pt; } u { color: ; font-family: tahoma; font-size: 10pt; } img { padding: 5px; } a:link, a:visited { color: ; font-family: tahoma; letter-spacing: 2px; } a:hover { font: tahoma; color: ; } , , -ban, -ban-main, -lrc, -rrc, { display:none; } , -right, , , , { display:none; } , , body, , , { background-color:transparent; } h2 { display:none; } { width: 505px; margin-right: auto; margin-left: auto; height: 1535px; overflow: auto; } .treasure_item { margin-top:5px; margin-left:5px; width: 43px; } .statbar { display:none; } {position: absolute; top: 325px; left: -150px;} {position: absolute; top: 0px; left: -175px;} {width: 550px; position: absolute; left: 75px; top: 5px;} {position: absolute; top: 0px; left: 635px;} {position: absolute; top: 550px; left: -140px; width: 200px;} </style>

it used to fit my resolution in chrome on 1366x768 with no sideways scrolling bars, only the treasure chest had an overflow. i tried to use the quick fix, but it instead seems to have cut off my pet's head and stolen his minion, friend, and like link.

[EDIT] after looking further, it not only has a sideways overflow but a small vertical overflow, not including the one on the actual TC itself. the only overflow i originally had was on the TC while everything was positioned to fit perfectly in a 1366x786 resolution.

[EDIT ] the sideways scrollbar disappeared after i took off the quick fix. i was browsing the other topic where you mentioned absolute positioning, could that be the cause of my items being cut off? as far as the scrollbar goes, that should get fixed if i use the coding in that thread correct?

oops i forgot to mention, this is for the pet Trick-or-Treat.

Nidoqueen is better at defense than offense.  
With scales like armor, this PoKéMoN will shield 
its children from any kind of attack.
❞   

Feb 9, 2018 8 years ago
Hongske
is lost in space
User Avatar

Yeah, that's actually due to the old sidebar/content coding having the content being shoved over with margin-left. They removed that, so if you re-add that does fix it in some cases. And as far as I can tell, most of them are actually margin-left: 178px; though you're pretty close with 185!

Should be fixed by adding this { height: auto!important; } { margin: 0; }Though I did see that you have a lot of weird codes... You use "position: margin-left:" a few times, whereas both are properties and not values. So you can have "position: absolute;" and "margin-left: 160px;"; but not "position: margin-left: 160px;".

Feb 9, 2018 8 years ago
Nidoqueen
is all dressed up and naked
User Avatar
Gypheous

i cleaned the coding up a little; i usually do it late at night so sometimes i make more of a mess than intended.

i added both codes and it's still overflowing for me with my pet's face cut off. it seemed to fix it for a moment but i changed the positioning back to absolute and it's gone off again. however if i didn't use absolute positioning the stats would appear despite the fact i told them to be hidden.

i tried to just put in margin-top/left: etc. but the positioning was mostly off. the tc would be way down, but my pet would be where he is supposed to be. his friend was way down bottom as well and his minion was still missing.

is absolute positioning what's making the code not work properly? if so, is there a way to get the positioning to work properly without using the absolute code?

Nidoqueen is better at defense than offense.  
With scales like armor, this PoKéMoN will shield 
its children from any kind of attack.
❞   

Feb 9, 2018 8 years ago
Hongske
is lost in space
User Avatar

Could you post a screenshot of what it's supposed to look like? That way I can see what needs to be fixed :) And absolute positioning takes a div out of its container (in this case ), which means it won't be used to calculate that container's height. So yeah, that's probably what's breaking your code. Yes it's possible to make it work properly but it basically involves rewriting the whole profile. However, if I have an indication of where everything is supposed to go, I can try and see if it's fixable with a few dirty fixes so that you don't have to rewrite everything :)

Feb 9, 2018 8 years ago
Nidoqueen
is all dressed up and naked
User Avatar
Gypheous

basic layout. i had fixed his profile so recently i couldn't get a cached version so i drew an example in mspaint. it's not supposed to be so far from the top, but hopefully you get the point.

i have to hop off of here now for dinner. thank-you so much for taking the time to help. fortunately with my profiles once i fix one all the others get fixed at the same time. one of the main reasons i haven't been doing different styles of profiles.

Nidoqueen is better at defense than offense.  
With scales like armor, this PoKéMoN will shield 
its children from any kind of attack.
❞   

Feb 9, 2018 8 years ago
Marine
is a mirage
User Avatar
ID-F86

Issue: the treasure chest has a funny black box over it now. Although, I'm suspecting that it might just be a whole "funny black column" that I just haven't figured out how to wrangle yet. Either way, the left-hand side of the profile has a black column that isn't behaving. The treasure chest is covered up (it's supposed to display 4 items), and it doesn't appear that it's a z-index issue (that, or the column's z-index is higher than 30).

Pet: This goofball.

Coding is here. I'm sorry for it being an absolute mess, even if it technically is organized.

Feb 9, 2018 8 years ago
Hongske
is lost in space
User Avatar

Add this { overflow: hidden; } { left: 20px; } { left: 0; } { left: 220px; } { left: 795px; } { left: -20px; }You might have to fiddle around with the pet_treasure's position and the content's height, but that code should get you started :)

Lovely profile, I love the interactivity! You need to change the pet_treasure's left position though, try -10px instead of -110px; that should do the trick!

Feb 9, 2018 8 years ago
Nidoqueen
is all dressed up and naked
User Avatar
Gypheous

i will play with it once im back on pc. I spent 30 minutes trying to fiddle around with the code earlier and made myself grumpy lol

Thanks again so much!

Nidoqueen is better at defense than offense.  
With scales like armor, this PoKéMoN will shield 
its children from any kind of attack.
❞   

Feb 9, 2018 8 years ago
Hongske
is lost in space
User Avatar

You're quite welcome! Let me know if you need more help :)

Feb 10, 2018 8 years ago
VOLTAGE
is garBAE
User Avatar
Nasty Crimeboy

HI there, thank you so so much for doing this! I use the same customcss as and applied your fix earlier about the sidebar being too high up and obscured under the graphic. The sidebar is perfect now but the dash and events tab are still hidden by the graphic for me (so I'm getting this) and it's supposed to look like this

I'm using 's custom css with just a few fixes for the recent layout changes. Including mine here just in case I screwed up something while trying to fix it!

here's the one I'm using

[/code][/spoiler]


My Toyhouse | Signature by

Feb 10, 2018 8 years ago
Silverpaws
is forever on a quest for more pets
User Avatar

Hi there! I'm having a problem with my custom CSS. Currently, instead of just my custom buttons being show to navigate the site, there is text overlapping them that says what the original subeta navigation buttons would read. So basically its hard to read either text and overall just looks bad. Any help would be greatly appreciated!

what it looks like: Click!

My Code

Feb 10, 2018 8 years ago
ibook
is one for the books
User Avatar
Moopoo

, I have a few profiles who need some help now... c: I hope you might be able to help with them.

I will start with Maebh though -

The scrolling is a little weird - on the first page you can scroll down and see the owner's name and pet color/species, that is actually suppose to be near her name.

And when I click a link the text moves.

Maebh

Code <style> ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius:4px; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5); border-radius:4px; } ::-webkit-scrollbar:horizontal { height:8px; } ::-webkit-scrollbar:vertical { width:8px; }

, , , , , , a, , , h2, .pet_name, .pet_age_info_date, .pet_wco_info_date, , , { display: none;}

, , body, , { background-color:transparent;}

.pet_spotlight { background-color: ; top: -10px; left: 1000px; position: absolute; height: 0px; width: 100px; overflow: hidden; padding: 0px 10px; border-bottom: 15px solid ; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;}

.pet_spotlight:hover {height:112px;} .pet_spotlight img {height:54px; width:54px; border-radius:5px}

{ background-color: ; top: 0px; left: 770px; position: absolute; height: 0px; width: 200px; overflow: hidden; padding: 0px 10px; border-bottom: 15px solid ; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;}

:hover { height: 200px; padding: 10px;}

img{ border-radius: 10px; height: 200px; width: 200px;}

{ height: 329px!important; width: 100%; margin: 0; padding: 0;}

, , , , { width: auto; padding: 0; margin: 0;}

body { background-image: url(http://i.imgur.com/XNXHJpB.png), url(http://i.imgur.com/OectZ2d.png); background-repeat: no-repeat, repeat-x; background-position: top left; background-color: ;}

{ top: 40px; left: 115px; position: absolute; height: 288px; width: 444px; overflow: hidden; opacity: 1; z-index: 10;}

, , , { height: 278px; width: 434px; overflow: auto; padding: 5px 5px 5px 10px; text-align: justify;}

{ top: 40px; left: 565px; position: absolute; height: 278px; width: 174px; overflow: auto; opacity: 1; z-index: 10;}

.treasure_item { width: 42px; height: 42px; padding: 2px; border: 1px solid ; margin: 2px 2px 2px 2px; border-radius: 5px;}

img { border-radius: 5px; opacity: .75;}

, , , { background-color: ; left: 90px; position: absolute; height: 46px; width: 16px; padding: 2px; border-radius: 3px; text-align:center; opacity: .9; writing-mode:tb-rl; -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform: rotate(180deg); -ms-transform:rotate(180deg); transform: rotate(180deg); white-space:nowrap; display:block;}

{ top: 62px;}

{ top: 122px;}

{ top: 182px;}

{ top: 242px;}

.pet_color_info, .owner { left: 585px; position: absolute; text-align: left;}

.pet_color_info { top:666px;}

.owner { top: 676px;}

.owner img, .pet_like { display: none;}

{display:none;}

b { color: ;}

i { color: ;}

.header { color: ; border-bottom: 1px solid ; text-align: right; text-transform: uppercase;}

a:link, a:visited, a:active { color: ;}

a:hover { text-decoration: none; color: ;}

, body, a, div { font-size: 11px; font-family: Verdana, Geneva, sans-serif; color: ;}

</style>

forum image by
if you know where i can credit to them now, please let me know

[tot=ibook]

Feb 10, 2018 8 years ago
Nidoqueen
is all dressed up and naked
User Avatar
Gypheous

i spent a few minutes playing around with positioning just about everything, however now that i have everything in the correct position it's cutting off the pet treasure just slightly to the right. also no matter how far i adjust the height of the content it won't go past a certain amount and cuts off the rest of the content.

SPOILER (click to toggle)

<style> body, html, div, a { font-family: bookman; color: ; text-align: justify; background-color: ; } b { color: ; font-family: tahoma; font-size: 10pt; letter-spacing: 2px; } i { color: ; font-family: tahoma; font-size: 10pt; } u { color: ; font-family: tahoma; font-size: 10pt; } img { padding: 5px; } a:link, a:visited { color: ; font-family: tahoma; letter-spacing: 2px; } a:hover { font: tahoma; color: ; } , , -ban, -ban-main, -lrc, -rrc, { display:none; } , -right, , , , { display:none; } , , body, , , { background-color:transparent; } h2 { display:none; } { width: 505px; height: 1535px; overflow: auto; margin: 0; } .treasure_item { margin-top:5px; margin-left:5px; width: 43px; } .statbar { display:none; } { height: 1600px; auto!important; } { margin: 0; } { overflow: hidden; } { left: 20px; } { left: 0; } { left: 220px; } { left: 795px; } { left: -20px; } {position: absolute; top: 325px; left: 0px;} {position: absolute; top: 0px; left: 5px;} {position: absolute; left: 225px; top: 5px; width: 550px;} {position: absolute; top: 0px; left: 785px;} {position: absolute; top: 550px; left: 0px; width: 150px;} </style>

mostly fixed now; you can actually see the shape of everything with the pictures in correspondence with my mspaint doodle.

Nidoqueen is better at defense than offense.  
With scales like armor, this PoKéMoN will shield 
its children from any kind of attack.
❞   

Feb 10, 2018 8 years ago
Marine
is a mirage
User Avatar
ID-F86

Looks like moving it doesn't help; attempting to move anything outside the content box ends up making it get cut off, treasure chest included. It seems like the best option is to set the content box to start at 0px left, and then just re-arrange everything from there.

Guess I better get re-arranging. . ____.

Feb 10, 2018 8 years ago
Merlin
parties with the undead
User Avatar
Mullberry

@ Hongske hi! i was wondering if you could help me with this? It's really nice of you to make a thread! I made and use this same default profile for a ton of my pets, including one waiting in the spotlight queue :/ and after today they're all broken. (there's no bg image in this example fyi.)

Actually, it looks like the one profile I made using content:fixed was good to go with just the move over to the left fix though ;)

I added the content codes listed here (looks like added the (-content {background-image: none;}) to default so not that one.) It looks like the is still being restricted by something though. I also increased the size of my content div, changed the content overflow, and tried different z-indexs, just in case it was that but those changes didn't do anything. I also tried the fix from another thread to use !important with the content height. Did I do it right? It didn't change anything for me.

Example: https://subeta.net/pets/Brightly

code

<style> , , , , , , , {display: none;} {display:none;} h2 {display:none;} body,html{ background-image: url(); background-repeat: repeat-x;} {position:absolute; top:-80px; left:180px;} {height: 100px; width: 100px; position: absolute; top: 100px; left: 910px; padding-bottom: 10px; padding-top: 30px;} .pet_name {position:absolute; top:-20px;left:410px;} .owner {position:absolute; top:20px;left:410px;} .pet_color_info {position:absolute; top:40px;left:410px;} .pet_age_info_date{position:absolute; top:60px;left:410px;} .pet_wco_info_date{display:none;} {position:absolute; top:-20px;left:680px; overflow:auto; width:400px; height:100px; padding:10px;} #{position: absolute; width:1000px!important; height: 1000px!important; top: 100px; left: 100px; background-color: transparent; padding:10px; z-index:0;} { margin-left: 178px;} {width:770px; height:430px; overflow:hidden;border:1px solid;} {width:750px; height:430px; overflow:auto; padding:10px;background-color:;} {width:750px; height:430px; overflow:auto; padding:10px;background-color:;} {position: absolute; top: 110px; left: -20px;} {position: absolute; top: 110px; left: -20px; width: 100px; height: 100px; border: 1px dotted ; overflow:hidden; border:1px;-webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out; -ms-transition: all 0.7s ease-out; -o-transition: all 0.7s ease-out; transition: all 0.7s ease-out; opacity: 0; filter:alpha(opacity=0);} :hover {background:; height:500px; width:1000px; opacity: 1.0; filter:alpha(opacity=100); border:1px solid;overflow:auto; } </style>

text

To be continued..

next

back one
Credits:

You will always have a piece of my heart Fred.

Art by me.

Thanks to for letting me adopt this fab species and re-name.

Free vector bg (will change on final version)


Art by:


Art by

Feb 10, 2018 8 years ago
Hongske
is lost in space
User Avatar

It might need adding some !important... Try replacing the line about side-bar top with this -top { position: relative!important; top: 0!important; } Try adding this a.menu-tab.item { font-size: 0; } The scrolling is due to the content div not having overflow-hidden. The moving text is because the content of the content-div moves, but you positioned everything 40px from the top. So you need to position the content-div 40px from the top instead and move all the other divs inside 40px up. Like in this { overflow: hidden; margin-top: 40px; } { top: 22px; } { top: 82px; } { top: 142px; } { top: 202px; } , { top: 0; } I don't see any cutoffs at the TC except vertically? Can you add a screenshot? As for the height, you need to add !important to the part where you modify it. So like this { height: 1600px!important; } Yes, that does happen. When I tried -10px for the TC it looked ok though, on my screen. I wish you lots of luck with rearranging everything!

Can you give me a screenshot of what it's supposed to look like?

Feb 10, 2018 8 years ago
Merlin
parties with the undead
User Avatar
Mullberry

hi! Well, it appears that no cached version of the page exists. :s I didn't even know that was possible! I'm checking my other pets but I'm not sure I'll be able to find one that exists that isn't broken. Basically it looks the same but the top isn't cut off. It's a very simple layout. This is an example of what it looked like before I started fixing it. (much worse lol)

Feb 10, 2018 8 years ago
Hongske
is lost in space
User Avatar

Can you make a sketch in paint or so? That way I have a general idea of where everything is supposed to go, because I'm not sure how the art thing is supposed to be displayed.

Please log in to reply to this topic.