Multiple link blocks on Venture Theme

Gabriel_T1
New Member
2 0 0

Hi there

I'm using the 'multiple link' block on my shop while using a theme called Venture.

I found that after I upload the images for the block it automatically changes its appearance (I'm not sure if it's chaging the image's alpha or something) and the images are all darker. See the uploaded image (raw) and the applied one here.

Any clue on how to make them lighter?

Thanks

Gabriel

 

0 Likes
motivationalmug
Tourist
3 0 2

Hi Gabriel,

You need to change your css in order to do this!

Open your theme.scss.liquid

Around Line 5126 you should see the following:

.link-block {
  position: relative;
  display: block;
  @include display-flexbox();
  justify-content: center;
  padding: 100px 20px;
  text-align: center;
  flex: 1;
  background: {
    size: cover;
    position: center;
  }

  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    opacity: 0.4;
    transition: opacity 0.2s ease;
    z-index: 1;
  }

In order to make the images original change the opacity to 0

opacity: 0;

If you want to turn of the hover effect as well you need to set the opacity for this to zero as well

  &:hover:after,
  &:hover:focus {
    opacity: 0;

 

Hope this helped!

carljchapman
New Member
4 0 0

I am new to Shopify and I changed my them from Debut to Brooklyn to the unsupported Annabelle and finally to the Venture theme. Everything was how I want it except this one thing. You saved me a couple hours of searching and frustration I am sure. Thank you.

0 Likes
Bearback
Tourist
8 0 3

Hi! I hav the same concern though when I followed the steps of changing the opacity in the code and still am seeing the overlay on the main image. Attached is an image of how that grey overlay is showing even without me hovering over the image. How do I fix this? 9The code attached is from line 5097 - 5237. I'm just assuming this is the area best to send over as it was pointed out in the original answer. Thank you! - Ray

/*================ Sublist expand/collapse trigger ================*/
.drawer__nav-has-sublist {
  @include display-flexbox();
  @include flex-direction(row);
}

.drawer__nav-toggle-btn {
  padding: ($gutter-site / 2 ) $gutter-site;
  color: $color-drawer-text;
  line-height: 1;

  .icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  &:hover,
  &:focus {
    opacity: 0.0;
  }
}

.drawer__nav-toggle-btn--small {
  color: $color-body-text;
  line-height: 0;

  .icon {
    width: 12px;
    height: 12px;
  }
}

.drawer__nav-toggle--open {
  display: block;
}

.drawer__nav-toggle--close {
  display: none;
}

/*================ Collection sorting select menus ================*/
.collection-sort {
  display: inline-block;
  text-align: left;
  max-width: 150px;

  & + & {
    margin-left: $gutter-site;
  }

  @include media-query($small) {
    width: 80%;

    & + & {
      margin: $gutter-site 0 0;
    }
  }
}

.collection-sort__label {
  display: block;
  text-align: center;

  @include media-query($medium-up) {
    text-align: left;
    padding-left: $gutter-site / 3;
    margin-bottom: 0;
  }
}

.collection-sort__input {
  background-color: transparent;
  font-weight: $font-weight-body-bold;
  padding-top: $gutter-site / 3;
  padding-bottom: $gutter-site / 3;
  padding-left: $gutter-site / 3;
  color: $color-heading;

  @include media-query($small) {
    width: 100%;
    border: 1px solid $color-border-body-darken;
  }
}

/*================ Collection card and grid ================*/
.collection {
  margin-bottom: $gutter-site * 1.5;

  &:last-child {
    margin-bottom: 0;
  }
}

/*================ Collection card ================*/
.collection-card {
  position: relative;
  box-sizing: content-box;
  display: block;
  background: {
    color: $color-content;
    repeat: no-repeat;
    position: center top;
    size: cover;
  }
  padding: $product-image-padding / 2;
  height: $collection-card-height;
  z-index: $z-index-collection-card;

  // Prevent browser focus from being cut off
  &:focus {
    z-index: $z-index-collection-card + 1;
  }

  @include media-query($medium-up) {
    padding: $product-image-padding;
  }

  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $color-collection-card-overlay;
    opacity: 0.0;
    z-index: $z-index-collection-card;
    transition: opacity 0.2s ease;
  }

  &:hover,
  &:focus {
    &:after {
      opacity: 0.2;
    }
  }
}

 

 

 

0 Likes