Adding a background color to Page title: Dawn Theme

[diva35]

Hi! I am trying to add a color to the pagination on my pages and collection pages, and center the page name throughout the theme. I am familiar with code and some development, but I don’t know how to add a a color picker to the collections and regular page templates.

The blue areas are where I want to add the option to choose a background color.

[DavidEKim]

Hi,
They are the collection pages.
To change the settings of the title and background color, you can customize them from theme editor. The Dawn theme has the function to change the background color of the title.
Please go to Online Store > Customize > Click Homepage (Top center) and change to Collections > Default collection.
Please check the screenshot below.

To center the title, please go to Edit code > Assets > base.css file and add the code below to the bottom of the file.

h1.collection-hero__title {
  text-align: center;
}

Hope it helps.
Thanks.

[diva35]

Thank you so much David! I am hoping to add the color on the default page template as well. So far I have added the schema and json to add color to the background, but it is not covering the entire area:

[diva35]

Figured it out! I added the line of code above the

in the main-page.liquid file. For anyone else trying to accomplish this:

Locate the {%- endstyle -%} and remove the code under it until the {% schema %}.

Replace it with this code:

{{ page.title | escape }}

{{ page.content }}

Add this code under {% schema %}

{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”
},

[DavidEKim]

To center the title for about page (and other pages), please add the code below to assets/section-main-page.css file.

@media screen and (min-width: 750px) {
  .main-page-title {
    margin: 2rem 0 !important;
    text-align: center;
  }
}

If you accept my reply as a solution, other users can find the solution as you had.

Hope it helps.

Thanks.

[diva35]

Thank you so much David!

[DavidEKim]

Hey,

It’s funny that you select your reply as a solution and the schema you added is completely unnecessary for the Dawn theme because you can simply add a rich text section and make it as what you made (the schema).

Just follow the steps below to make the title (better control).

1. Go to Customize > Click Homepage (Top center) for dropdown menu > Pages > Default page.

2. On your left hand, click “Add section”.

3. Select “Rich text” and move (drag) the rich text section above the page (page content).

4. Remove other blocks except title.

5. Click title and click dynamic source instead of text (as below)

6. You can adjust the height of the header.

7. Leave from the title and click “Rich text”.

8. Adjust the settings include the background color. You can edit the alignment and padding too.

9. Save and exit.

That’s it.

Hope it helps.

Thanks.