Featured collection modifying text on tile

Solved
Highlighted
Tourist
14 0 1

I am looking at how to modify the text that shows over images for my collection on the home page. I am using the Brooklyn theme and at present the text is white and in the middle of the tile. I can hardly read the text due to the images within the collection and the text being white.

 

I would like to either

1. Move the text to the bottom of the tile and made another colour

2. Have the text above each tile in black text (this being my preferred option).

 

Any help would be greatly appreciated. Thankyou.

0 Likes
Highlighted

Success.

Excursionist
29 6 12

Hi,

you need to follow my instructions:

1. go edit code and open "collection-grid-item" liquid file.

2. copy below code and replace "collection-grid-item" file code

<!-- /snippets/collection-grid-item.liquid -->
{% comment %}

  This snippet is used to showcase each collection during the loop,
  'for product in collections[collection_handle].products' in list-collections.liquid.

{% endcomment %}

{% comment %}
  Set the default grid_item_width if no variable is set
{% endcomment %}
{% unless grid_item_width %}
  {% assign grid_item_width = 'medium--one-half large--one-third' %}
{% endunless %}

{% comment %}
  Set the default image_size if no variable is set
{% endcomment %}
{% unless image_size %}
  {% assign image_size = 'grande' %}
{% endunless %}

{% assign no_collection_image = true %}
<div class="home_custom_collection grid__item {{ grid_item_width }} collection-collage__item text-center" {{ block.shopify_attributes }}>
  <a href="{{ collections[collection_handle].url }}" class="collection-grid__item-link collection-collage__item-wrapper">
    {% comment %}
      Use capture to put the collection title in a variable that is used in liquid filters
    {% endcomment %}

    {% if collection == blank %}
      {% assign collection_title = 'home_page.onboarding.collection_title' | t %}
    {% else %}
      {% assign collection_title = collections[collection_handle].title | escape %}
    {% endif %}

    {% if collection.image %}
      {%- assign collection_image = collection.image -%}
    {% elsif collection.products.first and collection.products.first.images != empty %}
      {%- assign collection_image = collection.products.first.featured_image -%}
    {% else %}
      {%- assign collection_image = blank -%}
    {% endif %}

    {% if grid_item_responsive %}
      {% if collection == blank %}
        <div class="collection-grid__item-overlay 666 grid__image">{{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }}</div>
      {% else %}
        <noscript>
          <div class="collection-grid__item-overlay 22 grid__image grid__image--responsive{% if block.settings.collection != blank %}--{{ block.id }}{% endif %}" style="background-image: url('{{ collection_image | img_url: image_size }})"></div>
        </noscript>
        <div class="collection-grid__item-overlay 33 grid__image lazyload"
          {% unless collection_image == blank %}
            style="background-image: url('{{ collection_image | img_url: '300x300' }});"
          {% endunless %}
          data-bgset="{% include 'bgset', image: collection_image %}"
          data-sizes="auto"
          data-parent-fit="cover">
        </div>
      {% endif %}
    {% else %}
      {% if collection == blank %}
        {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
        <div class="collection-grid__item-overlay 11 grid__image">{{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}</div>
      {% else %}
        <noscript>
          <div class="collection-grid__item-overlay 44 grid__image"{% unless collection_image == blank %} style="background-image: url({{ collection_image  | img_url: image_size }})"{% endunless %}></div>
        </noscript>
        <div class="collection-grid__item-overlay 55 grid__image "
          {% unless collection_image == blank %}
           
          {% endunless %}
          data-bgset="{% include 'bgset', image: collection_image %}"
          data-sizes="auto"
          data-parent-fit="cover">
          <img src="{{ collection_image | img_url: '300x' }}"/>
        </div>
      {% endif %}
    {% endif %}
    <div class="collection-grid__item-title--wrapper">
      <span class="collection-grid__item-title">
        {{ collection_title }}
      </span>
    </div>
  </a>
</div>

 3. save "collection-grid-item" file 

4. now you need to open "theme.scss" file and copy below code and paste in "theme.scss" 

@media screen and (min-width: 591px){
.home_custom_collection.collection-collage__item {
    height: auto !important;
}
}
.home_custom_collection .collection-grid__item-title--wrapper{
    position: unset;
      color: #000;
}

5 save "theme.scss" file .

 

Thanks & Regards
rbdtechworld

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: developer9it@gmail.com

0 Likes
Tourist
14 0 1

Awesome. Thanks for the assistance worked first go and did exactly what I was after.

0 Likes