Summary
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.
...
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
...
Go to your site, where the theme is applied (the Theme is applied to the site via the Site Builder), and edit the layout.
...
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
...
500 pixels.
...
Publish the layout
...
You should now have a result where the logo is visible in a neat way in most screen dimensions.
...