ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• January 21, 2014 at 9:47 pm #43942
  nadiacosta

  Member

  Post count: 1

  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.

  January 22, 2014 at 6:30 pm #44157
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

  January 22, 2014 at 7:03 pm #44168
  nadiacosta

  Member

  Post count: 1

  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 😀

  January 23, 2014 at 6:52 pm #44355
  Kyle – SUPPORT

  Moderator

  Post count: 35880

  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

• Back to forum

  Posted in: Dante