Portal Customization
Custom Links for Your Portals
August 20, 2021
Custom CSS & Javascript: Product Catalogs
September 21, 2021Thumbnail Hover Effect
Make your product thumbnails easier to see by adding this neat hover effect to your portals!
By adding the below code to your portal's Custom CSS, you will add this cool effect that enlarges product thumbnails when hovering over them with your mouse. This code will apply the effect to the Order Status, Cart, and Checkout pages.
.page-orderstatus .panel img,
.page-shoppingcart .panel img,
.page-checkout .panel img {
transition: transform .2s;
z-index: 1000;
position: relative;
}
.page-orderstatus .panel img:hover,
.page-shoppingcart .panel img:hover,
.page-checkout .panel img:hover {
transform: scale(1.5);
}
Want to make the images even bigger? Simply increase the number set in the brackets of "transform: scale".
The current "1.5" scale enlarges the image to 150% of its current display size.
The current "1.5" scale enlarges the image to 150% of its current display size.
Catch up on past blog posts
Over the last couple years we have been compiling tips & tricks and new fun ways you can customize your portal.
Here's a recap.Custom Portal Pages
Create custom pages from About Us, to Contact Pages and Staff Information.
Getting Creative with Portal Home Pages
Interactive features such as Moveable elements, mouse-generated ball pit and a neon sign .
Getting Creative with Portal Home Pages: Part 2
Eye catching object including kaleidoscope text, buttons that change background colors and a 3D product carousel.
Custom CSS & Javascript: Part 1
Customizing field labels, adding custom links to your navigation and a trick to add rush fees.Custom CSS & Javascript: Part 2
Fun ways to display your social media icons and other visual enhancements you can make to your portals.
Custom CSS & Javascript: Part 3
How to target certain customers, products and pages with your Custom CSS and JS.Custom CSS & Javascript: Part 4
Showing required checkout terms, hiding pricing and how to remove "Select an option".
Custom CSS & Javascript: Part 5
Options for styling menus, text and images.Custom CSS & Javascript: Part 6
Fun with backgrounds.
Custom CSS & Javascript: Part 7
Adding and styling search bars.Custom CSS & Javascript: Part 8
New ways to style headers.
If you have ideas for new and exciting ways to customize portals or if you need assistance adding any of our examples to your site, contact our support team by creating a ticket or emailing support@docketmanager.ca.
