How to Add an Icon to the Page Header

You can add an icon to the header of the page by following the instructions below.

These are the major tasks:

1. Copy the icon's image file to the "st" subfolder of your Input (-i) folder.
2. Add a User Style to add the icon to the header.

After you complete the tasks above, and save your gsfile, when you make the site, the site will include an icon in the header.

Task 1

1. To copy the icon's image file to the "st" subfolder of your Input (-i) folder, begin in the MS Windows folder where the file resides. Click the image file once to select it, then key CTRL+C to copy it. (Press and hold the CTRL key, press the "C" key, and release both keys.)
2. In GedSite, with your gsfile open, use the Utilities > Input Folder > Explore... command to open the Input (-i) folder.
3. if there is no "st" subfolder (and there usually won't be one), right-click in the Input (-i) folder and select New > Folder. Key "st" to specify that as the name of the new folder.
4. Double-click the "st" folder to open it.
5. Key CTRL+V to paste the image file into the "st" subfolder. (Press and hold the CTRL key, press the "V" key, and release both keys.)

After copying the image file into the "st" subfolder of the Input (-i) folder, when GedSite makes the site, it will copy the image file into the "st" subfolder of the Output (-o) folder.

Task 2

1. Follow the directions for the Copy / Paste User Style technique to copy the following User Style:

   selector-1:
    .gs-header
   
   parameters-1:
    min-height: 136px;
    padding-left: 136px;
    background-image: url("gear-128.png");
    background-position: 2px 2px;
    background-repeat: no-repeat;
       

2. Adjust the parameters in the User Style:
   • min-height and padding-left: set these values to about 8 pixels larger than the dimensions of your image. min-height should be 8px (or so) larger than the image height. padding-left should be about 8px larger than the image width.

     The example image is a square, 128px by 128px, so I set both min-height and padding-left to 136px.

   • background-image: Adjust the url() value to specify the name of your image file.
   • You may or may not want to adjust the background-position. The example specifies 2px in both directions to move the image in and down a bit from the top left of the background.

   If you want more space around the image, adjust min-height, padding-left, and background-position.

The min-height parameter ensures the header is tall enough to include the full icon.

The padding-left parameter moves the contents of the header to the right to provide open space for the icon on the left. Otherwise, the header text would appear over the icon.

The background-image parameter sets the background image for the header.

The background-position parameter determines the position of the icon in the header.

The background-repeat parameter indicates the image should not repeast to fill the full background of the header. The image will appear only once.