Log in

07 July 2015 @ 05:14 pm
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

1992*4##111kazunari on December 2nd, 2016 05:54 am (UTC)
Hi there!

I'm having a bit of trouble; I'm using a code for flexible squares that was created by someone else, and currently the theme does not show related posts. I can't, for the life of me, get the code to work and I think I'm probably missing something.

Would you mind having a look and let me know what I may be doing wrong? I want my related posts to show up as links.

Here is the theme code (for flexible squares): http://pastebin.com/Va9RMvLy

I currently have one journal entry linking to another by URL, and have double checked to make sure that was correct. Any input is greatly appreciated!!
1992*4##111: pic#126898648kazunari on December 2nd, 2016 06:13 am (UTC)
Update: they show up but I haven't been able to modify their appearance is all


Either way, this doesn't look too terrible, just odd with how the thumbnails clip the imagery
Jill aka Jo: Chuck: Sarah and Chuck in waiting roomsireesanwar on December 8th, 2016 12:47 am (UTC)
Yes, they thumbnails clip strangely and the recent posts have some restrictions so at times when the width of your journal isn't terribly big it changes their appearance.

They are hard to customize because it came be different for each layout but for me I use an inspect tool through FireFox which will let you look at the coding for different areas and then you can recreate it with changes.

However, most of the time success changing these means you've controlled them so much they can have future problems.