Modify the image in item-thumbnail-left?


#1

Hi,

How can I modify the image in item-thumbnail-left? Ratio, Size etc?

Where is the CSS to modify it?


#2

Hi,

sorry but I don’t see the point of this question.

This is a rather simple procedure. For example, if you want to change a list thumbnail image just find some working example in your desktop browser, open browser developer tools, inspect this thumbnail element and add/remove CSS rules.

When you’re satisfied with your work, just create a new class and add all of your changes. If you were looking to do this via some kind of configuration you should know it’s not possible. You will need to do this manually.

For example:

<div class="list">

    <a class="item item-thumbnail-left custom-thumbnail" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

</div>

and:

.ionic .custom-thumbnail > img:first-child, .ionic .custom-thumbnail .item-image, .ionic .custom-thumbnail .item-content > img:first-child, .ionic .custom-thumbnail .item-content .item-image {
    top: 0px !important;
    left: 0px !important;
    max-width: 100px !important;
    max-height: 100px !important;
}

Will remove empty space outline between the thumbnail and rest of the list.


#3

Thank you for your reply, @Gajotres. When I read your reply I remembered how to solve it. :slight_smile: