2

I'm trying to change the width and height of the icon in the list web part. However, I'm having difficulty finding the right element/class to do this with SP 2010. I have seen it done just by putting the style in a hidden Content Editor web part. However, I'm having difficulty finding the right element/class combination to make it work. Does anyone have any suggestions on how to do this?

1

The icons in a list view in a document library are not loaded with CSS. The list view is generated with XSLT, which will create an IMG tag for each icon and another IMG tag for any icon overlays, like the check-out arrow or the record padlock.

On the rendered page, the list view is presented in an html table. The cell with the image has the class ms-vb-icon, but this class only contains css for padding. The cell then contains images for icon and overlay.

For a checked out Word document, for example the html looks similar to this (full file name replaced with dummy text)

<td class="ms-vb-icon">
<IMG title="file name" border=0 alt="file name" src="/_layouts/images/icdocx.png">
<IMG class=ms-vb-icon-overlay title="file name" alt="file name" src="/_layouts/images/checkoutoverlay.gif">

The icon image size can be changed with CSS, but there are implications:

  • the image that is loaded from the SharePoint server has a fixed size and making it bigger will result in a blurry image
  • The overlay images that are generated dynamically will need to be adjusted to the different size of the underlying image

With that said, you can use the following CSS to manipulate the icon

<style type="text/css">

.ms-vb-icon > IMG, .ms-vb-icon > a > IMG {
    width: 40px; /* increase image width to 40 px */
}

.ms-vb-icon-overlay {
    width: 10px !important; /* overlay image width */
    left: -10px; /* reposition overlay image */
    bottom: -3px;
}

</style>

Screenshots.

Before applying the CSS:

enter image description here

After applying the CSS:

enter image description here

I would use this very sparingly, load only on the page via Content Editor Web Part and not in a master page.

2
  • Sorry, I guess I was not specific enough. I'm concerned about the image/icon that can be placed in front of the title for the list - actually an FAQ type list. Here is a screen shot. – Gman Jan 29 '14 at 16:35
  • @Gman where is a screenshot? I still don't know what image you mean. Please edit your question and post a link to the screenshot. – teylyn Jan 29 '14 at 19:42
0

For SharePoint 2010 you can can use this selector:

.ms-WPTitle img {}

For SharePoint 2013 you can use this one:

.ms-webpart-titleText img {}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.