[Resolved] Help formatting special View of posts grouped by year and month

[Author]

Posts

[liatG]

Hi Christian,
I need help formatting a View based on the Toolset tutorial https://toolset.com/2013/10/how-to-group-views-results-by-year-and-month/.

This ticket is related to questions I still have from this ticket: https://toolset.com/forums/topic/i-want-to-display-the-posts-as-an-unordered-list-within-each-group-of-dates/

I created the blog archive according to the tutorial directions. However, because of the headers within the loop, formatting the View so that it looks good has been difficult. Adding line breaks above the headers results in spaces between all of the posts and extra spaces between headers. I just want the first header to start at the top of the View (no space above) and to have a reasonable amount of spacing after each group of posts (see screenshot).

Page: hidden link.

Thank you for any help you can give me!

[Christian Cox]

Hi, custom CSS is a bit outside the scope of what we offer here, but I have a few thoughts to share:
- Technically the only valid child elements of a ul tag are li tags, so the h3 and h4 elements you've added create an invalid HTML structure. That could cause problems with rendering in different browsers. You can remove the ul and li tags and work with divs or spans instead, or refactor the markup to create nested lists of years, months, and posts like
- Year
-- Month
--- Post
--- Post
-- Month
--- Post
- Year
-- Month
--- Post
etc.

- There is no element wrapping each "group" of listings, so there's no way to target the group for a margin-bottom or padding-bottom. Instead you would have to target the top of the next section and add margin or padding there. You can use CSS nth-child selectors to apply different top margin or top padding to the first items if you want.

[liatG]

Thank you Christian!

[liatG]

Hi Christian,
I was able to use CSS to make the page come out looking the way I wanted. I am posting my code here for anyone who is interested.

I added a top margin to the h4 and h3 headings so they would separate from the lists of posts. I added a negative top margin to the view on the page so that the list wouldn't have abnormally large top margin at the top.

I used text indent to make the lines of text wrap nicely (a hanging indent to line up with the icon I used as a bullet point).

The page:

<div class="blog-archive-top">[wpv-view name="blog-archive"]</div>

The loop editor:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<wpv-loop>
      [heading condition="year" value="[wpv-post-date format="Y"]"]
<h3 class="blog-heading-top">[wpv-post-date format="Y"]</h3>
[/heading]
[heading condition="month" value="[wpv-post-date format="F"]"]
<h4 class="blog-heading-top">[wpv-post-date format="F"]</h4>
[/heading]
      <div class="extra-padding-left"><div class="lato list-padding special-indent"><a href="[wpv-post-url]"><i class="fas fa-caret-right special-indent"></i>&nbsp;&nbsp;[wpv-post-title]</a></div></div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

The custom CSS:

.blog-archive-top {
  margin-top: -1em;
}

.blog-heading-top {
margin-top: .6em;
}

.list-padding {
  margin-left: .2em;
}

.special-indent {
   margin-left: .1em;  
   text-indent: -.5em; 
}

.extra-padding-left {
	margin-left: 1.5em;  
}

.lato {
  font-family: lato;
}

[liatG]

Here is how it looks now. Much more readable. Thank you.