Welcome to Gaia! ::

EternalLadyMist's avatar
  • 300
  • 100
  • 200
Hello! I am really sorry if this is in the wrong section but I hope somebody could still help me?
I am having some trouble with the 'About me' section on my profile.

I have been trying for the longest time to get an invisible scrollbar on my profile but I just can't seem to get it right. I have googled it, tried doing it myself, and I have looked at many different threads on invisible scrollbars here on gaia.

If you go to my profile you will see that my 'About me' is cut off. It's only showing a little bit of my about me section and the rest is gone. I don't understand what the issue could be.

Here is the codes I am using for my profile..
Quote:

/*Profile*/
#site {margin-left: auto; margin-right: auto;}
#content {border-right:none;}
#extendedProfileBody #header h1 {display:none; }
#profile h2 {display:;}
#profile .items{ overflow: auto; overflow-x: hidden; overflow-y: auto; width: 220px; height: 80px; }
#profile .items
{scrollbar-arrow-color: white;
scrollbar-track-color: #B3C0D2;
scrollbar-face-color: #B3C0D2;
scrollbar-highlight-color :#B3C0D2;
scrollbar-3dlight-color:#B3C0D2;
scrollbar-darkshadow-color: #B3C0D2;
scrollbar-shadow-color: white;}

/*Scrollbar*/

html {
scrollbar-arrow-color: white;
scrollbar-face-color: #B3C0D2;
scrollbar-track-color:#B3C0D2 ;
scrollbar-3dlight-color:#B3C0D2;
scrollbar-darkshadow-color: #B3C0D2;
scrollbar-highlight-color:#B3C0D2 ;
scrollbar-shadow-color: white;}
/*End*/

/*Status Bar*/
#addButton, #msgButton, #ignoreButton, #tradeButton {display: none;}
#bar {background:transparent;}

.caption2:after, .caption:after, .caption2:before, .caption:before{background:none;content:url(); text-align:center}
/*END*/

/*About Me section*/
#about ul{overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 100px;}
/*END*/

/*Friends section*/
#friends #friendGroup li { border: none; }
#friends {display: none;}
#friends h2 { visibility: hidden; height: 0px;}
#friends { visibility: hidden; height: 0px;}
#find_friends_banner {display:none;}
#commonFriends {display:none;}
/*END*/

/*Comments section*/
#comments, #alerts_banner, #comments dl, dt.avatar2 img, #comments dl dt.avatar img, #comments h2 {display:none;}
/*END*/

/*Media Section*/
#multimedia embed, object {margin-left: auto; margin-right: auto;}
#multimedia embed, #multimedia object{width:px;height:px;}
#multimedia h1 {display:none;}
#multimedia h2 {display:none;}
/*END*/

/*Wishlist Section*/
#wishlist { overflow: auto; overflow-x: hidden; overflow-y: auto; width: auto; height: 80px; background: transparent; }
#wishlist h2 {display:;}
#wishlist {scrollbar-arrow-color: white;
scrollbar-track-color:#B3C0D2 ;
scrollbar-face-color:#B3C0D2 ;
scrollbar-highlight-color:#B3C0D2;
scrollbar-3dlight-color:#B3C0D2;
scrollbar-darkshadow-color:#B3C0D2 ;
scrollbar-shadow-color: white;}
/*END*/

/*Details Section*/
#details h2, #details dl, #details {display:none;}
/*END*/

/*Journal section*/
#journal h1, #journal h2, #journal h3, #journal {display:none;}
/*END*/

/*Signature*/
#signature h2{display:none;}
#signature { overflow: auto; overflow-x: hidden; overflow-y: auto; width:px; height:px; background: transparent; }
/*END*/

/*layout*/
#gaia_header *{color: white;background: #B3C0D2 !important;}
#gaia_header {border-bottom:1px solid white;}
#gaia_header a {font-size:9px; color:white!important;border-bottom:1px solid white;}

body {background: white url(http://26.media.tumblr.com/tumblr_leymq4ROOG1qg5acao1_500.jpg) top center repeat; cursor: crosshair; background-attachment: fixed}

#content {background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQugW0hKOuwy_xAXM6s00hQBSMUfukcoRAHSd6zUfMxNdvIU1ABriVBXsx9rg);
border-top: 2px solid #B3C0D2;}

#profile {background: url();
border-top: 2px solid #B3C0D2;}


And yes. I have the
[*LIST] [/*LIST] thing in my about me section.
I even tried [*LIST=1] [*/LIST]
and also [*LIST][*LIST=1] [*/LIST][*/LIST]

(minus the * )

nothing seems to work. I really hope somebody can help me find a solution to this. Thank you in advance!
User Image

You don't actually have the full code:

#about{overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 500px;}
#about ol{overflow-y: auto; padding-right: 500px; height: 500px; width: 500px;}


Obviously change the height and width to whatever you want. And in this instance the content of your about me needs to be wrapped in list=1 tags like so:


[list=1]Your about me section here[/list]



User Image
EternalLadyMist's avatar
  • 300
  • 100
  • 200
HauntingEchoes
User Image

You don't actually have the full code:

#about{overflow: auto; overflow-x: hidden; overflow-y: hidden; height: 500px;}
#about ol{overflow-y: auto; padding-right: 500px; height: 500px; width: 500px;}


Obviously change the height and width to whatever you want. And in this instance the content of your about me needs to be wrapped in list=1 tags like so:


[list=1]Your about me section here[/list]



User Image


Thank you for responding smile

Okay I just tried that. I am having the same issue though..my 'About me' section has just been cut off. No scroll.
User Image

It will always cut off, as that's the nature of a scroll box. But when you hover over it and scroll the panel will scroll.

Yours works fine now, though probably should be wider and deeper.


User Image
EternalLadyMist's avatar
  • 300
  • 100
  • 200
HauntingEchoes
User Image

It will always cut off, as that's the nature of a scroll box. But when you hover over it and scroll the panel will scroll.

Yours works fine now, though probably should be wider and deeper.


User Image
No no no..when I hover over it I don't get a scroll. That is what I mean.

I am not sure why it works for you but not me?


The scrollbar will never show up when you hover, that's why it's an invisible scrollbar. They never ever show up. My about me section has an invisible scrollbar too. All you do is hover over the section and use your scrollwheel and it'll scroll. But you'll never see the scrollbar.

User Image
EternalLadyMist's avatar
  • 300
  • 100
  • 200
I don't think you are understanding me haha..

I realize that you can't see it because it's an invisible scrollbar..but I cannot read my about me at all because it has been cut off. I hover over my about me and nothing happens. With an invisible scrollbar does it make it so others can hover over it and read my about me except me?
User Image
I understand what you're saying, but you keep saying you hover over it and nothing happens. But nothing will happen when you hover over it. You hover over the section and begin to scroll and it will scroll.

With an invisible scrollbar it means that the section is set to a specific height and width. If the text contained in the section is too big to fit into that section then the section will overflow and the panel will be forced to have a scrollbar which will be invisible to anyone. But when the section is hovered over and the scrollwheel is used then the panel will scroll to show more of its content.
EternalLadyMist's avatar
  • 300
  • 100
  • 200
HauntingEchoes
User Image
I understand what you're saying, but you keep saying you hover over it and nothing happens. But nothing will happen when you hover over it. You hover over the section and begin to scroll and it will scroll.

With an invisible scrollbar it means that the section is set to a specific height and width. If the text contained in the section is too big to fit into that section then the section will overflow and the panel will be forced to have a scrollbar which will be invisible to anyone. But when the section is hovered over and the scrollwheel is used then the panel will scroll to show more of its content.


Yes, I hover over the section and scroll but nothing happens.
Also, I do not have a scrollwheel. I am on my laptop.

Could that be the issue?


Probably. I tried with my trackpad and it didn't work for me. It works fine with a mouse with a scrollwheel though.

Also you can click somewhere in the section and use the up and down arrow keys and you'll see that it scrolls.

I assure you, other than the dimensions looking wrong the panel scrolls just fine.

User Image
EternalLadyMist's avatar
  • 300
  • 100
  • 200
Well, I am very picky about how my profile looks..I guess if I can't get this right I will just go back to the normal scrollbar.

This invisible scrollbar business is really complicated for me..I have always wanted one in my about me section though.

Thank you for your help ^^
User Image
You can change the width and height of the size of the panel by changing the 500's in the code I gave you, that will make it look a lot better if you widen and lengthen it somewhat.
EternalLadyMist's avatar
  • 300
  • 100
  • 200
Alright. There is still no use in me keeping the scrollbar though if I can't see it from my laptop. I only use my laptop..I don't have a desktop anymore. It's just going to annoy me if I go on my profile and I can't scroll. I might as well not even use it lol


You can still have a visible scrollbar instead.

#about{overflow: scroll; overflow-x: hidden; overflow-y: auto; height: ##px;}


Just change the ## to whatever height you want it to be before it scrolls.

User Image
EternalLadyMist's avatar
  • 300
  • 100
  • 200
Haha yeah I usually used the visible scrollbar. I will just have to go back to it I guess :/

thank you ^^

Quick Reply

Submit
Manage Your Items
Other Stuff
Get Items
Get Gaia Cash
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff