Docs

[Smarticle]

Hey,

I wanna tweak the design of the Recent Posts element on this page to look and function like the cards on this site.

As you can see, when a user hovers over a card [blog summary box] on that site, the card appears to raise up due to its spreading drop shadow effect, so…

There are three default things I need to change:

1. The image needs to lose its border and instead go right to the edge (top, left and right) of the card.

2. The corners of the card need to take on a radius.

3. The light grey border and the dark grey border (upon hover) need to be removed and replaced with drop shadows. Obviously I need to be able to control the density of the drop shadows in order to create the appearance of raising up when hovered.

Cheers. Look forward to hearing from you.

[Rupok]

Hi there,

Thanks for writing in! This kind of customization is out of our support scope but I’d like to point you there so you can carry on. You can add this under Custom > CSS in the Customizer.

.x-recent-posts a {
  border-radius: 4px;
  padding: 0;
}

.x-recent-posts a:hover {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 20px 0 rgba(168, 182, 191, 0.6);
}

Hopefully it should do the job. Now let’s change the values and add your own styling if needed.

Cheers!

[Smarticle]

Hey Rupok,

Well, even though it’s outside of the scope, I have to say that I really appreciate you pointing me in the right direction. I’m so happy with the result. I know they’re just boxes with images and text in, but I gotta say, they’re actually kinda beautiful now! lol. Almost perfect. I just gotta work out how to budge the text across a bit and as far as I’m concerned, they will be!

P.S. I do realise my relationship with Material Design is becoming a bit weird, so I’m not completely bonkers.

[Jade]

Glad to hear it looks better now.

Cheers! 🙂

[Smarticle]

Bit cheeky, I know, but this has got me thinking…

Would I be able to apply the same styling to the blog index cards (in masonry mode)?

My Recent Posts now look like this, so it’d be great if I can make my index cards (blog) look the same/similar.

[Rupok]

Hi there,

Let’s add this as well :

.blog .x-iso-container .entry-cover:hover {
  box-shadow: 0 10px 20px 0 rgba(168, 182, 191, 0.6);
}

Cheers!

[Author]

Posts