Sharepoint Forum

Ask Question   UnAnswered
Home » Forum » Sharepoint       RSS Feeds

Customize NEWS Web Part in Home Page?

  Asked By: Arnold    Date: Aug 28    Category: Sharepoint    Views: 3450

I need to customize the layout of NEWS web part in the portal home page.. i need to put Curved Corner with border styles.. by changing CSS wont be suffcient to fulfill my request.. so, i need to add additional Html Tags inside NEWS web part.. how do i do that in existing web parts?

or is there any other way to do this?? i am really looking for ur help,, plz tell me the solution if possible..



17 Answers Found

Answer #1    Answered By: Agustin Miranda     Answered On: Aug 28

The only thing you can customize  in a ‘Web part’ is the colors, text size, etc .. essentially, only what you can do through CSS (or at least I have not found a way around this issue). The Web part  is precompiled, therefore we have no access to the actual code to add, delete, or change any of the code/tags.

Answer #2    Answered By: Arron Middleton     Answered On: Aug 28

You should be able to do this. The rounded corners can be done with a background image in CSS, and you can also control border  width, color, style, etc.

Can you identify which CSS file and attributes control this web  part? If so, please let me know where it is at.

Answer #3    Answered By: Vance Hardin     Answered On: Aug 28

Here’s my understanding of it (and I may be overlooking something here);

First, The sharepointcustomization site has, with the exception of the home  page, all .htm pages, created with FrontPage I’ll assume, as that is the main focus of the site. The links into the site examples are straight from MS. If you use FrontPage to make the page  look the way you want it to look, you ‘unghost’ the page, which in my opinion makes this option less than desirable.

Second, if you want to change colors, font sizes, those type things, you may do this through CSS, the OWS.CSS to be exact, in the

Program Files\Common Files\Microsoft Shared\web server extensions\60\TEMPLATE\LAYOUTS\1033\STYLES directory. The classes that control the web  parts are the classes starting with “.User”. A complete listing of the classes used can be found here msdn.microsoft.com/.../...zingSharePointSites3.asp

Third, and perhaps the most significant, is that you cannot affect only 1 Web part  … whatever you do to change one affects all Web Parts. Also, as I found out during the branding of our portal, some classes (and I don’t think this applies to the .user classes, but only because I didn’t experience it happening) are used in multiple parts  of the page, or multiple pages, so doing a little research on the class first is prudent, unless you have a test environment to play with each change first. The blessing and the curse of CSS!

Hopefully, this makes more sense to you than it does to me after writing it

Answer #4    Answered By: Kareem Flynn     Answered On: Aug 28

u can take exampls NEWS section in the Default Sharepoint Home page.. I wanted it with Curve Corner Table.. i dont think it is possible using CSS only.. because, the NEWS web  part is precompiled and u can't modify anything there.. juz have a look of sample image


here, we have NEWS web part, EVENT web part  , LINKS 4 U web part.. all these web part i need to display it in CURVED Corner with full border.. is it possible by using CSS??

Answer #5    Answered By: Tyron Calderon     Answered On: Aug 28

In response to your question to Steve;

These two classes affect the header and body of the Web Part:

border: none;

background-color: #d3d3d3;

As you can see, there is no border  specified so adding a border to the Web Parts is not a problem. By adding an image to the TPHeader class, you make get the desired affect, using a few properties like

background-image: url("/_layouts/images/[NAME OF IMAGE HERE].gif");

background-repeat: repeat-x;

in the header class. The only problem with that is that it would have to repeat background image to compensate for differing widths on the page, and the curves may give you a problem there as they would not overlap, just repeat, giving you an inconsistent display. You may be able to overcome this playing with negative relative positioning – not sure if this would work or not, a lot depends on which browsers you are concerned about supporting.

If you get this figured out, please post as this would prove useful for a lot of people hoping to get rid of the “box” look!

Answer #6    Answered By: Irvin Foley     Answered On: Aug 28

This is probably exactly what you are looking for:


Answer #7    Answered By: Deonte Stein     Answered On: Aug 28

FrontPage doesn't unghost anything, SharePoint does.

Any editor, including Notepad, can be used to unghost a SharePoint page.
What matters is where the page  is edited from.

Editing a direct-mode ASPX page from the 60-hive on the c: drive of a
Web server will alter the display of all ghosted instance pages. This
will not unghost any page.

Editing an instance page by opening it from its http location (like
http://teamsite/default.aspx in any WebDav compliant editor will unghost
just that instance of the page. You don't even have to make any changes
to it, just saving it from that editor will unghost the page.

Note: When you open any page in FrontPage from the browser, you are
editing the instance page in an http location.

Answer #8    Answered By: Stephon Valentine     Answered On: Aug 28

Customize all wss sites using OWS.CSS

On this same topic, what if I want to change the colors, font sizes,
and those type of things in WSS only?
Roy points the following below:
"..you may do this through CSS, the OWS.CSS to be exact, in the
Program Files\Common Files\Microsoft Shared\web server extensions\60

What we are doing now is creating a copy of the original ows.css
file, renaming it, and using a custom ows.css file. Is this the
supported way of achieving this?
We are only interested in modying the look and feel of all WSS sites.

Answer #9    Answered By: Leif Cardenas     Answered On: Aug 28

Yes, you are correct! The /sps.css is for SPS and OWS.css is for WSS. A word of caution though; after each change, make sure you do a lot of cruising around different type sites. Most of the classes are unique to SPS or WSS but not all of them, especially when it comes to the header classes.

Answer #10    Answered By: Jasper Hatfield     Answered On: Aug 28

Using the Content Editor Web Part (CEWP) you can make instance changes
to the style of individual Web Parts on precise pages even if you are
using built-in Web Parts.

Answer #11    Answered By: Rashawn Hopper     Answered On: Aug 28

It's preferable (at least IMHO) to use themes rather than editing OWS.CSS (or
SPS.CSS for that matter) directly. If you do, then copying it is the way to do
it but you'll have to go through a fairly lenghty effort using diffs, etc. if
that file does get updated by Microsoft (after all, it is their file and many
parts of SharePoint rely on those styles  to be there). If possible use themes.

Answer #12    Answered By: Horace Coffey     Answered On: Aug 28

Come again? Applying themes to sites does not unghost all the pages. There's a
Theme Web Control in all base pages that will add  the appropriate theme
information (the theme style sheet) if a theme is applied. Unless we're talking
about different terms here.

Answer #13    Answered By: Rigoberto Beard     Answered On: Aug 28

I think we’re talking about the same thing… if you change the theme of a site from the web  interface it unghosts the page. I didn’t believe it myself until I tried it.

Answer #14    Answered By: Alphonso Mckay     Answered On: Aug 28

Well, I’ll weigh in here too on which is appropriate, themes or customizing OWS.css.

The answer is; it depends J For my organization, we wanted to ‘brand’ our installation of SharePoint, in effect, forcing a uniform look and feel across all sites, yet allow a user to use one of the themes, if they so desired but by default (which satisfies most users) they get the default look so modifying the OWS.css made the most sense. An example is here: http://public-sp.missouri.edu/default.aspx The overwrite issue is true as well so once you are satisfied with the look, it is prudent to make a backup of the files so you can rewrite what a patch might ‘fix’ for you. Also, I edited the template pages (and there is a lot of them) to remove certain features that I didn’t want on the pages, such as padding in certain cells, size restrictions on page  images, etc…. and these too must be backed up so they can be applied after a patch or hotfix.

If it is not a universal branding that you are going for, then modifying the themes would probably be the way to go.

Answer #15    Answered By: Daron Oneill     Answered On: Aug 28

Thanks everyone for the great information, this really helps me
understand the 2 options in order to make a decision! One last
question on themes. Since I am only concerened with modifying the
look and feel of all WSS sites, if using themes, I see several
articles on using FP to achieve this, for example:

Knowing this is not ideal, I found an article on this site on
creating a custom theme:
Are these steps accurate, or do you have another article that you
recommend I reference for using themes?

Answer #16    Answered By: M Juarez     Answered On: Aug 28

This article (same place as the applying themes article) describes how to create
your own theme which you'll need to do first. Then you can apply it using the
other article.


Answer #17    Answered By: Marty Mcdowell     Answered On: Aug 28

I wanted to weigh in with one final word of caution on modifying the OWS.css files. This pertains to anyone thinking about changing  the style sheet files in a production environment.

By default, the OWS.css and other css  files used by SharePoint are set in IIS to cache on the web  browser for 30 days. Of course, any user can clear their browser cache or get the latest version of the style sheet files by doing a refresh on any WSS page.

However, be forewarned that if you are making changes to the css files, your production users will not necessarily see the latest version of the style sheet.

And if, as part  of your branding effort, you are also integrating customized logos, your users might see the latest logo but not the latest style sheets, possibly resulting in a very funny looking display.

So just one more thing to be aware of when tinkering with the style sheets.

Didn't find what you were looking for? Find more on Customize NEWS Web Part in Home Page? Or get search suggestion and latest updates.