Twenty Seventeen, customize display-posts-listing

• 

  manuschwendener · Member · May 13, 2017 at 2:28 pm

  • Copy link
  • Add topic to favorites

  Hi

  I’ll copy the CSS I’m using below. It is taken from another of my blogs (https://ubblogtest.wordpress.com). I like that the featured images are bigger on https://manuschwendener.ch.

  I would like the display-posts-listings to look like this:
  title first, below that the featured image, below that the text.

  This is already happening on mobile / when you make the screen narrower, but I don’t see which part of the CSS is responsible.

  .display-posts-listing .alignleft {
  	float: right;
  	margin: 5px 5px 25px 25px;
  }
  
  .display-posts-listing .listing-item {
  	clear: both;
  	padding-bottom: 40px;
  }
  
  .display-posts-listing .listing-item .title {
  	display: block;
  	font-size: 115%;
  	margin-bottom: 15px;
  }
  
  .display-posts-listing .excerpt-dash {
  	display: none;
  }
  
  a.title {
  	box-shadow: none;
  	-webkit-box-shadow: none;
  }
  
  @media screen and (max-width: 600px) {
  	#panel1 .display-posts-listing .listing-item {
  		display: flex;
  		display: -webkit-box;
  		display: -moz-box;
  		display: -ms-flexbox;
  		display: -webkit-flex;
  		-webkit-flex-direction: column;
  		-moz-flex-direction: column;
  		-ms-flex-direction: column;
  		flex-direction: column;
  	}
  
  	#panel1 .panel-content .display-posts-listing .listing-item .title {
  		-ms-flex-order: 1;
  		-webkit-order: 1;
  		order: 1;
  	}
  
  	#panel1 .panel-content .display-posts-listing .listing-item .alignleft {
  		-ms-flex-order: 2;
  		-webkit-order: 2;
  		order: 2;
  		float: left;
  		margin-left: 0;
  	}
  
  	#panel1 .panel-content .display-posts-listing .listing-item .excerpt {
  		-ms-flex-order: 3;
  		-webkit-order: 3;
  		order: 3;
  	}
  }

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · May 15, 2017 at 6:45 pm

  • Copy link

  Hi, which site do you want me to work on? We had been working on your test site.

• 

  manuschwendener · Member · May 15, 2017 at 7:27 pm

  • Copy link

  Hello thesacredpath

  I copied most of the CSS from the test site to my actual blog.

  Now, on https://manuschwendener.ch, I would like the title of the blog posts to be above the featured image.

  This already happens on mobile / if you make the page narrower, so we only need to change the code to “do this for all media widths” – but I don’t see which part of the CSS in post 1 is responsible.

  Thank you :-)

• 

  thesacredpath · Member · May 16, 2017 at 12:52 am

  • Copy link

  Remove this from before that media query and then the second closing curly bracket at the end.
  @media screen and (max-width: 600px) {
  Then also add this.

  .display-posts-listing img {
  	width: 100%;
  }

• 

  manuschwendener · Member · May 16, 2017 at 6:16 am

  • Copy link

  Perfect – thank you very much, thesacredpath :-)

  May I ask you a related question?

  I understand that on https://manuschwendener.ch/blog I can’t center the posts like they now are on https://manuschwendener.ch – that’s just how the theme looks (right?).

  But is there a way to change the spacing before and after the post titles on https://manuschwendener.ch/blog? I would like a bit more space between the date and the title, and a bit less space after the title.

  [The button ‘Older posts’ on the main page links to /blog/page/2.]

• 

  thesacredpath · Member · May 16, 2017 at 5:47 pm

  • Copy link

  Hi, looking at your blog page, there are some things misaligned, likely due to some other CSS additions that may need more specific CSS selectors. Add this to the bottom of your custom CSS and then see what you think. It includes some additional padding on the entry meta (date) and less bottom margin on the entry-header (post titles

  .blog:not(.has-sidebar) #primary article, .archive:not(.has-sidebar) #primary article {
  	float: none;
  	margin-left: auto;
  	margin-right: auto;
  	max-width: 740px;
  	width: 100%;
  }
  .blog .page-header, .archive .page-header {
  	max-width: 740px;
  	width: 100% !important;
  	margin-left: auto;
  	margin-right: auto;
  	float: none !important;
  }
  .blog .entry-meta, .archive .entry-meta {
  	float: left;
  	padding-bottom: 10px;
  }
  body:not(.twentyseventeen-front-page) .entry-header {
  	margin-bottom: 0.3em !important;
  }

• 

  manuschwendener · Member · May 16, 2017 at 6:46 pm

  • Copy link

  Wow.

  Thank you, thesacredpath, this is amazing! 8-)

• 

  manuschwendener · Member · May 16, 2017 at 8:20 pm

  • Copy link

  Follow-up question:

  On https://manuschwendener.ch/blog, is it possible to move the ‘Older posts’ button to the left, too?

• 

  thesacredpath · Member · May 16, 2017 at 9:36 pm

  • Copy link

  Give this a try and see what you think.

  #infinite-handle {
  	text-align: left;
  	max-width: 740px;
  	margin-left: auto;
  	margin-right: auto;
  }

• 

  manuschwendener · Member · May 16, 2017 at 9:58 pm

  • Copy link

  Working fine on https://manuschwendener.ch/blog, thank you! :-)

  —

  I used the same code on https://ubblogtest.wordpress.com/alle.
  The position is as I’d like it to be now :-)

  Not directly linked to today’s changes: the button ‘Ältere Beiträge’ on https://ubblogtest.wordpress.com/alle isn’t changing colour on hover any more.

  It should behave like the button on https://ubblogtest.wordpress.com (but with background colour #a5d7d2).

• 

  thesacredpath · Member · May 17, 2017 at 1:12 am

  • Copy link

  Hmmm, could be perhaps a custom color setting or something. The following CSS will get you going on the button though.

  .infinite-scroll span:hover {
  	background-color: #a5d7d2 !important;
  }
  .infinite-scroll button:hover {
  	color: #000 !important;
  }

• 

  manuschwendener · Member · May 17, 2017 at 6:09 am

  • Copy link

  Thank you, thesacredpath, that fixed it :-)

• 

  thesacredpath · Member · May 17, 2017 at 6:28 am

  • Copy link

  Hooray and you are welcome!