SharePoint 网站中定义的页面背景图片不起作用
If you are working on custom SharePoint 2013 master pages, designs and/or CSS, these little CSS classes and style statements may give you some grief, or save your tooshie… This list will continue to be updated as I come across more!
Here is a quick table of contents for easier browsing:
Style statements that suck
Classes that save the day
Style statements that suck
Site background – Class: ms-backgroundImage
First we will check out this style statement, found in corev15.css:
.ms-backgroundImage {
/* [ReplaceBGImage] */ background-image:url();
}
If you have a composed look (theme) applied or background image applied via the composed look (AKA “Change the Look”) it will be plugged in here. Otherwise the background image parameter is still passed through but with a blank value (so it looks just the same as the statement above). When you are applying a background image to a site via CSS, most people would do this:
body {
background: url(insert image file here);
}
But this won’t work in SharePoint because of the ms-backgroundImage class automatically applied to the BODY tag. That is right… I said automatically applied. It doesn’t matter what your HTML or Master Page has, this class will still be added to your BODY tag when the page renders. And because the SharePoint class (ms-backgroundImage) has a higher specificity than using BODY only (specificity score is 10 vs. 1) the blank value for background-image will override what you set in your CSS. No worries, it can be fixed by simply doing this:
body.ms-backgroundImage {
background: url(insert image file here);
}
By adding BODY to the style statement you increase the specificity score to 11 and now your custom CSS will take precedence over the OOTB style statement. If you are scratching your chin over the 10 vs. 1 specificity, check out our post SharePoint CSS and CSS Specificity.
Site background overlay – Class: ms-core-overlay
Take a look over in corev15.css and you will find this:
.ms-core-overlay {
/* [ReplaceColor(themeColor:"BackgroundOverlay")] */ background-color:rgba( 255,255,255,0.85 );
}
This applies an 85% opacity white background to the main content area wrapper in your SharePoint site. Or if a composed look (theme) has been applied, then the background color specified in the color scheme file is applied. No big deal if you are keeping the white background, but as soon as you implement a background color or image on (most typically) the BODY tag in your CSS, everything picks up a nice milky white sheen. Nix this in one of two ways:
- Delete the CSS class from the s4-workspace tag in the master page. Change this:
<div id="s4-workspace" class="ms-core-overlay">
To this:
<div id="s4-workspace">
This will disable the ability to override the background color using a composed look (theme).
- Add this to your custom CSS file:
.ms-core-overlay {
background-color: transparent;
}
Style statement for headers
I have to admit I find the inclusion of this next one a bit baffling. But at least it is easy enough to fix. In corev15.css there is this style statement:
h1,h2,h3,h4,h5,h6,.ms-h1,.ms-h2,.ms-h3,.ms-h4,.ms-h5,.ms-h6 {
margin:auto;
font-weight:normal;
}
When you then use a header tag like <H1> in your code, it will automatically be centered within its container. This is because of the margin: auto, which is telling the browser to auto calculate all four margins around the header element which results in equal widths and heights for the four sides, thus centering the content.
This style statement is also removing the default bolding for the headers (font-weight: normal).
You can fix this by resetting the margin for the entire style statement or selectively as your needs arise. And if needed you can reset the bolding as well.
#s4-bodyContainer h1 {
margin: 0;
font-weight: bold;
}
It isn’t necessary to include #s4-bodyContainer but this is an example of using a descendent selector to pinpoint which H1s you want to modify.
Site Logo – Class: ms-siteicon-a & ms-siteicon-img
One of the things you or your users can modify in your site is the site title, logo and description. Setting the site logo file is a simple thing and can be useful if you have different clients, departments, divisions, etc. and you want some site to site customization. If you are sticking with the OOTB layout you will be fine, but if you are using the site logo control in your custom layout, you will more than likely need to modify some styles.
The following two style statements are in corev15.css:
.ms-siteicon-a {
display:inline-block;
max-width:180px;
max-height:64px;
}
.ms-siteicon-img {
display:block;
max-width:180px;
max-height:64px;
}
These statements restrict the height and width of the logo image, no matter the actual dimensions of the logo file that you upload to the site. The first one (ms-siteicon-a) is applied to the wrapping hyperlink and the second (ms-siteicon-img) to the image tag. Having both is actually redundant. So you need add a new statement that allows any dimensions:
.ms-siteicon-img,
.ms-siteicon-a {
max-height: 100%;
max-width: 100%;
}
As an extension of this, you don’t have to use 100% for the values. If you want to restrict the allowed size you can set it to be whatever values you like.
Classes that save the day
Fixed width design – Class: s4-nosetwidth
This class look familiar? It is a carry-over from SharePoint 2010. If you want to use a fixed width design (for example restrict the width of your site to 960px), you have to add this CSS class to the s4-workspace container.
<div id="s4-workspace" class="s4-nosetwidth">
Remove from dialog box – Class: ms-dialog
Yet another carry-over from SharePoint 2010 is the class assigned to a parent element wrapped around the contents of the modal window / dialog box that pops up for various actions in SharePoint. Based on what you see in the master page, you could add “s4-notdlg” or “ms-dialogHidden” as a class to every element you don’t want to show in the modal window (for example your custom header or nav). However this is a pretty tedious way to hide things. Instead you can use the ms-dialog as the parent in a descendant selector in a CSS style statement and set the display to none. Our post, An easier way to hide page elements from the SharePoint dialog box, goes into detail about how to do this and still applies for SharePoint 2013.
.ms-dialog .myelement {
display: none;
}
More to come as they are discovered!
PS:
refer to: http://blog.sharepointexperience.com/2013/05/sharepoint-2013-css-classes-that-suck-and-save-the-day/
SharePoint 网站中定义的页面背景图片不起作用的更多相关文章
- netbeans中给jpanl添加背景图片制定代码的理解——匿名内部类继承父类
此测试是为了仿照在netbeans中给jpanl添加背景图片的制定代码的执行过程 在JpDemo中定义了个Car类的数据类型,但在给其赋值对象时使用了匿名内部类,继承了Car类,是其子类,并重写了父类 ...
- 将w3cplus网站中的文章页面提取并导出为pdf文档
最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...
- 在Vue项目中,添加的背景图片在服务器上不显示,如何处理
遇到的问题: 在vue项目开发过程中,我们常常会在页面中添加背景图片.可是当我们在样式中添加了背景图片,编译打包部署到服务器上时,发现图片并不能显示出来,这是为什么呢~~~ 我们一般写的css样式如下 ...
- 如何生成报告来枚举出整个sharepoint环境中的每个页面所使用的所有webpart
背景 我的公司的SharePoint环境中购买了大量的第三方webpart,比如Quick Apps, Telerik RadEditor, Nintex Workflow等等..这样做的好处就是成本 ...
- iOS 中 为UIView添加背景图片
创建UIImage的方法有两种: UIImage *image = [UIImageimageNamed:@"image.jpg"];//这种不释放内存,要缓存 NSString ...
- spring MVC中定义异常页面
如果我们在使用Spring MVC的过程中,想自定义异常页面的话,我们可以使用DispatcherServlet来指定异常页面,具体的做法很简单: 下面看我曾经的一个项目的spring配置文件: 1 ...
- VC++MFC对话框程序中给对话添加背景图片
VC对话框怎么显示背景图片呢.在MFC中实现背景图片,不像C#应用程序那么简单.今天就和朋友们说说如何在VC界面中设置背景图片 ^_^ 工具/原料 Visual C++ 2010 方法一:用Pic ...
- C#中给RICHTEXTBOX加上背景图片
在系统自带的RichTextBox中是无法给它设置背景图片,但是我们在某些场合可能需要给RichTextBox设置背景图片.那么怎么实现这一想法呢?经过研究发现通过其它巧妙的途径可以给RichText ...
- IE9以下通过css让html页面背景图片铺满整个屏幕
第一种方法不设为背景图片,通过css来控制样式,可兼容到IE6,代码如下: <!DOCTYPE html> <html lang="en"> <hea ...
随机推荐
- HTML5学习笔记(三):标识文本的语义元素
1.<time>元素:标注日期和时间 日期格式:YYYY-MM-DD,如2016-04-13: 时间格式(24小时制):HH-MM,如15:31: 最后,组合以上规则就可以制定具体的日期和 ...
- spring《四》自动装配
byName模式<bean autowire="byName"> Spring会查找一个叫做date的bean定义. byType模式<bean autowire ...
- Android Studio 一些注意事项(自用,不定期更新)
1,Android Studio 版本的选择 写这篇的时候,官方版本已经到了 v3.2.0,而我习惯使用的版本是 v2.3.1,因为这个版本有自带sdk的安装版,比较方便, 同时,v2.3.1 新建项 ...
- WINDOWS系统注册表(读、写)
读取注册表 写入注册表
- iOS11即将到来,让我们具体了解下
谷歌开发者大会后,苹果的WWDC终于也要来了,目前准确时间已经确定. 近日,苹果官方发出的公告显示,WWDC 2017将在北京时间6月6日凌晨1点正式进行,同时他们强调会进行现场直播,用户可以在苹果主 ...
- Sql Server远程还原
1.假设备份文件xxxx.bak大小约300G,还原后所占用的空间为900G 2.磁盘空间只有1T,若将备份文件拷贝过来,空间剩余700G,无法成功还原,因此通过远程方式还原. 例子如下: SQLSE ...
- testng+selnium+eclipse的测试框架运用
一:TestNG在Eclipse中的安装(1)点击eclipse中的Help->Install New Software (2)点击[Add]按钮,输入相应的地址(3)勾选加载出来的TestNG ...
- 路飞学城Python-Day24(practise)
本章总结 练习题 什么是C/S架构? C指的是client(客户端软件),S指的是Server(服务端软件)
- node——文件夹创建
//创建文件夹 var fs=require('fs'); //1.异步 fs.mkdir("./第一个目录",function(err){ if (err) { return c ...
- [luogu2059 JLOI2013] 卡牌游戏 (概率dp)
题目描述 N个人坐成一圈玩游戏.一开始我们把所有玩家按顺时针从1到N编号.首先第一回合是玩家1作为庄家.每个回合庄家都会随机(即按相等的概率)从卡牌堆里选择一张卡片,假设卡片上的数字为X,则庄家首先把 ...