Change background colour of pages to fit in with theme throughout website

[LittleWins]

Hi, 

I am using the Canyon theme and really struggling to change the background colour of any individual pages to match the theme I'm using throughout the rest of the site. It is for my About Us page, my contact age and all my policy pages etc. How do I do this? 

Also, is it possible to add an icon to each menu item in my drawer? I've set up my favicon and I'd like to also use it alongside each menu option (Home, Our Story, etc)

Thank so much in advance.

O

[steve_michael2]

Hi @LittleWins  , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[LittleWins]

Hi steve, its https://dnxccv-uy.myshopify.com/ and password is serenade21?

[LittleWins]

Hi, thank you so much for your help. I will give it a go and see if I can do it and I'll let you know. Thanks! 

[namphan · Accepted solution]

Hi @LittleWins,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.content-for-layout {
    background: #fff9f4;
    background-attachment: fixed;
}

[LittleWins]

Thanks so so much, this worked perfectly!

Any chance you know how to help with icons? is it possible to add an icon to each menu item in my drawer? I've set up my favicon and I'd like to also use it alongside each menu option (Home, Our Story, etc)

[namphan]

Hi @LittleWins,

Please send me the password again, I will check it again

[LittleWins]

Hi @namphan , I've changed it back so it's https://dnxccv-uy.myshopify.com/ and password is serenade21?

thanks so much

[namphan]

Hi @LittleWins,

Are you looking to add icons here?

[LittleWins]

Yes, this icon to each item if possible? 

[namphan]

Hi @LittleWins,

All items will have the same icon.

Please send me svg icon, I will help you check it

[LittleWins]

Hi @namphan yes exactly. I am not able to attach the svg file, can I email it to you, or send it in another way?

[namphan]

Hi @LittleWins,

Sure, you can send me email, I will check it soon

[namphan]

Hi @LittleWins,

Please go to header-drawer.liquid file and change all code:

{% comment %}
  Renders a header drawer menu for mobile and desktop.

  Usage:
  {% render 'header-drawer' %}
{% endcomment %}

<header-drawer data-breakpoint="{% if section.settings.menu_type_desktop == 'drawer' %}desktop{% else %}tablet{% endif %}">
  <details id="Details-menu-drawer-container" class="menu-drawer-container">
    <summary
      class="header__icon header__icon--menu header__icon--summary link focus-inset"
      aria-label="{{ 'sections.header.menu' | t }}"
    >
      <span>
        {{- 'icon-hamburger.svg' | inline_asset_content -}}
        {{- 'icon-close.svg' | inline_asset_content -}}
      </span>
    </summary>
    <div id="menu-drawer" class="gradient menu-drawer motion-reduce color-{{ section.settings.menu_color_scheme }}">
      <div class="menu-drawer__inner-container">
        <div class="menu-drawer__navigation-container">
          <nav class="menu-drawer__navigation">
            <ul class="menu-drawer__menu has-submenu list-menu" role="list">
              {%- for link in section.settings.menu.links -%}
                <li>
                  {%- if link.links != blank -%}
                    <details id="Details-menu-drawer-menu-item-{{ forloop.index }}">
                      <summary
                        id="HeaderDrawer-{{ link.handle }}"
                        class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}"
                        style="column-gap: 8px;"
                      >
                        <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 271.922 269.935" width="18" height="18">
                          <defs>
                            <style>
                              .cls-1 {
                                fill: #ddaf6e;
                              }
                            </style>
                          </defs>
                          <path class="cls-1" d="M140.176,267.93c-38.652-.807-79.126-16.47-106.249-45.02-11.474-12.623-18.709-27.577-23.924-43.961C-.37,146.911-.212,120.838,11.643,89.118c10.618-32.066,24.476-47.272,52.378-65.397C91.096,4.298,126.922-2.242,159.301,4.683c19.713,4.85,40.072,11.959,56.723,23.566,9.477,6.842,17.47,15.979,24.357,25.646,10.868,15.571,21.558,32.013,26.076,50.676,7.268,35.153,1.393,73.094-18.752,103.149-22.698,33.813-66.729,60.566-107.284,60.21h-.245ZM143.094,14.934c-16.822-1.202-34.834.962-50.473,7.285-10.788,4.419-21.051,11.243-31.184,18.528-7.595,5.532-14.927,11.566-20.837,18.885-13.552,16.949-24.46,49.842-25.588,71.824-.34,29.998,10.645,66.689,32.78,87.561,29.47,26.894,76.281,42.721,114.876,33.688,18.512-4.435,35.854-14.144,50.719-26.013,21.554-17.186,36.18-41.633,41.118-68.292,3.578-20.564,3.834-43.392-4.245-62.957-4.912-11.682-11.839-22.566-19.15-33.012-5.765-8.171-12.233-15.953-20.129-22.142-17.232-13.184-45.903-23.271-67.646-25.334l-.241-.02Z"></path>
                          <path class="cls-1" d="M133.074,49.774c-2.082,0-2.778,5.054-3.616,8.744-2.349,10.345-8.653,33.744-12.813,49.131-1.156,4.275-2.004,10.54-7.133,12.182-8.927,2.858-20.587,6.489-36.647,10.728-5.318,1.403-9.385,1.524-9.385,3.845,0,2.289,7.105,4.406,10.385,5.652,7.762,2.947,14.737,6.113,21.214,9.231,5.389,2.557,5,2.168,5.139,8.774.274,14.766.072,38.417.17,46.88.028,2.387-.589,8.812,1.503,9.44,2.899.87,7.464-5.661,11.256-10.393,6.72-8.387,16.366-20.385,23.43-28.399,3.629-4.193,4.28-3.987,10.553-1.421,9.818,4.009,17.912,7.305,27.572,11.25,4.521,1.808,11.303,5.328,12.34,3.743.812-1.241-.997-5.918-2.171-9.488-3.32-10.089-6.64-21.042-9.096-30.889-1.572-6.063-1.361-7.317,4.115-12.115,8.616-7.549,14.009-11.126,23.207-18.347,2.503-1.965,5.956-4.848,5.254-6.236-.696-1.376-4.031-.623-9.599-.538-13.945.213-23.515.319-37.391.813-6.079.216-7.82,1.959-9.811-4.937-5.226-18.101-12.844-42.18-15.339-51.763-.489-1.879-1.165-5.886-3.135-5.886Z"></path>
                        </svg>
                        {{ link.title | escape }}
                        <span class="svg-wrapper">
                          {{- 'icon-arrow.svg' | inline_asset_content -}}
                        </span>
                        <span class="svg-wrapper">
                          {{- 'icon-caret.svg' | inline_asset_content -}}
                        </span>
                      </summary>
                      <div
                        id="link-{{ link.handle | escape }}"
                        class="menu-drawer__submenu has-submenu gradient motion-reduce"
                        tabindex="-1"
                      >
                        <div class="menu-drawer__inner-submenu">
                          <button class="menu-drawer__close-button link link--text focus-inset" aria-expanded="true">
                            <span class="svg-wrapper">
                              {{- 'icon-arrow.svg' | inline_asset_content -}}
                            </span>
                            {{ link.title | escape }}
                          </button>
                          <ul class="menu-drawer__menu list-menu" role="list" tabindex="-1">
                            {%- for childlink in link.links -%}
                              <li>
                                {%- if childlink.links == blank -%}
                                  <a
                                    id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                                    href="{{ childlink.url }}"
                                    class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"
                                    {% if childlink.current %}
                                      aria-current="page"
                                    {% endif %}
                                  >
                                    {{ childlink.title | escape }}
                                  </a>
                                {%- else -%}
                                  <details id="Details-menu-drawer-{{ link.handle }}-{{ childlink.handle }}">
                                    <summary
                                      id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                                      class="menu-drawer__menu-item link link--text list-menu__item focus-inset"
                                    >
                                      {{ childlink.title | escape }}
                                      <span class="svg-wrapper">
                                        {{- 'icon-arrow.svg' | inline_asset_content -}}
                                      </span>
                                      <span class="svg-wrapper">
                                        {{- 'icon-caret.svg' | inline_asset_content -}}
                                      </span>
                                    </summary>
                                    <div
                                      id="childlink-{{ childlink.handle | escape }}"
                                      class="menu-drawer__submenu has-submenu gradient motion-reduce"
                                    >
                                      <button
                                        class="menu-drawer__close-button link link--text focus-inset"
                                        aria-expanded="true"
                                      >
                                        <span class="svg-wrapper">
                                          {{- 'icon-arrow.svg' | inline_asset_content -}}
                                        </span>
                                        {{ childlink.title | escape }}
                                      </button>
                                      <ul
                                        class="menu-drawer__menu list-menu"
                                        role="list"
                                        tabindex="-1"
                                      >
                                        {%- for grandchildlink in childlink.links -%}
                                          <li>
                                            <a
                                              id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                              href="{{ grandchildlink.url }}"
                                              class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if grandchildlink.current %} menu-drawer__menu-item--active{% endif %}"
                                              {% if grandchildlink.current %}
                                                aria-current="page"
                                              {% endif %}
                                            >
                                              {{ grandchildlink.title | escape }}
                                            </a>
                                          </li>
                                        {%- endfor -%}
                                      </ul>
                                    </div>
                                  </details>
                                {%- endif -%}
                              </li>
                            {%- endfor -%}
                          </ul>
                        </div>
                      </div>
                    </details>
                  {%- else -%}
                    <a
                      id="HeaderDrawer-{{ link.handle }}"
                      href="{{ link.url }}"
                      class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.current %} menu-drawer__menu-item--active{% endif %}"
                      {% if link.current %}
                        aria-current="page"
                      {% endif %}
                      style="column-gap: 8px;"
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 271.922 269.935" width="18" height="18">
                        <defs>
                          <style>
                            .cls-1 {
                              fill: #ddaf6e;
                            }
                          </style>
                        </defs>
                        <path class="cls-1" d="M140.176,267.93c-38.652-.807-79.126-16.47-106.249-45.02-11.474-12.623-18.709-27.577-23.924-43.961C-.37,146.911-.212,120.838,11.643,89.118c10.618-32.066,24.476-47.272,52.378-65.397C91.096,4.298,126.922-2.242,159.301,4.683c19.713,4.85,40.072,11.959,56.723,23.566,9.477,6.842,17.47,15.979,24.357,25.646,10.868,15.571,21.558,32.013,26.076,50.676,7.268,35.153,1.393,73.094-18.752,103.149-22.698,33.813-66.729,60.566-107.284,60.21h-.245ZM143.094,14.934c-16.822-1.202-34.834.962-50.473,7.285-10.788,4.419-21.051,11.243-31.184,18.528-7.595,5.532-14.927,11.566-20.837,18.885-13.552,16.949-24.46,49.842-25.588,71.824-.34,29.998,10.645,66.689,32.78,87.561,29.47,26.894,76.281,42.721,114.876,33.688,18.512-4.435,35.854-14.144,50.719-26.013,21.554-17.186,36.18-41.633,41.118-68.292,3.578-20.564,3.834-43.392-4.245-62.957-4.912-11.682-11.839-22.566-19.15-33.012-5.765-8.171-12.233-15.953-20.129-22.142-17.232-13.184-45.903-23.271-67.646-25.334l-.241-.02Z"></path>
                        <path class="cls-1" d="M133.074,49.774c-2.082,0-2.778,5.054-3.616,8.744-2.349,10.345-8.653,33.744-12.813,49.131-1.156,4.275-2.004,10.54-7.133,12.182-8.927,2.858-20.587,6.489-36.647,10.728-5.318,1.403-9.385,1.524-9.385,3.845,0,2.289,7.105,4.406,10.385,5.652,7.762,2.947,14.737,6.113,21.214,9.231,5.389,2.557,5,2.168,5.139,8.774.274,14.766.072,38.417.17,46.88.028,2.387-.589,8.812,1.503,9.44,2.899.87,7.464-5.661,11.256-10.393,6.72-8.387,16.366-20.385,23.43-28.399,3.629-4.193,4.28-3.987,10.553-1.421,9.818,4.009,17.912,7.305,27.572,11.25,4.521,1.808,11.303,5.328,12.34,3.743.812-1.241-.997-5.918-2.171-9.488-3.32-10.089-6.64-21.042-9.096-30.889-1.572-6.063-1.361-7.317,4.115-12.115,8.616-7.549,14.009-11.126,23.207-18.347,2.503-1.965,5.956-4.848,5.254-6.236-.696-1.376-4.031-.623-9.599-.538-13.945.213-23.515.319-37.391.813-6.079.216-7.82,1.959-9.811-4.937-5.226-18.101-12.844-42.18-15.339-51.763-.489-1.879-1.165-5.886-3.135-5.886Z"></path>
                      </svg>
                      {{ link.title | escape }}
                    </a>
                  {%- endif -%}
                </li>
              {%- endfor -%}
            </ul>
          </nav>
          <div class="menu-drawer__utility-links">
            {%- if shop.customer_accounts_enabled -%}
              <a
                href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
                class="menu-drawer__account link focus-inset h5 medium-hide large-up-hide"
                rel="nofollow"
              >
                {%- if section.settings.enable_customer_avatar -%}
                  <account-icon>
                    {%- if customer and customer.has_avatar? -%}
                      {{ customer | avatar }}
                    {%- else -%}
                      <span class="svg-wrapper">
                        {{- 'icon-account.svg' | inline_asset_content -}}
                      </span>
                    {%- endif -%}
                  </account-icon>
                {%- else -%}
                  <span class="svg-wrapper">
                    {{- 'icon-account.svg' | inline_asset_content -}}
                  </span>
                {%- endif -%}
                {%- liquid
                  if customer
                    echo 'customer.account_fallback' | t
                  else
                    echo 'customer.log_in' | t
                  endif
                -%}
              </a>
            {%- endif -%}
            {%- if localization.available_countries or localization.available_languages -%}
              <div class="menu-drawer__localization header-localization">
                {%- if localization.available_countries and localization.available_countries.size > 1 -%}
                  <localization-form>
                    {%- form 'localization', id: 'HeaderCountryMobileForm', class: 'localization-form' -%}
                      <div>
                        <h2 class="visually-hidden" id="HeaderCountryMobileLabel">
                          {{ 'localization.country_label' | t }}
                        </h2>
                        {%- render 'country-localization', localPosition: 'HeaderCountryMobile' -%}
                      </div>
                    {%- endform -%}
                  </localization-form>
                {% endif %}

                {%- if localization.available_languages and localization.available_languages.size > 1 -%}
                  <localization-form>
                    {%- form 'localization', id: 'HeaderLanguageMobileForm', class: 'localization-form' -%}
                      <div>
                        <h2 class="visually-hidden" id="HeaderLanguageMobileLabel">
                          {{ 'localization.language_label' | t }}
                        </h2>
                        {%- render 'language-localization', localPosition: 'HeaderLanguageMobile' -%}
                      </div>
                    {%- endform -%}
                  </localization-form>
                {%- endif -%}
              </div>
            {%- endif -%}
            <ul class="list list-social list-unstyled" role="list">
              {%- if settings.social_twitter_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_twitter_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-twitter.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_facebook_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_facebook_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-facebook.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_pinterest_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_pinterest_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-pinterest.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_instagram_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_instagram_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-instagram.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_tiktok_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_tiktok_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-tiktok.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_tumblr_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_tumblr_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-tumblr.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_snapchat_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_snapchat_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-snapchat.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_youtube_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_youtube_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-youtube.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_vimeo_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_vimeo_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-vimeo.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </details>
</header-drawer>