Quickview Image Button

  • Updated

On a listing detail page, we have a great feature that includes 4 images on the left side of the page allowing users visual insight quickly into a home. A Quickview button allows them to see up to 4 images of the property at any given time.

 

Screen Shot 2022-03-02 at 1.28.06 PM.png

Customization Options

  • The background color by default is set to white, however, you can change this to fit your needs.

    Here is an example making the background color of the box a light gray:

    Screen Shot 2022-03-02 at 1.30.57 PM.png

    *To change the background color of the Quickview button:
    .sidx-container .sidx-photo-array button {
    background-color: #hexcode !important;
    }

  • The section by default has a 1px solid border set, however, you can change the border thickness if you like.  '1px' sets the thickness of the border and 'solid' defines the style of the border. 

    Here is an example of a 5px solid border:

    Screen_Shot_2021-07-20_at_3.32.53_PM.png

    *To change the border of the Quickview button:
    .sidx-container .sidx-photo-array button {
    border: 5px solid !important;
    }

  • You can also change the color of the border.  

    Here is an example of a green border color:

    Screen_Shot_2021-07-20_at_3.33.57_PM.png

    *To change the border color of the Quickview button:
    .sidx-container .sidx-photo-array button {
    border-color#hexcode !important; 
    }

  • Border-radius changes the squareness of the button. The higher the number, the more round the button will be.  The default radius is set to 6px. 

    Here is an example of the border radius set to 20px:

    Screen_Shot_2021-07-20_at_3.34.50_PM.png

    *To change the border radius of the Quickview button:
    .sidx-container .sidx-photo-array button {
    border-radius: 20px !important;
    }

  • The button by default does not have a shadow around the bottom of the button.  The first number sets the shadow directly under the button. The first '1px' sets the size of the shadow. The second '1px' sets the fade of the shadow and the hexcode sets the color.

    Here is an example of the box-shadow set to 0 7px 7px #1acb98:

    Screen_Shot_2021-07-20_at_3.36.27_PM.png

    *To change the box shadow of the Quickview button:
    .sidx-container .sidx-photo-array button {
    box-shadow0 7px 7px #1acb98 !important;
    }

  • Padding changes how much space is inside the button, between the text and the border.  The first number changes the top and bottom padding.  The second number changes the left and right padding.   

    Here is an example of the padding set to 2px 5px:

    Screen_Shot_2021-07-20_at_3.37.28_PM.png

    *To change the padding of the Quickview button:
    .sidx-container .sidx-photo-array button {
    padding: 2px 5px !important;
    }

  • The default text or font color is set to blue.  The "color" line indicator of the code designates font color, and would be important to note if you changed other colors of the button. 

    Here is an example of the font color to green:

    Screen_Shot_2021-07-20_at_3.39.55_PM.png

     *To change the font color of the Quickview button:
    .sidx-container .sidx-photo-array button {
    color: #hexcode !important; 

Applying Multiple Changes

If you were to use all of the above properties to update your button, your code may look like this when placed into your design settings:


.sidx-container .sidx-photo-array button {
padding: 25px 15px !important;
border-radius6px !important;
box-shadow0 7px 7px #1acb98 !important;
background#1acb98 !important;
color#ffffff !important;
border1px solid !important;
border-color#febe0f !important; 
}

Tip

Place the desired code(s) in the Custom CSS box under Settings > Design. You must clear your caches, then check your web page in an incognito browser to see the change!

 

Warning: Showcase IDX may make future updates to the product which may break previously acceptable CSS code, causing that section on your website to look unusual.  If you've noticed your site not looking as expected, please return to this article for the updated CSS code.

If you are inexperienced with CSS, we suggest you turn to your developer as they will be the best contact person for CSS related questions and concerns.  We are not developers and provide this baseline CSS for agents and developers experienced in coding.