Jill aka Jo (sireesanwar) wrote in layout_lounge,
Jill aka Jo

Making A Layout: Recent Posts From This Journal

Account Status: All
Theme: Flexible Squares
Actions: Creating Your Own Layout: Recent Posts From This Journal
Links: Code Index

You may have recently noticed that LiveJournal has made the "Recent Posts From This Journal" available for Flexible Squares. This is what it looks like over at my journal.
 photo buildingalayout0048.png

The issue I discovered when it first went live was that it doesn't match my journal layout! What to do...
 photo buildingalayout0042.png
The solution is we have to learn to code for it. And that is what I will endevor to accomplish in this tutorial.

The coding I would like to work with is from my layout Oxygen.

We are starting with a layout looking something like this...
 photo buildingalayout0042.png
Though it is possible it looks close to right on your layout which would be the case with the Oxygen layout.
But do we notice that the images for these "Recent Posts" are very close to the edge and the title "Recent Posts" is very close to our .comments. We'll want to make some adjustments. Either way we need to do some coding to improve the look of our layout now that LJ added something.

My Oxygen Layout                                                                My Chalkboard Layout

Here are two variations of the same coding. The first if for Oxygen and the second is for Chalkboard (both my layouts).

Let's get the obvious question out of the way. The coding says "threeposts" but we can have 3, 6, or 9. So why 3? Well, there are three in a row so it is referring to that number and therefore applies to the 6 and 9 settings.

.entry--threeposts { as you can see above this applies to the entire area that is Recent Posts. In my Chalkboard layout you can see the Recent Posts are not lined up with the left side of the journal. This is why we have  margin-left: 0px !important; inserted in the batch of coding. There are some slight differences in this first section of coding. The Oxygen Layout has a content background color which is covering everything laying over it which includes the Recent Posts. This is not the case with the Chalkboard Layout so we need to add a background color to compliment the journal style. This goes for the border line of coding as well. Each layout has different margins and paddings here to accomodate look.

My Oxygen Layout                                                                My Chalkboard Layout

 photo buildingalayout0044.png
.threeposts__inner { is only slightly different. This is just a row in the Recent Posts. Notice though that the first posts title is going onto a second line. You might want to add padding to accomodate such things but I left them alone in the Chalkboard layout but added padding in the Oxygen layout. You could reduce the padding in .entry--threeposts { and add some here and give this portion a slightly different background color for a little customization.

My Oxygen Layout                                                                My Chalkboard Layout

 photo buildingalayout0045.png
.threeposts__header { is just that the header to the Recent Posts. This time the coding for both layouts is the same. I made sure there were margins in place to keep the Header with the posts but not too close. You can also control the font in this coding.

My Oxygen Layout                                                                My Chalkboard Layout

 photo buildingalayout0047.png
.threeposts--item-size-xxs .threeposts__item { is for the height of each post. You might still need the padding in .threeposts__inner { so her dividing lines between posts also are accomodated.

.threeposts__item { is more for the individual posts customizations besides the height. This is a necessary bit of coding and shouldn't be changed too much.

That is as far as I've coded but here are some additional codings you might want to use:

This is for the Posts image
.threeposts__pic {
    overflow: hidden;
    position: absolute;
    top: 0px;
    display: block;
    width: 175px;
    height: 120px;
    margin: 0px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

This is for the Posts Title
.threeposts__head {
    position: relative;
    margin: 0px 0px 0.3em;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.4;

This is for the Posts Title as a link...
.threeposts__link {
    margin: 0px;

This is for the posts that do not have pictures just text...
.threeposts__text {
    overflow: hidden;
    position: relative;
    max-height: 4.1em;
    margin: 0px;
    font-size: 0.92em;

This is how the Chalkboard Layout turned out:
 photo buildingalayout0049.png
This is out the Oxygen Layout turned out:
 photo buildingalayout0056.png

This is what we have so far...
Any questions about this tutorial? Please Comment

Tags: !layout-tutorials, !lj-tips/tricks/features, #account: all, .flexible-squares, account: paid, help with: coding, help with: recent posts
  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened