Log in

No account? Create an account
26 May 2016 @ 03:46 pm
98. Oasis  
Layout Style: S2 Flexible Squares
Features: Embedded Fonts, No Title, No Subtitle, Made for almost not sidebar, no standard headerimage
Layout Width: Flexible Width

[ Preview ] [ Live ]

Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

Additional Layout Directions:
There are a few things you should know about this layout:

  1. I have removed the Title and Subtitle from the coding because this layout doesn't work well with them.

  2. The header image is more of just a title. This can be made in Photoshop or other image software. If you need a title I'm willing but I'd be pretty much mimicking this title image. I recommend having a background color in your image that has a low transparency. This means with a lighter image it will still be well visible.

  3. I have nothing on the sidebar currently and some of the components are turned off with display: none coding which you can remove. These would be the free blurb, page summary, calendar, and default userpic.

  4. The components of linklist and tags are still enabled and will pop up where I've put them in the layout when you select them in the sidebar customizations section of your LJ customizations. You can also adjust their locations by adjusting the px of the top and left coding lines for each component.

  5. You can find the coding for each labeled in the sidebar section.

  6. I recommend sticking with these two components, however, but if you feel so inclined you can change it up.


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.

R.: well you were a magazinenemophilist on May 27th, 2016 07:28 pm (UTC)
This is awesome!
Jill aka Josireesanwar on May 27th, 2016 08:23 pm (UTC)
Thank you.
iamusicklover: kikoiamusicklover on June 26th, 2016 02:39 pm (UTC)
this is cool! I will use it on my account and may tweak a little on your code, but still this is great! love it!
Jill aka Jo: TL: New Librarians walkingsireesanwar on July 1st, 2016 06:07 pm (UTC)
Great. I'm glad you like it.
Hillary: goobers : celebvibes on July 2nd, 2016 02:56 am (UTC)
Super cute!
dbzxenamandbzxenaman on July 7th, 2016 08:36 pm (UTC)
Okay I have made my own banner but the width of it ends with some of it being cut off and when I edit the percentage in the code in the it the width fixes a little but it lose height. What can I do?

BTW here is my banner:
Jill aka Jo: FF: Captain Speakingsireesanwar on July 13th, 2016 09:23 pm (UTC)
Sorry it took me so long to get back to you. What I recommend is to change the background-size line in the body coding.

It is currently:
background-size: 50% auto;

But try this:
background-size: 50% contain;

This closes the gap between the journal and the background image though it does zoom in just a tad.

The only other option would be to use only contain and make the journal portion wider.

Edited at 2016-07-13 09:31 pm (UTC)
dbzxenamandbzxenaman on July 16th, 2016 01:45 am (UTC)
How would I make the journal portion wider? As I want the entire photo to be seen without anything cutout, is that going to be possible?

I want to thank you personally for all the help you have given me, it is much appreciated and I have learned a lot from you. HTML/CSS codes do not intimated me as I know a lot from what you have taught me. I'm just not that advanced yet.
Jill aka Jo: Blind: Zapata FBI colorsireesanwar on July 19th, 2016 07:10 pm (UTC)
No problem. The only place you need to change the journal portion width is in the coding for content. That is in the General Section near the top of the coding. Looks like this:

#content {
width: 50%;
background-color: #ffffff;
float: right;
right: 0;
font-family: "Montserrat", arial, sans-serif;
font-size: 14px;
text-align: left;
padding: 25px 50px 25px 50px;
z-index: 50;

So what I would do is just adjust the width (which is for the journal portion) slightly. I was able to close the gap in my browser with 55%. But it might be 56% for you. Test the increments and see what you like the best.

Thank you. That is why I created this community. When I started at LJ I felt rather overwhelmed by all there was to learn just to get your journal layout to look the way you wanted it so I thought from all the things I learned, why not make it a little easier for everyone else. I'm glad I succeeded in that for you.

I am considering another tutorial about making your own layout but I want to find the right coding and I'm trying to figure out if I can make it into a video.
woodenshoreswoodenshores on October 8th, 2016 05:19 pm (UTC)
This is so gorgeous!! I'm snagging. Thanks for sharing <3
Jill aka Josireesanwar on October 26th, 2016 09:12 pm (UTC)
No problem. I hope you enjoy it.
Zee HPtheyre_kattun on October 17th, 2016 01:00 pm (UTC)
Ooooh!!! I like the simple aesthetic in this! gonna use it soon!
Thank you for this!! :D
Jill aka Josireesanwar on October 17th, 2016 06:03 pm (UTC)
Very welcome.
€ððÿhika_ryuu on September 20th, 2017 01:27 am (UTC)
thank you~ taking this for my comm :)
Jill aka Josireesanwar on September 20th, 2017 06:45 pm (UTC)