Yii 为JUI设置自己的CSS样式

Yii 为JUI设置自己的CSS样式

Yii中的JUI真是强大的东西,但是很多时候,自带的样式和我们制作的网站并不协调。比如我制作了两个皮肤,一个蓝色,一个红色,而自带的JUI确实灰色的。

Yii中每一个Jui的Widget都继承了CJuiWidget。所以Yii给出的方法是在每一个CJuiWidget中设置theme或者themeUrl。但是问题又来了:

如果我设置CJuiWidget::theme,我一旦更换了主题,我需要在程序中所有用到的地方都修改。

如果我设置了CJuiWidget::themeUrl,无法知道更换主题之后的themeUrl,即使使用CTheme来指定当前的theme地址,也不能保证别人制作的主题也放置了Jui的样式。

所以,在程序中指定Jui的css样式,是不靠谱的。那么,既然是要保证随时可以更换主题,且更换之后Jui部分保持和主题一样的配色,那么可以这样在主题的layout文件中写:http://www.huiyi8.com/js/css/

<?php

    if (class_exists(‘CJuiWidget’, false)) {

    ?>

    <link type=”text/css” rel=”stylesheet” media=”screen” href=”<?php echoYii::app()->theme->getBaseUrl(); ?>/css/jui/jquery-ui.css” />

    <?php

    }

    ?>

这段代码的思路是,一旦出现CJuiWidget类,说明当前页面使用了CJuiWidget派生出来的widget,那么我们就可以引入一个当前theme的css样式来覆盖自带的样式。

这样完全由主题确定是否使用自定义的Jui样式是目前我想到的最好的解决方法。

时间: 2024-08-14 15:11:09

Yii 为JUI设置自己的CSS样式的相关文章

谷歌下设置滚动条的css样式

.oLi-lists-scroll::-webkit-scrollbar { width:5px;  padding:1px; background:url(../images/repeat-bar.png) repeat-y;} /* Track */ .oLi-lists-scroll::-webkit-scrollbar-track {height:4px;} /* Handle */ .oLi-lists-scroll::-webkit-scrollbar-thumb { backgro

每天一个JavaScript实例-展示设置和获取CSS样式设置

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title> <style> #date{ width:200px; background-color:l

js 设置多条css样式

如果在一个网页中给id="mydiv"的元素添加css样式,先获取该节点:var obj = document.getElementById("mydiv");给节点添加css:如果需要添加的css不多的话,可以obj.style.width = "300px";如果需要添加多条css语句的话,这样会有多条,如:obj.style.width="300px";obj.style.height="300px"

如何查看DIV被设置什么CSS样式

如何查看DIV被设置什么CSS样式呢?可以扩展到了解查看任何HTML标签被设置什么CSS样式.DIVCSS5教大家掌握如何使用谷歌浏览器查找网页中某局部DIV布局结构以及对应设置什么CSS样式. 一.直接观察div标签被设置什么样式   -   TOP 比较简单的布局,我们直接从浏览器上观察效果就能分析一下地方被设置什么样式. 简单直观分析DIV CSS布局用什么样式图 如上图,可以大致分析对应样式有哪些,比如使用背景图片,设置宽度多少.设置CSS高度多少.字体大小.文字靠左.距离左多少. 以上

实现段落文字两端对齐的css样式

有时候网站中的文字比较多,虽然为父元素设置了宽度,但是总是会出现两端参差不齐的情况,看起来不整齐.其实实现段落的两端对齐,只需要设置两个css 样式即可. .demo{ text-align: justify; text-justify: inter-ideograph;/*IE*/ } text-justify基本语法 语法:text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | int

关于css样式line-height的应用

今天做项目,改一个东西,要求<li>背景</li>,背景下加个下划线,用了背景: #left_menu_tiandi ul li{ width:110px; background:url(../images/line.jpg) repeat-x bottom left; padding-bottom:5px; text-align:center; } 一开始没有用repeat-x,而且线紧贴背景下方,设了line-height后背景还是不好看,于是加了padding ,终于好了,同

5、通过js代码设置css样式

1.页面 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv=&

css设置input文本框样式代码实例

css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如何设置文本框的样式,当然这个演示可能并不是特别的美观,这里的目的也只是起到一个演示作用,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

HTML+CSS样式设置——CSS一学就会

HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有很大的关系.排版则主要依靠CSS来设置.调节. 下面说CSS与HTML的联合使用的过程: (1)新建CSS文件(一般放在与HTML文件同一路径下的css文件夹中) (2)在HTML的<head>标签中,用<link />对CSS进行引用 <link rel="stylesheet" type="text/css"