Order of CSS load – Child Theme of WP Bootstrap Starter

Resolved adexis
(@adexis)

8 years ago

Hi there,

I’m quite new to using wordpress but i’m starting to work on a new site and I’ve created a child theme based on WP Bootstrap Starter theme.

I’ve been trying to overwrite some CSS tags from the parent theme using the CTC-style.css but I my changes are not taking affect. Looking at the underlying CSS loads in the page I think the problem is that the theme has a number of preset styles but these styles are loading after the CTC-style in the eventual page.

The CTC configurator generates the following in the child functions.php file:
function child_theme_configurator_css() {
wp_enqueue_style( ‘chld_thm_cfg_separate’, trailingslashit( get_stylesheet_directory_uri() ) . ‘ctc-style.css’, array( ‘chld_thm_cfg_parent’,’wp-bootstrap-starter-style’ ) );
}

I think the problem I have though is that in my configuration of the theme I’ve selected the preset style “superhero” and this loads a later style sheet via a function wp-bootstrap-starter-superhero in the parent theme.

Is there a way to tell CTC to move the CTC-style.css after the superhero CSS rather than loading before?

Thanks very much

Andrew

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author lilaeamedia
(@lilaeamedia)

8 years ago

The code that was generated by CTC handles this by passing a dependency for wp-bootstrap-starter-style to the wp_enqueue_style function. This forces ctc-style.css to load after the named handles have loaded.

Clear your browser cache and any performance caches you are using on your site and load the page again. The links should appear in the order parent-bootstrap-child.

This dependency features can create problems with some themes. You can remove the dependencies under “Advanced Handling Options” on the Parent/Child configuration tab.
Thread Starter adexis
(@adexis)

8 years ago
Hi there, thanks for the reply. I’ve cleared all the cache but the problem is still the same.

I think the challenge may be that the Theme loads secondary style sheets after that wp-bootstrap-starter-style which then load after ctc-style.css.

This is an excerpt from the page once it loads – there are a number of theme CSS files loading after cic-style.css:
```
<link rel='stylesheet' id='wp-bootstrap-starter-bootstrap-css-css'  href='http://www.introversial.com/wp-content/themes/wp-bootstrap-starter/inc/assets/css/bootstrap.min.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='chld_thm_cfg_parent-css'  href='http://www.introversial.com/wp-content/themes/wp-bootstrap-starter/style.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='wp-bootstrap-starter-style-css'  href='http://www.introversial.com/wp-content/themes/wp-bootstrap-starter-child/style.css?ver=3.0.13.1526834349' type='text/css' media='all' />
<link rel='stylesheet' id='chld_thm_cfg_separate-css'  href='http://www.introversial.com/wp-content/themes/wp-bootstrap-starter-child/ctc-style.css?ver=3.0.13.1526834349' type='text/css' media='all' />
<link rel='stylesheet' id='wp-bootstrap-pro-fontawesome-cdn-css'  href='//use.fontawesome.com/releases/v5.0.12/css/all.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='wp-bootstrap-starter-superhero-css'  href='http://www.introversial.com/wp-content/themes/wp-bootstrap-starter/inc/assets/css/presets/theme-option/superhero.css?ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='wp-bootstrap-starter-oswald-muli-font-css'  href='//fonts.googleapis.com/css?family=Muli%3A300%2C400%2C600%2C700%2C800%7COswald%3A300%2C400%2C500%2C600%2C700&ver=4.9.6' type='text/css' media='all' />
<link rel='stylesheet' id='wp-bootstrap-starter-oswald-muli-css'  href='http://www.introversial.com/wp-content/themes/wp-bootstrap-starter/inc/assets/css/presets/typography/oswald-muli.css?ver=4.9.6' type='text/css' media='all' />
```
- This reply was modified 8 years ago by adexis.
Thread Starter adexis
(@adexis)

8 years ago

Thanks JF – trying to log a ticket on https://www.lilaeamedia.com/contact/ but for some reason it doesn’t seem to save the contact form (just got a spinning disk next to Send button).

Plugin Author lilaeamedia
(@lilaeamedia)

8 years ago

Please try again – it may have been a temporary network issue.

I installed this theme on our DEV environment and was able to duplicate the behavior.

CTC determines the dependencies of the stylesheets based on the parent theme, not the child theme. To get it to place a dependency on the customizer stylesheets do this:

1. Activate the parent theme
2. configure it with the same custom stylesheets as the child
3. run the configurator again

This is a new use case (although it seems like it would occur more often) and I will be addressing in the next CTC release.

Thread Starter adexis
(@adexis)

8 years ago

That works perfectly, thanks so much for your excellent and agile support, I really appreciate it.

Plugin Author lilaeamedia
(@lilaeamedia)

8 years ago

Thanks,

Be aware that this solution is not ideal, because it injects dependencies that may break your styles if you change customizer preferences.

I am working on a better solution for the next release.

-JF

Thread Starter adexis
(@adexis)

8 years ago

Completely understand and thanks very much indeed for the warning. Fingers crossed not too long to the next release!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Order of CSS load – Child Theme of WP Bootstrap Starter’ is closed to new replies.