114. L'orange (Expressive & Flexible Squares)
Layout Style: S2 Expressive & Flexible Squares (PAID)
Features: Custom Sidebar, Custom Comments
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.
NOTE: This is an updated version of Layout 24 which is a smaller size. I was simply going to update it for Expressive but then realized it might be nice to have a version that is for bigger screens as Layout 24 "Olive Snook" was back when screen resolution was around 800. This one has updated coding and is semi-responsive. I also had to update the image because it was very old and then small as well. See behind the cut.
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.
Things that are different from Flexible Squares to Expressive:
Title & Subtitle: These are turned off for these layouts because they tend to interfere 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.
Reponsiveness and Different Dimension Views
So because I'm using percentages in the layout if your using a lower screen resolution or are working off a tablet you might have an issue with the entries falling below the sidebar. In this layout the maincontent (FS) or alpha (Exp) is at 69%. The sidebar (FS) or beta (Exp) is at 30%. This is leaving a 1% to accommodate padding, margins, or the gap between entries and sidebar. You might want to make this bigger by making the entries or sidebar smaller.
The problem is the entries are getting pushed down because they are trying to overlap with the sidebar. They can't so the sidebar ends up being pushed down or pushing down the entries. So you are going to need to adjust the maincontent/alpha or the sidebar/beta to be a little smaller. You can do decimals. So you can do 68.5% for entries and 29.5% for sidebar. You can even do 29.125%. It is really whatever will work for your screen's resolution and size.
I have some responsive code in there under these sections that is supposed to break the layout into entries on top and sidebar below when the screen size resolution is 850px. If you screen is just under this and you want the sidebar and entries to be side by size you might want to change all instances of @media all and (max-width: 850px) { to a smaller number like 800px.
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 you. I don't have the time. I will assist your with questions you may have.
Features: Custom Sidebar, Custom Comments
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.
NOTE: This is an updated version of Layout 24 which is a smaller size. I was simply going to update it for Expressive but then realized it might be nice to have a version that is for bigger screens as Layout 24 "Olive Snook" was back when screen resolution was around 800. This one has updated coding and is semi-responsive. I also had to update the image because it was very old and then small as well. See behind the cut.
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.
Things that are different from Flexible Squares to Expressive:
Title & Subtitle: These are turned off for these layouts because they tend to interfere 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.
Reponsiveness and Different Dimension Views
So because I'm using percentages in the layout if your using a lower screen resolution or are working off a tablet you might have an issue with the entries falling below the sidebar. In this layout the maincontent (FS) or alpha (Exp) is at 69%. The sidebar (FS) or beta (Exp) is at 30%. This is leaving a 1% to accommodate padding, margins, or the gap between entries and sidebar. You might want to make this bigger by making the entries or sidebar smaller.
The problem is the entries are getting pushed down because they are trying to overlap with the sidebar. They can't so the sidebar ends up being pushed down or pushing down the entries. So you are going to need to adjust the maincontent/alpha or the sidebar/beta to be a little smaller. You can do decimals. So you can do 68.5% for entries and 29.5% for sidebar. You can even do 29.125%. It is really whatever will work for your screen's resolution and size.
I have some responsive code in there under these sections that is supposed to break the layout into entries on top and sidebar below when the screen size resolution is 850px. If you screen is just under this and you want the sidebar and entries to be side by size you might want to change all instances of @media all and (max-width: 850px) { to a smaller number like 800px.
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 you. I don't have the time. I will assist your with questions you may have.