113. Sunshine Again (Expressive & Flexible Squares)
Layout Style: S2 Expressive & Flexible Squares (PAID)
Features: Custom Sidebar
Layout Width: Responsive
WARNING: If you like Flexible Squares don't change themes. You could lose it. Read More.
Expressive: [ PREVIEW IMAGE ] [ LIVE PREVIEW ]
Flex Sqres: [ PREVIEW IMAGE ] [ 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.
To get around this I'm sharing the coding via a code testing site where you can also see the layout working live. Click Live Preview above.
You may have to click VIEW IN EDITOR to see code.
Image:
1500 x 400
Expressive Instructions:
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. My header image is 420px in height (the height is bigger than the image height to accomodate the cover function - see the whole image). 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:
Things that are different from Flexible Squares to Expressive:
Title & Subtitle: These are turned off for these layouts because they tend to interfer with things. You can turn it back on by removing the "display: none;" line in the coding.
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: I've left notes it the coding to help you with finding things.
Flexible Squares Instructions:
The headerimage height is flexible here and can be found at the very end of all the coding.
Also, you will notice the Sidebar titles are differently designed. You will find all these title codings with their respective sidebar coding. So you will find the Page Summary's title coding with the Page Summary coding in the Sidebar section. The only one this is not true of is the Free Blurb or custom text which is still just sbartitle. In the expressive version of this theme all the title's for the sidebar have been grouped together.
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 including the header image I used for this layout.
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 yo
Features: Custom Sidebar
Layout Width: Responsive
WARNING: If you like Flexible Squares don't change themes. You could lose it. Read More.
Expressive: [ PREVIEW IMAGE ] [ LIVE PREVIEW ]
Flex Sqres: [ PREVIEW IMAGE ] [ 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.
To get around this I'm sharing the coding via a code testing site where you can also see the layout working live. Click Live Preview above.
You may have to click VIEW IN EDITOR to see code.
Image:
1500 x 400
Expressive Instructions:
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. My header image is 420px in height (the height is bigger than the image height to accomodate the cover function - see the whole image). 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.
- #alpha: If you change the header height you are going to want to change the first number in the margin in the alpha section
- #beta: Again if the header height changes then the margin's first number in beta needs to change and you can go negative "-10px".
Things that are different from Flexible Squares to Expressive:
Title & Subtitle: These are turned off for these layouts because they tend to interfer with things. You can turn it back on by removing the "display: none;" line in the coding.
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: I've left notes it the coding to help you with finding things.
Flexible Squares Instructions:
The headerimage height is flexible here and can be found at the very end of all the coding.
Also, you will notice the Sidebar titles are differently designed. You will find all these title codings with their respective sidebar coding. So you will find the Page Summary's title coding with the Page Summary coding in the Sidebar section. The only one this is not true of is the Free Blurb or custom text which is still just sbartitle. In the expressive version of this theme all the title's for the sidebar have been grouped together.
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 including the header image I used for this layout.
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 yo