Need a code to change page color to black

UsmanSipra · October 10, 2021, 10:53am

Hi,

I am in need of any code where you can customize a page color. For example I want to add only 1 page where I can manually select background color i;e black or any color hex.

While the rest of the pages can be use default settings.

Please help.

UsmanSipra · October 10, 2021, 10:57am

PS; I am using Debute Theme

dmwwebartisan · October 10, 2021, 11:34am

@UsmanSipra

Please share your stroe URL & screenshot what do you want.

Thanks!

UsmanSipra · October 10, 2021, 11:52am

Hi,

Thanks for your reply. Let me explain.

I need to create a page like ABOUT US having black background and white text. Just like screenshot attached.

What happens is when I use this HTML code body {background-color: black;}, it turns my complete homepage background in black.

dmwwebartisan · October 10, 2021, 11:54am

@UsmanSipra

Please share store URL!

UsmanSipra · October 10, 2021, 12:03pm

https://www.tribeuno.co.uk/

dmwwebartisan · October 10, 2021, 12:08pm

@UsmanSipra

Please share your layout/theme.liquid file code

UsmanSipra · October 10, 2021, 12:11pm

I am using Debute Theme.

{% assign mlveda_code_flag = false %} {% if mlveda_code_flag == true %}
{% endif %}

{%- if settings.favicon != blank -%}

{%- endif -%}

{%- capture seo_title -%}
{%- if request.page_type == ‘search’ and search.performed == true -%}
{{ ‘general.search.heading’ | t: count: search.results_count }}: {{ ‘general.search.results_with_count’ | t: terms: search.terms, count: search.results_count }}
{%- else -%}
{{ page_title }}
{%- endif -%}
{%- if current_tags -%}
{%- assign meta_tags = current_tags | join: ', ’ -%} – {{ ‘general.meta.tags’ | t: tags: meta_tags -}}
{%- endif -%}
{%- if current_page != 1 -%}
– {{ ‘general.meta.page’ | t: page: current_page }}
{%- endif -%}
{%- assign escaped_page_title = page_title | escape -%}
{%- unless escaped_page_title contains shop.name -%}
– {{ shop.name }}
{%- endunless -%}
{%- endcapture -%}

{% include ‘avada-sc-setting’ %}

{%- if page_description -%}

{%- endif -%}

{% include ‘social-meta-tags’ %}
{% include ‘personizely’ %}

{%- if request.page_type contains ‘customers/’ -%}

{%- endif -%}

{{ content_for_header }}
{%- render ‘bold-pr’ -%}
{%- render ‘bold-common’ -%}
{{ shop.metafields.fontify.stylesheets }}
{% include ‘hulkcode_common’ %}{% if template contains ‘product’ or template contains ‘cart’ %}{% endif %}
{% if mlveda_code_flag == true %}
{% include ‘mlveda-multipricing-options’ %}
{% endif %}

{% capture cur %}{% include “booster-currency” %}{% endcapture %}{% unless cur contains “Liquid error” %}{{ cur }}{% endunless %}

{% include 'ufe-offer' %} {% include 'vitals-loader' %}

{% include ‘pagefly-header’ %}

{% render ‘zoorix-head’ %}

{% render ‘shogun-head’ %}
{% include ‘teeinblue-scripts’ %}

{% include “xo-insertcode-header” %}

{% include "xo-insertcode-body" %} {% include 'teeinblue-product-loader' %}

{%- if settings.enable_ajax -%}
{% include ‘cart-popup’ %}
{%- endif -%}

{% section ‘header’ %}

{% if mlveda_code_flag == false %} {{ content_for_layout }} {% capture stn_app %}{% include 'station-tabs' %}{% endcapture %}{% if stn_app contains 'Station.Apps' %}{{ stn_app }}{% endif %} {% endif %}

{% if mlveda_code_flag == true %}
{{ content_for_layout }}
{% capture stn_app %}{% include ‘station-tabs’ %}{% endcapture %}{% if stn_app contains ‘Station.Apps’ %}{{ stn_app }}{% endif %}
{% include ‘mlveda-multipricing-selectBox’ %}
{% include ‘mlveda-multipricing-selectors’ %}
{% endif %}

{% section ‘footer’ %}

{{ 'general.accessibility.refresh_page' | t }}
{{ 'general.accessibility.selection_help' | t }}

{% if mlveda_code_flag == true %} {% if template != 'cart' %} {% include 'mlveda-multipricing-updateprice' %} {% else %} {% endif %} {% else %} {% endif %}

{% comment %}//alpha currency snippet start{% endcomment %}
{% capture snippet_content %}
{% include ‘alphacurrencyconverter’ %}
{% endcapture %}
{% unless snippet_check contains ‘Liquid error’ %}
{{ snippet_content }}
{% endunless %}
{% comment %}//alpha currency snippet end{% endcomment %}
{% include ‘smile-initializer’ %}

{% include ‘adroll’ %}

{% render ‘mbc-bundles’ %}
{% include “xo-insertcode-footer” %}

{% include ‘product_pinch_zoom’ %}

{% include 'printcart' %}

{% if cart.currency.iso_code == shop.currency %}

{% else %}

{% endif %}

UsmanSipra · October 10, 2021, 12:25pm

I am using Debut theme ! Below is the theme.liquid

{% assign mlveda_code_flag = false %}

{% if mlveda_code_flag == true %}

{% endif %}

{%- if settings.favicon != blank -%}

{%- endif -%}

{%- capture seo_title -%}
{%- if request.page_type == ‘search’ and search.performed == true -%}
{{ ‘general.search.heading’ | t: count: search.results_count }}: {{ ‘general.search.results_with_count’ | t: terms: search.terms, count: search.results_count }}
{%- else -%}
{{ page_title }}
{%- endif -%}
{%- if current_tags -%}
{%- assign meta_tags = current_tags | join: ', ’ -%} – {{ ‘general.meta.tags’ | t: tags: meta_tags -}}
{%- endif -%}
{%- if current_page != 1 -%}
– {{ ‘general.meta.page’ | t: page: current_page }}
{%- endif -%}
{%- assign escaped_page_title = page_title | escape -%}
{%- unless escaped_page_title contains shop.name -%}
– {{ shop.name }}
{%- endunless -%}
{%- endcapture -%}

{% include ‘avada-sc-setting’ %}

{%- if page_description -%}

{%- endif -%}

{% include ‘social-meta-tags’ %}
{% include ‘personizely’ %}

{%- if request.page_type contains ‘customers/’ -%}

{%- endif -%}

{{ content_for_header }}
{%- render ‘bold-pr’ -%}
{%- render ‘bold-common’ -%}
{{ shop.metafields.fontify.stylesheets }}
{% include ‘hulkcode_common’ %}{% if template contains ‘product’ or template contains ‘cart’ %}{% endif %}
{% if mlveda_code_flag == true %}
{% include ‘mlveda-multipricing-options’ %}
{% endif %}

{% capture cur %}{% include “booster-currency” %}{% endcapture %}{% unless cur contains “Liquid error” %}{{ cur }}{% endunless %}

{% include ‘ufe-offer’ %} {% include ‘vitals-loader’ %}

{% include ‘pagefly-header’ %}

{% render ‘zoorix-head’ %}

{% render ‘shogun-head’ %}
{% include ‘teeinblue-scripts’ %}

{% include “xo-insertcode-header” %}

{% include “xo-insertcode-body” %}

{% include ‘teeinblue-product-loader’ %}

{%- if settings.enable_ajax -%}
{% include ‘cart-popup’ %}
{%- endif -%}

{% section ‘header’ %}

{% section ‘footer’ %}

{{ ‘general.accessibility.refresh_page’ | t }}
{{ ‘general.accessibility.selection_help’ | t }}

{% if mlveda_code_flag == true %}
{% if template != ‘cart’ %}
{% include ‘mlveda-multipricing-updateprice’ %}
{% else %}

{% endif %}
{% else %}

{% endif %}

{% comment %}//alpha currency snippet start{% endcomment %}
{% capture snippet_content %}
{% include ‘alphacurrencyconverter’ %}
{% endcapture %}
{% unless snippet_check contains ‘Liquid error’ %}
{{ snippet_content }}
{% endunless %}
{% comment %}//alpha currency snippet end{% endcomment %}
{% include ‘smile-initializer’ %}

{% include ‘adroll’ %}

{% render ‘mbc-bundles’ %}
{% include “xo-insertcode-footer” %}

{% include ‘product_pinch_zoom’ %}

{% include ‘printcart’ %}

{% if cart.currency.iso_code == shop.currency %}

{% else %}

{% endif %}

UsmanSipra · October 10, 2021, 12:28pm

I am using Debut Theme.


  
  

 

   
    
    
    
 
 {% assign mlveda_code_flag = false %}
  

  {% if mlveda_code_flag == true %}
  
    

  {% endif %}

    
  
  
  
  
  

  {%- if settings.favicon != blank -%}
    
  {%- endif -%}

  {%- capture seo_title -%}
    {%- if request.page_type == 'search' and search.performed == true -%}
      {{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
    {%- else -%}
      {{ page_title }}
    {%- endif -%}
    {%- if current_tags -%}
      {%- assign meta_tags = current_tags | join: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      – {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      – {{ shop.name }}
    {%- endunless -%}
  {%- endcapture -%}
  

  
 {% include 'avada-sc-setting' %}
  

  {%- if page_description -%}
    
  {%- endif -%}

  {% include 'social-meta-tags' %}
  {% include 'personizely' %}

  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  

  {%- if request.page_type contains 'customers/' -%}
    
  {%- endif -%}

  
  
  

  {{ content_for_header }}
{%- render 'bold-pr' -%}
{%- render 'bold-common' -%} 
 {{ shop.metafields.fontify.stylesheets }}
{% include 'hulkcode_common' %}{% if template contains 'product' or template contains 'cart' %}{% endif %}
 {% if mlveda_code_flag == true %}
    {% include 'mlveda-multipricing-options' %}
  {% endif %}

{% capture cur %}{% include "booster-currency" %}{% endcapture %}{% unless cur contains "Liquid error" %}{{ cur }}{% endunless %}

      
      
        {% include 'ufe-offer' %}	{% include 'vitals-loader' %}

 
{% include 'pagefly-header' %}
 
  {% render 'zoorix-head' %}
  

  {% render 'shogun-head' %}
  {% include 'teeinblue-scripts' %}

{% include "xo-insertcode-header" %}

{{ 'custom-fields.css' | asset_url | stylesheet_tag }}

 

{% include "xo-insertcode-body" %}

  {% include 'teeinblue-product-loader' %}

  {{ 'general.accessibility.skip_to_content' | t }}

  {%- if settings.enable_ajax -%}
    {% include 'cart-popup' %}
  {%- endif -%}

  {% section 'header' %}

  

    

    {% section 'footer' %}

    

    

    

    

      {{- 'sections.slideshow.navigation_instructions' | t -}}
    

  

  
    - {{ 'general.accessibility.refresh_page' | t }}

    - {{ 'general.accessibility.selection_help' | t }}
  

{% if mlveda_code_flag == true %}
  	{% if template != 'cart' %}
		{% include 'mlveda-multipricing-updateprice' %}
  	{% else %}
        
  	{% endif %}
  {% else %}
		
  {% endif %}

{% comment %}//alpha currency snippet start{% endcomment %}
 {% capture snippet_content %}
 {% include 'alphacurrencyconverter' %} 
{% endcapture %} 
{% unless snippet_check contains 'Liquid error' %}
 {{ snippet_content }}
 {% endunless %}
 {% comment %}//alpha currency snippet end{% endcomment %}
 {% include 'smile-initializer' %}

{% include 'adroll' %}
  

{% render 'mbc-bundles' %}
{% include "xo-insertcode-footer" %}

{% include 'product_pinch_zoom' %}

  

{% include 'printcart' %}

{% if cart.currency.iso_code == shop.currency %}

{% else %}

{% endif %}

UsmanSipra · October 10, 2021, 12:30pm

I am using Debut theme.

UsmanSipra · October 10, 2021, 12:33pm

How do I share the theme.Liquid code ? it is getting removed every time I paste it

dmwwebartisan · October 10, 2021, 12:38pm

@UsmanSipra

Please see following screenshot.

Thanks!

UsmanSipra · October 10, 2021, 12:39pm


  
  

 

   
    
    
    
 
 {% assign mlveda_code_flag = false %}
  

  {% if mlveda_code_flag == true %}
  
    

  {% endif %}

    
  
  
  
  
  

  {%- if settings.favicon != blank -%}
    
  {%- endif -%}

  {%- capture seo_title -%}
    {%- if request.page_type == 'search' and search.performed == true -%}
      {{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
    {%- else -%}
      {{ page_title }}
    {%- endif -%}
    {%- if current_tags -%}
      {%- assign meta_tags = current_tags | join: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      – {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      – {{ shop.name }}
    {%- endunless -%}
  {%- endcapture -%}
  

  
 {% include 'avada-sc-setting' %}
  

  {%- if page_description -%}
    
  {%- endif -%}

  {% include 'social-meta-tags' %}
  {% include 'personizely' %}

  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  

  {%- if request.page_type contains 'customers/' -%}
    
  {%- endif -%}

  
  
  

  {{ content_for_header }}
{%- render 'bold-pr' -%}
{%- render 'bold-common' -%} 
 {{ shop.metafields.fontify.stylesheets }}
{% include 'hulkcode_common' %}{% if template contains 'product' or template contains 'cart' %}{% endif %}
 {% if mlveda_code_flag == true %}
    {% include 'mlveda-multipricing-options' %}
  {% endif %}

{% capture cur %}{% include "booster-currency" %}{% endcapture %}{% unless cur contains "Liquid error" %}{{ cur }}{% endunless %}

      
      
        {% include 'ufe-offer' %}	{% include 'vitals-loader' %}

 
{% include 'pagefly-header' %}
 
  {% render 'zoorix-head' %}
  

  {% render 'shogun-head' %}
  {% include 'teeinblue-scripts' %}

{% include "xo-insertcode-header" %}

{{ 'custom-fields.css' | asset_url | stylesheet_tag }}

 

{% include "xo-insertcode-body" %}

  {% include 'teeinblue-product-loader' %}

  {{ 'general.accessibility.skip_to_content' | t }}

  {%- if settings.enable_ajax -%}
    {% include 'cart-popup' %}
  {%- endif -%}

  {% section 'header' %}

  

    

    {% section 'footer' %}

    

    

    

    

      {{- 'sections.slideshow.navigation_instructions' | t -}}
    

  

  
    - {{ 'general.accessibility.refresh_page' | t }}

    - {{ 'general.accessibility.selection_help' | t }}
  

{% if mlveda_code_flag == true %}
  	{% if template != 'cart' %}
		{% include 'mlveda-multipricing-updateprice' %}
  	{% else %}
        
  	{% endif %}
  {% else %}
		
  {% endif %}

{% comment %}//alpha currency snippet start{% endcomment %}
 {% capture snippet_content %}
 {% include 'alphacurrencyconverter' %} 
{% endcapture %} 
{% unless snippet_check contains 'Liquid error' %}
 {{ snippet_content }}
 {% endunless %}
 {% comment %}//alpha currency snippet end{% endcomment %}
 {% include 'smile-initializer' %}

{% include 'adroll' %}
  

{% render 'mbc-bundles' %}
{% include "xo-insertcode-footer" %}

{% include 'product_pinch_zoom' %}

  

{% include 'printcart' %}

{% if cart.currency.iso_code == shop.currency %}

{% else %}

{% endif %}

UsmanSipra · October 10, 2021, 12:41pm

yeah I was using the same option like you explained in the screenshot. But somehow I cant see my replies. Anyhow I have emailed you as well.

UsmanSipra · October 10, 2021, 12:43pm


  
  

 

   
    
    
    
 
 {% assign mlveda_code_flag = false %}
  

  {% if mlveda_code_flag == true %}
  
    

  {% endif %}

    
  
  
  
  
  

  {%- if settings.favicon != blank -%}
    
  {%- endif -%}

  {%- capture seo_title -%}
    {%- if request.page_type == 'search' and search.performed == true -%}
      {{ 'general.search.heading' | t: count: search.results_count }}: {{ 'general.search.results_with_count' | t: terms: search.terms, count: search.results_count }}
    {%- else -%}
      {{ page_title }}
    {%- endif -%}
    {%- if current_tags -%}
      {%- assign meta_tags = current_tags | join: ', ' -%} – {{ 'general.meta.tags' | t: tags: meta_tags -}}
    {%- endif -%}
    {%- if current_page != 1 -%}
      – {{ 'general.meta.page' | t: page: current_page }}
    {%- endif -%}
    {%- assign escaped_page_title = page_title | escape -%}
    {%- unless escaped_page_title contains shop.name -%}
      – {{ shop.name }}
    {%- endunless -%}
  {%- endcapture -%}
  

  
 {% include 'avada-sc-setting' %}
  

  {%- if page_description -%}
    
  {%- endif -%}

  {% include 'social-meta-tags' %}
  {% include 'personizely' %}

  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

  

  {%- if request.page_type contains 'customers/' -%}
    
  {%- endif -%}

  
  
  

  {{ content_for_header }}
{%- render 'bold-pr' -%}
{%- render 'bold-common' -%} 
 {{ shop.metafields.fontify.stylesheets }}
{% include 'hulkcode_common' %}{% if template contains 'product' or template contains 'cart' %}{% endif %}
 {% if mlveda_code_flag == true %}
    {% include 'mlveda-multipricing-options' %}
  {% endif %}

{% capture cur %}{% include "booster-currency" %}{% endcapture %}{% unless cur contains "Liquid error" %}{{ cur }}{% endunless %}

      
      
        {% include 'ufe-offer' %}	{% include 'vitals-loader' %}

 
{% include 'pagefly-header' %}
 
  {% render 'zoorix-head' %}
  

  {% render 'shogun-head' %}
  {% include 'teeinblue-scripts' %}

{% include "xo-insertcode-header" %}

{{ 'custom-fields.css' | asset_url | stylesheet_tag }}

 

{% include "xo-insertcode-body" %}

  {% include 'teeinblue-product-loader' %}

  {{ 'general.accessibility.skip_to_content' | t }}

  {%- if settings.enable_ajax -%}
    {% include 'cart-popup' %}
  {%- endif -%}

  {% section 'header' %}

  

    

    {% section 'footer' %}

    

    

    

    

      {{- 'sections.slideshow.navigation_instructions' | t -}}
    

  

  
    - {{ 'general.accessibility.refresh_page' | t }}

    - {{ 'general.accessibility.selection_help' | t }}
  

{% if mlveda_code_flag == true %}
  	{% if template != 'cart' %}
		{% include 'mlveda-multipricing-updateprice' %}
  	{% else %}
        
  	{% endif %}
  {% else %}
		
  {% endif %}

{% comment %}//alpha currency snippet start{% endcomment %}
 {% capture snippet_content %}
 {% include 'alphacurrencyconverter' %} 
{% endcapture %} 
{% unless snippet_check contains 'Liquid error' %}
 {{ snippet_content }}
 {% endunless %}
 {% comment %}//alpha currency snippet end{% endcomment %}
 {% include 'smile-initializer' %}

{% include 'adroll' %}
  

{% render 'mbc-bundles' %}
{% include "xo-insertcode-footer" %}

{% include 'product_pinch_zoom' %}

  

{% include 'printcart' %}

{% if cart.currency.iso_code == shop.currency %}

{% else %}

{% endif %}

UsmanSipra · October 10, 2021, 12:47pm

word file attached having the code

dmwwebartisan · October 10, 2021, 12:57pm

@UsmanSipra

Please find following code your Layout/theme.liquid file

Replace to

Topic		Replies	Views
How can I change the background color of product pages only? Store Design	10	59	November 24, 2022
Change the header text and icon color to white in sense theme Store Design menu , design , customizations , css , shopify-themes	3	26	January 20, 2024
In my dawn theme,please remove the text below my footer section Store Design design , footer	3	32	February 13, 2024
How can I have a different logo on homepage only? (Dawn theme) Technical Q&A	35	214	October 21, 2023
Dawn Theme - Background colour of products page Store Design design , customizations , shopify-themes	6	30	November 17, 2022

Need a code to change page color to black

Related topics