CODEWITHSUNDEEP
wordpressimportstylesheetparent-child
John Wildcard
John Wildcard

Reputation: 11

Wordpress child theme multiple css files

I have a wordpress theme that has more than one style sheet.

I want to use child theme method and I have had success with importing a style sheet. example:

@ import url ('../bluediamond-v1_04/style.css');

but. those who have developed this theme, using multiple stylesheets they are also located in different folders so I tried this.

@ import url ('../bluediamond-v1_04/stylesheet/foundation.css');
@ import url ('../bluediamond-v1_04/stylesheet/foundation-responsive.css');
@ import url ('../bluediamond-v1_04/style-custom.css');
@ import url ('../bluediamond-v1_04/style.css');

it does not work properly. is it wrong? what should I do?

hope you will help.

Upvotes: 1

Views: 4254

Answers (3)

bard
bard

Reputation: 1121

Try have your @import url("css local") located under your child-theme css descriptions.(the first line) like this 

/*
 Theme Name:     Theme Name Child
 Theme URI:      
 Description:    Theme
 Author:         
 Author URI:     
 Template:       something
 Version:        1.0.0
*/

/* =Theme customization starts here
-------------------------------------------------------------- */
@import url("one-fourth.css");

I just have this solved.

Upvotes: 0

David van Diepen
David van Diepen

Reputation: 31

Stylesheets need to be called by html/php, you could rewrite the links in header.php (or any other page that calls the extra css-files) and put that in your child theme.

It is also possible to overwrite the css in the extra css-files in your main child css-file, by adding !important to each css code. (for example: #nav{background: none !important;)

Many themes also provide the option to add extra css-rules to the theme that automatically overwrite the existing css. This can be found under "Theme Options" in the admin.

Upvotes: 0

Simon Hampel
Simon Hampel

Reputation: 2736

From http://codex.wordpress.org/Child_Themes ...

There must be no other CSS rules above the @import rule. If you put other rules above it, it will be invalidated and the stylesheet of the parent will not be imported.

You should only use one @import - for the master stylesheet from the parent style

@import url('../bluediamond-v1_04/style.css');

If the parent style is coded correctly, the other stylesheets should be added by calls to wp_register_style and wp_enqueue_style, which should happen automatically for you.

If you want to over-ride these other stylesheets, you'd need to deregister and dequeue the style before registering and enqueueing your own replacement.

Just remember that your child theme's functions.php file is called immediately before the parent's functions.php file, so if you want to define an action to deregister/dequeue the styles from the parent, you need to make sure it runs with a lower priority (ie higher priority number) than the action in the parent's functions.php file.

Upvotes: 2

Related Questions