This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(108.80000000000001, 70%, 20%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EYZ%3C/text%3E%3C/svg%3E)
I work on sharepoint 2010 and would like to change the design of the default look of content web parts on the page using css page. I am new with css.
My goal is: rounded boarder with light blue color, no fill color (or fill color white), and I would like to change the hyper link color to dark page. Also I would like to hide the title.
I made css file, and the first part work - the borders are rounded and light blue, but the fill color is not white, the link is in the wrong color and most important the title is shown. I know I have syntax errors: maybe the wp names are wrong or the commands inside {}. Can someone help?
Here is my code:
.ms-WPBorder
{
border-style: solid;
border-color:#c5e0f1;
border-width:1px;
border-radius: 10px;
}
.ms-WPTitle
{
display: none;
}
.ms-WPBackground
{
color: #ffffff;
}
.ms-WPContent
{
link-color: #00224B;
}
Thank you and best regards,
Yael
Hi yaelzur-7417,
Please take a reference of below css :
And here is a good blog that shares how to apply CSS styles to SharePoint Web parts:
Best Regards,
Baker Kong
Hi Baker,
Thank you for your answer, unfortunately it didn't work.
I need to clarify that I would like to make general css for my page and not styling one WP, if I understood correctly in your code WPTiltle is general and #WebPartWPQ3 refer to specific WP.
Also - I upload the css file to site assets and used it on main page settings, therefore I didn't use html <> in the code (maybe that wrong).
In my code - the first part that referring to WPBorder - works.
Since you wrote the WPTitle section like I did, I thought maybe only my first section will work - So I tried switching them - and wrote the WPTitle section - first.
It didn't help.
You didn't wrote general WP for background and for links, so I believe there is still a syntax error in my code, but I don't know how to fix it or why the WPTitle does not effect my page.
If you (or someone else) know what I did wrong - please tell me.
Thank for your effort.
Best Regards,
Yael
Hi yaelzur-7417,
Both 'WPBorder' and 'WPTitle' works well here. May i know how do you apply the css? Here i edit the page and insert a Content editor webpart then put the css code.
You could inject the title element to see if it has such style class. And your css might be overrided by other styles. So you may have a try "!important;"
Thanks
Baker Kong
And we can use below syntax to apply CSS to every web part:
[id^="WebPartWPQ"] {
background: yellow;
}
To target the content, we can try:
.ms-WPBorder {
border-style: solid;
border-color: #c5e0f1;
border-width: 8px;
border-radius: 10px;
}
.ms-WPTitle {
display: none;
}
[id^="WebPartWPQ"] {
background: yellow;
}
.ms-wpContentDivSpace a:link {
color: #00224B;
}
.ms-WPBody a:link {
color: #00224B;
}
Thanks
Baker Kong
Hi,
To apply the css files I make the css file with Notepad (each try with a different file name), then an sharepoint I upload the file to site assets > CSS folder.
After that I go to Site Settings > Look and feel > master page and than at Alternative CSS address I choose my CSS that I upload and check the box for all sub-sites to apply the CSS (I'm not sure what the field name in English, since I work with Hebrew interface).
I did try to change my file a bit according to your code, still have the same problem and only my ms-WPBorder commands influence the Web Parts in my site.
Here is my current css:
.ms-WPBorder {
border-style:solid;
border-color:#c5e0f1;
border-width:1px;
border-radius: 10px;
}
.ms-WPTitle {
display: none;
}
.ms-WPcontentDivSpace a:link {
color: #00224B;
}
.ms-WPBody a:link {
color: #00224B;
}
[id^"WebPartWPQ"] {
background: #ffffff;
}
Thank you very much,
Yael
Hi,
To apply my css file, I create it with notepad (each version in a different file name), then I upload the file to site assets > css folder.
Next I go to site settings > Look and Feel > master page > alternate css configuration, choose the css file and check the sub-website checkbox (work on Hebrew interface so no sure about the English fields name).
I did some changes in my syntax according to your code – which didn't help, and still only the WPBorder section influence my site.
Here is my current css file:
.ms-WPBorder {
border-style:solid;
border-color:#c5e0f1;
border-width:1px;
border-radius: 10px;
}
.ms-WPTitle {
display: none;
}
.ms-WPcontentDivSpace a:link {
color: #00224B;
}
.ms-WPBody a:link {
color: #00224B;
}
[id^"WebPartWPQ"] {
background: #ffffff;
}
Thank you very much for your help,
Yael
Hi yaelzur-7417,
The id CSS should be [id^="WebPartWPQ"] {} . And it still takes effect here when i specify the CSS file in Alternate CSS URL. Please make sure the CSS file is published and fully refresh the site page to see if it gets worked. If not, could you please inject the elements using F12 tool to check their style classes? The header div may not have '.ms-WPTitle'.
Thanks
Baker Kong
Thank you very much for your effort, got some helped and found the solution.
I had to choose "border only" style and then the code should be:
.ms-WPBorderBorderOnly {
border-style:solid;
border-color:#c5e0f1;
border-width:1px;
border-radius: 10px;
}
.ms-WPBorderBorderOnly a:link {
color: #002BB4 !important;
}
.ms-WPBorderBorderOnly a:visited {
color: #002BB4 !important;
}
.ms-WPBorderBorderOnly a:hover {
color: #002BB4 !important;
}
.ms-WPBorderBorderOnly a:active {
color: #002BB4 !important;
}
Best Regards,
Yael