ext_194372: TVD: Caroline Close Up (Default)
sireesanwar ([identity profile] sireesanwar.livejournal.com) wrote in [community profile] layoutlounge2014-02-25 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.

[identity profile] theyre-kattun.livejournal.com 2014-02-26 03:21 am (UTC)(link)
yay! thank you so much for this! :D

[identity profile] josephinestone.livejournal.com 2014-02-26 03:43 am (UTC)(link)
This is so cool.

[identity profile] theyre-kattun.livejournal.com 2014-02-26 04:13 pm (UTC)(link)
what is the problem with this (http://i.imgur.com/87txUHq.png) ?

[identity profile] theyre-kattun.livejournal.com 2014-02-26 06:41 pm (UTC)(link)
ah! understood! thanks always! :)

[identity profile] laoracci.livejournal.com 2014-04-22 06:51 am (UTC)(link)
thank you for this <3

[identity profile] marynasuke.livejournal.com 2014-08-16 09:24 am (UTC)(link)
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!

[identity profile] anita.livejournal.com 2015-03-11 06:03 pm (UTC)(link)
Sorry for my ignorance but the images are from a movie? Which one? Thank you so much!

[identity profile] svtstarlight.livejournal.com 2015-06-29 06:36 pm (UTC)(link)
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 2015-06-29 18:40 (UTC)

[identity profile] svtstarlight.livejournal.com 2015-06-30 01:07 am (UTC)(link)
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.