105. The Pines in Expressive

[sireesanwar.livejournal.com]

Layout Style: S2 Expressive
Features: Header Image, Custom Header Location, 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

Header Image:

Mock Footer Image (see content-outer)

Both images are 1500 x 200

Social Media to match (facebook, twitter, tumblr, instagram, pinterest, bloglovin):





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: The header image attribute is turned off in this layout. You can use the container-inner (flexible squares it is content-outer) attribute instead. I did this to control where the header links and image were located.

My header image is only 200px 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:

• content-inner: You are going to want to change the first option in margin. When my header is 200px in height this attribute is 240px to give a bit of space between the main journal and the header.

Mock Footer Image: The mock footer image is also in the container-inner/content-outer.

• I've utilized the multiple background images ability. Note in the coding you'll see multiple url () with commas between them. This is how you layer background images. The one you want on top should come first. I have left that blank if you are so inclined to make a Title image.


• Because the container-inner is being used for the "mock footer" there is no height. This is why the third image's background-postion is listed as center bottom. Center is for horizontal and bottom is for the vertical. You can use multiple commands here: center bottom, center 100%, center 50px. It depends where the image you are moving needs to be located.


• The background-size is listed as background-size: auto, 100% 200px, 100% 200px; This means the first image which is the "title" would be auto sized because you want the full size of the item. Then the second is 100% width and 200px height just like the third. I did this because full height here would be the entire outer-content otherwise.


• That 200px in height we have in the headerimage area (container-inner) needs to be translated to space at the bottom of our layout. This would mean adding space at the bottom of your posts and sidebar in the form. These attributes are called alpha and beta. Alpha is the posts and beta is the first sidebar (there is a gamma to have 2 sidebars but I'm not going there yet). So should you change the height of this bottom image you'll have to change it in the container-inner, alpha and beta and the responsive codes for alpha and beta.

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.

Current Tiny Icons: I after a lot of digging I think I've discovered that Expressive doesn't give you the ability to have tiny icons next to your currents (mood, location, music, etc). There is a way to do it with Theme Layers in a paid layout but again, I'm not doing this now. If you know differently please comment and tell me because I couldn't get it to work no matter what I did.

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 graffitigraphic

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.

If you are having trouble with this layout please comment and I'll see if I can help you.

Comments

[nemophilist.livejournal.com]

Gorgeous! ♥

[sireesanwar.livejournal.com]

Thank you.

[inabsentialuci.livejournal.com]

Hi! First, thank you for your wonderful layout! Second, I just installed it on my journal, and my sidebar is a little wonky and below the entries (here (https://inabsentialuci.livejournal.com/)). I probably could have figured out what to switch around in Flexible Squares, but I'm kind of confused with the Expressive coding! My header is 1500x200 like yours.

[sireesanwar.livejournal.com]

I'm so sorry I didn't get back to you. I kind of unplugged for a while. If you still need help I'll try my best. Again so sorry.

[inabsentialuci.livejournal.com]

Yes, please! If you could please take a look, I would love it! The sidebar is below the entries. The only customization I did was to add the userpics back into the layout, but the sidebar was below the entries before I did that. My journal is here (https://inabsentialuci.livejournal.com/). Thank you!

[sireesanwar.livejournal.com]

Dang it. OKay. Let me mess with this coding and see if I can get it working. I wonder what happened.

[sireesanwar.livejournal.com]

I'm still looking but the weird thing is it works on communities for me but not a personal journal. LJ always has to screw everything up.

[inabsentialuci.livejournal.com]

Thank you for checking! Hopefully it's not just a weird LJ thing!

[sireesanwar.livejournal.com]

No, as it turns out it is my fault. So my original coding worked in the community where I built it but doesn't work for personal journals. Tweaking fixed that and I'm going to have you head over to my Expressive Workshop for the new coding. You can find it https://loungeworkshop.livejournal.com/

I'm really hoping it works for you. Let me know.

[inabsentialuci.livejournal.com]

It worked! Thank you so much! ♥

[sireesanwar.livejournal.com]

YAY! I'm so glad. So it was a little me and a little LJ being annoying but still. Glad I could fix it and update the coding for future users.

Enjoy!

[cd_mods]

I love your layouts!

I hope its ok, with me leaving this here.

I am looking for a layout my community, camelot_drabble. You created our last one and we are looking for a new one, If you could help us. I already have a header, but having a hard time with everything else. I am not good with colors, fonts and background. If you could help me, please let me know and I can send you the header.

[sireesanwar.livejournal.com]

Well, I'm not into the making personalized layout business anymore but I can adjust colors from a head for a pre-choosen layout. Do you need it to be Expressive or are you still using FlexSquares?

[cd_mods]

That will be awesome. Thanks. Im not sure how to send you the header through here so you can have an idea of the colors.

[cd_mods]

Unfortunately, i cant find the header that was created. It was a beautiful castle with greenery around. Breaks my heart that i cant find it as the person who created it is here no longer. Im still using flexible squares and your layout. The colors scheme i wanted were either blue or green, whichever you prefer.

[sireesanwar.livejournal.com]

Let me tinker.

[sireesanwar.livejournal.com]

Actually is there any of my recent layouts you like that I can adjust for you?

[josephinestone.livejournal.com]

All of your designs are so amazing. ♥

[sireesanwar.livejournal.com]

Thanks!

[exile-vilify.livejournal.com]

Thank you so much for this. Please stick around on LJ, I love your work so much!! ♥

[sireesanwar.livejournal.com]

I haven't been on a lot but I've tried to keep everything here for you all. I hate when stuff disappears on me so I'm trying to keep it all here.

I haven't been around as much just because life is keeping me from it.

I appreciate how much you love my work. It is always nice to hear.

[exile-vilify.livejournal.com]

I understand. I hope life is treating you well ♥