Changing the Look of the Example App

In this short tutorial, we’re going to demonstrate how the basic look and feel of the Scrivito Example App can be customized without changing the code of the application.

To dive straight in, first open the Example App via your Scrivito dashboard or Netlify account. Then switch on the Scrivito editing controls (if they aren’t already), for example by inserting “scrivito/” into the URL, directly after the hostname (and port). The URL should look something like this:

https://nice-name-3522.scrivito.net/scrivito/
https://nice-name-26311.netlify.com/scrivito/

You can now switch to Edit mode using the mode selector at the center of the top bar. If you’re not on a working copy already, you’ll be asked to create or select one.

How to set page and site properties

Next to populating a page with widgets, Scrivito lets you change specific page properties that cannot be edited in place, a header image size, page descriptions related to social media and the like. This can be accomplished using the “Edit/View page properties” item in the page menu. You can open this menu via the hamburger icon at the top right corner.

With Scrivito, it is common practice to make overall, site-wide properties available through the homepage. A logo or a header to be displayed on most pages, if not all, can then be maintained conveniently in one central place at the top-level page of the site. The Scrivito Example App follows this common practice.

The footer is a side-wide component, too, but it is editable in place, and thus has not been included in the page properties. Note that changing such parts on any page causes it to change on all other pages too.

Let’s customize one of the site settings available in the page properties dialog.

Exchanging the logo

The example app comes with a customizable logo consisting of two versions, one for a light background and one for a dark background. The logo, as you will see, changes when you scroll the page and the header transitions from dark to light. These particular images can be set in the page properties.

When viewing the homepage (click the logo to open it if you navigated elsewhere), click “Edit page properties” and select the “Site settings” tab. You should now see the dialog with the two logos as the first two settings.

Clicking an image input field opens the Content Browser for selecting an existing image or uploading your own. To upload, just drag an image file from your desktop and drop it into the Content Browser.

With the (uploaded) logo image highlighted, click “Select” at the bottom right to replace the corresponding image. Go ahead, give it a try!

Now upload and select the other logo. For this tutorial, we switched the Scrivito Example App to the ACME Example App.

It’s best to have the same image for both versions, but with opposing colors. The logos should be the same size and shape, but you can experiment with them and pick the right transition for you. Once you have set both logos, test it out by scrolling the page.

If you navigate to a different page, you'll notice that it also has the logo even though you haven’t set it – and cannot set it – in the properties of the page. As mentioned above, this is because the example app uses the logos from the homepage for all other pages too.

Changing header image styles

In the Scrivito example app, you can specify an individual header image for each page to make your pages livelier and even more appealing to the eye. If a page has been given a header, it also acts as the background of the logo, the navigation, and the search icon.

To change the header or one of its display options, open the properties dialog of the page, again using the page menu at the top right corner. This time, we’re not selecting the “Site settings” tab but stay on the “General” tab.

There are three header options, its height, the image to use, and whether a gradient should be applied to the image. Just experiment with them to find the combination that best fits your purposes.

As mentioned above with respect to the logo, you can upload your own header image after clicking the input field. Just keep in mind that the image occupies the full width of the page, so choosing one that is too narrow will impair its sharpness. 

The “small” and “medium” image height options cause the image to be cropped at the top and bottom edges to make it fit, while the gradient option highlights the center by gradually dimming the image towards the edges.

Here is an example of a small image without gradient vs. fullscreen image with gradient:

Like what you see? Don't forget to publish your changes. Have fun!