How to Overwrite Jotly Size Chart CSS Rules
Jotly Admin
Last Update 7 bulan yang lalu
Customizing your Jotly size chart is simple and allows you to tailor the design to match your store’s branding. In this guide, we will walk you through how to overwrite existing CSS rules to make adjustments, such as changing the font size of buttons, colors of text, or the background of the size chart modal. You can easily apply these changes by adding custom CSS to the Settings → Custom Code section in the Jotly app.
Adding Custom CSS
Below is a set of examples for how you can overwrite specific parts of the Jotly size chart design. Copy and paste the CSS code into the Custom Code section and click Save when you’re done.
How to Target Elements Inside the Modal
If you want to target any specific element inside the size chart modal, you simply need to prepend its CSS selector with #jsc-overlay. This ensures that the styles you are adding takes precendece over default styles added by Jotly app.
Overwrite Button Style
This section targets the button that triggers the size chart modal. By specifying div button#jsc-trigger-button, we ensure that only this button is affected. You can modify the font-size or any other style properties you want, but be sure to add !important after each style to ensure it overwrites existing rules
Overwrite Modal Title Styles
This CSS rule modifies the title inside the size chart modal. You can change the color property to adjust the title's color. The #jsc-overlay targets the modal container, and h4.jsc-modal-title ensures that only the title inside the modal is affected.
Overwrite Table Header (th) and Table Data (td) Styles
This part of the code changes the styles for both the table header (th) and table data (td) elements inside the modal. For example, the text color has been set to black, but you can modify this to any color that fits your store's design.
Save Your Changes
Once you’ve added all your custom styles to the Custom Code section, make sure to click the Save button to apply the changes.
If you need additional help with customizing your size chart or have other questions, feel free to reach out to us. We’re here to assist you with any further modifications or features you’d like to see.
Full example code