CSS Overwrite - Cart Include

Tom_Tom_ Member
in Help edited October 11
I know you can use Templates > Configuration, "Add custom header and footer code to your templates". However, the textarea is hardly ideal for writing code, especially responsive code. There is no option for tabbing, there is no option for syntax highlighting and the area is very small.

I've had a look at the "Custom" option, however, it doesn't seem to give any indication on how to do the "Cart Include" only the full page cart etc.

I've also had a look at going to Templates > Cart Include - selecting "Custom Template" copying the code into a HTML file on my server - but there isn't an option to overwrite the CSS there either.

I'm just wondering what I'm missing here?

Edit:
Based on - https://wiki.foxycart.com/v/2.0/templates/intermediate-automagicache

Edit 2:
Looking at the http://www.crosleyradio.com/ website, they have used !important on the CSS rules. I'm guessing that this is the best option for those who want a nice experience when adding custom CSS to the Cart Include template? I'm not a fan of !important but this may be the best way of doing it or finding a way to over qualify.

Edit 3:
Prefixing all CSS selectors with 'body' will over quality the default CSS. Would this be the best route? I would rather include the css file after the default CSS file, however I think the only way to do that is to wait for FoxyCart to load then use JavaScript to inject the CSS after?

Edit 4:
Opted for:
/*** FOXYCART ***/
var FC = FC || {};
FC.onLoad = function() {
$('body').append("<\link href='" + urls.templates + "styles/foxycart.css' rel='stylesheet'>");
}
Is this an accepted solution? (backslash added to stop is being parsed)
Comments
  • fc_adamfc_adam FoxyCart Team
    @Tom_,

    Thanks for posting - sorry for the confusion while you've been looking into this.

    Would I be correct in saying that you're wanting to apply styling to apply to the Sidecart? If so, there are two approaches we would recommend:

    Firstly, if you have an SSL certificate on your website domain, you could embed your stylesheet as part of the custom header for your configuration. That would ensure that the styles would apply after the dynamically added stylesheet from loader.js, but also remove the need to manage those styles from directly within the configuration.

    If you don't have an SSL certificate, applying the styles directly from your website would be the next best thing. You could take the approach you have there, or alternatively add an additional level of specificity to the styles (such as prepending with body like you suggested) to ensure they override without needing to use !important tags.

    Thanks for your notes about the limited usability for the code fields on the configuration as well. We're working towards a completely rebuilt administration that will improve the usability there (along with a lot of other areas in the administration too).
  • Tom_Tom_ Member
    @fc_adam,

    Hi Adam,

    Good idea on adding the stylesheet to the custom header part of configuration. We are running an SSL on our dev server using Let's Encrypt so that isn't an issue. This also makes FoxyCart styles load on things like the checkout page etc. which is great :smile:

    Thanks,
    Tom
Sign In or Register to comment.