CSS Variables

  • aloof
  • Newbie
  • Newbie
  • aloof
  • Posts: 14
  • Loc: Oregon

Post 3+ Months Ago

Is there a way to define CSS variables so that I could control the overall color layout using just a couple variables rather than having to go through the code and change each of them one-by-one to change the colors?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

This is a crossover between design and scripting, but although I don't know how, I do know you won't be able to do it without some sort of scripting so I'm moving this to our Programming/Scripting board.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

As far as I'm aware CSS has no support for variables, Just like HTML.

However...
There are options available to you.

1) create a Javascript that will run at the top of the HTML page, using something like:

Code: [ Select ]
var color1=#ff0000;
var color1=#0000ff;
document.writeln('<STYLE>');
document.writeln('td{background-color:'+color1+'}');
document.writeln('div{background-color:'+color2+'}');
document.writeln('</STYLE>');
  1. var color1=#ff0000;
  2. var color1=#0000ff;
  3. document.writeln('<STYLE>');
  4. document.writeln('td{background-color:'+color1+'}');
  5. document.writeln('div{background-color:'+color2+'}');
  6. document.writeln('</STYLE>');


I think this should work as you are just writing the style tag at the top of your HTML using JavaScript. I haven't tried it though.

2) Use PHP (or similar) to create a dynamic CSS file? So have a dynamically created css called 'blah.php', then use this instead of the 'blah.css' file you would normally use.

This I definitely don't know if it will work or not, as I'm only just starting to learn PHP, but if it can be done with images and pdf, I don't see why not CSS?
Hope this gives some ideas. Let me know if you need any more info :)
  • GrimShadow
  • Newbie
  • Newbie
  • GrimShadow
  • Posts: 6
  • Loc: Chandler, Oklahoma

Post 3+ Months Ago

In case your still looking for other solutions you can try this;
Code: [ Select ]
<?php
$var = main

if($var)
{
    $CSS = @fopen("images/$var/file.css", 'r');
        if(!$CSS)
        {
            die("There seems to be a problem with the css file. Either it doesn't exist, or the correct permissions aren't set.<br />");
        }
        else
        {
            $info = @fread($CSS, @filesize("images/$var/file.css"));
            @fclose($CSS);
        }
}
$cssinfo = str_replace("<-theme->", $var, $data);
//$cssinfo = str_replace("vaule to be replace", what to replace the value with, file to open)

@header( "Content-type: text/css" );
print $themecss;
?>
  1. <?php
  2. $var = main
  3. if($var)
  4. {
  5.     $CSS = @fopen("images/$var/file.css", 'r');
  6.         if(!$CSS)
  7.         {
  8.             die("There seems to be a problem with the css file. Either it doesn't exist, or the correct permissions aren't set.<br />");
  9.         }
  10.         else
  11.         {
  12.             $info = @fread($CSS, @filesize("images/$var/file.css"));
  13.             @fclose($CSS);
  14.         }
  15. }
  16. $cssinfo = str_replace("<-theme->", $var, $data);
  17. //$cssinfo = str_replace("vaule to be replace", what to replace the value with, file to open)
  18. @header( "Content-type: text/css" );
  19. print $themecss;
  20. ?>

This will open up the css file specified and replace <-theme-> with the value of the variable $var (in this case, main). Then all you have to do is include this file in your template.
  • gsv2com
  • Professor
  • Professor
  • User avatar
  • Posts: 776
  • Loc: Nippon

Post 3+ Months Ago

Are you sure he's not talking about selectors, rather than variables?

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 109 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.