Fancy Product Designer Custom CSS

Fancy Product Designer Custom CSS – Helpful Codes

Fancy product designer Custom CSS codes going to be very helpful for all. Because sometimes we don’t want to allow some tools to customers and keep the designing process simple for every new customer on the website.

The fancy product designer plugin is an advanced plugin in allows the customer to have custom products with an FPD plugin. Apart from that, keeping the product designing process user-friendly can help customers and can increase your sales.

Here we have some helpful codes for you by using Fancy product designer Custom CSS codes you can make the designer look easy to use.

1- Hide Main Bar

.fpd-mainbar{ display: none !important;}

2- Change the Customize Button Appearance

.fpd-blue-btn {
background: #5fb390;
color: #fff;
padding: 10px 10px;
font-size: 19px;
letter-spacing: 1.5px;
text-align: center;
text-decoration: none;
}

3- Change Popup Size, Width, Height

.fpd-draggable-dialog {
width: 350px;
height: 450px;
margin-top: 5px;
background: #fff;
left: calc(50% – 175px);
top: calc(45% – 200px);
min-width: 200px;
min-height: 100px;
border-radius: 2px;
max-width: 100%;
}

4- Change size of Design Grid

.fpd-grid.fpd-padding > .fpd-item > picture { top: 15px; left: 20px; right: 20px; bottom: 10px; }

5- Hiding Text Elements

.fpd-tool-text-size{ display: none !important;}
.fpd-tool-text-line-height{ display: none !important;}
.fpd-tool-text-bold{ display: none !important;}
.fpd-tool-text-italic{ display: none !important;}
.fpd-tool-text-underline{ display: none !important;}
.fpd-tool-text-align{ display: none !important;}
.fpd-tool-text-stroke{ display: none !important;}
.fpd-tool-edit-text{ display: none !important;}

.fpd-visibility.fpd-show {
visibility: hidden;
opacity: 1;
}

6- Full-Width Lightbox Canvas

.fpd-modal-product-designer.fpd-modal-overlay>.fpd-modal-wrapper {
padding: 60px 0 0 !important;
}
.fpd-modal-wrapper > .fpd-container {
height: 100% !important;
}
.fpd-modal-product-designer .fpd-done {
position: absolute;
top: 0;
left: 10px;
}
.fpd-modal-product-designer .fpd-modal-price {
position: absolute;
top: 0;
left: 100px;
}