Carrie (

carriep63) wrote in

carriep63_stuff,
2005-10-27 22:29:00

Left-aligned sidebar tutorial

**This is a sidebar tutorial for left-aligned layouts. If you want your content to be in the center of the page, use this tutorial**

Example of left-aligned layout || Get codes for example layout
You MUST have a website listed on your userinfo in order for this override to work!!!
This is for the S1 Generator style only.
This tutorial deals only with the main entries page. You will need a FRIENDS_WEBSITE, DAY_WEBSITE and CALENDAR_WEBSITE override to match your layout across all pages. (Read More)
Remember to Keep your numbers even!

Sidebar layout with a header image:
Change these numbers to suit your needs.

GLOBAL_HEAD<=
<style type="text/css">

</style>
<=GLOBAL_HEAD

LASTN_WEBSITE<=
<div id="sidebar">
The text, links, and pictures you want in your sidebar.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div id="x"> </div>


<div> </div>
<=LASTN_WEBSITE

Image map instead of headerRemove background image:
#x {
background: url(http://pics.livejournal.com/carriep63/pic/0005gwtp);
position:absolute;
top:0px;
left: 0px;
width: 600px;
height: 330px;
visibility: visible;
}

Add image here (LASTN_WEBSITE portion):
<div id="x"> </div> ...and map codes afterwards

Example
<div id="x">
<img src="http://www.yourimage.com" width="600px" height="330px" border="0" alt="" usemap="#image_map_name">
</div>

<map name="image_map_name">
<area shape="rect" alt="link name" coords="453,246,563,267" href="http://www.yourlink.com">
<area shape="rect" alt="link name" coords="314,246,428,267" href="http://www.yourlink.com">
<area shape="rect" alt="link name" coords="159,246,290,267" href="http://www.yourlink.com">
<area shape="rect" alt="link name" coords="32,246,140,268" href="http://www.yourlink.com">
</map>

Dont want a header image?Change this:

#x {
background: url(http://pics.livejournal.com/carriep63/pic/0005gwtp);
position:absolute;
top:0px;
left: 0px;
width: 600px;
height: 330px;
visibility: visible;
}

To this:
#x{
display:none;
}

Want a second sidebar?_HEAD CODES:
Copy the sidebar code and name it something different. Change the numbers to suit your needs.

#sidebartwo{
position:absolute;
top:330px;
left: 390px;
width: 175px;
height: auto;
visibility: visible;
background:#99CA00;
color:#cc0000;
padding:5px;
border:1px solid #cc0000;
}

_WEBSITE CODES:
Copy the sidebar code and give it the new name you chose in your _HEAD overrides.

<div id="sidebartwo">
The text, links, and pictures you want in your sidebar.
</div>

Tags: [s1] generator, tutorial

Post a new comment
Error
We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

We will log you in after post

Anonymously

switch

LiveJournal

Facebook

Twitter

OpenId

Google

MailRu

VKontakte

Anonymously

Insert Bold

Insert Italic

Insert Underline

Insert Strikethrough

Insert Link

Insert LJ User

Insert Photo

Insert Video
Help
37 comments

maidmarionette

December 29 2005, 23:22:00 UTC 6 years ago

This may be an "outdated" code, but I found it worked for me far better than the "newer" version.

The newer one completely changed my entire layout, and even though the segments were colourcoded, it was hard for someone like me (who is not gifted with overriding talent) to pick it apart.

Thanks for leaving this one up!
I have found a lot of valuable info in both and will soon be implementing the changes!

:)
AT

ex_shattered767

December 31 2005, 00:38:59 UTC 6 years ago

Personally, I stick to this one myself. :)

industrikitty

6 years ago

link
Collapse
Expand
New comment

curucar

6 years ago

link
Collapse
Expand
New comment

rulerecord

January 2 2006, 15:40:18 UTC 6 years ago

is it possible, with a code that the sidebar's height matcht with the entries?
so you got 2 bars near eachother with the same lenght?

maidmarionette

January 4 2006, 11:15:50 UTC 6 years ago

I'm not sure I know what you mean...

When I tried this sidebar tutorial (the lower one, "without a header"), it did make a sidebar that started slightly lower on the page than my main text column.

If that's what you mean, try fiddling with the yellow numbers in the code. That will move the start of the sidebar closer to or farther from the top of the screen.

Hope that helps!

:)
AT

jigglypuff

6 years ago

link
Collapse
Expand
New comment

Anonymous

6 years ago

link
Collapse
Expand
New comment

jigglypuff

6 years ago

link
Collapse
Expand
New comment

rulerecord

January 6 2006, 13:20:10 UTC 6 years ago

thank you! :)

suuta

January 8 2006, 19:06:46 UTC 6 years ago

I'm having problems with mine... I tried adding the sidebar (got the code from

disturbed_lane ) but I have a problem and I haven't gotten any help from them... anyways I tried adding it to my friend and calendar pages too but now they are partially invisible... can anyone help?

pruebaschentxu

January 11 2006, 18:10:30 UTC 6 years ago

thanks god this worked!!! =)!!!

Thank you for posting them =)!

nubian_queen89

January 13 2006, 02:30:23 UTC 6 years ago

How do you move the sidebar down?

pu_emo_nk

February 20 2006, 06:49:52 UTC 6 years ago

is there a way to put a border around your sidebar?

overbros

February 28 2006, 14:51:57 UTC 6 years ago

How can i put scrollbars in certain sections of my sidebar? Thanks

okami_hu

March 8 2006, 23:22:31 UTC 6 years ago

This works just superbly and it really boosted my ego that I was able to make my layout look right. ^__^ Thanks! However, one question. In the newer version, you added a codeline, which destroyed the usericon. When I copy that line into the GLOBAL HEAD, it makes my header disappear. Am I doing it wrong or is that particular codeline not compatible with this older override...?

___transformers

March 22 2006, 01:27:43 UTC 6 years ago

I dont know how often you are online.
Or if you are even willing to help me
out on this, but your journal has been
helpful in the past. So I figured I would
give it a shot.

I wanted to know if you knew how, or had
any helpful links that could teach me how
to not only create a sidebar layout but
a sidebar layout with a scroll box?

Well, techniqually two scroll boxes
One working as a side bar would. If
I am making any sense at all.

In all honesty I dont know if it
would even be in the same family
as a side bar. I am making a communtiy
to help out a local band, and it would
be helpful for links and what not.
I wanted to use a picture that would
look better with scroll boxes than it
would for the page to actually move.

If you cant help I understand, and thank
you for your time anyway.

sonicwaffle

July 7 2006, 22:51:41 UTC 5 years ago

http://www.livejournal.com/users/everything_lj/3061359.html

no_redlights

July 10 2006, 23:34:35 UTC 5 years ago

hello, i was wondering if you could help me with something. I am trying to add icons into my sidebar but I havent had any luck with it.. do you know any tutorials that may help? thanks in advance!

jamiefawkes

July 25 2006, 06:02:37 UTC 5 years ago

Hello~! I hope you don't mind my asking, but I seem to be in a predicament. I'm using your code, modified of course, as a community layout here:

ooc_wanderlust. It works perfectly fine, but my problem is, I'm trying to use the same code with the exact same settings-- same colors and everything-- on the community here:

hxh_wanderlust and the sidebar and header won't show up. D=

They were both made as a basic account, without the Sponsored+ status, and there really isn't anything differentiating them except for the names and who made them. I, incidentally, made the community that it works on, and my co-mod made the main community; but I doubt that's the problem. If you happen to know what might be the problem, I'd be eternally grateful for your help~! And if you want to look over the code I'm using, I don't have a problem uploading it to YSI or something~! Thank you very much in advance~! ♥♥ *bows*

carriep63

July 25 2006, 14:50:52 UTC 5 years ago

You probably need a website listed for the second community.

jamiefawkes

5 years ago

link
Collapse
Expand
New comment

x_ningyo_x

August 13 2006, 01:47:20 UTC 5 years ago

i know it's loooooong since this was posted but, when i have to put the friends, calendar, etc overrides, what do i have to put exactly?I mean, for this code.Please tell me because i am really lost ;_;''...

2132621test

August 13 2006, 04:10:18 UTC 5 years ago

Is it just me, or can you not put images in the sidebar part?

tsuki_no_eifie

September 18 2006, 22:32:47 UTC 5 years ago

Is there a special way or differnt coding for allowing the sidebar content to appear on top of the header image while still keeping entries behind it? Just wondering cause I have a layout I want to convert into LJ format, but the header image spans into the sidebar area. The coding I use now will hide the sidebar text behind the image. I still want to keep the entries behind the image though because I use it to hide the navigation in the Generator layout. I know a DIV layer would work in normal HTML, but I haven't quite figured it out for LJ's "special" HTML. ^^' If someone could help me that would be great! ♥

carriep63

September 18 2006, 23:36:05 UTC 5 years ago

A div layer will work in LJ too. You just have to assign it a high z-index. If that doesn't work for you, make a post in the community so we can have a look.

tsuki_no_eifie

5 years ago

link
Collapse
Expand
New comment

carriep63

5 years ago

link
Collapse
Expand
New comment

lilserenity

September 26 2006, 14:24:39 UTC 5 years ago

What if you have a scroll box around the entry and you want the side bar as well, but outside the scroll box. Is that possible?

carriep63

September 26 2006, 15:40:35 UTC 5 years ago

It's a completely different tutorial. You will find it in the memories under "Scrolling entry box"

lilserenity

5 years ago

link
Collapse
Expand
New comment

carriep63

5 years ago

link
Collapse
Expand
New comment

lilserenity

5 years ago

link
Collapse
Expand
New comment

Anonymous

October 12 2006, 06:28:26 UTC 5 years ago

Question - What code do I use to make text go over some of the main image?

zhu_di

November 1 2006, 18:14:46 UTC 5 years ago

I have no idea why the advertisements do not want to disappear. *sob*
I'm lost. What did I do wrong?

carriep63

November 1 2006, 18:16:02 UTC 5 years ago

Re: Ads

This tutorial has nothing to do with ads in any way, shape, or form. If you do not want ads on your journal, you must choose a basic account type, not a sponsored account.

honeyedapricots

April 2 2007, 23:07:04 UTC 5 years ago

Code still works

Thanks! This isn't the only post of yours I've used, and they've all been a big help.

Post a new comment
37 comments

Username:		Create an Account Forgot your login or password? OpenID Google Mail.Ru VKontakte
Password:
	Remember Me
	English • Español • Deutsch • Русский…

Left-aligned sidebar tutorial

Error

Ads

Re: Ads

Code still works

About

Help

Get Involved

Legal

LJ Labs

Store