Resize Mini Blog Thumbnail

[nadiacosta]

Hi guys,

I am sorry if this is a silly question but I am not css savvy so here we go.
I am using the mini blog right sidebar and I want to resize my thumbnails from 370×246 to something like 284×171 or so.

Any ideas please? Thanks in advance.

[Kyle – SUPPORT]

Hi Nadia

Just add this to your custom css:

.mini-items .blog-item figure {
width: 290px;
}

You can change the width to what you like.

Let me know if this works!

– Kyle

[nadiacosta]

Hi Kyle, it worked like a charm. Thanks!

I have two more questions:

1) I want to change the hover effect in this same thumbnail, from that blue effect to “grayscale (image) -> color (when hover)”. How can I do that?

2) Re: fonts
I use Typekit instead of Google, Font Awesome and the ones the theme supports by default. How can I change it to use my typekit css code? I want to change the fonts from News headlines, menu and sidebar.

Thanks again. I am in love with Dante 😀

[Kyle – SUPPORT]

Hi

Glad that worked.

1) Try this css:

.blog-item figure  {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all 0.6s ease; /* Fade to color for Chrome and Safari */
}

.blog-item figure:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

figure.animated-overlay.overlay-alt:hover figcaption {
  display: none;
}

2) You can try this http://help.typekit.com/customer/portal/articles/6840-using-typekit-with-wordpress-com

– Kyle