This guide covers how a logo that is squared/circular can be used in Refined as a background. Settings are made in the Theme and in the Layout.
| Info |
|---|
There may be changes in the layout of the theme editor between our different products. |
...
Guide
...
| Rw step |
|---|
Creating the image resource
Start out by using your logo to place on a colored background. In this case, the logo is the shape in the middle, and the background is the color that will be used on the site.
⚠ Make sure to leave space in the image above and below your logo, and to make the proportions of the image similar to what they are in this example.
💡 Save it in x2 size for it to look nice on retina displays as well, max 2MB
...
| Rw step |
|---|
Theme settings
...
Go to Refined Administration > Themes > Add a new one, or edit an existing theme.
...
In Theme Editor > Main Appearance,
Use option Partial.
Set the background to Image and upload your newly created image
For the Image settings, use Full and make sure the image is positioned in the center for top to bottom.
In the same area of settings, set the Banner height to the same height as of your background image, or half of its size. In this example, the image is 1000px, and I will use 500px.
In Theme Editor > Header
Set the Color to transparent
...
In Theme Editor > Start page
Toggle on the Fill background option
...
Save the theme.
Go to your site, where the theme is applied (the Theme is applied to the site via the Site Builder), and edit the layout.
...
To set your company logo as your Refined site’s background:
Create an image that shows your logo on a coloured background, with the proportions 3:1. Place the logo in the middle, leaving coloured space above and below it. Make the picture as high-quality as you can, with a maximum of 2 MB.
Go to the Theme editor > Main Appearance and make the following settings:
Background: upload your image
Image options: full
Position image: centered
Banner height: the same height as your background image, or half of it.
In Theme editor > Header, set the background colour to transparent.
In Theme editor > Start page, toggle on Fill background.
Save the theme and go to the home page of the site you applied the theme to.
Edit the layout, and:
Make sure the section is set to Transparent.
Add a Search Highlight or Navigation Highlight module
...
Set the module’s height to match the height of your background image. In our example, this
...
is
...
Publish the layout
...
You should now have a result where the logo is visible in a neat way in most screen dimensions.
500 pixels.
...