Layout: Blanket
Style: Peach
Browsers: Firefox 3.6, IE 8, Flock 2.5.6
Navbar: Yes
Customized Comments/Tags/Archive Pages: Yes
Resolutions: 1024x768, 1280x800, 1440x900
Preview:
click on the image for the original size; a live preview can be found at my journal. :)
Instructions:
1. Go to the "Select Journal Style" page and choose "Blanket Peach" by clicking "Base Layouts" (it's the third one for me).
2. On the Customize Style page, make sure in the Modules section, Navigation is in the "Fixed" section, if it not already is; everything else in the "Column" Section.
3. In the Customize CSS section uncheck "Use layout's stylesheet(s)" and paste the code into the "Use embedded CSS" box and save your changes.
4. Please upload the images (IMAGE 1 & IMAGE 2) to your own host. Thanks. :)
adding a header image - please read carefully
first off, I did not intent for a custom header to be used with this layout. But because I have been asked for it, I came up with a workaround. It may not be perfect, but at least it gives the possibility to use a custom header. :) The code below is merely an example how to add a header, if you want the image to be larger or smaller, you must adjust the widths and heights accordingly. If you run into problems or have a question, don't hesitate to ask and I will do my best to assist. :)
to my knowledge, a separate header image (above the already existing one) cannot be added, but you can add a background image to#header>.inner . It lays underneath the journal and page title, so you might want to include your preferred journal name in the header image and remove those parts from the code. Also, for the exact code below to work, your header must be exactly 640 x 200 px. If you want it to be larger or smaller than suggested, you must adjust the values in other parts of the code as well (please follow the additional step 3 in that case).
Step 1: copy the code below and replace the original code with it. Put the URL to your image where it says "URL TO YOUR IMGAE HERE" and adjust the background colors if needed.
#header {width:640px; height:200px; margin: 0 auto 2em auto; background: #000000; }
#header>.inner {width:639px; height:200px; background: #000000 url(URL TO YOUR IMGAE HERE);padding:1px;}
Setp 2: look for the code below and add the bolded parts. You can leave the rest, if you want to remove the header later and return to the original one, otherwise, you can remove it.
div#header h1#title {display:none; font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0; margin: 0; color: #aaaaaa; font-family: sans-serif; font-size: 1.3em;}
div#header h2#subtitle {display:none; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; color: #aaaaaa; font-family: sans-serif; font-size: 1em;}
div#header h2#pagetitle {display:none; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; padding: 0; margin: 1em 0 0 0; color: #c8c8c8; font-family: sans-serif; font-size: 1em;}
this gives you:
additional Step 3: if you want your header to be smaller or larger or smaller in width than suggested above, you must change the values accordingly in other parts of the code as well, I have put them below. Just replace "YOUR WIDTH" with the preferred width for the content, navigation and footer:
#primary {width: YOUR WIDTH; margin: 0 auto; z-index: 0; padding: 0;}
#secondary {width: YOUR WIDTH; margin: 0 auto; z-index: 0; padding: 0; background-color: #ffffff;}
also, you must push your content lower if you want your header to be larger or smaller in height as well. Just replace the bolded part with your preferred spacing amount and add the other three zeroes.
#content {padding: 0; margin: 0 0 0 0;}
combine both parts in step 3 if you want it to be larger or smaller in height and width. :)
Like I said above, if this is too confusing or you need help with adding the image, don't hesitate to ask. I hope I did this right. :)
Background image by netykavka@dA.
Please credit![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
heylove when using the layout. Thank you. :)
Also, feel free to ask here if you have any questions, but please bear in mind that I cannot answer questions regarding paid accounts. Sorry.
Style: Peach
Browsers: Firefox 3.6, IE 8, Flock 2.5.6
Navbar: Yes
Customized Comments/Tags/Archive Pages: Yes
Resolutions: 1024x768, 1280x800, 1440x900
Preview:
click on the image for the original size; a live preview can be found at my journal. :)
Instructions:
1. Go to the "Select Journal Style" page and choose "Blanket Peach" by clicking "Base Layouts" (it's the third one for me).
2. On the Customize Style page, make sure in the Modules section, Navigation is in the "Fixed" section, if it not already is; everything else in the "Column" Section.
3. In the Customize CSS section uncheck "Use layout's stylesheet(s)" and paste the code into the "Use embedded CSS" box and save your changes.
4. Please upload the images (IMAGE 1 & IMAGE 2) to your own host. Thanks. :)
adding a header image - please read carefully
first off, I did not intent for a custom header to be used with this layout. But because I have been asked for it, I came up with a workaround. It may not be perfect, but at least it gives the possibility to use a custom header. :) The code below is merely an example how to add a header, if you want the image to be larger or smaller, you must adjust the widths and heights accordingly. If you run into problems or have a question, don't hesitate to ask and I will do my best to assist. :)
to my knowledge, a separate header image (above the already existing one) cannot be added, but you can add a background image to
Step 1: copy the code below and replace the original code with it. Put the URL to your image where it says "URL TO YOUR IMGAE HERE" and adjust the background colors if needed.
#header>.inner {width:639px; height:200px; background: #000000 url(URL TO YOUR IMGAE HERE);padding:1px;}
Setp 2: look for the code below and add the bolded parts. You can leave the rest, if you want to remove the header later and return to the original one, otherwise, you can remove it.
div#header h2#subtitle {display:none; font-weight: normal; text-transform: lowercase; letter-spacing: 1px; padding: 0; margin: 0; color: #aaaaaa; font-family: sans-serif; font-size: 1em;}
div#header h2#pagetitle {display:none; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; padding: 0; margin: 1em 0 0 0; color: #c8c8c8; font-family: sans-serif; font-size: 1em;}
this gives you:
additional Step 3: if you want your header to be smaller or larger or smaller in width than suggested above, you must change the values accordingly in other parts of the code as well, I have put them below. Just replace "YOUR WIDTH" with the preferred width for the content, navigation and footer:
#secondary {width: YOUR WIDTH; margin: 0 auto; z-index: 0; padding: 0; background-color: #ffffff;}
also, you must push your content lower if you want your header to be larger or smaller in height as well. Just replace the bolded part with your preferred spacing amount and add the other three zeroes.
#content {padding: 0; margin: 0 0 0 0;}
combine both parts in step 3 if you want it to be larger or smaller in height and width. :)
Like I said above, if this is too confusing or you need help with adding the image, don't hesitate to ask. I hope I did this right. :)
Background image by netykavka@dA.
Please credit
heylove when using the layout. Thank you. :)Also, feel free to ask here if you have any questions, but please bear in mind that I cannot answer questions regarding paid accounts. Sorry.
6 | +