Display posts CSS

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
November 9, 2015 at 12:17 pm #163544 Resolve
FIELDFIX
Member
Hi,

We would like to display on our homepage our most 4 recent blog posts (recent news) with image, then post title, then date, then post extract and link. I’ve pretty much managed to cobble together some code using display post code in a text widget in the Front Page Area Two section, plus some CSS styling.

How can I remove the hyperlink underline for the images in this section? I cannot work it out!

Is it also possible to set the image height so that they will all be the same size? I’m assuming the width needs be responsive, can you check my coding that this is the case?

We’d like these display posts to appear across two columns and two rows. I have managed to acheive this but I don’t think they float as they are not centred on the page, nor are they probably responsive so I’m missing some code here too I think.

This is the code in the widget:

[display-posts include_excerpt="true" include_date="true" date_format="j F Y" image_size="large" posts_per_page="4" wrapper="il" text-decoration:"none"]

And this is my messy CSS styling:
```
.display-posts-listing img {
	float: left;
	margin-bottom: 20px;
}

.display-posts-listing li {
	display: inline-block;
	margin-bottom: 20px;
	max-width: 450px;
	vertical-align: top;
	margin-right: 20px;
}

.display-posts-listing .date {
	font-size: 85%;
	display: block;
	padding-top: 2px;
	padding-bottom: 5px;
}

.display-posts-listing .excerpt-dash {
	display: none;
}

.display-post a:link {
	text-decoration: none;
}

.display-post a:active {
	text-decoration: none;
}
```
Sorry, learning as I go through trial and error :-)

Many thanks
Suzy
- This topic was modified 7 years, 7 months ago by Kathryn P.. Reason: added code tags around code blocks
November 9, 2015 at 3:19 pm #163547
Kathryn P.
Happiness Engineer
How can I remove the hyperlink underline for the images in this section? I cannot work it out!

That underline is coming from this style:
```
.widget_text a:hover {
  border-bottom: 1px solid #00cc00;
}
```
To override it on images, try adding this to your custom CSS:
```
.widget_text .display-posts-listing a:hover.image {
  border-bottom: none;
}
```
Is it also possible to set the image height so that they will all be the same size? I’m assuming the width needs be responsive, can you check my coding that this is the case?

To make the images the same size, try adding a max-height on this:
```
.display-posts-listing img {
  float: left;
  margin-bottom: 20px;
}
```
In addition to adding a max-height, I’d suggest also adding a max-width so it becomes something like this, which gives you some whitespace to the right of each image so they aren’t butted up against each other as they appear now. So instead of the current CSS above, try something like this:
```
.display-posts-listing img {
  float: left;
  margin-bottom: 20px;
  max-height: 200px;
  max-width: 450px;
}
```
We’d like these display posts to appear across two columns and two rows. I have managed to acheive this but I don’t think they float as they are not centred on the page, nor are they probably responsive so I’m missing some code here too I think.

You could try adding media queries to tweak the width of each post excerpt/thumbnail at different screen widths.

You can learn more about using media queries that target certain screen sizes here:

http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
November 9, 2015 at 10:25 pm #163548

FIELDFIX
Member

Many thanks for your quick reply Kathryn.

Unfortunately the underline is still appearing when you hover on the post images. I tried adding !important but that didn’t work either. Any other ideas?

I’ve had a quick look at the media query. I understand it but not sure how to code it for the .display-posts-listing? Basically I just want the image to go to 100% width on a tablet and mobile device and list one after the other. On tablet it lists one after the other but the image is not full width. On mobile it lists one after the other but the listing is wider than the screen display. Any ideas?

Also is there anyway we can remove the left padding so that the image and content is left aligned in line with title Recent News? I note that it’s indented.

Finally, re the testimonials widget on the home page. I’m not sure ours are changing, they seem to always be the same. I am correct in thinking that they should change automatically aren’t I?

Many thanks
Suzy

November 9, 2015 at 10:34 pm #163549

FIELDFIX
Member

Oh yay, I just fixed the image underlining thing. FYI this is what worked:

.textwidget a {
border: none;
border-bottom: none
}

.textwidget a:hover.image {
border: none;
border-bottom: none
}

Now I just need help with making the display-posts-listing responsive on tablet and mobile to 100% width. Any ideas?

November 9, 2015 at 11:03 pm #163550

FIELDFIX
Member

And I think I have just fixed the responsive thing too. FYI I changed the image dimensions to image_size=”medium” and then amended the size to 450 x 250 under settings/media. It seems to now reduce size for phone. Tablet is full ‘medium’ image size width which will do for now!

So, if you could please just answer my two remaining questions:

How can i remove the left and right padding on the display posts listings so that they are aligned left in line with Recent News title?

And, to confirm, the testimonials on the home page automatically change don’t they? I have been asked to set them to the same two but I don’t think this is possible is it?

Many thanks
Suzy

November 10, 2015 at 3:00 pm #163552
Kathryn P.
Happiness Engineer
How can i remove the left and right padding on the display posts listings so that they are aligned left in line with Recent News title?

This should do it:
```
ul.display-posts-listing {
  margin-left: 0;
}
```
And, to confirm, the testimonials on the home page automatically change don’t they? I have been asked to set them to the same two but I don’t think this is possible is it?

That’s correct, the testimonials are randomized on the front page.
November 13, 2015 at 2:58 pm #163556

Kathryn P.
Happiness Engineer

Hi there, I’m going to mark this thread as resolved since it’s been a while since we heard from you, but feel free to start a new one if you need further help. Thanks!
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Display posts CSS’ is closed to new replies.