Header, logo and footer

Norsk

Typically the header and footer are the top and bottom sections that remain the same whichever webpage a visitor navigates to. The header and footer typically define the style and design of a website and contain links to other pages, a logo or title of the website, and contact information.

Header

In the web page layout, the header is the upper part of the webpage. It is in the header we place the logo.

In our code, we have set up a simple way to add a logo in the header. We have used the selector .container-fluid to create a responsive container in the header itself. Thus, we have two selectors for the header and can style them in different ways. The main header is the one that spans the entire width:

  header {
    height: 150px; /*Høyde*/
    background-color: white; /*Valgfritt*/
    background-position: center; 
    margin-bottom: 15px; /*Anbefales å ha dette for å få mer luftrom rundt headern*/
    margin-top: 15px; /*Anbefales å ha dette for å få mer luftrom rundt headern*/
}

We can change the background color and have our own background image in the header.

The container that contains the logo itself is like this:

header .container-fluid .row .col-sm-12 {
  background: url("img/logo.png") no-repeat top;
  background-size: contain; 
  background-position: center;
}

Logo

Which image format should be used for the logo? We can use three types of image formats:

JPG/JPEG: This image format takes up very little storage space and is quick to upload and download.

PNG: Provides high quality images and detailed icons.

The SVG file format: is two-dimensional graphics and illustrations. Also called a vector file, which means that it can be scaled up or down without losing any of the resolution.

If you want a fast-loading compressed image, choose a JPG format. If you're looking for a clear, high-quality image, choose a PNG.

The image file for the logo is downloaded and placed in the img folder.

In this example, the file we will use is called logo.png. We copy the entire file name and paste it into this code to define the file location, like this:

header .container-fluid .row .col-sm-12 {
  background: url("img/logo.png") no-repeat top;
  background-size: contain; 
  background-position: center;
}

Footer

Footer is the field at the bottom of a website. A footer usually contains contact information and other useful links.

The footer consists of the footer and the footertext. For the bottom element itself, we can change the height, background color and we can also add background images.

The footertext itself can be changed and formatted in Compose. This is done in the process builder in the properties in settings:

The default footertext is sat as:

We can change the footertext to for example: Drevet av [bold][link url="https://usecompose.com/"]Compose[/link][/bold]

The way you add a clickable URL and format the text are described here: Formatting text

Further styling are done with CSS. The selector footer a{} belong to the URL. Here we can use properties to define e.g. colors for the URL.

footer {
  text-align: center; /*plassering av bunnteksten*/
  padding: 30px;
  background-color: Grey;
  margin-top: 10px;
}

footer a {
  color: var(--Blue); /*endre farge på hyperlenken*/
}