Customizing your feed
Overriding the Curator CSS
As the widget HTML is added directly to the HTML of the webpage (not using an IFRAME), the CSS styles of the widget can be overridden in the same way you'd override CSS on the page. You can use CSS specificity (see MDN Specificity) to override the styles predefined by the curator.css file.
These styles can be placed in the website's main CSS file or within a <style> tag in the actual HTML.
In the example below, we use the CSS classes of the Date Element to adjust the font-size and color:
.crt-post .crt-post-footer .crt-post-date .crt-post-date-link {
font-size: 20px;
color: red;
}
Here are some general CSS selectors you can use to customize various aspects of the Feed. Please note that while these selectors apply to most Feed styles, certain feed layouts have unique CSS class names. If these selectors don’t work, you can inspect your Feed's HTML to identify the exact selector, or feel free to reach out to us—we’ll be happy to assist you.
General Selector: Sample for changing the font family.
.crt-widget {
font-family: Arial;
}
.crt-widget .crt-post-c.crt-post-border {
border-width: 2px;
}
Sample for Rounded Border: Sample for making the borders rounded.
crt-widget crt-post-c.crt-post-border {
border-radius: 8px;
overflow: hidden;
}
Date Selector: Sample for adjusting the post time/date stamp's font size.
.crt-widget .crt-post-date {
font-size: 14px;
}
Fullname
Selector: Sample for adjusting the font size of the
fullname.
.crt-widget .crt-post-fullname {
font-size: 18px;
}
Text Content Selector: Sample for adjusting the font size of the post's caption.
.crt-widget .crt-post-text {
Font-size: 18px;
}
Social Icon: Sample for changing the color of the social icon.
.crt-widget .crt-social-icon svg {
Color: red;
}
User Image: Hide the profile picture or user image.
.crt-widget .crt-post-userimage {
Display: none;
}
Post Image: Sample for removing/hiding the images from the posts.
.crt-widget .crt-post .crt-image {
display: none;
}
Note: These selectors are general references. Depending on your chosen feed style, the CSS class names may vary. If you need assistance identifying the selector, please feel free to reach out to us.