DotNetNuke(DNN)皮肤制作--如何修改DNN中众多的CSS文件

简介: DotNetNuke使用了好几个CSS文件,在什么时候,如何针对不同的需求修改CSS文件让人觉得很难把握,其实只要搞明白了DNN加载各个CSS文件的顺序,再遵循CSS文件生效的优先级就能准确的把握什么时候要修改哪个CSS文件。
DotNetNuke使用了好几个CSS文件,在什么时候,如何针对不同的需求修改CSS文件让人觉得很难把握,其实只要搞明白了DNN加载各个CSS文件的顺序,再遵循CSS文件生效的优先级就能准确的把握什么时候要修改哪个CSS文件。

首先我们来看看DNN加载CSS文件的顺序:在任何一个页面中查看HMTL源文件,在<head>部份可以看到这样的代码。很明显:首先是default.css,然后是skin.css,然后是portal.css(这里没有讨论Container的CSS,原理是一样的)

< style  id ="StylePlaceholder" ></ style >
<
link  id ="_Portals__default_"  rel ="stylesheet"  type ="text/css"  href ="/Portals/_default/default.css"   />
<
link  id ="_Portals__default__skins_dnn_blue_"  rel ="stylesheet"  type ="text/css"  href ="/Portals/_default//skins/dnn-blue/skin.css"   />
<
link  id ="_Portals__default_Containers_Puresino_"  rel ="stylesheet"  type ="text/css"  href ="/Portals/_default/Containers/Puresino/container.css"   />
<
link  id ="_Portals__default_Containers_Puresino_Plain_css"  rel ="stylesheet"  type ="text/css"  href ="/Portals/_default/Containers/Puresino/Plain.css"   />
<
link  id ="_Portals_0_"  rel ="stylesheet"  type ="text/css"  href ="/Portals/0/portal.css"   />

之后,我们对照一下这几个CSS在DNN目录中的位置(绿色块表示目录),这样一来我们就能明白这几个CSS是怎么工作的。
对于任何一个页面,DNN首先加载对全局起作用的“default.css”,之后,根据你选择的皮肤,加载皮肤所带的"skin.css",最后,根据你打开的“站点”加载“站点”目录下的"portal.css"。后一个CSS中的定义都会覆盖前一个CSS中的定义。

其实每一个皮肤的ascx文件还可以附加一个同名的CSS文件,如果DNN检查到有这样的文件,也会加载。因为我用dnn-blue皮肤做的示范,所以没有这一个CSS。大家可以找个其它皮肤试试,看看DNN把这个CSS文件放在第几位加载。^_^





相关文章
|
2月前
|
前端开发
在Webpack配置文件中,如何配置loader以处理其他类型的文件,如CSS或图片
在Webpack配置文件中,通过设置`module.rules`来配置loader处理不同类型的文件。例如,使用`css-loader`和`style-loader`处理CSS文件,使用`file-loader`或`url-loader`处理图片等资源文件。配置示例:在`rules`数组中添加对应规则,指定`test`匹配文件类型,`use`指定使用的loader。
|
8月前
|
自然语言处理 前端开发 API
解析CSS文件
【5月更文挑战第23天】解析CSS文件。在Python中,可以使用一些第三方库来帮助解析CSS文件,例如`cssutils`。
85 2
|
5月前
|
前端开发 JavaScript
开发过程找不到css源文件?试试配置vite的css源文件映射
【8月更文挑战第3天】开发过程找不到css源文件?试试配置vite的css源文件映射
99 0
|
5月前
|
前端开发 JavaScript Linux
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
【Azure 应用服务】在Azure App Service for Linux环境中,部署的Django应用,出现加载css、js等静态资源文件失败
|
6月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
7月前
|
前端开发 文件存储 Python
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
【已解决】Flask当中render_template函数使用过程当中css文件无法正常渲染
|
7月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
8月前
|
负载均衡 前端开发 应用服务中间件
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
Nginx+Tomcat负载均衡配置_nginx做tomcat的负载均衡成功,但tomcat的css文件400
|
7月前
|
XML 数据采集 前端开发
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
Python第二章(HTMl文件,CSS语言与第三方库Beautiful Soup)
|
7月前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
48 0

热门文章

最新文章