Replies

Mar 22, 2016 10 years ago
bae_153
is a SUPER USER!!!
User Avatar

So first off, I'm sure this has been asked before, but I couldn't find the answer I wanted. Right now I'm trying to get some columns on my profile (and pet profiles) to scroll by mouse-wheel/trackpad, but NOT display the scroll bar. Right now I have my main info section on my profile set to "overflow:auto;" upon hover, but it's ugly as hell. I've seen scrollbar overlays, but is their any other way to hide it and still make the column scrollable?

Secondly, how the heck do you style the Pet Like thing? I've tried looking at source code to pull a selector out of it but I'm just stumped. I mean I'm decent at CSS but I don't know all this new fancy stuff haha. Can anyone tell me what all of the related selectors are for this? Or where I can find all the pet profile selectors listed?

Please and thank you!

❤️ . . . check out my art shop please~

Mar 22, 2016 10 years ago
Princess
is a Grand Champion!
User Avatar
Princess

Hi!

There's a sort of messy fix to this with CSS, but it'll only work with divs that you create (so it won't work on pet treasure, friends, etc.). If you create a div section that's a certain width and height, and place another div section inside it, you can use overflow values and padding to get rid of the scrollbar across all browsers! I tried it out on 111 and it actually works quite well. Ignore the scrollbar overlay, it's not actually there, it's just in the main layout image. Here's the code for it! It's a little messy since I just edited her current profile code for testing it, so let me know if it doesn't make sense/needs more explaining.

{ top: 167px; left: 555px; position: absolute; height: 359px; width: 444px; overflow: hidden; opacity: 1; z-index: 10;}

, { height: 349px; width: 429px; overflow-y: auto; padding: 5px 19px 5px 13px; text-align: justify;}

I really just played around with the padding on the left and right of the text sections until the scrollbar wasn't visible. You just have to make sure your parent div is set to hidden and the overflow-y is auto on your actual divs!

As for pet like, you can use .pet_like to move it around, but in order to change the colors you'll need to use i.icon (or you can just use .pet_like i) for the heart BEFORE it's clicked and i.red.icon for the heart after it's clicked!

art by mei

Mar 22, 2016 10 years ago
bae_153
is a SUPER USER!!!
User Avatar

ahhh thank you so much! I'll have to toy around with it a bit but I get what you're saying :) Thanks!!

❤️ . . . check out my art shop please~

Mar 22, 2016 10 years ago
Princess
is a Grand Champion!
User Avatar
Princess

No prob!! Let me know if you need any help!

art by mei

Mar 25, 2016 10 years ago
bae_153
is a SUPER USER!!!
User Avatar

Thank you so much again! I got the heart icon under control now so I just have to figure out where I want to position it, but hover and colors are all working great! :D

Right now I'm working on the hidden-scrollbar stuff on my pet Chemicality's profile and I realized something that might be helpful to you and others who are trying to do the same thing:

{ top: 125px; left: -93px; position: absolute; height: 400px; width: 400px; border: 1px solid ; background: white; overflow: hidden; opacity: .5; z-index: 3;}

{ height: 380px; width: 383px; overflow-y: auto; padding: 20px 17px 0px 17px; text-align: justify;}

I altered the snippit you gave me to suit my needs, and then I saw somewhere that scrollbar width across all common browsers is 17px, so I decided to give mine left and right padding of 17px, and I just made the dimensions of the inner div 17px smaller than the outer/frame div. This seems to have worked for me and takes much of the guesswork out of it :) Hope this helps for anyone else trying to do this! The 20px part is just the top padding that I needed to avoid the text running under my pet's name.

Thanks again! I am still figuring out things like how to switch content in the box and how I want it to look in the end but this definitely gets me 100x closer to the end-product.

EDIT: I realized that the bottom of my text was getting chopped off and then I noticed I failed to account for the shift caused by the 20px top padding xP I'm editing this to fix it for anyone else who might come across this. The about div height is now 380px instead of 400px.

❤️ . . . check out my art shop please~

Mar 25, 2016 10 years ago
Princess
is a Grand Champion!
User Avatar
Princess

Oh, yeah! I think?? it used to be 19px (or at least, that's what I've always made my scroll overlays) but I think it's getting smaller with more current browser updates. That would explain why it took me a second to hide it, tho. O: I rarely actually work with the scrollbars anymore LMAO I'm glad it was easy to fix!

If you need anymore help just message me! n____n

art by mei

Please log in to reply to this topic.