[CLOSED] Modifying Neptune Theme

  1. #1

    [CLOSED] Modifying Neptune Theme

    Hi Support,


    I'm using Default theme as of now, but I want to switch to Neptune theme. That's look good but I want to make font size bit smaller site wide or may be just for the grid headers and records. Also Wanted to tweak header Blue color little bit.

    What's the best way to do that ?

    Thanks
    Last edited by fabricio.murta; Jan 21, 2017 at 3:07 PM. Reason: no user feedback for 7+ days
  2. #2
    Hello @Fahd!

    In general terms, I don't think you are going to find a single place where you set the font size for the whole theme. But I will present you different approaches you can take in order to customize the theme.

    I will show you some options in reverse order of complexity. From the more elaborate to the simpler.

    First way would be customizing the theme from sources. That would be best if you are going to make deep changes in the theme.

    A starting point for this is here: Sencha documentation - Theming ExtJS Classic.

    Good side: you'll fiddle with the scss files and use tools meant to maintain the theme, besides the documentation.
    Bad side: you may find it difficult to merge the Theme to Ext.NET every time you make a change.

    Basically it would require you to:
    1. review the .scss files for the changes you want
    2. rebuild it using sencha tools
    3. copy over the files to Ext.NET location
    4. run a script to rebuild the CSS files with the ASPNET resources' paths (generate/refresh the -embedded.css files).
    5. rebuild Ext.NET and deploy the updated DLL files

    Original ExtJS sources are inside the github repository you clone under src/Build/Ext.Net/extjs/extjs-sources/.

    But as you see it, maybe the best option shown above would not really be best -- productivity-wise at least.

    Second way would be something simpler, yet not too simple, and keeping all on Ext.NET side still. Good if you are not going to make deep changes on the theme and don't want to clobber the individual project you are working with, with specific CSS overrides.

    It will consist of skipping Sencha part completely and changing the .css files under Ext.NET theme directory directly. You'll need to make the changes in the normal CSS file (which will have a -debug.css file name ending), then minify it (dropping the -debug suffix) and then skip to steps 4 and 5 above. In summary:
    1. Edit CSS files as you wish
    2. Minify the CSS files to apply the changes to the non-debugging version
    3. run the script to make the embedded-path files (step 4 on first method)
    4. rebuild Ext.NET + update DLL on your project.

    Advantage of this method is that you fiddle with less code, but you should know what you want to change beforehand. But much more straightforward to determine where to change things than first method, and lesser learning curve (for the Sencha CMD for example will not be required).

    Another advantage here is maintaining it thru Ext.NET upgrades. You will have a more objective merging process. You can do the git merge to the -debug.css files, then just minify them and re-generate the -embedded ones (with actually just replacing the generated files instead of actually mergin them).

    Third way and simplest, would be what majority of people do, you probably know how to do, but opened this thread exactly because you wanted to avoid this. It will consist of just, on your project, adding .css either in master page or individual pages (or <style> tags) with the changes in the theme you want.

    Good side here is that you don't need to affect other projects by the theme changes. The above methods could allow you to do this, but you'll probably have to keep a branch or repository copy of Ext.NET exclusively for the project with the custom theme (if you work with other projects, that is), or you could also just create a copy of Neptune and change it -- what would cost you while merging new versions in.

    A bad side of this approach will be that if you want to let the users change themes -- or when you change the theme at some point -- you will have to review the css customizations for they will most likely break the "stock" theme.

    So, I believe there's no perfect way to do that. You'll have to choose what fits best your environment and stick to it.

    No matter what, I recommend you spending some time checking the theming documentation linked on the beginning of this post so you can get a broader insight on how does the theming system works and potentially help you decide on what's best for you.

    I personally think that the .css override (third option from the ones explored above) would be the easiest to maintain and will allow you to have full control from your project's perspective. Given you already have a theme you like and you just need some trimmings on it, that would mean the fastest learning curve and easiest maintenance chore required to make the project look nice in no time!..

    Hope this long post is not tiring to read and helps you on your decision!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @Fahd!

    We've replied your inquiry here for some time already and no feedback from you so far. Do you still need help with this issue? If we don't hear back from you here in 7 business days or more we'll mark this thread as closed, but it won't mean you can't post a feedback here once you have time. We can open it again at any time.

    Hope to hear back from you soon!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Customising Ext.Net Neptune theme
    By fesuban in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 02, 2016, 4:22 AM
  2. [CLOSED] Starting up with Neptune theme programatically
    By ingbabic in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 14, 2015, 11:09 AM
  3. Neptune-touch theme in Ext.Net 2.5.3 ?
    By mickysantomax in forum 2.x Help
    Replies: 1
    Last Post: Aug 20, 2015, 6:21 PM
  4. [CLOSED] Layout problem with the Neptune Theme
    By Peter.Treier in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 20, 2014, 2:18 PM
  5. [CLOSED] Theming - Changing the Neptune Theme
    By RCN in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 19, 2013, 7:03 PM

Posting Permissions