Change the color

Techno_Vedang · November 7, 2020, 7:41am

Hey there,
I wanted to change the greenish color (sorry i don't know the name of that color ) which is below the toolbar. I am unable to find it in ya.css

Capture1653×30 4.29 KB

I wanted to change this color

What is the class or id of that in css

vknow360 · November 7, 2020, 8:59am

These come from here:

github.com

mit-cml/appinventor-sources/blob/master/appinventor/appengine/src/com/google/appinventor/client/boxes/ViewerBox.java

// -*- mode: java; c-basic-offset: 2; -*-
// Copyright 2009-2011 Google, All Rights reserved
// Copyright 2011-2012 MIT, All rights reserved
// Released under the Apache License, Version 2.0
// http://www.apache.org/licenses/LICENSE-2.0

package com.google.appinventor.client.boxes;

import com.google.appinventor.client.Ode;
import static com.google.appinventor.client.Ode.MESSAGES;
import com.google.appinventor.client.editor.ProjectEditor;
import com.google.appinventor.client.output.OdeLog;
import com.google.appinventor.client.widgets.boxes.Box;
import com.google.appinventor.shared.rpc.project.ProjectRootNode;
import com.google.gwt.user.client.Window;

/**
 * Implementation for a box that can hold multiple viewers (including editors).
 *
 */

This file has been truncated. show original

github.com

mit-cml/appinventor-sources/blob/master/appinventor/appengine/src/com/google/appinventor/client/boxes/PaletteBox.java

// -*- mode: java; c-basic-offset: 2; -*-
// Copyright 2009-2011 Google, All Rights reserved
// Copyright 2011-2012 MIT, All rights reserved
// Released under the Apache License, Version 2.0
// http://www.apache.org/licenses/LICENSE-2.0

package com.google.appinventor.client.boxes;

import static com.google.appinventor.client.Ode.MESSAGES;
import com.google.appinventor.client.widgets.boxes.Box;

/**
 * Box implementation for palette panels.
 *
 */
public final class PaletteBox extends Box {

  // Singleton palette box instance
  private static final PaletteBox INSTANCE = new PaletteBox();

This file has been truncated. show original

github.com

mit-cml/appinventor-sources/blob/master/appinventor/appengine/src/com/google/appinventor/client/boxes/SourceStructureBox.java

// -*- mode: java; c-basic-offset: 2; -*-
// Copyright 2009-2011 Google, All Rights reserved
// Copyright 2011-2012 MIT, All rights reserved
// Released under the Apache License, Version 2.0
// http://www.apache.org/licenses/LICENSE-2.0

package com.google.appinventor.client.boxes;

import static com.google.appinventor.client.Ode.MESSAGES;
import com.google.appinventor.client.explorer.SourceStructureExplorer;
import com.google.appinventor.client.widgets.boxes.Box;

/**
 * Box implementation for source structure explorer.
 *
 */
public final class SourceStructureBox extends Box {
  // Singleton source structure explorer box instance
  private static final SourceStructureBox INSTANCE = new SourceStructureBox();

This file has been truncated. show original

github.com

mit-cml/appinventor-sources/blob/master/appinventor/appengine/src/com/google/appinventor/client/boxes/PropertiesBox.java

// -*- mode: java; c-basic-offset: 2; -*-
// Copyright 2009-2011 Google, All Rights reserved
// Copyright 2011-2012 MIT, All rights reserved
// Released under the Apache License, Version 2.0
// http://www.apache.org/licenses/LICENSE-2.0

package com.google.appinventor.client.boxes;

import static com.google.appinventor.client.Ode.MESSAGES;
import com.google.appinventor.client.widgets.boxes.Box;

/**
 * Box implementation for properties panels.
 *
 */
public final class PropertiesBox extends Box {

  // Singleton properties box instance
  private static final PropertiesBox INSTANCE = new PropertiesBox();

This file has been truncated. show original

I don't know about color.

Techno_Vedang · November 7, 2020, 11:14am

Thanks. Maybe I will get the class or id of that by these codes

Techno_Vedang · November 7, 2020, 12:01pm

Still i dont got its css

MohamedTamer · November 7, 2020, 2:37pm

I think , you should change this line:

github.com

mit-cml/appinventor-sources/blob/72e0a50108ac8899d2749ce5b81fbd9ea0ffae41/appinventor/appengine/war/static/css/Ya.css#L135


  background-image: url(../images/watermark.png);
  color: #555;
  border-left: 1px solid #d2d2d2;
  border-bottom: 1px solid #d2d2d2;
  border-right: 1px solid #d2d2d2;
  margin: 4px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.065);
}


.ode-Box-header {
  background: rgba(102, 153, 0, 0.3);
  height: 31px;
  border: 1px solid;
  border-color: #d2d2d2 #d2d2d2 #b0b2a7 #d2d2d2;
}


.ode-Box-header-caption,
.ode-Box-header-caption-highlighted {
  font-size: 13px;
  font-weight: bold;
  padding-top: 7px;

It will change all the pallets header background colour.
More precisely, the box header which are coded in java takes the css style as an input to style it.Hence changing the css, simply change all of them .see also here:

github.com

mit-cml/appinventor-sources/blob/66b2a13ad0e5676bd9e9c4573484a57fa0525415/appinventor/appengine/src/com/google/appinventor/client/widgets/boxes/Box.java#L255


this.height = height;
this.restoreHeight = height;
this.startMinimized = startMinimized;
this.highlightCaption = highlightCaption;


captionLabel = new Label(caption, false);
captionAlreadySeen = false;
if (highlightCaption) {
  captionLabel.setStylePrimaryName("ode-Box-header-caption-highlighted");
} else {
  captionLabel.setStylePrimaryName("ode-Box-header-caption");
}
header = new HandlerPanel();
header.add(captionLabel);
header.setWidth("100%");


headerContainer = new DockPanel();
headerContainer.setStylePrimaryName("ode-Box-header");
headerContainer.setWidth("100%");
headerContainer.add(header, DockPanel.LINE_START);

Techno_Vedang · November 8, 2020, 4:46am

Thank you very much buddy

I tried it but it not worked. Maybe it is because ai2 is made with gwt. Thank you once again

system · November 15, 2020, 4:46am

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.