[smooth sailing] Adding a Header Image
[smooth sailing] Adding a Header Image
Smooth Sailing offers an option in the Customization interface for anyone to enter their own custom stylesheet information. This tutorial explains how to add a header image to Smooth Sailing using this feature. Please note that your image should be in a valid format (.jpg, .gif, .png, etc.) and hosted by a website that allows remote loading.
To add a header image to the top of your journal, go to the Customize Journal page and click the button "Customize" or "Edit Customizations". You can find the "Custom Stylesheet Information" option under the Layout tab of the Customization interface.
You will need to add the following line of code in the box. If you already have some code in the box, paste this line at the end. Do not make any linebreaks by hitting 'Enter' on your keyboard.
.pageheaderblock { background-image: url("http://www.example.com/image.jpg"); background-position: top center; background-repeat: no-repeat; padding-top: 150px; }
You will need to replace the URL address in orange with the actual URL of your image. You will also need to replace the number 150 with the height of your image in pixels, plus any additional space you might want.
If you don't want the image centered, you can align it to either side of your journal by replacing the word "center" above with either "left" or "right".
Click the "Save" button at the bottom of the page to apply the customizations to your journal.
Additional References Why are my images not displaying? What is remote loading?
Contributed by camomiletea, based on a tutorial by masterslacker.
Smooth Sailing offers an option in the Customization interface for anyone to enter their own custom stylesheet information. This tutorial explains how to add a header image to Smooth Sailing using this feature. Please note that your image should be in a valid format (.jpg, .gif, .png, etc.) and hosted by a website that allows remote loading.
To add a header image to the top of your journal, go to the Customize Journal page and click the button "Customize" or "Edit Customizations". You can find the "Custom Stylesheet Information" option under the Layout tab of the Customization interface.
You will need to add the following line of code in the box. If you already have some code in the box, paste this line at the end. Do not make any linebreaks by hitting 'Enter' on your keyboard.
.pageheaderblock { background-image: url("http://www.example.com/image.jpg"); background-position: top center; background-repeat: no-repeat; padding-top: 150px; }
You will need to replace the URL address in orange with the actual URL of your image. You will also need to replace the number 150 with the height of your image in pixels, plus any additional space you might want.
If you don't want the image centered, you can align it to either side of your journal by replacing the word "center" above with either "left" or "right".
Click the "Save" button at the bottom of the page to apply the customizations to your journal.
Additional References Why are my images not displaying? What is remote loading?
Contributed by camomiletea, based on a tutorial by masterslacker.