How to edit the design in AppInventor source?

Sagnik_Chatterjee · October 25, 2020, 4:52am

I want to change the color and UI for my app inventor
I tried changing the CSS file but nothing happened
Can anybody help me changing the UI?

Hrichik_Mazumder · October 25, 2020, 6:13am

Check Line 647 of Ya.css

github.com

mit-cml/appinventor-sources/blob/2e8515552f1a433596a4398694b27084dc577aec/appinventor/appengine/war/static/css/Ya.css#L647


  cursor: pointer;
}


.gwt-Tree .gwt-TreeItem span:hover,
.gwt-Tree .gwt-TreeItem-selected span {
  background-color: #d2e0a6;
}


/* Young Android Toolbar */


.ya-Toolbar {
  background-color: #8fc202;
  margin-bottom: 4px;
}


.ya-Toolbar .ya-ProjectName {
  color: white;
  font-weight: bold;
  font-size: 18px;
  padding-top: 8px;
  padding-left: 8px;

Sagnik_Chatterjee · October 25, 2020, 7:00am

Thank you very much

Sagnik_Chatterjee · October 25, 2020, 7:20am

And where are the css codes for palette, viewer, components and properties? @Hrichik_Mazumder

Hrichik_Mazumder · October 25, 2020, 9:50am

Those are hardcoded in java

github.com

mit-cml/appinventor-sources/blob/master/appinventor/appengine/src/com/google/appinventor/client/editor/simple/palette/SimplePaletteItem.java#L101


/**
 * Selects (sets the background to green of) a palette item when it is clicked.
 *
 * @param paletteItemWidget the Widget of the panel item to be selected
 */
private static void select(Widget paletteItemWidget) {
  if (selectedPaletteItemWidget != null) {
    selectedPaletteItemWidget.getElement().getStyle().setProperty("backgroundColor", "white");
  }
  selectedPaletteItemWidget = paletteItemWidget;
  selectedPaletteItemWidget.getElement().getStyle().setProperty("backgroundColor", "#d2e0a6");
}


private void addHandlers() {
  addMouseDownHandler(new MouseDownHandler() {
    @Override
    public void onMouseDown(MouseDownEvent arg0) {
      select(getWidget());
    }
  });
  addTouchStartHandler(new TouchStartHandler() {

Hrichik_Mazumder · October 25, 2020, 9:55am

A simple trick to find the color:

Install this extension

(Quite Easy, I too use it)

And use it to find the Hex color

Then search the color in github, it will tell you which file you have to change.

Sagnik_Chatterjee · October 25, 2020, 1:55pm

Another way to find the hex code is using google

Sagnik_Chatterjee · October 25, 2020, 1:59pm

Didn't work

MohamedTamer · November 8, 2020, 7:49am

Maybe this can help you