Adding a colored button - Collection images / home page (DEBUT THEME)

[Beytibyarabesqu]

Hello,

I am using Debut Theme, and I’d like to add a colored redirection button on my collection images on the home page. Currently, I just have typo on those images, but they are not really visible because they are directly on the images…The idea is to have the same colored button I have on the slideshow, on the collection images.

This is my website: https://beytibyarabesque.com/

and here under some screenshots

@KetanKumar Can you help with that?

Buttons on the slideshows:

Collection images with typo only - no buttons

Thanks,

Michele

[Litos]

Hi @Beytibyarabesqu ,

Go to Assets > theme.css and paste this at the bottom of the file:

.collection-grid-item__title {
	max-width: 100% !important;
    display: inline-block !important;
    word-wrap: break-word;
    background-color: var(--color-btn-primary) !important;
    color: var(--color-btn-primary-text) !important;
    min-height: 3.125rem;
    line-height: 2.2;
    width: fit-content !important;
    margin: auto !important;
    left: 0 !important;
    right: 0 !important;
}

Hope it helps!

[Beytibyarabesqu]

Thanks a lot @Litos

I have now beige buttons as I wanted, but I have 2 concerns

1. they look static compared to the ones in the slideshow.

2. The text seems to have a shadow + the font seems different than in the slideshow

Is there a way for me to fix this? Or the code should be changed? Just for you to understand better each of those 2 points, here some screenshots:

1- Looks static

• When I pass the mouse on the picture to click on it, the image has an overlay that gives the impression that the image is clickable, while the button remains the same - see below

• collection image: mouse not on the image

-collection image: mouse on the image

• slideshow image: mouse not on the image (button is lighter)

-slideshow image: while mouse on the image (button is darker)

2- text has a shadow + different font than slideshow button- please use screenshot above

If you can help me that would be great! thanks again

[Litos]

Hi @Beytibyarabesqu ,

Please change all code:

.collection-grid-item__title {
    max-width: 100% !important;
    display: inline-block !important;
    word-wrap: break-word;
    background-color: var(--color-btn-primary) !important;
    color: var(--color-btn-primary-text) !important;
    min-height: 3.125rem;
    line-height: 3.125rem;
    width: fit-content !important;
    margin: auto !important;
    left: 0 !important;
    right: 0 !important;
    font-family: var(--font-stack-header);
    font-style: var(--font-style-header);
    font-weight: var(--font-weight-header);
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: normal;
    font-size: calc(((var(--font-size-base) - 2) / (var(--font-size-base))) * 1em);
    text-shadow: none !important;
}
.collection-grid-item__link:hover .collection-grid-item__title-wrapper:before, .collection-grid-item__link:focus .collection-grid-item__title-wrapper:before {
    opacity: 0 !important;
}

it will show like this:

Hope it helps!

[Beytibyarabesqu]

Thanks,
Michele

[Beytibyarabesqu]

Hello! Thanks again!

This is much better. I just have one remaining concern:
the result on my mobile needs to be fixed
The buttons are too big - see below

Thanks,
Michele

[Litos]

Hi @Beytibyarabesqu ,

Please add code:

@media only screen and (max-width: 749px) {
  .collection-grid-item__title {
    min-height: 1.5rem !important;
    line-height: 1.5rem !important;
    font-size: 0.6rem !important;
  }
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[Beytibyarabesqu]

Thank you @Litos it worked