FURTHER APPLICATIONS
SCROLLBARS ON HOVER
One thing which is popular is having scrollbars which only appear on an element when it is moused over. This means that we need to make use of the :hover pseudo. The code would look something like
selector{overflow: hidden; height: yypx;}
selector:hover{overflow: auto;}
If we wanted to apply this to our panels on the Current profile which were used as an earlier example the code would be
#columns .panel{overflow: hidden; height: 300px;}
#columns .panel:hover{overflow: auto;}
HIDDEN SCROLLBARS
A hidden scrollbar means that the scrollbar is out of the way (unable to be seen) but a user can still scroll. It's worth noting though that not everyone makes use of a mouse with a scroll wheel and this type of interface can make it very difficult for those with a touchpad or some mobile devices to access content. Try just scrolling with arrow keys and you can get an idea of how difficult this may be. If you want content which scrolls without a clunky scrollbar visible most of the time a scrollbar which only appears on hover may be suitable and more user friendly. If you still really want to have an invisible scrollbar though, read on.
A hidden scrollbar is achieved by setting an outer element's overflow to hidden and letting an inner element scroll but using padding to move the scrollbar outside of the visible confines of the outer element. This diagram helps illustrate how this works.
It's also worth noting that not every section of the Gaia profile has an inner and outer element and so invisible scrollbars cannot be readily* applied to every section. Here's a list of the sections to which you can apply an invisible scrollbar and their relevant selectors.
Classic Profile
Friends
Outer element selector: #friends
Inner element selector: #friendGroup
Comments
Outer element selector: #comments
Inner element selector: #comments dl
Journal
Outer element selector: #journal
Inner element selector: #entries
Equipped Items
Outer element selector: #profile
Inner element selector: #equipped_id
Wishlist
Outer element selector: #wishlist
Inner element selector: #wishlist .items
Current Profile
Friends
Outer element selector: #id_friends
Inner element selector: #id_friends .style1
Comments
Outer element selector: #id_comments
Inner element selector: #id_comments dl
Badges
Outer element selector: #id_badges
Inner element selector: #badges
Journal
Outer element selector: #id_journal
Inner element selector: #entries
Gifts
Outer element selector: #id_gifts
Inner element selector: #id_gifts ul
Store
Outer element selector: #id_store
Inner element selector: #id_store div
Guilds
Outer element selector: #id_guilds
Inner element selector: #id_guilds ul
Custom
Outer element selector: #id_custom_XXXX
Inner element selector: #id_custom_XXXX_content
(Where XXXX is the panel ID, you can find this by using right click -> Inspect Element on any modern browser)
*It is possible to apply an invisible scrollbar to sections on a Current profile without an inner element if you use a column as the outer element. For instance if Wishlist was your only panel in column 1 you could use
#column_1 as an outer element and
#id_wishlist as an inner element.
You can also create a hidden scrollbar in the About panel in either the Classic or Current template by using list tags in your About section. This would look something like
[list=1]YOUR ABOUT ME TEXT GOES IN HERE[/list]
You can then use these selectors for a Classic profile
Outer element selector: #about
Inner element selector: #about ol
And these selectors for a Current profile
Outer element selector: #id_about
Inner element selector: #id_about ol
The code to create a hidden scrollbar would look like this
Outer element selector{height: yypx; overflow: hidden;}
Inner element selector{height: 100%; width: 100%; padding-right: 50px; overflow: auto;}
There may be other situations where you can apply hidden scroll. If in doubt, you can use your element inspector to check! You'll just need to have an inner element and an outer element which contain the content you want to scroll.
So if we wanted to apply a hidden scrollbar to the Friends panel with a height of 400px on a Classic profile we could use the following code
#friends{height: 400px; overflow: hidden;}
#friendGroup{height: 100%; width: 100%; padding-right: 50px; overflow: auto;}
HORIZONTAL SCROLL
Sometimes it can be desirable to have a panel scroll from left to right instead of top to bottom. For instance this allows a wishlist with a single row without the difficulties associated with a very short vertical scrollbar (items will align poorly with the small viewing space so it can be hard to see things below the first row). This won't work especially well for text, but it can be good for equipped lists, wishlists, and panels used to display images. To make a section scroll horizontally we need to use the overflow-x property. The basic code that you need to use takes the form
#selector{height: yypx; width: zzpx; overflow-x: auto; white-space: nowrap;}
White-space is a property which specifies the behaviour of content when it reaches the edge of its container (see the
MDN article for more info). We need to set it to nowrap to allow the content to overflow in a horizontal direction.
For example, if we wanted to apply a horizontal scrollbar to a wishlist which is 37px tall (this is tall enough for a single row of items if the header is hidden) and 200px wide on the Classic profile we'd use the following code.
#wishlist{width: 200px; height: 37px; overflow-x: auto; white-space: nowrap;}
You may find if you wish to use a horizontal scrollbar that it would make sense to hide the panel header or position it manually.
500
250
100