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.
Customizing the Appearance of the Example App
Customizing the Appearance of the Example App
To dive straight in, first open the Example App via your Scrivito dashboard or Netlify account. Then activate the Scrivito editing interface (if it isn’t already active), for example by accessing your website via edit.scrivito.com, or by inserting “scrivito/” into the URL, directly after the hostname (and port). The URL should then 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 “Page properties” dialog which can be opened via the main menu at the top right corner.
With Scrivito-based applications, it is common practice to make overall, site-wide properties available through the homepage. A logo or a header image, for example, 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 approach.
The footer is a side-wide component, too, but it is editable in place, and thus has not been included in the homepage properties. Changing such global pieces of content on any page causes them 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 causing the header to transition from dark to light. The images to be used as the logo can be set in the page properties.
When viewing the homepage (click the logo to open it if you navigated elsewhere), click “Open page properties” from the main menu and select the “Site settings” tab. You should now see the dialog with the two logo options underneath the site name.
In editing mode, clicking an image input field in this dialog 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 (selected or uploaded) logo image highlighted in the Content Browser, click “Select” at the bottom right to replace the corresponding image. Go ahead, give it a try!
Now upload and select the second logo. For this tutorial, we converted the Scrivito Example App to the ACME App.
It’s best to have the same image for both logo 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 logo versions, check how they look as a whole 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 main 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 harmonizes best with the page content.
As mentioned above with respect to the logo, you can also upload your own header images. Just keep in mind that such an 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. The gradient option highlights the center by gradually dimming the image towards the edges.
Do you like the outcome of your changes? Don’t forget to publish your working copy, and also take a look at the other site settings of the homepage!