CLinkPager css override problem

Archives Yii 1.0.x Discussions
1

Hello,

I'm trying to override pager.css with my custom css but I haven't been lucky enough… I've changed component's CLinkPager.cssFile into false in the config/main.php and I call the CLinkPager widget from my view like this:



$this->widget('CLinkPager',array('pages'=>$pages, 'cssFile'=>Yii::app()->request->baseUrl.'/css/mypager.css')); ?>

Still my css mypager.css is not used and in the html source I see the default pager.css getting linked (from the assets dir) as well as mypager.css.

I'm using version 1.0.6.r1102… any thoughts ?

2

Hi,

this works fine for me…

Do you have another pager on this site, where you haven't changed the CSS file?

Greets

3

Quote

Do you have another pager on this site, where you haven't changed the CSS file?

Nope, I've got only one pager. Can you tell me if the default pager.css is being

loaded in your html file ? Because I think that it shouldn’t be there at all since the cssFile is set to false  :-\

thanks!

4

No, it's not loaded in my html page.

I first thought it could be a caching problem, but than you're mypager.css wouldn't be linked in the page i think.

5

sorryyyyy my bad… i’ve forgotten the second pager at the bottom of the page :(

sorry for wasting your time and thanks for the help it's working fine now!

6

No problemo!  :D

I myself often don't see the wood for the trees!

7

Could I make a suggestion?

Instead of doing what your doing for using your own pagination style, try including your own global css file, and input your pagination classes in there:

Main Layout View:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title><?php echo $this -> pageTitle; ?></title>





<?php Yii::app() -> clientscript -> registerCssFile(Yii::app() -> baseUrl.'/css/default.css'); ?>


...

Inside this css you can have your pagination css style code:



ul.yiiPager {font-size:11px;border:0;margin:0;padding:0;line-height:100%;display:inline;}


ul.yiiPager li{display:inline;}


ul.yiiPager a:link,ul.yiiPager a:visited{border:solid 1px #8d8d8d;font-weight:bold;color:#666666;padding:1px 6px;text-decoration:none;}


ul.yiiPager .page a{font-weight:normal;}


ul.yiiPager a:hover{border:solid 1px #888888;background:#ebebeb}


ul.yiiPager .selected a{background:#8d8d8d;color:#FFFFFF;font-weight:bold;border:1px solid #4d4d4d}


ul.yiiPager .hidden a{border:solid 1px #bababa;color:#888888;}

In your pager widget call use:



<?php


<?php $this->widget('CLinkPager',array('pages'=>$pages, "cssFile" => false)); ?>

This way you can keep all your css in one nice neat place, and if you require different styles according to different pages then just wrap the pagination widget in a div with an id and declare some new styles in the css.

Just a random thought :)

Chris

8

Yes, that's another possible solution.

But i for myself like to have separate css files, because i think it's easier and cleaner to maintain and also i often need to keep an eye on the page load size, so i don't want to include styles i don't need on this page <- i'm sure this is a point on which one can argue but i prefer a small initial page load.

Greets

9

you can use css code in your project folder css like main.css or screen.css , and specify that as important ,

I done this code in my screen.css ,


ul.yiiPager .selected a {

    background: none repeat scroll 0 0 #DA830F!important;  // changes default pager selection color from blue to orange

    color: #FFFFFF;

    font-weight: bold;

}