Page History

...

If you are authoring something complex or if you have needs that you feel would be better addressed at the basic configuration level, please reach out to our developers, who Chris Lynnes (christopher.s.lynnes@nasa.gov) can put you in touch with.

styles.scss

Setting up a custom portal logo:

This is the preferred way to add a new logo image. Which are displayed next to the NASA meatball, centered vertically. You can reference the existing portals in the ./portals/... directory for examples of how this works in practice.

...

1. Set hasStyles to true in config.json
2. Set id, link, and title in the logo section of the config.json
3. Save your image(s) into the ../portals/myportal/images/ directory
4. If in In the logo section of your config.json file, you set the "id" field to "example-logo", then you would use this SASS rule to load that image:
   
   #example-logo {
  height: 40px;
  width: (set the correct width for your logo);
  background-image: url('./images/<portal name>-logo.[png|jpeg]');
}

Logo Best Practices:

• Images will be displayed at a maximum of 40px tall by 95px wide. Logos should be trimmed to size as to fit will within those maximum dimensions.
• Images can be provided at twice their displayed size (80px x 190px) for better display on high resolution screens.
• Images should be named using the following format: <portal name>-logo.[png|jpeg].
• If available, versions of the logo with transparent backgrounds (typically png's), meant to be displayed on dark backgrounds are preferred.

...