Have Geek Brain

An initial question about CSS

I am creating a website and I want to allow personalization for individual users to some extent, such as changing the font family, background color, etc. The problem is that my default css file that is loaded already has default classes for everyone. Now when I get the background color from my database then if there is a null value for the background then the default mystylesheet.css css class should be loaded and if the value is not null then I want to override that with the default css ... How is this possible? Thanks in advance:)

+2


a source to share


3 answers


Load the default stylesheet in the style tag and put your dynamic styles in the style tag after that.



Which style to use when different styles target the same element is specific, and if the selectors are the same, in order. The style found last is used.

+3


a source


The approach mentioned by zaf will require a page reload when you want to switch stylesheets. What I think is the best is to add the class name to the body if you have the ability to use javascript

<body class="theme-1">
  <div class="main"><div>
</body>

Then each of your stylesheets should contain the theme name in your ads:

- theme1.css

.theme-1 div.main {
  background-color: #eee
}

- theme2.css

.theme-2 div.main {
  background-color: #f30
}

To switch stylesheets, you simply remove the old theme name and add the theme you want to use.



Then you can even add stylesheets dynamically if you provide a user interface to customize the look and feel of your page.

New improved answer:

I just found a good solution implemented by people in extjs. It includes loading all the stylesheets you want to use with link> tags. The trick is that you can set a disabled property on the link element that won't cause it to be applied.

For example use firebug and see

http://www.extjs.com/deploy/dev/examples/themes/index.html

Have a look at styleswitcher.js and have a look at the setActiveStyleSheet function

function setActiveStyleSheet(title) {
  var i,
     a,
     links = document.getElementsByTagName("link"),
     len = links.length;

  for (i = 0; i < len; i++) {
    a = links[i];
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if (a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
+3


a source


EDIT: Reason for CSS property precedence?

One way is to create a css file dynamically from a php script.

You would include a file like:

<link rel="stylesheet" type="text/css" href="css.php">

And the css.php file will look something like this:

<?php
header('Content-type: text/css');
// whatever you want to ouput depending on the user
?>
+1


a source






More articles:


All Articles