0

I would like to change the colors of the text that is exist in the Web Part.

I use F12 but every value has different classes, is there any class that is general for all content that is displayed in WP?

enter image description here

1

CSS is the way to go if you want to "style" your webparts pretty quickly. You should definitely use a custom CSS file rather than editing the core.css file directly. Create a CSS file with all your desired modifications and upload it to SharePoint (the Style Library for example). At this point, you have a few different options for calling it:

  • If you want your CSS changes to apply across your entire Site
    Collection, you can create a custom master page and reference your
    CSS file in the tag

  • If you want your CSS to only apply to one specific page/webpart, then you can reference your CSS on the page itself through either a Content Editor webpart or by adding it in Code View in SharePoint designer on the page

For help with determining the CSS to target to style the various portions of a webpart, refer to these articles:

SharePoint 2010 CSS Chart - Heather Solomon

Controlling Single Web Parts with CSS - Heather Solomon

Web Part Style in SharePoint 2010 - Kyle Schaeffer

http://www.codeproject.com/Tips/493775/Apply-CSS-styles-to-SharePoint-Web-parts

1

In SharePoint, there are many CSS classes that you can use to customize, not only a specific area of a page, but all homogeneous areas in general, regardless of what page or site template you are using.

You just have to know what they are and what type of content they relate to.

e.g.

webpart wrappers

.ms-webpart-zone

.s4-wpcell-plain

list wrappers

.ms-listviewtable

list items

.ms-vb (or a.ms-vb)

header of webparts

.ms-viewheadertr

contents of webparts ("reverse psychology")

.ms-listviewtable tr *{color:red;}

(set color for all webpart elements)

.ms-listviewtable tr.ms-viewheadertr * {color:black}

(revert elements in header)

If you want to customize everything at once, you can do something like below, which will save you time, but use it wisely, as you need to check other areas of the site, if you use a site scoped css file.

.ms-listviewtable * {color:black;}

.ms-listviewtable a {color:blue;}

.ms-listviewtable a:hover {color:red;}

0

The class 'ms-cellstyle' should be common for all td(s). For anchor elements like lookup columns and user field, you would need to style anchor within the td. The following CSS would give you the result you're looking for.

table.ms-listviewtable td.ms-cellstyle, table.ms-listviewtable td.ms-cellstyle a {
    color: Red;
}

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.