108. Chalkboard Revisted (Expressive)

[sireesanwar.livejournal.com]

Layout Style: S2 Expressive
Features: Custom Sidebar
Layout Width: Responsive
WARNING: If you like Flexible Squares don't change themes. You could lose it. Read More.

[ PREVIEW ] [ LIVE PREVIEW ] credit layout_lounge
All special fonts have been embedded into the layout from Google Fonts.

Coding is a real pain to list here because now anything with a # creates tags in our system. So to get around this I'm sharing the coding via a code testing site where you can also see the layout working live. You may have to click VIEW IN EDITOR to see code.

GET THE CODE
You may have to click VIEW IN EDITOR to see code

Layout Images:


Large image but will only show some because of coding.

Because this is not Flexible Squares the attributes are called something different but I tried to put notes into the coding to help with this.

Header Image: So the header image is back on and different that previous Expressive layouts. #header-inner is the equivelant of .header-image now.

My header image is 300px in height. If you want to have a bigger header image there are settings you'll have to change in the coding. Here they are in order inside the coding:

• #header-inner: You are going to want to change the height to whatever you image is.


• #header-content-inner: this you will find in the header section of the code. This has a top: 300; which I believe is allowing you the space for the header image. So this will have to change with your image height.

Things that are different from Flexible Squares to Expressive:
Title & Subtitle: In Flexible Squares I turn off the Title and Subtitle because the title of the post messes with them. That is not so of Expressive so they are on and I'm actually using them rather than my typical headerimage title. These are called header-name and header-description in the coding but I did put a not called them TItle and Subtitle.

Current Tiny Icons: I figured out how to add the tiny icons into the layouts so this will be my first Expressive layout with tiny icons.

Meta: Essentially any data on your post: date, title, comment section at the bottom and the skiplinks for editing your post. I like that these links are always at the bottom of your post but it can be a pain when you have a massive post like this one. LJ-cuts help when you are on your main journal and not within a post. Lj-cuts are our friends.

Names in Coding: The names of nearly all the coding areas are very different so there was a huge learning curve. Felt like my first tries with layouts but I've tried to make notes in the coding so you'll know if your familiar with Flexible Squares. I think I'm going to eventually post a "translation guide" which will help you and myself when creating. Going forward I'm going to try to translate a few layouts from the past into Expressive and anything new will be both.

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

You can find more images at

RULES
Not hotlinking images please. Imgr images can be used.
Headers can be changed. Please make the layout your own.
Layout images do not have to be used.
CREDIT IS A MUST. You can do this in your profile or on your sidebar. That is your choice.

If you are having trouble with this layout please comment and I'll see if I can help you. I will not create your layout for you.

Comments

[jaemarch.livejournal.com]

Thank you so much for making these layouts available outside of Flexible Squares 😭♥

[sireesanwar.livejournal.com]

You're welcome. I'm working on some of my favs as I got through my old layouts. If you have a favorite you'd like to see in Expressive... feel free to comment on it and let me know.

[siaht.livejournal.com]

Hello! I found your journal through Google on searching for LJ layouts. I'm an old and have been using LJ for almost 20 years now (although this particular acc is only 11 years old haha). Anyway, making LJ layouts was always something I was interested in, but never got around to learning. But now I recently started taking a web dev course and I really would like to start making LJ layouts for practice. Would you have any resources you could point me to so I could understand the code better, and how to start? I've been looking at your codes, but apart from the HTML and CSS I can barely understand what's going on. I see a lot of JS in there too and I'm wondering if those are LJ-specific codes or if it's something I'd need to code myself to be able to make the layouts.

Any* wisdom you could share with me would be greatly appreciated.


(if you get this same comment multiple times I'm so sorry, I didn't know I needed to join before commenting)

[sireesanwar.livejournal.com]

Well, I have tutorials here but most of them are for Flexible Squares. However, you might learn something about code going through those. Beyond that the way I learned was by taking layouts and breaking them. I would go to sections and change things to see what they controlled. If you need to know something about a section of coding like background-position or something like that... I google it. But I've made Tutorials that go through aspects of a layout and I'm hoping to do more as soon as I figure the logistics of them.

Also, I use right click "Inspect" a lot. It helps me pinpoint exactly where something is and sometimes enlightens you about the coding you are working with.

Honestly, I learned by doing. Feel free to start with one of my layouts and just start changing things until you get what you want. You'll start learning really fast.

I did use the communities for s2flexisquares and s2expressive to help me along. They are just there for reference now but it used to be you could ask questions and get help with coding.

If you are curious about a bit of my coding... feel free to ask. I can't promise a quick response but I'm trying to be around more.

Oh and I created a community where I could test and build my layouts. It makes life easier...

https://workshop-rees.livejournal.com/
https://loungeworkshop.livejournal.com/

These are where I tinker.

[siaht.livejournal.com]

I really appreciate your reply, thanks so much!

I'm gonna follow your advice and also take a look at those communities to see if they can still be of help to me. But yeah, I may come back with questions if I do find myself really stumped on something.

Thanks again!

[sireesanwar.livejournal.com]

All I ask is that you don't private message me. Not a fan. If you have a question about a tutorial comment there. If you just have a general question please use my Help Desk post. First, I see those comments more readily and second I just don't love the private message area unless it is something truly private.

Good luck.