?

Log in

No account? Create an account
 
 
25 February 2014 @ 02:30 pm
85. Image on the Side  
Layout Style: S2 Flexible Squares
Features: Large image on the side
Layout Width: 950px/Full

All embedded in coding from Google Fonts

Image to the left


Image to the right


Theme and Layout Change Tutorial

Additional Layout Directions:

  1. In the body section (at the top) the image here is the background image for the entire layout. This is the image that is on the side. The current image I'm using is 517x1040px the best size is probably 600x900. This is not the entire image showing. In the body section you can change the background-position which is currently "right top" to "right middle" or "right bottom" depending on the image you wish to use. If you are using the layout with the image on the left coding the positions would be "left top", "left middle", or "left bottom". (image example below)

  2. The title and subtitle are in there respective places on the layout. The title of entries and other aspects of the journal may interfere with the journal. If you would rather not us the title and subtitle go to the .title & .subtitle section of the coding and add the line display: none;. This will effectively hide these functions.

  3. Should you want a "header image" that functions as your title, I would recommend something that is 300x100px. (example below) If you do want to use this option and have set the .title & .subtitle sections to display: none; then you will want to go to the .headerimage section (near the bottom of the coding) and removed the display: none; line from this coding. If your image is more than 100px in height please remember to change the height in this section.

Examples:
#1

#3

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

RULES:
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.
 
 
 
Zee HPtheyre_kattun on February 26th, 2014 03:21 am (UTC)
yay! thank you so much for this! :D
Jill aka Jo: Stock: kitten playingsireesanwar on February 26th, 2014 05:11 am (UTC)
You are very welcome. I hope you enjoy it.
Josephine Stonejosephinestone on February 26th, 2014 03:43 am (UTC)
This is so cool.
Jill aka Jo: GOT: Sansasireesanwar on February 26th, 2014 05:10 am (UTC)
Thanks. I'm glad you like it.
Zee HPtheyre_kattun on February 26th, 2014 04:13 pm (UTC)
what is the problem with this ?
Jill aka Jo: Movie: Pascal upsidedownsireesanwar on February 26th, 2014 06:31 pm (UTC)
That is the "ads" from LJ. The tutorial is here. You can also go to a free account or paid account to get rid of it.
Zee HPtheyre_kattun on February 26th, 2014 06:41 pm (UTC)
ah! understood! thanks always! :)
Laolaoracci on April 22nd, 2014 06:51 am (UTC)
thank you for this <3
Jill aka Josireesanwar on April 25th, 2014 01:01 am (UTC)
You are welcome
marynasukemarynasuke on August 16th, 2014 09:24 am (UTC)
love it! and changed mine to this new layout already :D and because I prefer your circle user pic~ change the square one to the circle one too hope you don't mind XD

Thank you so much!
Jill aka Josireesanwar on August 18th, 2014 09:48 pm (UTC)
No problem. It is your journal and my goal is for you to make it look how you want it.
.anitaanita on March 11th, 2015 06:03 pm (UTC)
Sorry for my ignorance but the images are from a movie? Which one? Thank you so much!
Jill aka Josireesanwar on March 11th, 2015 08:28 pm (UTC)
No problem. The image is from the Starz TV show Outlander.
reality has so many adverse side effectssvtstarlight on June 29th, 2015 06:36 pm (UTC)
My background image does not load/display properly. If I change the perameters in the header display, it disappears completely. (ie display: none) I don't really know what to do to fix it, since there doesn't seem to be anything in the background image CSS to add the image size. I did add it in the header display CSS but it still doesn't show properly.

(the background image: http://i1083.photobucket.com/albums/j393/doexol/DSC_0255_zpshq4bvtcd.jpg ) I just need that to fit properly and everything is more or less fine. Any help is much appreciated.

ETA: the only way the background image displays at all is if I put it in the header CSS, otherwise I get nothing at all. help? *bangs head on desk*

Edited at 2015-06-29 06:40 pm (UTC)
Jill aka Jo: OB: Sarah on Phonesireesanwar on June 30th, 2015 12:31 am (UTC)
I don't know what happened here but I got it to work...
http://workshop-rees.livejournal.com/22122.html

This post has coding for you to copy and past.
reality has so many adverse side effectssvtstarlight on June 30th, 2015 01:07 am (UTC)
Thank you so much. I found one error (mine) while I was copy-pasting the tinyicon URLs, so it's prolly something I did. But anyway, I appreciate the quick response and the help. :D Thank you.

Jill aka Josireesanwar on July 1st, 2015 09:05 pm (UTC)
No problem. I'm glad I got it to work for you.