I'm creating a web application and have written a CSS stylesheet to apply to all colour, layout, positioning etc. It's about 800 lines in all.
I want to provide the user with the option of selecting a colour scheme preference; at the moment this means I have 6 copies of the CSS file in my project, each with different colour attributes only (about 15 or 20 lines) to represent 6 different colour scheme options.
This seems like a lot of cumbersome duplication; all other CSS attributes remain the same in each copy.
Is there a way to separate the colour attributes into a separate CSS stylesheet to be applied with the general CSS stylesheet to the page?
One way to accomplish your goal is to extract every CSS-Element which is influenced by coloring and put it in one single selector like:
p, li, #whatever, .someClassInfluencedByColoring{
color: #[yourColor];
}
you could put this declaration into one CSS-File (for example color.css) and then use import statements like the following in a master CSS-File:
#import url("color.css");
Another way would be to use SASS or LESS and use variables where you define your color once in every stylesheet.
Make color style sheets. Lets say your main has a class called
Main.css
.example{
float:right;
width:100px;
height:auto;
}
And you want the color applied to it with a user specified color scheme.
Make the smaller color schemes like so
Color1.css
.example{
color:orange;
}
Color2.css
.example{
color:red;
}
In the main index page would look like this:
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
<?php
//user get color scheme from db query
$color = //user color variable
if($color == 1){
echo '<link rel="stylesheet" type="text/css" href="color1.css" />';
}elseif($color == 2){
echo '<link rel="stylesheet" type="text/css" href="color2.css" />';
}
?>
</head>
That's the only way I can think of.
just use
var bleh = $('body');
function changeToBlue() {
bleh.css("background","blue");
}
Related
I would like to remove the default css styles tag in wp_head, such that:
BEFORE :
<head>
<link/>
<script/>
<style>
...
...
...
</style>
</head>
AFTER :
<head>
<link/>
<script/>
</head>
How can I accomplish this?
Search the wp_enqueue_style method and show, which methods calling deeper.
wp_enqueue_style > wp_styles > $wp_styles
After you have tracked the methods, you see, you must handle the variable $wp_styles.
Create an init-Action in your Theme and override $wp_styles:
function removeStyles() {
global $wp_styles;
$wp_styles = null;
}
That's all. Another way ist, to get all registred style-names to deregister it.
If you are talking about inline css, you need to investigate through your theme and your different plugin.
Basically, any style is injected with the action wp_head.
For example
add_action('wp_head', 'custom_function');
To remove these entries, if they are related to the style, you need to use remove_action()
remove_action('wp_head', 'custom_function');
This way will work fine with procedural, if the action is thrown within a class
remove_action('wp_head', array('class_name', 'custom_function');
Don't forget to use the same priority for the remove_action() than the add_action(), if need.
You can, also, remove an action, and add your own custom function with your own style definitions with a new add_action calling your function and move it where you want in the head when playing with the priority.
How can I create and load a color scheme on my HTML site using CSS?
I have base.css green.css and orange.css. Now, when site is loaded default color scheme is green, but how to change it to orange.css on the client side?
I want each user to choose color scheme suitable for him. Also the choice must be saved for next visit of this person on site. Something like this in that IPBoard skin (feature called "Color themes") http://www.skinbox.net/skins/velvet/
If you're looking to swap stylesheets on the frontend, and want to save the preference, you can do something like this (using jQuery for simplicity):
In the <head>
<link id='theme' href='green.css' type='text/css' />
In the <body>
<a id='green' href='#'>Click here for green theme</a>
<a id='orange' href='#'>Click here for orange theme</a>
In the javascript file
$(document).ready(function(){
if( localStorage.theme )
$('link#theme').attr('href', localStorage.theme);
$('#orange').click(function(){
$('link#theme').attr('href', "orange.css");
localStorage.theme = "orange.css;"
})
$('#green').click(function(){
$('link#theme').attr('href', "green.css");
localStorage.theme = "green.css;"
})
});
The above code would output two links which switch a CSS file's location on click, thus changing the theme. It also saves the last selected theme in localStorage so that it's remembered.
In general you should do this on the serverside end of things - memorize preferences using cookies or sessions (and/or database tables behind them) and then just generate the correct stylesheet reference in your HTML.
IPB does the same internally, it stores your preferences in a database table and then renders the correct <link rel="stylesheet"> element in its template engine.
Alternatively you could do it completely in Javascript, loading stylesheets on demand, but that is both an advanced topic and generally an inferior solution to a solid serverside implementation.
You could store the default css color scheme file path in a cookie when your index page is loaded, if it is not already set.
Then when you are declaring your css file, simply do;
<link rel="stylesheet" href="https://[YOUR_DOMAIN]/themes/[COOKIE VALUE].css" />
You could then have a change theme button which when clicked will access and change that cookie value to the new theme css file path.
Use Javascript to load selective css onClick.
OR
Use jQuery to change color scheme onMouseClick.
I've finished my website and completed the style sheet but now i have created a second style sheet (called other.css). What I'm trying to do is have 2 links on my home page, one with "normal.css" and one with "other.css". So basically i want the user to be able to choose between my 2 styles. Ive duplicated all my original pages and added "2" to their name, i have also created other.css and referenced it on these pages. "2" pages all display the alternative layout fine but i dont know how to let the user switch between styles... any help please?
N.B. my html come isn't changing at all, i'm only changing the css file.
Dave
Good question. The answer would greatly depend on the server-side technology that you are using. For example, with Google App Engine which I usually use, it's a simple matter of changing part of the header of the HTML that is generated to point to a different CSS file. But then it's not a static HTML file.
CSS Zen Garden is specifically a website to illustrate the same HTML file presented with different stylesheets. Maybe you can get some ideas of how to do this from there. You'll see again though that the pages with different styles, even though they have the same HTML source, are not static .html pages.
This W3C page not only explains how to do it, but also has a number of alternate stylesheets itself, so you can actually test it in action.
In most browsers, the user can switch stylesheets with something like View → Page Style. All that's necessary is for the menu bar to be visible...
If you have php on your server you could have the style sheet change based on a cookie. The following code would work:
if ($_COOKIE['style'] == '1') {
echo '<link rel="stylesheet" href="normal.css" type="text/css" />';
}
elseif ($_COOKIE['style'] == '2') {
echo '<link rel="stylesheet" href="other.css" type="text/css" />';
}
else {
echo '<link rel="stylesheet" href="normal.css" type="text/css" />';
}
Add a link to the bottom of the page:
Change Style
On the changestyle.php page have the following:
if ((isset($_COOKIE['style'])) AND ($_COOKIE['style'] == '1')) {
setcookie(style,2)
}
elseif ((isset($_COOKIE['style'])) AND ($_COOKIE['style'] == '2')) {
setcookie(style,1)
}
else {
setcookie(style,2)
}
How would I use multiple CSS stylesheets in the same HTML page where both stylesheets have a banner class, for instance. How do you specify which class you are referring to?
Style sheets are, effectively, concatenated into a single style sheet in the order in which they appear in the HTML source.
The normal rules for applying rulesets then apply (i.e. by specificity with the last ruleset that defines a given property winning in the event of a tie and !important throwing a spanner into the works)
Yes, you can include multiple style sheets, but you need to label them as alternate style sheets and give the user some way to activate them using JavaScript - perhaps by clicking a link.
To create an alternate style sheet:
<link type="text/css" href="nameOfAlterateStyleSheet.css" rel="alternate stylesheet" title="Blue" />
Next create a method in your Javascript file that will: 1. Load all the style sheets in an array 2. Example:
function getCSSArray()
{
var links = document.getElementsByTagName("link");
var link;
for(var i = 0; i < links.length; i++)
{
link = links[i];
if(/stylesheet/.test(link.rel))
{
sheets.push(link);
}
}
return sheets;
}
Then go through the array using some type of if/else loop that disables the style sheets you don't want and enables the style sheet you want. (You can write a separate method or insert the loop into the method above. I like to use the onload command to load the CSS array with the page, then call the printView method.)
function printView()
{
var sheet;
var title1 = "printVersion";
for(i = 0; i < sheets.length; i++)
{
sheet = sheets[i];
if(sheet.title == title1)
{
sheet.disabled = false;
}
else
{
sheet.disabled = true;
}
Lastly, create code in your HTML document that the user will activate the JavaScript method such as:
Link Name
You can't control which you're referencing, given the same level of specificity in the rule (e.g. both are simply .banner) the stylesheet included last will win.
It's per-property, so if there's a combination going on (for example one has background, the other has color) then you'll get the combination...if a property is defined in both, whatever it is the last time it appears in stylesheet order wins.
You can't and don't.
All CSS rules on page will be applied (the HTML "knows" nothing about this process), and the individual rules with the highest specificity will "stick". Specificity is determined by the selector and by the order they appear in the document. All in all the point is that this is part of the cascading. You should refer to one of the very many CSS tutorials on the net.
You never refer to a specific style sheet. All CSS rules in a document are internally fused into one.
In the case of rules in both style sheets that apply to the same element with the same specificity, the style sheet embedded later will override the earlier one.
You can use an element inspector like Firebug to see which rules apply, and which ones are overridden by others.
The one you include last will be the one that is used. Note however that if any rules has !important in the first stylesheet they will take priority.
Think of it as your stylesheet(s) referring to ("selecting") elements in your HTML page, not the other way around.
Here is a simple alternative:
1/ Suppose we have two css files, say my1.css and my2.css. In the html document head type a link to one of them, within an element with an ID, say "demo":
2/ In the html document head body define two buttons calling two JS functions:
select css1
select css2
3/ Finally, in the JS file type the two functions as follows:
function select_css1() {
document.getElementById("demo").innerHTML = '';
}
function select_css2() {
document.getElementById("demo").innerHTML = '';
}
you can include more styles.
<link rel="preload stylesheet" href="style1.css" as="style">
<link rel="preload stylesheet" href="style2.css" as="style">
<link rel="preload stylesheet" href="Folder/Subfolder/style3.css" as="style">
Maybe it's not a 'best-practice'... but it has potential: you may have a 'palette.css' where u keep color-classes only that are 'shared'... or to think in a more 'componentistic way'
Rawly you can do similar with 'mediaquery' to support different resolutions
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can't. The last stylesheet you specify will be the one html page will use. Think of it as a big single .css document.
I am creating a website and i want to allow personalization to individual users upto some extent like changing font family, background color etc. The problem with this is that, my default css file that i load has already default classes for everything. Now when i fetch the background color from my database, then if there is null value for background color then default css class of mystylesheet.css should be loaded and if the value is not null, then i want to override this with my default css. How is it possible? Thanks in advance :)
Load the default stylesheat in a style tag, and put your dynamic styles in a style tag after that.
Which style to use when different styles target the same element is determined by specificity, and if the selectors are the same, by order. The style that is found last is used.
The approach mentioned by zaf would require that you reload the page when you want to switch styles sheets. What I find to be a better approach is to add a classname to the body
if you have the option of using javascript
<body class="theme-1">
<div class="main"><div>
</body>
Then each of your style sheets should contain the theme name in the declarations:
--theme1.css
.theme-1 div.main {
background-color: #eee
}
--theme2.css
.theme-2 div.main {
background-color: #f30
}
To switch style sheets, you just remove the old theme name and add the theme you want to use.
Then you can even add style sheets dynamically if you provide an interface for the user to customize the look and feel of your page.
New Improved Answer:
I just found a nice solution implemented by the folks at extjs. It involves loading all the stylesheets you want using <link> tags. The trick is that you can set a disabled property on the link element which will cause it not to apply.
For an example, use firebug and look at
http://www.extjs.com/deploy/dev/examples/themes/index.html
Look for styleswitcher.js and look at the function setActiveStyleSheet
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;
}
}
}
EDIT:
Reason for CSS property precedence?
One way is to produce the css file dynamically from a php script.
You would include the file like:
<link rel="stylesheet" type="text/css" href="css.php">
And the css.php file would look something like this:
<?php
header('Content-type: text/css');
// whatever you want to ouput depending on the user
?>