01 Tutorial - Entries in a scrollbox
Okay, I’ve never attempted a tutorial before, but seeing as I get a great deal of help out of them, I figure I should payback and do one of my own. So, this one is at alia612’s request. I hope this works!
Entries in a scrollbox
The following codes have been used in IE5.5 and 6.0, using the generator style. I’m told that other than one line of code (which I’ll point out) this should also work with Mozilla. Don’t know about other LJ styles though.
(Obviously, all overrides begin with the relevant GLOBAL_HEAD, so I haven’t included those. Also, when using, remove all the spaces in the style tags around the codes.)
1. The code below controls your background image.
< style type="text/css" >
< !--
body{
background-image:url(http://yourbackgroundpicture);
background-repeat: no-repeat;
background-color: color;
background-attachment: fixed;
background-position: top left;
}
-- >
< /style >
All the bits in bold are the variables you can change:
* The first speaks for itself. (!)
* The second, you don’t have to specify a color for your background (either by name or hexcode) but you should just in case your background image doesn’t show for external host reasons. If you don’t want to specify, then delete this line.
* The third controls the point your background image begins. For some reason, you may wish for it to be indented from the top or side, so you’d specify these values in pixels (eg put in 100px 150px). The standard (and default) position is top left as it is in the code.
NB. This part of the code is standard for most layouts and not exclusively for a layout with a scrollbox.
2. This code controls the scrollbox itself and the various features.
< style type="text/css" >
< !--
div{
position:absolute;
left:500px;
top:100px;
width:440px;
height:530px;
border: 3px solid #000000;
overflow:auto;
overflow-x:hidden;
clip:rect(auto);
background-color: transparent;
scrollbar-base-color: black;
scrollbar-track-color: 333333;
scrollbar-face-color: 666666;
scrollbar-highlight-color: CCCCCC;
scrollbar-3dlight-color: FFFFFF;
scrollbar-darkshadow-color: black;
scrollbar-shadow-color: FF0000;
scrollbar-arrow-color: 990000;
}
td div{
position:relative;
left:1;
top:1;
height:auto;
width:auto;
overflow:hidden;
border:0;
}
table{
width:100%;
margin-left:0%;
margin-right:0%;
}
table table{
width:95%;
margin:0;
}
table table table{
width:0;
}
-- >
< /style >
Again, only the bold bits should be changed and/or deleted. The explanations:
* The first four variables (left, top, width and height) determine where on the page your scrollbox will be. It can be anywhere and any size you wish. The left and top values denote the position from the edge of the screen the scrollbox will begin. The width and height, obviously, denotes the width and height of the box. You may see other tutorials that include the right and bottom values - these I’ve eliminated from my code: they automatically take up the reminder of the space and so its easier to work with this code at different screen resolutions. Many people may wish to set the values in percentages - my advice: don’t. Stick to pixels, it’s easier for all browsers and all users.
* The border variable determines the border around the scrollbox. In this example, I’ve set it as 3px in width in a solid black line. You can change this indefinitely: different widths, colors and styles. I believe there’s a comprehensive list of the different border styles available (eg dotted, dashed etc) somewhere, which I’ll hunt up and link to soon. Alternatively, you can put border: 0; which eliminates the border entirely.
* The italicised line is the one part of the code that Mozilla has issues with. This line eliminates the horizontal scrollbar across the bottom of the box - so if you have Mozilla, despite this code being in the overrides, you may still see it. Sorry!
* The scrollbar overrides determine the colors of the scrollbar in the box itself. Not the entire page scrollbar, which’ll be discussed later. You can delete these lines and you’ll end up with the standard scrollbar in its place (ie, still in the box), but this may not look so hot on your background!
The rest of the code is in fully working order (currently) and so do not edit it!. I say currently, cos this is technically a div hack and so LJ may in the future clear this up. But don’t worry about that right now :)
3. The final bits: The actual page scrollbar and the entry boxes.
< style type="text/css" >
< !--
body{
overflow:hidden;
}
table, tr, td, .shadowed {
background: transparent;
}
-- >
< /style >
The variables:
* Hidden means that the now-redundant page scrollbar doesn’t show anymore, instead only the scrollbar in your scrollbox - handy, huh? Your other option is to change it so that it reads visible, but why you would want to is beyond me!
* Transparent means that the entry boxes are, well, transparent! If you don’t want them to be, then delete the last two lines of the code itself (ie from ‘table’ to ‘transparent’).
NB. As with the first code, this isn’t exclusively for scrollbox layouts. Though, I wouldn’t advise upon the removal of the scrollbar unless you do have a scrollbox!
**
If you’re going to use any of these codes you have to merge them under the same style tag as well as the same GLOBAL_HEAD tag. For example, in the third code there are two variables that I have merged - ie, I’ve left the starting
< style type="text/css" >
< !--
of the first but it removed from the second, and left the
-- >
< /style >
from the second but it removed from the first. Yes?
Also, you can merge this code with all the other various overrides that you can control - but for the love of all things chocolate PLEASE don’t use background music. It’s annoying, some browsers don’t like, and, what’s the point?!
**
Ok, now we’ve reached the end! It’s quite simple really, and I don’t mind people asking for help, but be advised that I’m probably not the best person to ask. My grasp of this is pretty much in the tutorial anyway!
PS> Feedback would be appreciated MUCHLY. If this is a success, then I may write other tutorials to share other tricks I have up my sleeve :)
Entries in a scrollbox
The following codes have been used in IE5.5 and 6.0, using the generator style. I’m told that other than one line of code (which I’ll point out) this should also work with Mozilla. Don’t know about other LJ styles though.
(Obviously, all overrides begin with the relevant GLOBAL_HEAD, so I haven’t included those. Also, when using, remove all the spaces in the style tags around the codes.)
1. The code below controls your background image.
< style type="text/css" >
< !--
body{
background-image:url(http://yourbackgroundpicture);
background-repeat: no-repeat;
background-color: color;
background-attachment: fixed;
background-position: top left;
}
-- >
< /style >
All the bits in bold are the variables you can change:
* The first speaks for itself. (!)
* The second, you don’t have to specify a color for your background (either by name or hexcode) but you should just in case your background image doesn’t show for external host reasons. If you don’t want to specify, then delete this line.
* The third controls the point your background image begins. For some reason, you may wish for it to be indented from the top or side, so you’d specify these values in pixels (eg put in 100px 150px). The standard (and default) position is top left as it is in the code.
NB. This part of the code is standard for most layouts and not exclusively for a layout with a scrollbox.
2. This code controls the scrollbox itself and the various features.
< style type="text/css" >
< !--
div{
position:absolute;
left:500px;
top:100px;
width:440px;
height:530px;
border: 3px solid #000000;
overflow:auto;
overflow-x:hidden;
clip:rect(auto);
background-color: transparent;
scrollbar-base-color: black;
scrollbar-track-color: 333333;
scrollbar-face-color: 666666;
scrollbar-highlight-color: CCCCCC;
scrollbar-3dlight-color: FFFFFF;
scrollbar-darkshadow-color: black;
scrollbar-shadow-color: FF0000;
scrollbar-arrow-color: 990000;
}
td div{
position:relative;
left:1;
top:1;
height:auto;
width:auto;
overflow:hidden;
border:0;
}
table{
width:100%;
margin-left:0%;
margin-right:0%;
}
table table{
width:95%;
margin:0;
}
table table table{
width:0;
}
-- >
< /style >
Again, only the bold bits should be changed and/or deleted. The explanations:
* The first four variables (left, top, width and height) determine where on the page your scrollbox will be. It can be anywhere and any size you wish. The left and top values denote the position from the edge of the screen the scrollbox will begin. The width and height, obviously, denotes the width and height of the box. You may see other tutorials that include the right and bottom values - these I’ve eliminated from my code: they automatically take up the reminder of the space and so its easier to work with this code at different screen resolutions. Many people may wish to set the values in percentages - my advice: don’t. Stick to pixels, it’s easier for all browsers and all users.
* The border variable determines the border around the scrollbox. In this example, I’ve set it as 3px in width in a solid black line. You can change this indefinitely: different widths, colors and styles. I believe there’s a comprehensive list of the different border styles available (eg dotted, dashed etc) somewhere, which I’ll hunt up and link to soon. Alternatively, you can put border: 0; which eliminates the border entirely.
* The italicised line is the one part of the code that Mozilla has issues with. This line eliminates the horizontal scrollbar across the bottom of the box - so if you have Mozilla, despite this code being in the overrides, you may still see it. Sorry!
* The scrollbar overrides determine the colors of the scrollbar in the box itself. Not the entire page scrollbar, which’ll be discussed later. You can delete these lines and you’ll end up with the standard scrollbar in its place (ie, still in the box), but this may not look so hot on your background!
The rest of the code is in fully working order (currently) and so do not edit it!. I say currently, cos this is technically a div hack and so LJ may in the future clear this up. But don’t worry about that right now :)
3. The final bits: The actual page scrollbar and the entry boxes.
< style type="text/css" >
< !--
body{
overflow:hidden;
}
table, tr, td, .shadowed {
background: transparent;
}
-- >
< /style >
The variables:
* Hidden means that the now-redundant page scrollbar doesn’t show anymore, instead only the scrollbar in your scrollbox - handy, huh? Your other option is to change it so that it reads visible, but why you would want to is beyond me!
* Transparent means that the entry boxes are, well, transparent! If you don’t want them to be, then delete the last two lines of the code itself (ie from ‘table’ to ‘transparent’).
NB. As with the first code, this isn’t exclusively for scrollbox layouts. Though, I wouldn’t advise upon the removal of the scrollbar unless you do have a scrollbox!
**
If you’re going to use any of these codes you have to merge them under the same style tag as well as the same GLOBAL_HEAD tag. For example, in the third code there are two variables that I have merged - ie, I’ve left the starting
< style type="text/css" >
< !--
of the first but it removed from the second, and left the
-- >
< /style >
from the second but it removed from the first. Yes?
Also, you can merge this code with all the other various overrides that you can control - but for the love of all things chocolate PLEASE don’t use background music. It’s annoying, some browsers don’t like, and, what’s the point?!
**
Ok, now we’ve reached the end! It’s quite simple really, and I don’t mind people asking for help, but be advised that I’m probably not the best person to ask. My grasp of this is pretty much in the tutorial anyway!
PS> Feedback would be appreciated MUCHLY. If this is a success, then I may write other tutorials to share other tricks I have up my sleeve :)