| Everybody's favorite layout (new sidebar tutorial) |
[18 Aug 2005|02:40pm] |
I had it in my head to revamp our existing sidebar tutorial with a few "upgrades" and ended up writing a whole new code. This is more than just a sidebar tutorial. I have taken everyone's favorite layout (EFL) and came up with this.
- EFL has a header image, a sidebar, hidden navigation and hidden icon.
- The text is justified in the entries and in the sidebar
- The entries are on top of the header in both Internet Explorer and in Mozilla Firefox.
- The whole thing is centered (no more layouts to the left)!
- There is no "overflow" in FF or in IE so hiding the bottom scrollbar is not necessary.
- Images are easier to put in the sidebar.
- You STILL NEED A WEBSITE listed in your userinfo!
GLOBAL_HEAD<=
<style type="text/css">
<!--
/*GETS RID OF ICON*/
.shadowed img{
display:none;
}
/*HIDES YOUR NAVIGATION*/
table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}
tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}
/*ENTRIES ON TOP OF HEADER IMAGE*/
*html body .shadowed img.x{
z-index: -1;
}
table, .shadowed div{
z-index: 80;
}
html>body table{
position: relative;
}
/*POSITION YOUR HEADER*/
.x{
position:absolute;
top:0px;
width: 780px;
left:50%;
margin-left:-390px !important;
margin-left:-389;}
/*YOUR SIDEBAR*/
#sidebar{
position:absolute;
top:120px;
left: 50%;
margin-left: 145px;
width: 225px;height: 100%;
visibility: visible;
z-index:2;
font-size:8pt;
text-align:justify;
}
#sidebar img{
display:inline;
}
/*BACKGROUND IMAGE*/
body {
background-color:#66CC9A;
background-image: url(http://pics.livejournal.com/carriep63/pic/0000p1xp);
background-attachment:fixed;
background-repeat: repeat-y;
background-position: top center;
}
/*YOUR ENTRIES*/
table, tr, td, .shadowed {
background: transparent;
}
table {
width: 510px;
margin-left:-240px;}
table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}
/*JUSTIFIES TEXT*/
.entrybox td{
text-align: justify;
}
.entrybox td.index, .entrybox td.comments{
text-align: right;
}
/*LINKS*/
a{
color: #ffffff;
}
a:hover{
color: #66CC9A;
}
-->
</style>
<=GLOBAL_HEAD
LASTN_WEBSITE<=
<!--YOUR SIDEBAR STUFF HERE-->
<div id="sidebar">
The text, links, and pictures you want in your sidebar.<br />
--------------------
<br />
I am going to put an image in this sidebar. Usually when you hide
your icon, you have to put a visibility code in every image you use.
That is not necessary with this layout. We have not hidden our icon,
we have DESTROYED it! It's gone. Not hiding. I just put a simple
code in the HEAD overrides that will allow all of the sidebar pictures
to show without extra code. Look:<br /><br />
<center>
<img src="http://pics.livejournal.com/carriep63/pic/0000rec6">
</center>
</div>
<!--This fixes a bug in Internet Explorer-->
<div> </div>
<!--HEADER IMAGE-->
<img src="http://pics.livejournal.com/carriep63/pic/0000qkxc" class="x" style="display:inline;">
<=LASTN_WEBSITE
Positioning codes explained
You may notice that in this tutorial, I have positioned everything with the margin-left override and no margin-right overrides. Using this method will keep the content of your page in the same spot regardless of the screen resolution. It also gets rid of the bottom scrollbar (bonus!). When you are using this method, you may use either positive or negative numbers.
- You MUST define a width or this will NOT work.
- A left:50% line is in all overrides EXCEPT for the table.
- A positive margin-left will push your content to the right.
- A negative margin-left will push your content to the left.
- A negative margin-left that is exactly half of the width will center the content
More on centering... Notice the header image positioning. It has a width of 780px and the margin-left is negative 390px. 390 is exactly half of 780, so that puts the header in the center. All of the position codes have the left:50% override in them except for the table code. You do not need to put this in the table(entries) code!
|
|
| Codes |
[03 Jul 2005|09:27am] |
This is what your code looks like now:( Read more... )
This is what it should look like: ( Read more... )
|
|
| Subject line |
[04 Mar 2005|08:02pm] |
| [ |
mood |
| |
bitchy |
] |
| [ |
music |
| |
doom three |
] |
You know every community has rules! This community is no different.
First and foremost; you have to be nice!! This is a non-negotiable rule. Do it.
#2. Take the time to read the tutorials, the howto journal memories, and the Livejournal FAQ's. They exists to make your life easier by not having to ask for help. If you post a question that is easily found in one of these places, we will point and laugh at you.
#3. Posting in everything_lj...
If you have a question about your overrides, you must post them so we can see what you are talking about. We can't help you if we don't know what is happening.
Don't pick and choose which overrides to show us. Just post them all, please. Often there is more than one part to an override and if we can't see what you are doing then we can not help you.
In order to post your overrides, you must transform them or they will not show up. Edit your post if you don't put them in: do not make a new post.
Please include a subject line in your post. People who actually look for their answers in the memories and in the archive can find what they are looking for much more easily!
#4. Respect other people's friends pages. Use an ( Read more... )
|
|
|
[02 Dec 2003|07:04pm] |
To add one or more links to the system's Generator style, simply piggyback the website link override.
This override will be operational only if the livejournalist actually specifies a personal website under the user profile settings. In the sample code given above, display of the website link is retained. The segment that retains the website link can be deleted from the override if so desired, as long as a website is still specified within the user's profile.
Note that although the website link code here can use LiveJournal variables that automatically pick up the right values (%%--%% and %%--%%), no variables can be used in any tag-along links. Thus, to add links to items that you would normally be able to use those variables for, you will need to use the full url.
You can use as many sections for tag along links as you would like. If you would only like to add one extra link then you would remove the second set of tag along link code.
|
|
|
[02 Dec 2003|07:04pm] |
A livejournalist who uses a background image frequently wishes to use no background color or a semi-transparent background color for the areas that contain the text of the livejournal content. Only one or the other of the following overrides can be used at a time.
The following override can be used to achieve content area transparency under Punquin, Generator, Default, Tabular Indent, and Refried Paper. The notable exception being Magazine which cannot use table transparency and is mostly transparent as is; and Disjointed which uses a different override entirely--
The opacity level, set to 80 in the above example, can be changed to any number that you prefer. Setting the opacity to 100, or 1.0, will make the background completely opaque. If you want your background to be solid there is no need to use any override at all.
Using this filter will change the opacity of the entire table, including the text within it so you will need to choose an opacity level that still allows the text to be visible.
NOTE: Opacity filters are a resource intensive customization. Use of an opacity filter can cause older browsers, computers with lower resources, and computers where much of the system memory is already in use to freeze, crash, or otherwise behave unexpectedly. If after using the above opacity filter override, you are expierencing a sudden problem with your journal loading slowly (or not at all), your browser freezing, or your operating system freezing, please try removing the opacity filter override and reloading your journal page to see if the problem persists before submitting a Support request.
|
|
| subject |
[27 Oct 2003|06:03pm] |
|
Welcome to my test journal. Please do not comment here or add me to your friends list. This journal is only for me to test layouts. If you need a layout made, you can contact me at livejournal and fill out a request form at one of my layout communities. Have a pleasant day.
|
|
