Ask your WordPress questions! Pay money and get answers fast! (more info)

One style.css including 2 color stylesheets WordPress

  • SOLVED

Hi,

i use the Wordpress Theme Karma (http://themeforest.net/item/karma-clean-and-modern-wordpress-theme/168737) for my Site. It is a very good and fast Theme.
The Theme use three Stylesheet Files. The first is the Style Css and the second of my Page is the Color - Karma Coffee Style File. This File use an @import for the secondary Color Stylesheet - secondary-coffee.css file.

My Question:
It is possible to use one Css including with style.css, karma-coffee.css and secondary-coffee.css?

Here is a Link for the Color Scheme:
http://themes.truethemes.net/Karma/styles?style=karma-coffee


Regards
Joerg

Answers (8)

2012-10-31

Arnav Joy answers:

you can use one css , but in that case you have to call all the code from other css file into one which you want to include

like from cofee.css to style.css


Arnav Joy comments:

if your style has @import url('secondary-teal-grey.css');

then you can copy all the css from

secondary-teal-grey.css file and can paste it to style.css


Schuenemberg comments:

I know, but the calling of the other files (css) is retained.


Schuenemberg comments:

i send you a E-Mail.


Schuenemberg comments:

Thanks man. Good Job!

2012-10-31

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.


Schuenemberg comments:

I know, but the calling of the other files (css) is retained.


Schuenemberg comments:

i mean this.
<link href="http://localhost:8888/wordpress/wp-content/themes/Karma/css/karma-coffee.css" rel="stylesheet" type="text/css" />
<link href="http://localhost:8888/wordpress/wp-content/themes/Karma/css/secondary-coffee.css" rel="stylesheet" type="text/css" />
<link href="http://localhost:8888/wordpress/wp-content/themes/Karma/style.css" rel="stylesheet" type="text/css" />

Sorry for my english.


John Cotton comments:

Ah! Do you mean your theme is still outputting the links to the file even though you've merged them?

You need to look in the theme code..

If they've hardcoded it, look in the header.php and edit out the unnecessary ones.

If they've added them with script (which is what they should do...!) then probably functions.php (but could be somewhere else) there will be wp_register_style/wp_enqueue_style calls. You need to comment those out.


Schuenemberg comments:

Yes, it is my bad.

in the header i find nothing.
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<?php truethemes_meta_hook();// action hook, see truethemes_framework/global/hooks.php ?>
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>" href="<?php bloginfo('rss2_url'); ?>" />
<?php wp_head(); ?>
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/lt8.css" media="screen"/>
<![endif]-->
</head>


funktion.php : nothing


John Cotton comments:

<blockquote>
in the header i find nothing.
funktion.php : nothing
</blockquote>

In which case, they are doing it in code, either by echoing the html or (properly) by wp_enqueue_style,

You need to search through the theme PHP files for karma.css and you'll find how they are doing it.


Schuenemberg comments:

yes, with the @import url('secondary-coffee.css');.

When i delete this line (@import url('secondary-coffee.css');) the style (secondary-coffee.css) is called although.


John Cotton comments:

Sorry, I don't understand your last message.

2012-10-31

Dbranes answers:

Hi, you could try


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


in your main css file


Schuenemberg comments:

i will kill the @import.

2012-10-31

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');
});

2012-10-31

Navjot Singh answers:

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

2012-10-31

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.


Schuenemberg comments:

The theme has this feature in the admin panel. I need one stylesheet, since I do not use any other color. One request!

2012-11-01

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..

2012-11-01

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]]