# 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.

***

<mark style="color:green;">With</mark> <mark style="color:green;"></mark><mark style="color:green;">**Elrond 2.0**</mark><mark style="color:green;">, there are now two different cover styles available: the classic</mark> <mark style="color:green;"></mark><mark style="color:green;">**Icon**</mark> <mark style="color:green;"></mark><mark style="color:green;">style and a</mark> <mark style="color:green;"></mark><mark style="color:green;">**Full Background**</mark> <mark style="color:green;"></mark><mark style="color:green;">cover.</mark>

### 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:

<pre><code><strong>&#x3C;style>
</strong>  :root{
    --cover-opacity: 0.6;   
<strong>   }
</strong>&#x3C;/style>
</code></pre>

4. 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!

{% hint style="warning" %}
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.
{% endhint %}

### How to change the Cover Image size for the *<mark style="color:purple;">Icon option</mark>*?

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.

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

4. Finally, click **"Save"**.

{% hint style="info" %}
You can also include other custom variables within the same `:root` block, such as `--header-logo-size` or `--footer-logo-size`
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.hedwik.io/elrond/customization/site-publication-cover.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.