Giving a BackGround to a Announcement list webpart RRS feed

  • Question

  • HI All,

            I have inserted an Announcement list webpart in my home page. Now i need to give a background color or an image to it. Can anyone help me on hot accomplish this. Thank you.

    Monday, October 18, 2010 1:00 PM


All replies

  • Hello Vidon,

    I'm afraid there aren't any out-of-the-box configuration options to customize the background color or image for a list view web part.  If you have SharePoint Server 2010, you could look at using article pages for your announcements, and then using the Content Query Web Part, rollup the article pages to your homepage.  With article pages and the CQWP, you can have images and you can insert some custom XSLT to configure the look and feel.

    Chris Caravajal MCTS SharePoint911 Consulting & Support Services
    Monday, October 18, 2010 1:12 PM

  • You can add JavaScript to a Content Editor Web Part or even to a master page to change most aspects of a web part.

    Basic steps:

      Create a text file (.txt or .htm) with the JavaScript code and save it to a library (or even to the 14\template\layouts folder)
          (sample: /Shared Documents/WebPartColor.htm)

      Add a Content Editor Web Part to the page just below the Announcements web part

      Edit the web part and enter the path to the text file with the JavaScript


    Here's a sample of JavaScript that will change the background color or image. Basically the JavaScript finds all TD tags, looks for the one that has a title matching your web part, then drills "up" to find an element where we can set a background.

    <script type="text/javascript">
      var x = document.getElementsByTagName('TD');
      for (var i = 0; i < x.length; i++) 
        if (x[i].title == "Announcements - Use this list to track upcoming events, status updates or other team news.")
          // x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.bgColor = "red";
          x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.style.backgroundImage = "url(/_layouts/images/homepageSamplePhoto.jpg)"

    I will try to put together a blog post with a lot more detail on how to do this later today.


    Mike Smith TechTrainingNotes.blogspot.com
    Monday, October 18, 2010 4:29 PM
  • > I will try to put together a blog post with a lot more detail on how to do this later today.

    Here you go!


    I have added details on how to also set the colors, fonts, borders and backgrounds of web parts.


    Mike Smith TechTrainingNotes.blogspot.com
    • Marked as answer by vidon Thursday, October 21, 2010 9:57 PM
    Wednesday, October 20, 2010 3:40 AM
  • Are you able to use SharePoint Designer? If so, you could just use a stylesheet. Wrap it in a DIV via on Master Page, then style away.
    Wednesday, October 20, 2010 4:28 AM
  • Hi

    In COREV4.CSS located at following location:

    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable

    There will be a class in that CSS file, Class Will be .s4-wpActive .s4-wpTopTable, .s4-wpActive .ms-WPSelected

    in this class add the background color or an image, it will work.

    Muhammad Kamran Rafi
    SharePoint Developer
    Xelleration LLC
    Wednesday, October 20, 2010 5:33 AM

    > In COREV4.CSS located at following location:

    That would change the appearance of EVERY web part in EVERY site in the entire farm.  The request was to update a single web part. Also, editing CORE is not a good practice (issues with next service pack, upgrade to next version, etc). 



    Do not propose your own response as an answer. That is up to the person who posted the question.


    Mike Smith TechTrainingNotes.blogspot.com
    Wednesday, October 20, 2010 1:26 PM
  • Thanks a lots for ur answers guys and especially to mike. :)
    Thursday, October 21, 2010 9:45 PM