Overriding the default CSS

[bdvr]

I'm aware that Designer doesn't yet support custom theme editing in the app, but is it possible to use a stylesheet created outside of Designer? My app has a lot of CSS/SASS for custom UI elements as well as overrides of Sencha's theme CSS. Without these custom styles, nothing looks right at all.

I went into the designer html file and changed the URL of the default CSS file to my own, but that didn't seem to work, and of course designer will overwrite any changes I make to that file. I suppose I could do some DNS magic to make it pull the CSS file from my own web server, but would my CSS show up in Designer even then?

[aconran]

The current preferred mechanism to do this is to make a duplicate of designer.html named index.html or whatever you would like and then link in your additional css/javascript files.

In an auto-update coming to you in the near future, you will have the ability to link in additional CSS via a project setting.

In an auto-update in the far future, you will have the ability to manage your external resources JavaScript and CSS from within a Resource Manager in the Designer.

[bdvr]

Thanks for your response, Aconran. So, to clarify, are you saying that creating another HTML file will allow Designer to render my custom CSS in place of the default CSS? I didn't have much luck with that. Or are you saying that the new HTML file will be used only when running my app in a browser, and there is no way to make designer use any CSS other than the default?

If the latter is true, will the "near future" update allow allow Designer to render custom CSS?

[aconran]

are you saying that creating another HTML file will allow Designer to render my custom CSS in place of the default CSS?

No.

Or are you saying that the new HTML file will be used only when running my app in a browser, and there is no way to make designer use any CSS other than the default?

Correct.

If the latter is true, will the "near future" update allow allow Designer to render custom CSS?

No, it will not. It will just let you link your assets into the exported designer.html file. There are plans for lots of improvements in the area of custom styling within the application but for now you will have to check it out in the browser.

[bdvr]

That helps--thanks for taking the time to explain.

[meander365]

Has there been any improvements to viewing custom themes in Architect?

Or is the preferred method still what is described above?

Thanks...

[aconran]

The preferred method is currently by adding a CSS Resource and then setting the proper url.

You can click the + on the Inspector, then go to Resources, then click CSS.

Select the new css node in the inspector. You can use a relative url or an absolute url. If you use a relative url, the urlPrefix will need to be setup in the Project Settings properly.

[meander365]

Thanks for the reply; yep saw that resource option and added accordingly.

It does work, but the app still loads sencha-touch.css which is not needed if I'm including all the default styles in my SASS scss theme.

Any advice?

[aconran]

Thanks for the reply; yep saw that resource option and added accordingly.

It does work, but the app still loads sencha-touch.css which is not needed if I'm including all the default styles in my SASS scss theme.

Any advice?

As a workaround for now you will just have to make a copy of app.html and manually remove it. I know this answer sucks

In the future, you will be able to uncheck "Include CSS" or "Include JS" at the library level. This is specifically to cope with the problem you are presenting here.