Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

January 2021

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

How to make column entries




Intro

Okay, let's learn how to display your journal entries in columns! It requires a fairly small amount of code, so I'm going to go over each piece and what it does in relation to S2 Complete Style's page setup.

I'll be using my cleaned layout CSS for reference during this tutorial; I will also only be showing the coding needed to create columns, so some of these classes may have other default styling. You can add these CSS specs to the end of your stylesheet, or you can take the styling and put them in with the rest of the styling for each class; either is totally fine! I'm just isolating them for readability. I will also be including vendor prefixes for webkit and Mozilla Firefox.

CSS columns glossary

This is not an exhaustive guide to CSS columns since we're only focusing on S2 Complete style entries, but below you'll find the specs we'll be using in this tutorial, what they're for, and what you can do with them. You can find more information on CSS columns here and here!

column-count - The number of columns dividing your content. Use auto or a number value.

column-gap - The space between columns.

column-width - The optimal width of each column. Use auto or a measurement value.

column-span - How many columns a certain element should span across. Can be all or a number value. If you have three columns and want an element to span two of them, you would use 2 as the value.

break-inside:avoid; - Keeps specific elements together so they won't wrap to new columns; This is vital in the context of creating column entries, since we want each entry to stay together as one element. If you do want your columns to wrap into new columns, then you can choose not to use this spec.

Container prep

In order to set our columns, we want to add the CSS to the innermost container that holds the entries, which would be #alpha-inner. I'm also going to be prefacing it with .lj-view-recent so that columns are only on the main page and when viewing a tag, this way your friends page and searching by date are standard, since we typically want those to be less for design and more for scrolling. You can choose to leave this off if you'd prefer columns on all page views.

.lj-view-recent #alpha-inner{
-webkit-column-count:3;-moz-column-count:3;column-count:3;
-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;
-webkit-column-width:320px;-moz-column-width:320px;column-width:320px;
}

First, decide how many columns maximum you'd like your content to be divided into. CSS grid is responsive, so it's going to collapse your content into one column for mobile users, and two columns for smaller screens, etc. You can set this to auto if you don't want to cap how many columns your content can divide into.

Next, set your column gap; the space between each column. You can use px, vh, vw, %, em—you get the idea. Your preferred measurement can be used.

Finally, set your column width. This can also be measured the same way column-gap can. Keep in mind that this isn't a fixed width and is still relative to the browser; it's just letting the browser know your ideal width for the columns so that it can apply it when possible. Use auto if you don't need this.

Full width elements

Sometimes you have content within the #alpha-inner container that you'd rather have spanning the container instead of taking on the CSS columns. For me, that's usually the previous/next page navigation links, and the header that displays when you view entries in a certain tag. For elements that you want to ignore the column styling, you'll use column-span:all; to contradict it.

.content-nav, #tagpage-header{-webkit-column-span:all;column-span:all;}
Sometimes I'll also use this on the ID that controls the sticky note, #sticky-note, so that it's immediately set apart from the entries as its own element. It just depends on the look you're going for!

Entries

Finally, let's get the entries styles to work with the CSS columns we added! You'll want a bottom margin only since the columns take care of the sides with column-gap, and you'll want to prevent the entries from wrapping up into a new column, which we do by adding break-inside:avoid; to any element directly inside the column container; in this case, .entry.

.entry{margin:0 0 20px 0;-webkit-column-break-inside:avoid;page-break-inside:avoid;break-inside:avoid;}
Optionally, you can also add a max-width to your entries if you don't want them to stretch past a certain size when collapsing the amount of columns, or on page views where columns aren't applied; for example max-width:600px; is what I've added to the entries on Coupled.

You now have columned entries!


My cleaned S2 Complete Style CSS with only the CSS grid covered in this tutorial added to the layout.

Have fun styling! There are CSS column style specs for borders, but in the context of an S2 Complete Style layout you can just add them to the entry itself. Everything relating to columned entries in your layout has been covered above, so the rest is just down to everything else you want to do with the layout and entries.

Other layout styles

S2 Layouts: You most likely can use this method in any S2 layout as long as you remember that the container class names may be different from S2 Complete Style and you'll need to change them. For example, in S2 Bloggish #alpha is the sidebar and #beta is the entry container, which is the reverse of S2 Complete Style.

S1 Generator: This will not work in S1 Generator because of the way the layout is structured; I tried to get it to work a couple of times back when I started making column layouts, but the mess of nested tables makes it impossible. I've seen one layout with a column effect in S1 Generator, but it involved a lot of brute forcing and positioning.


♡ You're Done! ♡

Using on DW?

Comments

Dec. 19th, 2020 10:11 am (UTC)
I've been quietly toddling around with this, and I'm puzzled as how to center the .lj-view-recent #alpha-inner and .lj-view-friends #container-inner containers, while ridding it of the columns? The code (or my code- shifts it all to the left of the page.
Dec. 19th, 2020 01:40 pm (UTC)
NVM, I figured it out! (max-width and etc).