Change Styling in HubSpot Built-In Modules

[leckerman]

Does anyone know if its possible to access and edit the hubspot css file that styles the built-in modules in hubspot? For example, I want to change the color of the arrows in this image gallery. I can't figure out how to find/access this doc.

Arrows in default "Image Gallery" module

[Jsum]

If it is a custom module in the new design manager then you can get the name from the page editor and search for it as a file in the design manager. If the module was built correctly then all of the css should be there in the css section of the module. 

[tjoyce · Accepted solution]

Generally you would override them by including your own css file in the head of the template. You can use chrome and the element inspector to see which styles to override. 

So, you could create a stylesheet, include it in the template, then, in the stylesheet, use the following code to override the arrow styles.

.hs_cos_gallery_main .slick-prev:before, .hs_cos_gallery_main .slick-next:before, .hs_cos_gallery_thumbnails .slick-prev:before, .hs_cos_gallery_thumbnails .slick-next:before, .hs_cos_gallery_lightbox .slick-prev:before, .hs_cos_gallery_lightbox .slick-next:before {
    color: red;
}

---

tim@belch.io

[leckerman]

Thanks @tjoyce. I was trying to add it to the CSS section of the custom module in the new design manager and it wasn't working. Adding it to a css stylesheet and then attacheing that stylesheet to the page the modules was on worked.