widget的背景和标题行样式怎么改

metatron

如题，做了几个widget展示在PC3的门户上，因为pc3默认是有点浅灰色的底，而widget默认确是白色的底，而且标题框和内容框同色，如果我想把标题框修改背景色以及把内容框调整为透明背景，甚至加上阴影做出悬浮效果，怎么做？

jishuang

http://docs.wex5.com/bex5-ui-question-list-10104/

metatron

请检查这个链接文档里的链接，那个关于如何在css写入的那个链接失效了

metatron

从页面源代码里找到的链接连到的是这个地址http://doc.wex5.com/?p=4827#2.3

jishuang

链接已经调整

metatron

那个关于样式的文档我看完了，还是没说关于widget的样式修改文件是哪个，我在UI2/system/components/justep/widgets/css里看到了文章里说到的几种主题的样式，是在这里改么？那个main.w里的样式就下面这些
.portal-main [xid='configDialog'] .x-dialog {
        opacity: 0.8;
}

.portal-main .debug-mode{
                background: red;
                color: #FFF;
                padding: 6px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                font-weight: 700;
                font-size: 14px;       
}

没提到这些插件的样式，而且我感觉我只要改main里面的那些column的style属性就行，可我在这里设置background-cc为透明的话，一点用都不起

metatron

<div class="debug-mode hide">警告：当前运行在调试模式下， 调试模式下系统运行速度会慢！</div>   
  <div component="$UI/system/components/justep/widgets/widgets" class="x-widgets row"
    xid="widgets" style="background-color:transparent;">
    <div class="x-column col-xs-12" xid="column1" style="background-color:transparent;"/>  

这是main里的相关代码，您看看这个设置没有用

jishuang

（1）、覆盖系统样式
优点：系统功能和自己开发的功能风格一致
缺点：容易导致系统功能界面出现问题，样式修改后，需要兼顾系统功能的界面。
做法：定义公共CSS文件，在门户首页中引用这个CSS文件。例如在/UI2/portal/pc/index.w中引用。

（2）、不覆盖系统样式
优点：修改样式不会影响系统功能，不用兼顾系统功能的界面
缺点：系统功能和自己开发的功能风格不一致
做法：使用命名空间的方式，避免样式覆盖，在修改系统样式时，在系统class前面增加一个命名空间class，例如：.btn是系统样式，增加一个命名空间oa，oa是我们做OA系统时取的名字，可以使用你们的项目名，或者其它名称。重定义时定义为

1
2
3
4
.oa.btn.x-green{
    background-color: #00aa00;
    background-image: none;
}
同时，在需要此样式的w文件的window组件的class属性中加上oa，这个样式就会在这个w文件上生效，不会影响其它使用.btn.x-green样式的w文件。

metatron

如果不同过css，只是通过平台自带的系统样式和风格，为啥就不起作用呢<div class="x-column col-xs-12" xid="column1" style="background-color:transparent;"/>

jishuang

确认运行的是修改的文件吗？
F12打开浏览器的开发调试工具定位看看dom节点上有样式的设置吗