images within css within a theme

Archives Yii 1.0.x Discussions
1

Hi,

I have a web app with a theme and within the theme I have a css and images folder. Within the css I have markup that relates to images from the images folder and I am not sure how to expose this images transparently through the theme. The only way I see now is getting all images references from the css into the html and that is very unconvenient especially for sophisticated user interfaces.

For example see a css part:

".ad-top {

background-color:#1289ad;

}

#header {

background: url(../img/header.png) repeat-x #299DCB;


background-position: 0 100%;

}"

Thanks,

Dudu

And Thanks again for Yii:)

2

Is inline css suitable for your need?




<?php

  $css = "

    .ad-top {

      background-color:#1289ad;

    }

    #header {

      background: url(../img/header.png) repeat-x #299DCB;

      background-position: 0 100%;

    }

  ";

  Yii::app()->clientScript->registerCss('myCss', $css);

?>

Edit:

Of course you will replace the static url with a php generated url.

/Tommy

3

Hi Tommy,

Yes, I can do it but it is not very streamlined in terms of development. Usually I get the design as a set of XHTML/CSS that is highly structured and breaking it into parts means high maintenance.

What about exporting the images dynamically to the assets folder, can that help me? I could not understand clearly from the documentation. Also would it collide with other images if for example I allow users to activate their specific theme?

Thanks again,

Dudu

4

I just of another way, which could be to make the css files into php and then to include them from the view while in the css to use the theme path before the images.

5

Hello dudumimran,

I think your problem is a non-issue.

Background images in css and other resources referenced by url() in css are loaded from locations relative to the css file.

So, if your css is included into your layout file using this:




<link rel="StyleSheet" type="text/css" media="screen" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/style.css" />

And your css has a definition like yours:




    #header {

      background: url(../img/header.png) repeat-x #299DCB;

      background-position: 0 100%;

    }

The header.png will be loaded from the "img" directory of your theme, which is located at the same level as your "css" directory.

Hope that helps,

Steffen

6

Yes, you are right! Thanks!