bannerd

A. Introduction

B. Institutional Requirements

C. Project Software Requirements

D. Topics

E. Tools, References, and Terms

F. SPAN
(NASA Only)

Versions Compared

Old Version 4

changes.mady.by.user Haigh, Fred

Saved on

compared with

New Version 5

changes.mady.by.user Haigh, Fred

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Tabsetup
01. Introduction
1Theme Configuration
Div
idtabs-1

1. Introduction

The Look and Feel of SWEHB is managed using the "Refined for Confluence" plugin from https://www.refined.com/products/sites-for-confluence. SWEHB uses an Advanced Theme customized for NASA which replicates the original look and feel of the SWEHB. 

The MSFC IT group that we use manages all software including the Refined Theme for Confluence. 

Div
idtabs-2

2. Theme Configuration

2.1 Themes for Spaces

There is a default Theme that is used in the current version of the SWEHB. Since it is the default, the same header and footer is used for the SWEHBVD and SITE spaces. Older versions of SWEHB have unique themes design for their spaces. Since there are links in the theme unique to the space that they are designed for, it is necessary to these themes so users will not get lost using header links to navigate the version. 

2.2 Theme Details

Each theme is built using code stored in a ZIP file. Work with IT to see the current active ZIP file and the code sections within it. All of the code is in HTML and not very user friendly. It may take some time to find the item of code that needs to be changed. 

2.2.1 top.vm

This contains code for the top of the page. In the section headed "NAVIGATION SECTION FROM ORIGINAL SWEHB" you will find: 

    • Code for the link to NEN
    • CSS code which defines the look of buttons. 
    • A table used for positioning the navigation buttons in the header - in each button there are two "href" commands and a text area which form the the page link for the button. When a button is changed all three places must be changed at the same time. 

For example, if you want to change the "B. Institutional Requirements" button to "X. NASA Requirements" you would make the following changes in the code. 

Note
iconfalse
titleOriginal Code

<td>
<p style="width:100px;" onclick="window.location.href='/display/SWEHBVD/B.+Institutional+Requirements';" onmouseover="this.style.background='white';this.style.cursor='pointer';" onmouseout="this.style.background='#b0e0e6';this.style.cursor='cursor';" class="navitem"><span><a href="/display/SWEHBVD/B.+Institutional+Requirements">B. Institutional Requirements</a></span></p>
</td>

Note
iconfalse
titleNew Code

<td>
<p style="width:100px;" onclick="window.location.href='/display/SWEHBVD/X.+NASA+Requirements';" onmouseover="this.style.background='white';this.style.cursor='pointer';" onmouseout="this.style.background='#b0e0e6';this.style.cursor='cursor';" class="navitem"><span><a href="/display/SWEHBVD/X.+NASA+Requirements">X.+NASA+Requirements</a></span></p>
</td>

This all presumes that there is a page called "X. NASA Requirements"  in the space to go to. 

2.2.2 Button Size And Positioning

In this example, the "B. Institutional Requirements" button renders inside of a box that is "width:100px" wide. The  width of each button determines if wrapping is needed to contain the text in the button. It the button is not wide enough, the wrapping will yield undesirable results. It is necessary to look at all of the button widths and adjust them to contain the text in the button. Keep in mind that space is needed to accommodate the Search button at the far right (about 240px). 

Note
iconfalse
titleOriginal Code

<td>
<p style="width:100px;" onclick="window.location.href='/display/SWEHBVD/B.+Institutional+Requirements';" onmouseover="this.style.background='white';this.style.cursor='pointer';" onmouseout="this.style.background='#b0e0e6';this.style.cursor='cursor';" class="navitem"><span><a href="/display/SWEHBVD/B.+Institutional+Requirements">B. Institutional Requirements</a></span></p>
</td>

2.3 Banner Image

The Banner Image is the graphic seen at the top of the page. The image is managed in the PowerPoint file "SWEHB Multiver Graphics.pptx" in the Book A. Introduction page. There are slides for all of the versions of the SWEHB in use. On the page for SWEHBVD there are two images that can be used as a starting point for the next version of the SWEHB. 

Image Added

Each banner image is composed of: 

  • A background image - this comes from the combination of two images from an old version of NEN 
    • on the left is some digital code  to the left of a world map. 
    • on the right is the NEN blue background with "NASA ENGINEERING NETWORK" embedded in it. 
  • On top of the left image is a text box that may be changed to identify where the content of the version comes from. In the case of SWEHBVD, the "Content based on NPR7150.2D"

There are two images built for use: 

  • SWEHBVD_banner.jpg - is used when the version is in production
  • SWEHBVD_draft.jpg - is used when the version is in pre-production (draft mode) for review review. It has "DRAFT" in red bold cap text over the world map. 

2.4 Banner Management

When a new version of the SWEHB is in development, a new theme is built for the new space in which the content is contained. A new theme is built for the space and customized while the new SWEHB Version is being built. In this example, the new version will be SWEHBVE. During this time, the "SWEHBVE_draft.jpg" image is used to let reviewers know that they are in the new space. 

When the new version is ready to be promoted to production, the banner will be changed to SWEHBVE_banner.jpg. Also when the version is promoted to Production, the new theme becomes the default theme and the old version space (SWEHBVD) is coded to display the SWEHBVD theme. 

The banners are stored in the Refined Theme manager in the Images area. 



Page Editor: Tim Crumbley
NASA Official: Tim Crumbley
Accessibility
NASA Software Engineering Handbook - A service of the NASA Office of the Chief Engineer
NASA Privacy Statement
______________________________________________________________________________