howto_user (howto_user) wrote in s2howto,

Shifting Journal Contents Downward

Shifting the contents of your journal downward may be desired for display of a background image at the top of your journal. When combined with an exactly positioned background image (See here), you can create an effect similar to a banner image.

A number of S2 layouts support the option to shift the contents downward, which you can access through Custom Options. However, if your chosen layout is not one of those, you can still achieve the effect using custom CSS.

You will need to add the following code to the 'Custom stylesheet' field in the Custom CSS section of Custom Options. First, copy and paste the following code into the field, making sure to include everything:

body { 
margin-top: 300px !important;

Using the sample code will shift the contents of your journal downward 300 pixels. You can change the pixel value highlighted in yellow to the value that best suits your needs.

Click the "Save Changes" button at the bottom of the page to apply the customizations to your journal.

Paid users who are using a custom layout may need to adapt this code into a print_custom_head() function instead. If you already have a theme layer, you will need to edit it and add the code below. If you do not have a theme layer, you will need to create one by following the instructions in the Theme Layer tutorial.

function Page::print_custom_head() {
    <style type="text/css">
    CSS information

Replace CSS information with the code provided earlier in the tutorial. Note that if you already have a print_custom_head function, you will need to merge the two functions together.

Originally written for S1 by arie. Adapted for S2 by legomymalfoy. Adjusted for all account types by camomiletea.

Tags: - all styles, all accounts, free accounts, moving journal downward, shifting journal downward

Comments for this post were disabled by the author