Jump to content

Adding additional CSS file to child theme


willdashwood

Recommended Posts

Hello,

I've created a child theme based on "boxes". I only needed to make a few tweaks so the only files overwritten from the parent theme are complete.tpl, configureproduct.tpl and configureproductdomain.tpl.

I also wanted to make some CSS tweaks but all the boxes tpl files reference:

<link rel="stylesheet" type="text/css" href="templates/orderforms/{$carttpl}/style.css" />

I thought that this would mean style.css from the child theme is used but it appears not. It appears to still load from "templates/orderforms/boxes/style.css" instead of "templates/orderforms/boxes_child_theme/style.css"

Is there a way (perhaps via a hook) of including an additional CSS file from my child theme folder into every tpl? At the moment I've just replaced "templates/orderforms/boxes/style.css" with my modified version but that kind of defeats the purpose of using child themes.

Thanks
Will

Link to comment
Share on other sites

Hi Will,

On 22/02/2019 at 13:33, willdashwood said:

I've created a child theme based on "boxes". I only needed to make a few tweaks so the only files overwritten from the parent theme are complete.tpl, configureproduct.tpl and configureproductdomain.tpl.

Boxes was deprecated years ago - so don't be expecting any updates for it going forward! 👴

On 22/02/2019 at 13:33, willdashwood said:

I thought that this would mean style.css from the child theme is used but it appears not.

it should do - I just made a duplicate of 'boxes', called it 'brianboxes' and $carttpl has changed - so it should be calling the correct css file...

9pgMpEg.png

and is when I test locally - what did you name the child theme ??

On 22/02/2019 at 13:33, willdashwood said:

Is there a way (perhaps via a hook) of including an additional CSS file from my child theme folder into every tpl? At the moment I've just replaced "templates/orderforms/boxes/style.css" with my modified version but that kind of defeats the purpose of using child themes.

three thoughts...

  1. you shouldn't have to - ok that's not helpful and it should work, so can only assume you're renamed it to something WHMCS doesn't like.
  2. if you had to, you could go into every template and change your line to...
    <link rel="stylesheet" type="text/css" href="templates/orderforms/*my child theme*/style.css" />

    replace *my child theme* to the name of your child theme..

  3. use a custom.css theme - e.g /templates/six (or your custom)/css/custom.css and add your css in there...
    https://developers.whmcs.com/themes/css-styling/

    Quote

    If you want to make changes to any of the CSS that is applied by default, we recommend making those customisations inside of the /css/custom.css file.

    This file is included after styles.css allowing you to override any of the CSS defined within it and will not be affected by future updates to the WHMCS software.

    We strongly recommend adding your custom CSS rules to the custom.css file and not editing /css/styles.css directly as it will make updating easier.

    that second line isn't strictly true though - if you're using the "six" template and haven't renamed/copied it, then the automatic updater will overwrite the custom.css file... it will warn you first, but just be aware what it will want to do.

Link to comment
Share on other sites

  • 2 weeks later...

Hi Brian

My theme does have an underscores in the folder name. Could that be the issue? I'll rename it and find out.

Long term we'll probably use a different theme as a basis for the child theme but boxes was the one we preferred at the time as the basis for our modifications.

Cheers
Will

Link to comment
Share on other sites

22 hours ago, willdashwood said:

My theme does have an underscores in the folder name. Could that be the issue? I'll rename it and find out.

I wouldn't have thought so - most of the WHMCS orderform templates have at least one underscore in them.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated