Change template images

Default background image

In the previous step, you made changes to the CSS Properties on marketplaceDefaults.css file. This time you make changes to global CSS classes. .defaultBackgroundImage class can be found in there too. It is used to provide a background image for pages such as Authentication Page for sign-up and login.

└── src
    └── styles
        └── marketplaceDefaults.css

/* ================ Plain global CSS glasses ================ */

/* Full screen Background image located in root-folder/src/assets */
.defaultBackgroundImage {
  /* Gradient direction and overlaying the black color on top of the image for better readability */
  background: linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.6)
    ), url('../assets/background-1440.jpg');

  /* Add loading color for the div */
  background-color: var(--matterColor);

  /* Cover the whole screen with the background image */
  background-size: cover;

  /* Align the image within the container */
  background-position: center center;

  @media (--viewportLarge) {
    border-radius: 40px;
    border: solid 36px var(--matterColorBright);
  }
}

└── src
    └── styles
        └── propertySets.css

/* Full screen Background image located in root-folder/src/assets */
--backgroundImage: {
  /* Gradient direction and overlaying the black color on top of the image for better readability */
  background: linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.6)
    ), url('../../assets/background-1440.jpg');

  /* Add loading color for the div */
  background-color: var(--matterColor);

  /* Cover the whole screen with the background image */
  background-size: cover;

  /* Align the image within the container */
  background-position: center center;

  @media (--viewportLarge) {
    border-radius: 40px;
    border: solid 36px var(--matterColorBright);
  }
}

That background styling-rule refers to background-1440.jpg image in the assets directory:

└── src
    └── assets
        └── background-1440.jpg

So, to change it, we could just save a different image as 'background-1440.jpg' to replace the default background image (or you can add a new image and then change the filename in .defaultBackgroundImage class). The image should be 1440 pixels wide so that it doesn't look bad on retina displays.

Here's an image, we used in this tutorial:
Summer house by Markus Spiske (cropped)

Images in 'assets' or Image Assets?

The FTW templates use two types of assets:

• bundled assets and
• hosted assets

Bundled assets are a part of the client application. For images, they live in the src/assets folder of the client codebase. Hosted assets, on the other hand, are fetched from the Asset Delivery API. This tutorial only focuses on bundled assets. You can read more about hosted assets.

Images for social media

In the same assets directory, there are a couple of other images that you should also pay attention to:

└── src
    └── assets
        ├── background-1440.jpg
        ├── saunatimeFacebook-1200x630.jpg
        └── saunatimeTwitter-600x314.jpg

These images (saunatimeFacebook-1200x630.jpg and saunatimeTwitter-600x314.jpg) are used by social media sites to generate previews when your marketplace is shared in their platforms.

The default content is Saunatime branded so these images should be changed too:

Here are two image files you could use in the context of this tutorial:

• Facebook sharing preview graphics
• Twitter sharing preview graphics

Steps to follow:

1. Save those files to the assets directory
2. Find all the modules where saunatimeFacebook-1200x630.jpg and saunatimeTwitter-600x314.jpg are imported. There should be 2 files:
   • src/components/Page/Page.js
   • src/containers/LandingPage/LandingPage.js
     (This is an example of how to overwrite default sharing images per page.)
3. Change the imported asset files

Favicon and app icons

There's also a second type of generic image assets: favicon and other app icons:

└── public
    └── static
        └── icons
            ├── android-chrome-192x192.png
            ├── android-chrome-512x512.png
            ├── apple-touch-icon.png
            ├── browserconfig.xml
            ├── favicon-16x16.png
            ├── favicon-32x32.png
            ├── favicon.ico
            ├── map-marker-32x32.png
            ├── mstile-150x150.png
            └── safari-pinned-tab.svg

The default favicon of FTW-daily template, Saunatime, is a flame icon:

To change it, we need to have favicon files - or if you have a square logo available, you can follow this guide article to generate those icons.

In the context of this tutorial, we just show how to change the favicons. You can use these files:

• favicon.ico
• favicon-16x16.png
• favicon-32x32.png

Then go to public/static/icons/ directory and replace the current favicon* files with the new ones. After those files have been saved, you should see a new favicon in the browser's tab:

We also want to modify the landing page to use the cottage theme. We will do that next.
› Go to the next article