108. Chalkboard Revisted (Expressive)
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:
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.
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.
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.