🌅Site Publication Cover

This feature is specific to the Elrond theme. For the visual integrity of the site, you need to fill in this area.

---

With Elrond 2.0, there are now two different cover styles available: the classic Icon style and a Full Background cover.

Select Cover Style

1. In the Theme settings, choose the appropriate Cover style based on your uploaded image—select Icon for a classic logo look or Full Background to cover the entire area.

2. If you're using Full Background, the image will be masked to match the theme design. To make it more visible, adjust the --cover-opacity setting. To do this, open Code injection from the settings, then click on the Site Header tab.

3. Paste the following code into the section that opens:

<style>
  :root{
    --cover-opacity: 0.6;   
   }
</style>

1. You can enter values between 0 and 1 in this field. If you're already using other codes inside :root in the Site Header area, simply add the --cover-opacity setting anywhere within that block.

Adding a Cover

1. After clicking on the ⚙️ Settings icon in Ghost Admin, go to the "Title & Description" tab under the General Settings section.

2. In this "Site description" field, you create the text for your Cover area. Fill in this field appropriately, and then save it.

3. Afterward, click on the "Design & Branding" tab, scroll down in the opened window, and find the "Publication cover". The image you add here will be displayed in the Cover area. You can add a icon, logo, or big image.

4. Finally, click on the "Save" button in the top right corner. That's it!

If you don't add an image to the Publication cover section, only the site description will be visible in the cover area on your homepage.

How to change the Cover Image size for the Icon option?

1. In previous versions, this was done directly through the Ghost panel, but now you’ll need to do it from the Code Injection section.

2. Open Code Injection from the Ghost settings, then click on the Site Header tab.

3. Paste the code below into the section that opens, and choose your desired Cover Image size.

<style>
  :root{
    --cover-image-height: 100px; 
   }
</style>

1. Finally, click "Save".

You can also include other custom variables within the same :root block, such as --header-logo-size or --footer-logo-size