CSS for Detail Button, Product Title, & Sidebar

  • Resolved dreamwishblog

    (@dreamwishblog)


    6 years, 10 months ago

    Hello,

    I was wondering if there was any CSS to customize the following aspects of the “Showcase” Catalog Style for:

    1. The “Details” button on the product hover overlay. I would like to change the text on the button from “Details” to “Learn More”. Where would I place this CSS code?

    2. Change the text color of the Product title listed below the image. Where would I place this CSS code?

    3. Change the color of the text in the Sidebar. Where would I place this CSS code?

    4. Customize the Catalog color. Where would I place this CSS code?

    Thank you in advance for all your help!! 🙂

    Gina

Viewing 3 replies - 1 through 3 (of 3 total)
  • etoilewebdesign

    (@etoilewebdesign)

    6 years, 10 months ago

    Hi dreamwishblog,

    Here are the answers to your questions:

    1. This doesn’t require CSS. You can replace the label by going to the options > labelling tab and then enter “Learn More” text in the “Details Label” text field.

    2. You can go to the Styling > Thumbnail tab in the plugin and then look for the Item Options > Colors > TITLE color selector.

    3. You can do so by adding the following custom CSS code to the desired catalogue under the catalogs tab in the plugin:

    
.prod-cat-sidebar * {
color: blue;
}

.prod-cat-sidebar-cat-title h3 {
color: blue !important;
}

    4. What specific element do you want to customize in the catalogue? You can find the styling options under Styling > Catalog tab in the plugin admin panel.

    Thread Starter dreamwishblog

    (@dreamwishblog)

    6 years, 10 months ago

    Thank you for your swift replay!! All of it worked and was very helpful.

    A quick follow-up question, can the Info icon in the details button be changed or removed?

    Best wishes,
    Gina

    etoilewebdesign

    (@etoilewebdesign)

    6 years, 10 months ago

    Hi Gina,

    To remove the icon, you can add this CSS in the Custom CSS box:

    .prod-cat-contemporary-hover-button span {
display: none!important;
}
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS for Detail Button, Product Title, & Sidebar’ is closed to new replies.