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

This is the prefered 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.

Setting up a custom portal logo:

1. Set hasStyles to true in config.json
2. Set id in the logo section of the config.json
3. Save your image(s) into

...

1. the ../portals/myportal/images/

...

1.  directory
2. If in In the logo section of your config.json file,

...

1. you set the "id" field to "example-logo", then you would use this SASS rule to load that image:
   

...

1. 
   #example-logo {
   

...

...

1. height:

...

1. 40px;
   

...

...

1. width:

...

1. (set

...

1. the

...

1. correct

...

1. width

...

1. for

...

1. your

...

1. logo);
   

...

...

1. background-image:

...

1. url('./images/

...

1. <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.

You can reference the existing portals for real example of how this works.

...

scripts.js

This file will load and execute any JavaScript you need in EDSC. Because EDSC is a single page React application, the uses of this file are limited. But, you can use it to pre-load and second version of your logo to be used when the user hovers over the image. To do this refer to https://github.com/nasa/earthdata-search/tree/master/portals/ornldaac/scripts.js and https://github.com/nasa/earthdata-search/tree/master/portals/ornldaac/styles.scss.

...