Using Dynamic CSS

#11
[eluser]llbbl[/eluser]
[quote author="thepyromaniac" date="1191821062"]This is a problem I was contemplating the other day. I use a modular asset managing helper (functions that calls pics, css, etc and allow for awesome organisation) and I came accross the problem that while I have managed to completly solve my "how to point to images" within PHP files, I cannot do the same in CSS.

So, if i have <?=image_asset('not_porn.jpg');?> in my PHP files, whats the best way to go about a similar thing in CSS? I was considering some CRAZY solution for using a CSS controller for making partial css views, but thats just retarded. Anyone else have a better plan?[/quote]

Just how you would do it in PHP, with the variable.


Code:
// css style sheet called style.php

[url=http://www.w3schools.com/css/css_background.asp]body[/url]{
background-image:  url('<?=$img_url; ?>');
}

then the html + php in your test.php file.

Code:
<?php

if ($something){
    $img_url = "http://example.com/image1.jpg";
}else{
    $img_url = "http://example.com/image2.jpg";
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
    &lt;title&gt;untitled&lt;/title&gt;
    &lt;meta name="generator" content="TextMate http://macromates.com/"&gt;
    &lt;link href="style.php" rel="stylesheet" type="text/css"&gt;
    &lt;!-- Date: 2007-10-07 --&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;/body&gt;
&lt;/html&gt;

#12
[eluser]Phil Sturgeon[/eluser]
Yea you really didnt understand my question, but thanks for the reply anyway. Shows how much you care, and im honoured.

I was actually asking how one could not only use PHP in CSS files, but use CI helpers too.

#13
[eluser]maffo[/eluser]
The way Im thinking this is best done is..

Have a model where the css elements are stored and grab all the values from a database.

Code:
//  We call this model from our controller with the id of the style we want.
function create_CSS ($style_id) -- Note: I would use select * just showing as an example

$query = $this->db->query("SELECT div_wrap_bg, div_wrap_col, div_content_bg, div_content_col FROM CSSvalues WHERE style_id =  ".$style_id);
$row = $query->row();

//  We can now build our CSS

$build = '
div.wrap{
background-color: #'.$row->div_wrap_bg.';
color: #'.$row->div_wrap_col.';
}
div.content{
background-color: #'.$row->div_content_bg.';
color: #'.$row->div_content_col.';
}';

RETURN $build;


In our Controller very simply

Code:
$data['CSS']=$this->myCSS->create_CSS(3);
//    Load the View  
$this->load->view('layout',$data);

And in our view

Code:
&lt;head&gt;
&lt;style type="text/css"&gt;
&lt;?=$CSS;?&gt;
&lt;/style&gt;
&lt;title&gt;&lt;?=$page_title?&gt;&lt;/title&gt;
&lt;/head&gt;

Our rendered Page Source would Look like this

Code:
&lt;head&gt;
&lt;style type="text/css"&gt;
div.wrap{
background-color: #ffffff;
color: #000000;
}
div.content{
background-color: #ffcc00;
color: #cd0000;
}
&lt;/style&gt;
&lt;title&gt;My Lovely Site Title&lt;/title&gt;
&lt;/head&gt;

The page would render using the INTERNAL type of CSS. I have spent a day browsing web articles over this and I cant find anything that tells me that this is a slow way of doing things. All the articles claim that external CSS sheets are better simply because they keep the design elements and the HTML seperate. Well in this case we are doing that anyway as our values are being generated in our CSS model.

Thats the theory Im going to work with, Im still open to ideas and criticism though.

#14
[eluser]obiron2[/eluser]
Why not use the cascading property of cascading style sheets.

You can declare numerous CSS sheets in a single document. Lower sheets take precedence over higher sheets.


Keep the majority of your layout in a typrographic CSS
Keep your colour schemes in Chelsea.css, Arsenal.css etc.

Then insert the relevant CSS name into the &lt;HEAD&gt; section on the webpage using a PHP variable after the main CSS.

The CSS is then not visible using view source (but is still visible using firebug in Firefox as you cannot hide this)


There is a great article about this in this Oct/Nov edition of .NET magazine (may be UK only..) It is the one with the black cover and the yellow plusses all over it.


obiron

#15
[eluser]Arjen van Bochoven[/eluser]
Or use a css switch on the body tag:
Code:
&lt;body id="&lt;?php echo $club_id?&gt;"&gt;

And switch color schemes in your css file:
Code:
#chelsea div.content{
background-color: #some color
}

#arsenal div.content{
background-color: #some other color
}

#16
[eluser]maffo[/eluser]
Im in Argentina my friend although Im fully fledged Brit!!

Im thinking maybe a combintaion of the two will work for me here, this is a great idea.

The reason I want CSS values to be stored in a DB is so that users can create their own themes.

Thanks for that advice

#17
[eluser]obiron2[/eluser]
I want that functionality as well.
I want to be able to do more sophisticated stuff like generate invoice layouts with adjustable line counts and page breaks based on whether there is room on the printed page for the footer etc... which may be beyond the capability of a simple CSS

If you come across a good solution let me know.

The other way is to do a mix and match. Have maintenance routines that allow the user to edit their CSS and then actually write out and save the CSS file to the server which you then include in their served pages


obiron

#18
[eluser]maffo[/eluser]
The system I have proposed will work for you. Not only that it will make it extremely easy to and an editing system for both admin and a client.


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2020 MyBB Group.