How to add a sidebar image to Wide Lines - Wide Lines






[cmshaw]
widelines
5:19 pm on Monday, May 2nd, 2005
How to add a sidebar image to Wide Lines
Previous Entry Next Entry


1. Log in and go to your customize journal page.
2. Click "Add customizations" or "Edit customizations".
3. Select the "Background" tab at the top of the customizations page.
4. Under "URL of image to use as background", select "Override default" and enter the URL of your sidebar image in the text box which appears. The image must be hosted on a website which allows remote linking from livejournal.com.
5a. For a single image which remains stationary at the side of the journal, set "Fixed or scrolling background image" to "Fixed in place" and set "Tiled (normal) or single-picture background image" to "Shown once".
5b. For a repeating pattern down the left side which scrolls with the journal, set "Fixed or scrolling background image" to "Scrolling" and set "Tiled (normal) or single-picture background image" to "Tiled vertically".
6. Under "Number of pixels wide the left margin should be", enter the width of the image, plus any padding you would like to add between the right edge of the image and the left edge of the journal.
7. Set "Number of pixels tall the top margin should be", "Number of pixels wide the whole journal should be (0 for full-width journal)", and "Number of pixels tall the whole journal should be (0 for full-height journal)" to 0, the default. (Changing the width of the whole journal is used to shift the journal into a fixed-width column inside of a defined area on the background image. Leaving it at zero allows the journal's width to resize as needed.)
8. Click the "Save" button at the bottom of the page when finished. Your customizations are not applied to your journal until this button is clicked.

See an example of this customization here!

Suggestion: Make sure that the edge color of your image is the same as the background color of your journal ("Page background color", under the "Colors" tab). This will blend your side image into the color behind your entries.


Tags:

Previous Entry Next Entry




Post a comment
View all comments chronologically



Not sheepish, but individ-ewe-al: likeness
From:livredor
Date:May 2nd, 2005 - 10:52 pm
(Link)
There's something weird going on with the height when you add a sidebar image. I thought it was just me, but the tigertest journal has the same issue. In Mozilla, if you don't set the height in the customization options, and you use a background image, the whole journal gets squashed up very small. See my journal in your style for another example. I think what's going on is that if you don't set a height, height is defined as 100%, which Mozilla interprets strangely (it's fine in IE). Maybe height should default to auto rather than 100%? If that's not the issue I'm not sure what's causing it.
(Reply to this comment) (Thread on this comment)
cmshaw
From:cmshaw
Date:May 2nd, 2005 - 11:14 pm
(Link)
That's definitely weird!

I actually pulled out the height: 100% in this version -- it caused a double scrollbar in IE. There's no height attribute set at all, which appears to be Mozilla's problem. Hmm. Setting the height to auto doesn't help Mozilla at all.

It looks like if I comment out the overflow: auto, Mozilla displays correctly. Raises the question of why Mozilla thinks that that container is so small....
(Reply to this comment) (Jump to parent comment) (Thread on parent comment) (Thread on this comment)
the amazing bouncing fangirl: Soft-focus Greg by Baraz
From:gblvr
Date:May 3rd, 2005 - 02:09 pm
(Link)
In small words, please tell me why my journal has a lot of Gregs on it, instead of just the one on the side?
(Reply to this comment) (Thread on this comment)
the amazing bouncing fangirl
From:gblvr
Date:May 3rd, 2005 - 02:25 pm
(Link)
Never mind. I'll work on it later, when I don't feel like breaking the computer from frustration.
(Reply to this comment) (Jump to parent comment) (Thread on parent comment) (Thread on this comment)
cmshaw
From:cmshaw
Date:May 3rd, 2005 - 02:44 pm
(Link)
It might depend on the browser you're using, as the Mozilla problem above that livredor found does -- you're on a Mac, right?

Or it's possible that there's a bug in my style! Which settings were you using, and what was the result?

No rush, of course. Whenever you want to tackle it. :)
(Reply to this comment) (Jump to parent comment) (Thread on parent comment) (Thread on this comment)
cmshaw
From:cmshaw
Date:May 3rd, 2005 - 04:00 pm
(Link)
I see it -- it looks like the order in which the CSS is listed in the stylesheet is causing problems (at least in Windows IE). If the background image CSS is listed first, no problem. If the link color CSS is listed first, the background image doesn't fix correctly. Wacky!

I'm going to release a fix for this and the Mozilla bug this afternoon, then. Thanks for letting me know!
(Reply to this comment) (Jump to parent comment) (Thread on parent comment) (Thread on this comment)



Post a comment
View all comments chronologically