{"id":644,"date":"2020-04-11T00:49:29","date_gmt":"2020-04-11T00:49:29","guid":{"rendered":"https:\/\/www.opinew.com\/help-center\/?post_type=ht_kb&#038;p=644"},"modified":"2025-06-18T21:31:20","modified_gmt":"2025-06-18T21:31:20","slug":"modify-opinew-with-custom-css","status":"publish","type":"ht_kb","link":"https:\/\/www.opinew.com\/help-center\/knowledge-base\/modify-opinew-with-custom-css\/","title":{"rendered":"How can I modify Opinew with custom CSS?"},"content":{"rendered":"\n<p>If our Shopify Reviews widget style editor is not enough for you and you need something more custom, we have a handy CSS editor inside the dashboard to let you include your own styles.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"503\" src=\"https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2025\/06\/image-23-1024x503.png\" alt=\"\" class=\"wp-image-3360\" srcset=\"https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2025\/06\/image-23-1024x503.png 1024w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2025\/06\/image-23-300x147.png 300w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2025\/06\/image-23-768x378.png 768w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2025\/06\/image-23-50x25.png 50w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2025\/06\/image-23-1536x755.png 1536w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2025\/06\/image-23-60x29.png 60w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2025\/06\/image-23-100x49.png 100w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2025\/06\/image-23.png 1548w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>There are a few steps you will have to take to ensure your CSS works correctly on Opinew.<\/p>\n\n\n\n<p>All Opinew&#8217;s shopify reviews widget CSS styles are appended with <strong>!important<\/strong> keyword. Opinew does this so your theme CSS styles don&#8217;t mix with the widget. This makes it a bit tricky to add any custom styles but fortunately, there is still a way:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Steps to add custom CSS on Opinew:<\/h4>\n\n\n\n<ul>\n<li>Prepend all your style changes with the id of the main Opinew DIV. In the case of the review widget it will be <strong>#opinew-reviews-product-page-code<\/strong> and then add your own css selector. For All Reviews Code the id is <strong>#opinew-reviews-all-reviews-code<\/strong> and so on.\n<ul>\n<li>To find the correct id you can inspect the HTML of the page. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Append <strong>!important<\/strong> to all your styles to override the default Opinew ones<\/li>\n\n\n\n<li>Most HTML elements inside the widgets have their own distinct ids or classes so it&#8217;s easy to target them.\n<ul>\n<li>For ex. the verified badge container has <strong>.opw-verified-badge&nbsp;<\/strong>class, the review date container has <strong>.opw-date-created<\/strong> class<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Example:<\/h4>\n\n\n\n<p>Let&#8217;s pick the verified badge. Normally inside the dashboard, you can only change the background colour. But if you want to make the background transparent and change the text colour, you can do this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">#opinew-reviews-product-page-code .opw-verified-badge { \n    background-color:transparent !important; \n    color:#e67600!important;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-gallery aligncenter has-nested-images columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192710.294.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"234\" height=\"35\" data-id=\"648\" src=\"https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192710.294.png\" alt=\"\" class=\"wp-image-648\" srcset=\"https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192710.294.png 234w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192710.294-50x7.png 50w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192710.294-60x9.png 60w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192710.294-100x15.png 100w\" sizes=\"(max-width: 234px) 100vw, 234px\" \/><\/a><figcaption class=\"wp-element-caption\">Original<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192307.839.png\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"234\" height=\"45\" data-id=\"649\" src=\"https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192307.839.png\" alt=\"\" class=\"wp-image-649\" srcset=\"https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192307.839.png 234w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192307.839-50x10.png 50w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192307.839-60x12.png 60w, https:\/\/www.opinew.com\/help-center\/wp-content\/uploads\/2020\/04\/Screenshot-2020-04-10T192307.839-100x19.png 100w\" sizes=\"(max-width: 234px) 100vw, 234px\" \/><\/a><figcaption class=\"wp-element-caption\">Modified<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If our Shopify Reviews widget style editor is not enough for you and you need something more custom, we have a handy CSS editor inside the dashboard to let you include your own styles. There are a few steps you will have to take to ensure your CSS works correctly&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[17],"ht-kb-tag":[26],"_links":{"self":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb\/644"}],"collection":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/comments?post=644"}],"version-history":[{"count":15,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb\/644\/revisions"}],"predecessor-version":[{"id":3361,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb\/644\/revisions\/3361"}],"wp:attachment":[{"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/media?parent=644"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb-category?post=644"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.opinew.com\/help-center\/wp-json\/wp\/v2\/ht-kb-tag?post=644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}