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, and if you cannot find the options, please reach out to Refined Support for further help. |
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.
Go to the Theme editor > Main Appearance and make the following settings:
Background: upload your image
Image options: full
Position image: centered
In Theme editor > Site Homes, choose one of the two bottom options (Alternate or Wide Alternate)
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
...
500 pixels.
...
Publish the layout
...
You should now have a result where the logo is visible in a neat way in most screen dimensions.
Result
...
Variations
Of course you can also choose to offset the logo to one side if you’re feeling adventurous.
...
Need further help?
| Ui button | ||||||
|---|---|---|---|---|---|---|
|