Log in

No account? Create an account
06 November 2015 @ 04:12 pm
97. Holly Jolly Christmas  
Layout Style: S2 Flexible Squares
Features: Embedded Fonts, Colorful, Custom Userpic, Header Images, Christmas Themed Tiny Icons
Layout Width: Flexible Width

{ Preview } { Live }

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

Additional Layout Directions:
The title and subtitle are available for use in this layout. If you would prefer to use it go to the .title & .subtitlte coding sections and remove the line display: none; from the coding. This will show the title and subtitle on your layout.
The height of this header image is set to 300px. You can change this but there are few other parts you must change.

  1. .maincontent you'll notice there is a padding-top of 336px. Our image is 300px but that extra 36px is because of the header/navbar in this layout. So if you want a 200px image you'll have to add 36px to 200px (236px). This will be your new padding. 150px image would then be 186px in padding.

  2. .header you'll notice the marin-top is set to 300px which is currently the same as our header. So if you new header is 300px then this margin-top must be 300px.

  3. .sidebar you'll notice there is a margin-top (or margin: 336px 0px 0px -1px;) of 336px. Our image here is 300px and again that header/navbar so we end up with 336px. So if you want a 200px header image you'll be again adding 36px to the margin (236px).

This will apply no matter what height your image is. 300px=336px, 205=341px, etc

Background Image Directions:

  1. In the body section (at the very top of the coding) you will see three locations for an image. They have and explaination for each of them but the idea is you lay them on top of each other. So the one on the bottom is the design image. Say the square with the reindeers. Then the middle one is going on top of this because it is partially transparent and we want to see the snow on the bottom (like it is building up). And then the first image (one on top of the stack) is the fully transparent snow falling.

  2. This means background-repeat, background-attachment, background-position, and background-size will also need three "commands" unless the command is the same for all images (ie background-attachment: fixed;)

  3. So here is the example to explain. If you look at background-repeat you will see the commands repeat, repeat-x, repeat. What does this mean? It means that I want the falling snow (top image) to repeat all over the background, the snow at the bottom to only repeat on the x axis (remember Algebra and graphs x=horizontal y=vertical) and I want the background image of the reindeers to repeat all over the background as well.

  4. But if you look at background-attachment you will see it only has one command which is fixed. I don't want any of these images to scroll with the journal. If I did want to reindeer image to scroll I would change fixed to fixed, fixed, scroll.

  5. The line background-position the commands are a little different. This line wants you to tell it where to put the picture. Generally when I am using a repeating image I don't use this line at all or it says left top. Because of the snow at the bottom of the screen this time we have left top, left bottom, left top. However, because the falling snow and the reindeer image are repeating you can just have left bottom and it would work. It is with no-repeat images or large and single images that this line becomes more important.

  6. Now background-size. You can fully control the size of each image. As you can see I have it at  auto, 500px 82px, auto. Repeating images should be set to auto unless the image looks too large. So say the reindeer image is 400 x 400 pixels. But those little reindeers look HUGE! You can put in the third command here 200px 200px which resized the image to make it look smaller. Essentially that is what I did with the snow at the bottom. When you have large images there are other options for the size which you can find in my Image Tutorial.

Header Image Directions:

  1. This coding for the headerimage is typically at the very bottom of my coding. You'll notice I have a spot of the falling snow again. This is just to make it look like it is snowing more on your layout but not over your entries.

  2. A couple other changes... the background-repeat is a little different here. Typically you won't want your actual header image to repeat.

  3. There is no background-attachment because it is a rare instance when we don't want the headerimage to scroll.

  4. The background-position only has the one command because it can work for both a large image and a repeating image.

  5. The background-size is very different. First we have auto for the falling snow. This is because it is a repeating. But the large headerimage is set to cover. Cover means that the image will fill the space for it completely all the time and works for most large images. If that causes a problem for you, change cover to 100% 100% (meaning 100% width and height).

Header Images are all 1600x300 and will save in those dimensions. I have put background patterns next to them which I think work but feel free to mix and match or use your own images for the layout.

Snow is for the bottom of the layout and is actually transparent rather than black. I added a background color so you can see what the snow looks like. Will save transparent.

Pick your snow! All of these are transparent and I've added a back background here so you can see how the snow looks. All will save as transparent.
 photo 0_a6a02_91ddd97f_orig.gif
 photo 0_a6a0e_648edfc5_orig.gif
 photo sno_ani05.gif

Common Issues With Layouts:

  1. Common Issues

  2. Theme and Layout Change Tutorial

  3. Image Tutorial: Adding Background & Header Images in Coding

  4. Sidebar: What I Do and Do NOT Want On It

  5. LJ Advertisements: What is that weird box on my LJ?

  6. Tutorial Index

More Images:
More Headers: Layout Lounge: Headers
More Background Images: Layout Lounge Site
More Tiny Icons: Layout Lounge Site

No Hotlinking Images #4 under general
Header can be changed
Background image can be changed or removed.
Credit Necessary.

Having Trouble? Try:
Theme and Layout Change Tutorial or Helpful Hints
If that didn't work. Comment Below with example if possible.
brightstarmarabrightstarmara on November 7th, 2015 09:28 am (UTC)
NICE! I love all the different options you added!
Jill aka Jo: Movie: Cinderella Gus OMGsireesanwar on November 9th, 2015 06:20 pm (UTC)
Well, I got a little carried away when I was looking for a header myself and that was just the result. I'm glad you like them!
kamesoul: Stockkamesoul on November 7th, 2015 12:04 pm (UTC)
This is truly beautiful! I really love it!
Jill aka Jo: Movie: Minionssireesanwar on November 9th, 2015 06:21 pm (UTC)
ライトevilcoc0nut on November 7th, 2015 04:49 pm (UTC)
Really cool. Willl definitely be snagging when it gets closer to Christmas. :)
Jill aka Jo: H: Mickeysireesanwar on November 9th, 2015 06:21 pm (UTC)
It will be here. I hope you enjoy it over Christmas!
Yvonne Reidyvonnereid on November 7th, 2015 07:31 pm (UTC)
Using, thank you so much!!!
Jill aka Josireesanwar on November 9th, 2015 06:22 pm (UTC)
Cool! Enjoy.
tilmontilmon on November 8th, 2015 06:36 am (UTC)
Thank you! Though I've followed this journal for some time, this is the first time I've actually used one of the themes and layouts. Previously, I was confused about what to do, even following the tutorial, but this time, everything made perfect sense to me. I look forward to learning more.
Jill aka Jo: Movie: Dragon - Toothless Smilesireesanwar on November 9th, 2015 06:24 pm (UTC)
Well, I'm glad this one made sense, but just so you know.... I'm always happy to help. So should you be totally confused in the future but still want to use a layout; just let me know. I do this because our journals should be how we want them and I'm more than willing to help you achieve that goal.

Thank you for the lovely comment. And enjoy!
tilmon: goldendeertilmon on November 9th, 2015 07:42 pm (UTC)
I'll be sure to ask for further help in the future. I was very excited especially since I could understand how to choose the different elements and customize it for my needs. So, I limited the snow falling to the header, so the page won't be too visually noisy in case I make gif heavy posts. I feel like I could even try my hand to create my own background or header, following your dimensions. By making small variations, I'll be able to really learn. Anyway, thanks again for such clear instructions.
Jill aka Josireesanwar on November 12th, 2015 12:51 am (UTC)
Sounds good. It is all about what you want on your journal. And I'm glad you found it manageable.

That is great. I hope you really get into making images. I used to and got away from it.
lovekame02lovekame02 on November 8th, 2015 06:02 pm (UTC)
Thank you so much for this theme!! It's so pretty!!
*using it now*
Jill aka Jo: Blind: Janesireesanwar on November 9th, 2015 06:24 pm (UTC)
I'm so glad you like it so much. Enjoy!
Paola: Love You ♥tsukisagi on November 8th, 2015 10:22 pm (UTC)
I love LOOOVE this new layout! Thanks a lot for all the work you put into these layouts and for sharing them with us, I really love them all! I can't wait to use it :)
Jill aka Josireesanwar on November 9th, 2015 06:25 pm (UTC)
Thank you for the comment. And, of course, you are welcome. I can't help myself. I love making layouts so more to come. LOL
Christina: me- tw- ds- staring at your neck thinkinfly_meaway on November 9th, 2015 04:13 pm (UTC)
Oh wow. As always you make such beautiful layouts. I'm thinking of using this one in the near future and if I am, I will so credit you of course. This is so beautiful.
Jill aka Jo: Movie: Dorisireesanwar on November 9th, 2015 06:26 pm (UTC)
Of course. Not quite Christmas time yet. Enjoy when you use it. Thank you for the comment.
···djj.tempura on November 10th, 2015 11:02 pm (UTC)
Absolutely lovely! Just the kind of Christmas layout I was looking for. Thank you. :)
Jill aka Josireesanwar on November 11th, 2015 12:28 am (UTC)
Thanks. I'm glad you like it.
Sydney1lastdanceluv on November 24th, 2015 05:04 am (UTC)
This is gorgeous, I love it! :)
Jill aka Josireesanwar on November 25th, 2015 11:10 pm (UTC)
Thanks. I'm glad.
Anton Armsbergantonarmsberg on December 23rd, 2015 07:59 pm (UTC)
It looks great, but it doesn't work :(
It looks great this theme, but I can't add background images. After I've put in the URL to the pictures, my page doesn't show them. Is it possibly because I have a free basic account? Please let me know, and I wish you all the best for Christmas/New Year!
Jill aka Jo: H: Happy New Yearsireesanwar on December 27th, 2015 07:38 am (UTC)
Re: It looks great, but it doesn't work :(
Okay so something I noticed about your coding is this:

background-image: url(FALLING SNOW IMAGE), url(SNOW BOTTOM OF SCREEN), url(http://antonarmsberg.16mb.com/Livejournal/graffitigraphic-stock978.png);

The words in the () are for direction. Try deleting FALLING SNOW IMAGE and SNOW BOTTOM OF SCREEN and leave the () empty. The code is probably trying to find the images and can't... maybe.

Thanks! Hope your Christmas was great and Happy New Year!
Anton Armsbergantonarmsberg on December 27th, 2015 10:16 pm (UTC)
Thank you very much!
It works, thank you very much and I wish you and your family a happy New Year!!
Jill aka Jo: H: Happy New Yearsireesanwar on December 31st, 2015 12:43 am (UTC)
Re: Thank you very much!
Happy New Year!
Anton Armsbergantonarmsberg on January 1st, 2016 06:39 pm (UTC)
Thank you!
Thank you very much!!
Zoë Violetnese Malikeurasianlaura on August 29th, 2017 07:58 pm (UTC)
expressive winter hanukkah layouts?
sub-sub layouts for custom css field, anyone?
Jill aka Josireesanwar on August 29th, 2017 09:29 pm (UTC)
Re: expressive winter hanukkah layouts?