1. #1
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    47
    Vote Rating
    0
    bdvr is on a distinguished road

      0  

    Default Overriding the default CSS

    Overriding the default CSS


    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?

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,882
    Vote Rating
    101
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    47
    Vote Rating
    0
    bdvr is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,882
    Vote Rating
    101
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by bdvr View Post
    are you saying that creating another HTML file will allow Designer to render my custom CSS in place of the default CSS?
    No.

    Quote Originally Posted by bdvr View Post
    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.

    Quote Originally Posted by bdvr View Post
    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    47
    Vote Rating
    0
    bdvr is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    May 2012
    Posts
    46
    Vote Rating
    8
    meander365 is on a distinguished road

      0  

    Default


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

    Or is the preferred method still what is described above?

    Thanks...

  7. #7
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,882
    Vote Rating
    101
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    46
    Vote Rating
    8
    meander365 is on a distinguished road

      0  

    Default


    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?

  9. #9
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,882
    Vote Rating
    101
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Quote Originally Posted by aarron View Post
    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  10. #10
    Sencha User
    Join Date
    Aug 2012
    Posts
    39
    Vote Rating
    5
    Zachary1748 is on a distinguished road

      0  

    Default


    Quote Originally Posted by aconran View Post
    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.
    Hey Aaron,

    Has there been any update to this in Sencha Architect 2? I would really like to use my own css and not sencha-touch.css without having to upgrade to Sencha Architect 3.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar