Toujours css to minimize space between blog posts

myrthia · Member · May 3, 2016 at 9:40 pm
Copy link

Add topic to favorites
How do I minimize the space between posts on my blog page? Also, how do I create boxes around each post, minimizing their sizes too?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 3, 2016 at 10:49 pm
Copy link
Hi there, this will allow you to adjust the space between posts. It was originally 90px.
```
.hentry {
    margin-bottom: 35px;
}
```
The following will put the same box as is on the featured (sticky) posts. You can edit colors and such as you desire.
```
.hentry:not(.sticky) {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    display: block;
    padding: 20px 20px 20px;
}
```
myrthia · Member · May 4, 2016 at 9:38 pm
Copy link
You are the best, thank you!!! That worked perfectly, but you already knew that! Another question, how do I make the boxes shorter on the bottom on the regular posts on my mail blog page? And how do I make a cute color box around them like my sticky posts?

I Really appreciate your help, like you have no idea!

Shelley
myrthia · Member · May 4, 2016 at 9:41 pm
Copy link
How do I make the menu bar at the top a different color?
How do I make the space between the header photo and the blog smaller?
I’m very excited now!
thesacredpath · Member · May 4, 2016 at 11:01 pm
Copy link
On the bottom of regular posts, add this to your CSS. You can adjust the “0” value. It was 30px originally.
```
.blog #primary #jp-post-flair, .archive #primary #jp-post-flair {
    margin-bottom: 0;
}
```
And how do I make a cute color box around them like my sticky posts?

I copied the styling off of the sticky posts. If you wish to change the border color, change the #e0e0e0 color in the “not sticky” border declaration. You can also change the thickness (the 1px). I also included the margin-top declaration which is what controls the spacing between the header image and the navigation.

On the main menu background color.
```
.main-navigation {
    background-color: #ef008f;
    margin-top: 0;
}
```
myrthia · Member · May 5, 2016 at 5:23 pm
Copy link
This is so much fun, thanks thesacredpath!

I put another ticket up before seeing you answered to this one.
myrthia · Member · May 5, 2016 at 6:13 pm
Copy link
How can I make the featured post be in one box and display like a slideshow?

How do I make the main menu bar at the top a thinner hight?

Thank you!
thesacredpath · Member · May 5, 2016 at 9:04 pm
Copy link
To have the post slider at the top, you need to assign the tag you have in Customize > Featured Content to the posts you wish to show in the slider. Also, you will want to remove the “sticky” setting on those posts. For more information on all that, See the Homepage Setup section in the Toujours Theme Showcase page.

On the menu height, let’s start with this.
```
.main-navigation a {
    margin-top: 0;
    margin-bottom: 0;
}
```

No items found.