?

Log in

 
 
20 August 2015 @ 05:02 pm
95. Clean Slate (2 variations)  
Layout Style: S2 Flexible Squares
Features: Embedded Fonts, Sidebar on Top
Layout Width: 1000px


Sidebar on Top { Preview } { Live }
Sidebar on side { Preview } { Live }
Credit:
layout_lounge


Theme and Layout Change Tutorial

All embedded in coding from Google Fonts

Sidebar on the Side - no header


Sidebar on Top no header image



Additional Layout Directions: Adding A Header image

  1. Currently this layout is not set up for a Header Image. However you can add on by putting the link in the .headerimage section. You should change the height in that section to the same height as your image. This will make your header overly your journal. Follow the directions below to change that...

  2. First find the .maincontent coding. Currently it has a padding of 45px on top. If you image is 300px in height then you will want to add 300px to this 45px padding for a total of 345px. If you image is a height of 250px then your total top padding would be 295px and so on.

  3. Then find your .sidebar coding. In this you will see the margin-top is set to the same 45px. The same idea applies. If you image is 300px in height add 300px to 45px for 345px.


Helpful Tutorials:

  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?


More Images:
More Headers: Layout Lounge: 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 with example if possible.
 
 
 
Zee HPtheyre_kattun on August 22nd, 2015 04:21 am (UTC)
Ooo I really like the top side bar one!
Gonna use this for my personal LJ. Thank you loads! :D
Jill aka Josireesanwar on August 24th, 2015 09:29 pm (UTC)
So glad you like it.
Karyta: Chiaki - DEZERT <3kyoselflove on September 26th, 2015 03:00 am (UTC)
Hi! I was wondering if it was possible to add a rotating header? Or is that something you can't do on LJ?

Never mind! I figured it out with these tutorials:
http://s2flexisquares.livejournal.com/527644.html
http://s2flexisquares.livejournal.com/186834.html?thread=1869778#t1869778

Thanks for this layout once again <3

Edited at 2015-09-26 05:56 am (UTC)
Jill aka Josireesanwar on September 28th, 2015 11:02 pm (UTC)
I've also found just making a gif image of rotating banners works as well. Thanks.
Karytakyoselflove on September 29th, 2015 12:54 am (UTC)
Oh! Haha I didn't think of that... xD
Jill aka Josireesanwar on September 29th, 2015 10:30 pm (UTC)
Neither had I originally and I agonized over how to get it to work and then it hit me and I felt silly. But sometimes we just don't think it will be easy.
Hikaru: Cupcakeyoru_no_hikaru on January 11th, 2016 05:08 pm (UTC)
I totally love this, especially the sidebar on the top! <3 However, I am having some trouble with the "blurb/free text" part of the sidebar. Somehow it's "array". The "title" will appear left next to the actual box (instead of at the top) and the text box is also not the same as the ones for e.g. "tags" box and such. It doesn't have a background colour either, but that's something I can live with. But it looks a bit weird altogether. Do you have any idea why that is? You can look at it here: http://author-paradise.livejournal.com/46718.html
I know, it's a different theme that I used, but I checked and the phenomenon is the same with the original theme. I would appreciate your help very much, because I really, really like this solution and I want to use it, but I'm just not happy with it as is. D:
Jill aka Josireesanwar on January 14th, 2016 12:07 am (UTC)
I will look in on this soon. My mom has been in the hospital and Real Life is crazy right now.
Hikaruyoru_no_hikaru on January 20th, 2016 09:32 am (UTC)
No rush here. I hope your mom is recovering well. And RL can be so busy, I know. I've made some further adaptions to make it look a bit smoother, but maybe you'll find a way to make it work even better.
Jill aka Josireesanwar on April 20th, 2016 12:07 am (UTC)
The Blurb's title is the only one that does this and I've never figured out why. It is really frustrating. For all the other issues... I've figured it all out. What I would recommend is putting the title in your Free Text section and coding for it.

So in the Blurb section I added.
Title

Then in the coding I did this:

h15 {
display: block;
width: 100%;
background-color: rgba(255, 255, 255, 0.5);
list-style: none;
background-image: none;
color: #aaaaaa;
text-align: left;
letter-spacing: 2px;
font-family: "Abel", trebuchet ms, arial, sans-serif;
font-size: 14px;
text-transform: uppercase;
margin: 5px -12px 0px 8px;
}

Now it matches the others.

Go to workshop_rees to see the outcome and get the new coding for your layout which fixes things.(with the above coding added).
nijininarenijininare on October 10th, 2015 06:58 am (UTC)
Just the theme I'm looking for!!! So clean and simple. THANK YOU <3 <3 <3
Thank you for making a theme like this AND showing a detailed instruction on how to use it for people like me so dumb with tech.

<3 <3
Jill aka Jo: SG1: Daniel in assylum - I won't givesireesanwar on October 13th, 2015 06:32 pm (UTC)
When I was learning the coding and how to do things with my layouts there was next to no explanations for anything and it could be so frustrating so when I started doing these layouts and this comm, I knew I had to make this stuff easier for beginners.
nijininarenijininare on October 13th, 2015 11:38 pm (UTC)
and I'm so thankful you did! :) Thank you much again. :D
alfaorionisalfaorionis on December 13th, 2015 09:13 pm (UTC)
Fantastic: I really like it♥♥
Thanks!
Jill aka Josireesanwar on December 14th, 2015 08:03 pm (UTC)
You're welcome.
ringlatringlat on January 24th, 2016 06:30 pm (UTC)
found you from google
Oooh, I like the side-sidebar one!! I think I'll use this for my langfic comm : D
Jill aka Josireesanwar on February 11th, 2016 10:35 pm (UTC)
Re: found you from google
Great.
ringlat: a dreamringlat on January 24th, 2016 08:39 pm (UTC)
o/
Hey! I was editing your layout a bit, so I don't know if it's due to my edits or not, but someone posted on my comm and they had a long username + no avatar. It turned out like this, with the text in a weird spot + overflowing onto the sidebar:



The post I made myself looks just fine though, so it seems like it's only a problem when they don't have a user icon. If it wasn't just that I messed something up somewhere you might want to check it out! Thanks for the layout!
Jill aka Josireesanwar on February 11th, 2016 10:36 pm (UTC)
Re: o/
strange, must be the usericon font coding. I'll see what I can figure out.
Jill aka Josireesanwar on April 19th, 2016 11:33 pm (UTC)
Re: o/
What is the comm?
ringlatringlat on April 22nd, 2016 08:33 am (UTC)
Jill aka Josireesanwar on May 5th, 2016 07:17 pm (UTC)
I'm not seeing the issue...


If it persists you can change the font size at
.userpicfriends a, .userpicfriends font {

If you add !important it usually help keep things as they are supposed to.

ie

font-size: 11px !important;
yuzaya_twinsakihalim92 on March 7th, 2016 11:05 am (UTC)
Help
Hi, I'm using this currently but I have a problem.
When I bold a text, it turns green and if I place a color, it's not that color but instead another color.
Can u help?
Jill aka Josireesanwar on March 9th, 2016 07:15 pm (UTC)
Re: Help
Yes, towards the beginning of the coding you'll find

b, strong { color: #298779; }
i, em { color: #D6002E; }
u { color: #2F6E8A; }
s, strike { color: #F6A000; }
q { font-style: italic; color: #D6002E; }

These codes make text that is bold, italics, underlined, strikethrough and quotes different colors. You can delete them or change them as you like.
Patshowminomoney on January 20th, 2017 11:51 am (UTC)
Hello! I'm using the Sidebar on Top version of the layout for a comm that I just started, but I'm having trouble with the ad placement. The ads are showing up above the whole blog but vertically. Is there a way to make them show up horizontally?

This is the comm: http://soyouwanttostan.livejournal.com/

[This is how the ad is showing up for me]


I'm sorry for the trouble, and thank you in advanced!
Jill aka Jo: 100: Raven & Wicksireesanwar on February 7th, 2017 08:15 pm (UTC)
That is the ad placement problem.
http://layout-lounge.livejournal.com/24601.html

You probably had it on your sidebar before.
Patshowminomoney on February 8th, 2017 04:00 am (UTC)
I've actually tried that before asking. It was set to Between Entries*, but changing it to Horizontal did nothing. It's okay if there isn't a solution for it.

I have another question though. Is there a way to put a space between the top bar and the first post on the home page? When I enter a post, there's a space that shows up where the 'Previous. Edit. Tag. Memories.. ect' buttons are, but there isn't any space on the homepage. The layout preview shows that there should be one.

Again, I'm sorry for the trouble and thank you so much for your help in advanced.
Jill aka Jo: H50: Steve and Katherinesireesanwar on March 21st, 2017 06:55 pm (UTC)
Okay. Then it is likely there isn't a solution.

Okay so I think there wasn't supposed to be space but to create it you can add to the maincontent's top padding...

Instead of
padding: 250px 0px 0 0px;

Do
padding: 280px 0px 0 0px;

This will create more space where the Skip links (previos, edit, tag, memroies etc) are in the post but this will make space between the "sidebar" and the posts.
Patshowminomoney on March 22nd, 2017 03:06 am (UTC)
That worked! Thank you! :)