117. NYC

Jul 31, 2024 13:39

Layout Style: S2 Expressive & Flexible Squares (PAID)
Features: Custom Sidebar, Custom Userpic/User Icon, Custom Header
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

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.


Image:




1600 x 300

Instructions for Expressive:
You are going to want to put your profile on your sidebar and make it the first thing to come up on the sidebar to get the userpic in the profile space.

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.

The header is under header-photo in this layout. If the size of your header image is larger or smaller than 300px (the image I'm using) then you may also have to adjust the content-inner margin which has a top margin of 470 to push it down. So if your image is 330 then you would add that extra 30 to 470 for 500.

Instructions for Flexible Squares:
The header image is under content-outer in this layout. If the size of your header image is larger or smaller than 300px (the image I'm using) then you may also have to adjust the content margin which has a top margin of 310 to push it down. So if your image is 330 then you would add that extra 30 to 310 for 340.

Things that are different from Flexible Squares to Expressive:
Title & Subtitle: The title/subtitle or header-name/header-description are customized for this layout. You can adjust the font size if desired.

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.

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, feature: design, account: paid-permanent, .expressive, .flexible-squares, topic: places, image, !all-layouts, layout-color: black, account: all

Previous post Next post
Up