sasori
March 1, 2011, 6:46am
1
Hi, how to change css of CDetailView ?
how will I remove that alternating blue color of the CDetailView css ?
and let’s say,based from the code below, How will I change the PositionTitle into <h1>Position</h1 ?
how will I apply a different css class for each attribute ?
$this->widget('zii.widgets.CDetailView', array(
'data'=>$model,
'attributes'=>array(
'PositionTitle',
'PositionSummary',
'PositionDetails',
'SkillsRequiredCompulsary',
'SkillsRequiredNonCompulsary',
'StartDate',
'EndDate',
'QualificationsRequiredCompulsary',
'QualificationsRequiredNonCompulsary',
'SalaryFrom',
'SalaryTo',
'SalaryPer',
'Currency',
'Benefits',
'CompanySector',
'PositionSector',
'PositionLevel',
),
binkabir
March 1, 2011, 8:12am
2
Hello,
<?php $this->widget(‘zii.widgets.CDetailView’, array(
'data'=>$model,
[b]'cssFile' => Yii::app()->baseUrl . 'path.to.your.cssFile',[/b]
'attributes'=>array(
sasori
March 1, 2011, 8:23am
3
binkabir:
Hello,
<?php $this->widget(‘zii.widgets.CDetailView’, array(
'data'=>$model,
[b]'cssFile' => Yii::app()->baseUrl . 'path.to.your.cssFile',[/b]
'attributes'=>array(
I added
'cssFile' => Yii::app()->theme->baseUrl . '/css/profile.css'
the blue alternating color is still there, do i need to overwrite something ? or remove something ?
binkabir
March 1, 2011, 8:33am
4
@ sasori, can u just go to ur asset folder and copy style.css in the cdetailview then edit it by changing this code
table.detail-view th
{
text-align: right;
width: 160px;
}
table.detail-view tr.odd
{
//@ sasori change this HeX color code
background:#E5F1F4;
}
table.detail-view tr.even
{
//@ sasori change this HeX color code
background:#F8F8F8;
}
sasori
March 1, 2011, 8:37am
5
here’s what i did,
<?php $this->widget('zii.widgets.CDetailView', array(
'cssFile' => Yii::app()->theme->baseUrl .'/css/profile.css',
'data'=>$model,
'attributes'=>array(
'PositionTitle',
'PositionSummary',
'PositionDetails',
'SkillsRequiredCompulsary',
'SkillsRequiredNonCompulsary',
'StartDate',
'EndDate',
'QualificationsRequiredCompulsary',
'QualificationsRequiredNonCompulsary',
'SalaryFrom',
'SalaryTo',
'SalaryPer',
'Currency',
'Benefits',
'CompanySector',
'PositionSector',
'PositionLevel',
),
)); ?>
at the profile.css, i pasted the codes from the detailview assets’ style file
/***********************************************/
table.detail-view .null
{
color: pink;
}
table.detail-view
{
background: white;
border-collapse: collapse;
width: 100%;
margin: 0;
}
table.detail-view th, table.detail-view td
{
font-size: 0.9em;
border: 1px white solid;
padding: 0.3em 0.6em;
vertical-align: top;
}
table.detail-view th
{
text-align: right;
width: 160px;
}
table.detail-view tr.odd
{
/* background:#E5F1F4;*/
background: black;
}
table.detail-view tr.even
{
/* background:#F8F8F8;*/
background: black;
}
table.detail-view tr.odd th
{
}
table.detail-view tr.even th
{
}
I refreshed the page…nothing happened …why?
softark
March 1, 2011, 10:08am
6
Hi, sasori,
Probably you’ve caught in this bug:
Bug Reports - Even row style of Blueprint screen css
Try removing the following line from /css/screen.css.
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}
As for 2) and 3), I think you can make use of the cssClass and/or the template of each attribute items. Take a look at the class reference.
[EDIT]
The bug has been fixed by 1.1.7.
binkabir
March 1, 2011, 10:16am
7
if u use firefox or chrome browser u can use the developer tool (firebug for firefox) to see with css is applied to your fields so that u can edit it. Also
can u comment out some of the css files that u loaded in the layout/main.php file
this can enable u to see which css is actually working for your cdetailView.
Did you delete the content of the assets folder?
I believe this is your answer:
<?php
$this->widget('zii.widgets.CDetailView', array(
'data'=>$model,
'attributes'=>array(
array(
'name'=>'PositionTitle',
'label'=>'PositionTitle',
'cssClass'=>'myCustomRowClass',
'template'=>"<tr class=\"{class}\"><td>{label}</td><td><h1>{value}</h1></td></tr>\n",
),
'PositionSummary',
'PositionDetails',
'SkillsRequiredCompulsary',
'SkillsRequiredNonCompulsary',
'StartDate',
'EndDate',
'QualificationsRequiredCompulsary',
'QualificationsRequiredNonCompulsary',
'SalaryFrom',
'SalaryTo',
'SalaryPer',
'Currency',
'Benefits',
'CompanySector',
'PositionSector',
'PositionLevel',
),
));
outrage
September 11, 2012, 11:23am
10
sasori:
here’s what i did,
<?php $this->widget('zii.widgets.CDetailView', array(
'cssFile' => Yii::app()->theme->baseUrl .'/css/profile.css',
'data'=>$model,
'attributes'=>array(
'PositionTitle',
'PositionSummary',
'PositionDetails',
'SkillsRequiredCompulsary',
'SkillsRequiredNonCompulsary',
'StartDate',
'EndDate',
'QualificationsRequiredCompulsary',
'QualificationsRequiredNonCompulsary',
'SalaryFrom',
'SalaryTo',
'SalaryPer',
'Currency',
'Benefits',
'CompanySector',
'PositionSector',
'PositionLevel',
),
)); ?>
at the profile.css, i pasted the codes from the detailview assets’ style file
/***********************************************/
table.detail-view .null
{
color: pink;
}
table.detail-view
{
background: white;
border-collapse: collapse;
width: 100%;
margin: 0;
}
table.detail-view th, table.detail-view td
{
font-size: 0.9em;
border: 1px white solid;
padding: 0.3em 0.6em;
vertical-align: top;
}
table.detail-view th
{
text-align: right;
width: 160px;
}
table.detail-view tr.odd
{
/* background:#E5F1F4;*/
background: black !important;
}
table.detail-view tr.even
{
/* background:#F8F8F8;*/
background: black !important;
}
table.detail-view tr.odd th
{
}
table.detail-view tr.even th
{
}
I refreshed the page…nothing happened …why?
Adding !important as I have above should override the styles and fix your problem.
loggheci
April 4, 2013, 7:44am
11
