[tutorial] adjusting width and positioning.

Theme: Spring Kiss
Style system: 2
Base: Smooth Sailin'
Design: One sidebar


This tutorial will show you how to make your entries wider or less wide, and also how to de-center and reposition it. Prior CSS knowledge could come in handy but is not necessary:
I. customizing the width
II. customizing the width of the sidebar
III. de-centering the journal

------

I. Customizing the width
Open up your CSS file in a text editor and find the following passage:

.pageblock {
padding: 2px;
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #FFFFFF;
}

You can change 800px to anything you wish. However, to keep it centered, you must make sure that the number after margin-left: equals half of the width. If, for instance, I only want my journal to be 700px wide, I would change it to:

.pageblock {
padding: 2px;
position: relative;
width: 700px;
left: 50%;
margin-left: -350px;
background-color: #FFFFFF;
}

II. Customizing the width of the sidebar
Now, if my journal is less wide, I might want my sideboxes less wide, too. For that, I'll need this passage:

.sidebox {
width: 230px;
background-color: #F5F5F5;
padding: 2px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px dotted #e4e4e4;
padding-bottom: 5px;
}

If I want my sideboxes to be only 200px in width, I simply change the code accordingly:

.sidebox {
width: 200px;
background-color: #F5F5F5;
padding: 2px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px dotted #e4e4e4;
padding-bottom: 5px;
}

You do not need to alter the width of the entries as well. They adjust themselves automatically. Now there is another problem though - when you make the sidebar thinner, the calendar exceeds the width of the sidebar. To change that, you'll need to find these passages:

#latestmonth table {
position: relative;
left: 50%;
margin-left: -120px;
}

#latestmonth td {
padding: 5px;
}

By decreasing the padding, you can make the calendar less wide. To keep it in the middle of the sidebox, you'd also have to adjust the margin-left, though. For a sidebar of 200px wide, the code would look like this:

#latestmonth table {
position: relative;
left: 50%;
margin-left: -90px;
}

#latestmonth td {
padding: 1px;
}

This means that there are limits for how thin you can make your sidebar if you wish to keep the calendar sidebox. You can also hide your calendar by going to the customization area.

III. De-centering the journal
To de-center everything, you need the same passage as you used for altering the width:

.pageblock {
padding: 2px;
position: relative;
width: 800px;
left: 50%;
margin-left: -400px;
background-color: #FFFFFF;
}

You can now play around with the left and margin-left values until your journal is positioned in the way you like it.

------

Got questions?