Log in

No account? Create an account
05 February 2014 @ 05:00 pm
84. A Change of Color (Touch of Outlander)  
Layout Style: S2 Flexible Squares
Features: custom userpics, colorful
Layout Width: 1000px

All embedded in coding from Google Fonts

Just a Title Image at 100px

With a header image at 300px

Images As They Appear In Coding:

This would go in the .headerimage section and you'll notice it has background-image: url(), url();. Put your image in the second url() if you want to also add a title image over the top of this image [ie the title image would go in the first url()]

The layout with the header image is set to 300px height. If your image is less than that there are a few sections you'll have to change.

  1. .headerimage: you will want to change the height to the same height as your image.

  2. .maincontent: the padding-top option is set to 355px. You will want this to be whatever the height of your image is + 55. So if you image is 200px you'll set this to 255px.

  3. .header: this is the navbar. Here you will want to set the margin-top to the same height as your image.

  4. .sidebar: here you will want to set the margin-top to the height of your image + 35. So if your image is 200px then it will be set to 235px.

  5. If in the first layout you want to use your Journal's title rather than an image find the .title section and remove display: none;. Your journal title should appear.

More 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? Check out the Theme and Layout Change Tutorial.
If that didn't work. Comment.
kriegersfeverkriegersfever on February 6th, 2014 07:24 pm (UTC)
in love!
Jill aka Josireesanwar on February 6th, 2014 07:40 pm (UTC)
Thanks. I'm glad you like it.
kriegersfeverkriegersfever on February 6th, 2014 08:03 pm (UTC)
idk what i want to do with it though :(
etuartis: Revenge Victoriaetuartis on February 24th, 2014 08:01 am (UTC)
This layout is fantastic. I love it and I´m using it. Thank you so much.
Jill aka Josireesanwar on February 24th, 2014 09:39 pm (UTC)
Re: Layout.
You are very welcome. I'm so glad you like it.
Jo Ann: Out: Tie in with Starzyeuxdebleu on February 27th, 2014 12:02 am (UTC)
It's awesome. Thanks for sharing.
Jill aka Josireesanwar on February 27th, 2014 12:49 am (UTC)
Nevey Bneveyb on March 21st, 2014 12:35 pm (UTC)
I am going to use this but the header is not working :'(
Jill aka Jo: Movie: Minionssireesanwar on March 26th, 2014 05:40 am (UTC)
Can you show me exactly what you mean? I may be able to fix it.

Edited at 2014-03-27 08:26 pm (UTC)
iamusickloveriamusicklover on April 22nd, 2014 02:43 pm (UTC)
Thanks ! I've customize some parts, and apparently there is this huge space between the header and the entry. I've already used codes like padding, margin and etc, but it won't work. Can you help me fix it ? ^^
Jill aka Jo: Stock: Dandylionsireesanwar on April 22nd, 2014 09:15 pm (UTC)
This is the maincontent coding redone.

Just copy and paste this over that bit of coding and see what happens.

#maincontent {
background-color: #fffbd7;
width: 730px;
margin-top: 500px;
float: right;
font-family: 'Signika Negative', 'arial' 'sans-serif';
font-size: 12px;
color: #86878A;
text-align: center;
border-left: 3px dashed #B6B7B9;
border-right: 3px dashed #B6B7B9;
border-bottom: 3px dashed #B6B7B9;
iamusickloveriamusicklover on April 23rd, 2014 05:25 am (UTC)
yay ! It worked. Thanks !
Jill aka Josireesanwar on April 23rd, 2014 08:57 pm (UTC)
 {Amber-Lite}: shooting bottledos_coronas on April 24th, 2014 02:26 am (UTC)
I love this layout and I would really like to use it right now, but I'm having some issues with it? You can just click into my journal to see it.
Jill aka Josireesanwar on April 24th, 2014 10:06 pm (UTC)
Did you do step number 6 on the below tutorial:
 {Amber-Lite}: pic#51871211dos_coronas on April 25th, 2014 08:38 pm (UTC)
Yep. :/
Jill aka Josireesanwar on April 25th, 2014 10:57 pm (UTC)
Very odd. Try using Autumn under the Flexible Squares. Sometimes it is about the original layout and that is what I use.
 {Amber-Lite}: Dos Coronasdos_coronas on April 26th, 2014 01:10 am (UTC)
Perfect! Thank you, that was it. :)
Jill aka Jo: Bones: Camsireesanwar on April 26th, 2014 06:33 am (UTC)
LJ can be so temperamental. Glad it worked.
 ℋαmα-ℒi1nata60 on June 26th, 2014 07:59 pm (UTC)
Thank you!Спасибо!Очень понравился диз!Установила, может что не так,не все поняла,извините,кредит установила.
Jill aka Jo: SGA: Rodney and Zelenka Google Itsireesanwar on June 26th, 2014 08:16 pm (UTC)
I can't read most of that but you are welcome!
(Deleted comment)
Jill aka Josireesanwar on July 7th, 2014 12:05 am (UTC)
You are so welcome. Enjoy. Also if you need help with that screencap layou let me know.
iLLacrystilia_ixora on March 12th, 2017 03:21 pm (UTC)
Hi I want to ask, how about the header image is more than 300px? For example 400px. How should I change the coding?
Jill aka Josireesanwar on March 15th, 2017 12:05 am (UTC)
headerimage: you will want to change the height to the same height as your image. ie 400px

.maincontent: padding-top option set to 455px

.header: margin-top to 400px

.sidebar: margin-top to 435px.

iLLacrystilia_ixora on March 16th, 2017 09:04 am (UTC)
Thank you for this. While waiting for your reply, I managed to change by copying some coding from other layout design. So far everything looks great.

I hope you don't mind with my modification. Thanks again for this lovely layout. ^__^
Jill aka Jo: ST: ITD Better At Everythingsireesanwar on April 17th, 2017 05:34 pm (UTC)
I don't because your journal is all about your tastes and frankly the way I learned to make layouts was by modifying those I've found. So code on.
iLLacrystilia_ixora on March 16th, 2017 10:11 am (UTC)
One more thing, how to put back this LJ Like and also the share of LJ?

Like I circled in red in picture below?

Jill aka Josireesanwar on April 17th, 2017 08:51 pm (UTC)
Do you mean add them to the customization. I don't think you can. I haven't seen how to do it but I'll keep my eyes opened for the solution and post it should I find it.
iLLacrystilia_ixora on April 20th, 2017 01:11 pm (UTC)
Oh really? I just wondering that it is disappear in the layout. XD. Thank you so much for all your hard works.