One style.css including 2 color stylesheets WordPress

John Cotton answers:

If you know that you always want them together there is nothing to stop you cutting and pasting the contents of the @imported sheet into the first file.

The data transfer is the same but you save one network request. Result!

UPDATE:

I note that style.css comes first, so you need to copy secondary.css into style.css first, then karma in last to maintain the CSS rule order.

---

---

---

---

---

---

---

Dbranes answers:

Hi, you could try


@import url("your_file_1.css");
@import url("your_file_2.css");


in your main css file

---

Michael Caputo answers:

My suggestion would be to create a small javascript script that will add a class to the body tag.


<a href="#" class="button">button</a>
$(".button").click(function() {
$('body').addClass('alt-style');
});



Navjot Singh answers:

Try the suggestion mentioned here: http://stackoverflow.com/questions/12172987/different-color-schemes-inside-one-stylesheet

Jatin Soni answers:

I completely agree with <strong>John Cotton</strong>

However to give option to change color scheme it is always good idea to keep color stylesheet separate.

---

Christianto answers:

Hi Schuenemberg,

Luckily I'm working same theme for my client (for fetching data from web crawler service)

you can do this:

on your karma theme directory you can open admin-functions.php (Karma\truethemes_framework\theme_specific\admin-functions/php)
and find this line:
add_action('wp_head', 'siteoptions_wp_head');
edit it to
add_action('wp_head', 'siteoptions_wp_head_combine');

and then add this code below it
function siteoptions_wp_head_combine() {
echo '<link href="'. get_stylesheet_directory_uri() . '/style.css' .'" rel="stylesheet" type="text/css" />'."\n";
}

this will load only one stylesheet file (style.css), so you can backup your theme style.css
and then add other stylesheet that need to be include for coffee color..

On style.css copy paste some of color stylesheet of the theme, the order are:
/*
theme data bla..bla..
License: GNU General Public License
License URI: license.txt
*/

/* 1st, put stylesheet content on Karma/css/secondary-teal-grey.css paste it below */

/* 2nd, put stylesheet content on Karma/css/secondary-teal-grey.css paste it below */

/* 3rd. All content of style.css to the endStart from commented word
<em>/* -----------------------------------------------------------------------------------
Stylesheet Guide</em>
*/

/* 4th, all content on Karma/css/secondary-coffee.css paste below after all style.css code */

/* 5th, all content on Karma/css/karma-coffee.css paste below after secondary-coffee.css*/

if you need to revert back you can change
add_action('wp_head', 'siteoptions_wp_head_combine');
to
add_action('wp_head', 'siteoptions_wp_head');

and recover style.css from your backup file.

let me know if you have problem with this.
Hope this help..

Clifford P answers:

How about using [[LINK href="http://lesscss.org/"]]LESS CSS[[/LINK]]?
WP Plugins to add LESS functionality: [[LINK href="http://wordpress.org/extend/plugins/search.php?q=less"]]http://wordpress.org/extend/plugins/search.php?q=less[[/LINK]]
Learn LESS CSS: [[LINK href="http://nickhaskins.com/2012/08/less-chronicles-the-basics/"]]http://nickhaskins.com/2012/08/less-chronicles-the-basics/[[/LINK]]
WP Plugins to add Bootstrap (has LESS): [[LINK href="http://wordpress.org/extend/plugins/search.php?q=bootstrap"]]http://wordpress.org/extend/plugins/search.php?q=bootstrap[[/LINK]]