Menu

Theme Development Process - Custom CSS

I want to heavily customize the default theme. I've exported it, renamed it, and then imported it as a custom theme, no issues there.


However, I'm not sure of the best way to proceed with making custom HTML/CSS changes and applying them to the live site. Mainly I'm wondering about CSS.


I do not want to use the in-browser editor, as I want to use my text editor and write SCSS, compile it, and then upload. (Ideally I'd like to do all development locally but I'm assuming that's not an option.) Is adding a custom CSS file to the theme, compiling locally, and then copying and pasting that into the custom CSS file in the browser editor the only way to do this? 


If so, I've added a custom CSS file by linking it in the header. The full header code is:

 

{% comment %}
  This is the header of your site.
  Some pages have links in the header and some do not
{% endcomment %}
{% if page.header_without_links_required %}
  {% include 'header_without_links' %}
{% else %}
  {% include 'header_with_links' %}
{% endif %}

<link rel="stylesheet" type="text/css" href="{{ 'custom.css' | theme_asset_url }}">

 However, I don't see any CSS contained in 'custom.css' (which is in /assets) in the compiled stylesheets that are output in the theme. Also, if I use the browser editor and click on 'custom.css', I can't view it to copy and paste my compiled SCSS. Nothing happens when it's clicked on.


To summarize, my questions are:


1. Is the process I outlined above (compiling CSS locally, copying and pasting into linked stylesheet in browser editor) the best practice for adding custom CSS while avoiding the browser editor?


2. If so, what am I doing wrong that is preventing me from editing the custom CSS file in the editor, and outputting that CSS in theme's compiled stylesheets?


Thanks in advance. 




Hi Devesh!


Happy to help - 


Assets are files uploaded to the system by the user - did you upload that file yourself? Did the file that you uploaded have code in it and it's just appearing as empty in the editor?


If you've uploaded that file and added it into your site header, then you may also need to go into the page layouts themselves and edit the classes being used to match your custom CSS.


My suggestion for best practice if you don't want to be updating the site whilst it's already live would be to start a second sandbox site for working on your theme, then exporting and importing that theme into your live theme once it's done and tested.


If you're still having issues then please get in touch with the tech support team directly and they'll be happy to give you a hand :)


And before you make changes that are too extensive - check out this video on Themes V2 coming out soon!


Thanks,

Catherine

Hi Catherine,


Yes, I uploaded that file myself, and it contains code. It's not even that it's appearing empty in the editor, clicking the file in the editor literally does nothing, it doesn't even open it.


To be clear, I'm a developer, it's not something as trivial as my CSS containing classes that don't match the HTML. If I open the compiled stylesheets that are output in the theme, the CSS in custom.css is not contained in them, so it does not appear to be loading my custom stylesheet at all.


Is there any way you could forward this to someone on the dev team who might better understand my questions? Or would it be better if I contacted tech support directly? 


Thanks for the help. 

Hi Devesh,


OK thanks for the clarification - so that we can troubleshoot this for you it would be best to contact our technical support team directly. You can go here to get in touch with the team.


Thanks!

Catherine

Is there a solution to this as I have the exact same problem. Adding an asset and i click on it and nothing opens at all.

 

Hi Shane!


Can you send us a message here: http://help.thinkific.com/support/tickets/new


We can dig into your site and see what might be the issue.


Thanks!

Login to post a comment