116. Revolumna Inspiree

Jul 12, 2024 18:16

Layout Style: S2 Expressive & Flexible Squares (PAID)
Features: Custom Sidebar, Custom Comments, Custom Userpic/User Icon
Layout Width: Semi-Responsive
WARNING: If you like Flexible Squares don't change themes. You could lose it. Read More.



Expressive: [ PREVIEW IMAGE ] [ LIVE PREVIEW & CODE ]
Flex Sqres: [ PREVIEW IMAGE ] [ LIVE PREVIEW & CODE ]
credit layout_lounge inspired by revolumna
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.
You may have to click VIEW IN EDITOR to see code.
NOTE: This layout was inspired by a layout by neen over at revolumna. I stumbled upon it while looking for something and loved it. My issue with it was it was very small so I needed to make it bigger and then I wanted it in Expressive. So some changes were needed. For the most part it is pretty close to the same. I added some stuff and updated some things but for the most part it is just like neen's "Rise Above."


Image:


1500 x 350

Instructions:
You are going to want to put your userpic on your sidebar and make it the first thing to come up on the sidebar to get the userpic up near the header.

If your header is taller or shorter than mine there will be adjustments to be made to the userpic/user icon for the sidebar. Let me know if you have issues.

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. You might want to make the maincontent/alpha width smaller or the sidebar/beta.

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 gets to a certain size. 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.

feature: header-navbar, image: header, feature: userpic, layout-color: white, layout-color: gray, feature: design, account: paid-permanent, topic: simple, .expressive, .flexible-squares, image, !all-layouts, account: all, feature: sidebar

Previous post Next post
Up