Docs

[Mauricio B]

Which CSS stylesheet should I import into my child theme?

[Kory]

Mauricio,

Welcome to the forums! That’s a really great question. For ease of use, we recommend downloading and using our child themes that we’ve already setup for you (these can be found at the bottom of the Dashboard). After unzipping the download, you’ll find four different child themes to use depending on which stack you’re using, and in the case of Integrity, which color scheme (light or dark). This is because each Stack utilizes it’s own separate stylesheet that is only loaded when that Stack is activated.

Alternately, if you simply want to create your own child theme, you’ll need to setup your child theme’s style.css file to with the appropriate comment block at the top with all the necessary information to point it towards the parent theme. Then, you’ll need to import the appropriate stylesheet for the stack you’re using. Below is a list of which import path to used based on which stack you’re using:

NOTE: COPYING THE PATHS BELOW MAY CREATE ERRORS, AS THE AUTOMATIC FORMATTING OF THE FORUM CHANGES THE SINGLE QUOTES INTO APOSTROPHES. IF YOU ARE MANUALLY INCLUDING PATHS FOR A CHILD THEME, MAKE SURE THAT YOU DELETE THESE AND INCLUDE PLAIN TEXT SINGLE QUOTES OR DOUBLE QUOTES.

Integrity – Light:
@import url( ‘../x/framework/css/child/integrity-light.css’ );

Integrity – Dark:
@import url( ‘../x/framework/css/child/integrity-dark.css’ );

Renew:
@import url( ‘../x/framework/css/child/renew.css’ );

Icon:
@import url( ‘../x/framework/css/child/icon.css’ );

That’s it! Let us know if you have any other questions.

v1.4.0 EDIT

Due to some new features we are adding in future versions, we had to alter our theme file structure a bit in this release. If you are using v1.4.0, make sure to use our provided child themes, or use these import values instead:

Integrity – Light:
@import url( ‘../x/framework/css/site/stacks/integrity-light.css’ );

Integrity – Dark:
@import url( ‘../x/framework/css/site/stacks/integrity-dark.css’ );

Renew:
@import url( ‘../x/framework/css/site/stacks/renew.css’ );

Icon:
@import url( ‘../x/framework/css/site/stacks/icon.css’ );

[Armen T]

I just uploaded the Integrity Light child theme as shown in the video tutorial.

However, it seems like the stylesheet is missing or something.

[Kory]

Armen,

I just edited our previous response above as it is old. We had to update the file structure of the theme in v1.4.0 due to some developmental changes we’re working on with new features. Because of this, the path to the main CSS files is different. Please either download the new child theme package as they have the correct import paths in them, or copy and paste the paths above that I have noted.

Thanks, and let us know if you need any further help!

[Armen T]

After a bit of hair pulling, I realised the child theme was using single inverted commas rather than straight ticks (‘…’) to call the stylesheet.

I’m not sure if it’s just that my server is sensitive to that or what, but changing it solved the problem.

[Kory]

Armen,

Did you copy the paths from this thread, or were you using one of the new child themes that you downloaded with the updated path?

[Armen T]

Originally I had uploaded the child theme and it didn’t work. However, I was running v1.3 at that stage so that was perhaps the reason.

But, I then overwrote v1.3 with v1.4, but that didn’t help. So I deleted the theme and uploaded v1.4, which didn’t seem to work. At some point I also copied over the file path from here. But, that’s the problem. When you copy the path in the posts above, you get inverted commas, not horizontal ticks.

Anyway, sorted now.

[Kory]

That’s what I figured. Just wanted to make sure so I could make a note for anyone else who is updating manually.

Thanks!

[Author]

Posts