Customize Web Part Title with CSS in SharePoint
Download the images and put them into Images library or change the path in the CSS below if you want to put the images in some other folder.
/* WebPart headers */
02 /* All tdS in the row */
03 .ms-WPHeader > TD{
04 background-image: url('/Style Library/BlogBranding/Images/WP-MidGreen.png');
05 background-repeat:repeat-x;
06 padding-left:1px; padding-right:1px; height:33px;
07 border-bottom-style:none!important;border-bottom-color:inherit!important; border-bottom-width:0px!important;
08 }
09 /* Left cell */
10 .ms-WPHeader td:first-child {
11 width:5px;
12 background-image:url('/Style Library/BlogBranding/Images/WP-LeftGreen.png')!important;
13 background-repeat:no-repeat;
14 }
15 /* Right cell */
16 .ms-wpTdSpace {
17 width:7px;
18 background-image:url('/Style Library/BlogBranding/Images/WP-RightGreen.png')!important;
19 background-repeat:no-repeat;
20 background-color:transparent;
21 }
22 /* Arrow */
23 .ms-WPHeaderTdMenu{
24 background-color:transparent;
25 border:0px!important;
26 }
27 /* Web part title */
28 .ms-WPTitle {
29 padding-left:10px;
30 font-family:Arial, Helvetica, sans-serif;
31 color:#fff;
32 font-weight:bold;
33 margin-bottom:1px;
34 font-size:14px;
35 }
36 /* linked title and visited */
37 .ms-WPTitle a, .ms-WPTitle a:visited {
38 color:#fff;
39 text-decoration:none;
40 }
41 /* hover title */
42 .ms-WPTitle a:hover {
43 color:#333;
44 text-decoration:none;
45 }
46 /* hover web part menu */
47 .ms-WPHeaderTdMenu:hover{
48 border-left:1px solid transparent;
49 background-image: url('/Style Library/BlogBranding/Images/WP-MidGreen.png');
50 }
0 comments:
Post a Comment