{"id":858,"date":"2018-11-16T21:52:00","date_gmt":"2018-11-16T16:22:00","guid":{"rendered":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/"},"modified":"2024-10-17T02:36:59","modified_gmt":"2024-10-16T21:06:59","slug":"notification-css-customization","status":"publish","type":"docs","link":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/","title":{"rendered":"Notification CSS Customization"},"content":{"rendered":"\n<p>You can further style the Recent Sales Popup by adding custom CSS using the provided element IDs. These IDs control different parts of the popup, and with them, you can customize the appearance to fit your store\u2019s branding or design.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Available Element IDs:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image:<\/strong> <code>#hbrsp-img<\/code><\/li>\n\n\n\n<li><strong>Message:<\/strong> <code>#hbrsp-msg<\/code><\/li>\n\n\n\n<li><strong>&#8220;Don&#8217;t Show Again&#8221; Link:<\/strong> <code>#hbrsp-dontshow<\/code><\/li>\n<\/ul>\n\n\n\n<p>Using these IDs, you can insert custom CSS into the <strong>Custom CSS<\/strong> field to personalize the popup.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Examples:<\/strong><\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Change Font Size of the Message:<\/strong><br>If you want to change the font size of the notification message, use the following code:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   #hbrsp-msg {\n       font-size: 16px;\n   }<\/code><\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Adjust Width for Mobile Devices:<\/strong><br>To ensure the popup looks good on mobile devices, you can adjust its width using a media query. Here\u2019s an example to adjust the width when the screen width is less than 470px:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>   @media only screen and (max-width: 470px) {\n       .alerthb-user {\n           max-width: 300px !important;\n       }\n   }<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Note:<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Always use <strong><code>!important<\/code><\/strong> if you want to override default styles.<\/li>\n\n\n\n<li>Custom CSS is a powerful tool, so use it with caution to avoid affecting the popup&#8217;s functionality or layout.<\/li>\n<\/ul>\n","protected":false},"featured_media":0,"parent":846,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-858","docs","type-docs","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Notification CSS Customization - HuntBee Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Notification CSS Customization - HuntBee Resources\" \/>\n<meta property=\"og:description\" content=\"You can further style the Recent Sales Popup by adding custom CSS using the provided element IDs. These IDs control different parts of the popup, and with them, you can customize the appearance to fit your store\u2019s branding or design. Available Element IDs: Using these IDs, you can insert custom CSS into the Custom CSS [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/\" \/>\n<meta property=\"og:site_name\" content=\"HuntBee Resources\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/huntbee.opencart\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-16T21:06:59+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/docs\\\/recent-sales-popup-alert\\\/notification-css-customization\\\/\",\"url\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/docs\\\/recent-sales-popup-alert\\\/notification-css-customization\\\/\",\"name\":\"Notification CSS Customization - HuntBee Resources\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/#website\"},\"datePublished\":\"2018-11-16T16:22:00+00:00\",\"dateModified\":\"2024-10-16T21:06:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/docs\\\/recent-sales-popup-alert\\\/notification-css-customization\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/docs\\\/recent-sales-popup-alert\\\/notification-css-customization\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/docs\\\/recent-sales-popup-alert\\\/notification-css-customization\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recent Sales Popup Alert\",\"item\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/docs\\\/recent-sales-popup-alert\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Notification CSS Customization\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/#website\",\"url\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/\",\"name\":\"HuntBee Resources\",\"description\":\"OpenCart Extension Documentations - Guides - Blogs - Projects\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/#organization\",\"name\":\"HuntBee OpenCart\",\"url\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/cropped-mobile-logo-new.png\",\"contentUrl\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/cropped-mobile-logo-new.png\",\"width\":945,\"height\":200,\"caption\":\"HuntBee OpenCart\"},\"image\":{\"@id\":\"https:\\\/\\\/www.huntbee.com\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/huntbee.opencart\",\"https:\\\/\\\/www.instagram.com\\\/opencart.huntbee\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Notification CSS Customization - HuntBee Resources","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/","og_locale":"en_US","og_type":"article","og_title":"Notification CSS Customization - HuntBee Resources","og_description":"You can further style the Recent Sales Popup by adding custom CSS using the provided element IDs. These IDs control different parts of the popup, and with them, you can customize the appearance to fit your store\u2019s branding or design. Available Element IDs: Using these IDs, you can insert custom CSS into the Custom CSS [&hellip;]","og_url":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/","og_site_name":"HuntBee Resources","article_publisher":"https:\/\/www.facebook.com\/huntbee.opencart","article_modified_time":"2024-10-16T21:06:59+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/","url":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/","name":"Notification CSS Customization - HuntBee Resources","isPartOf":{"@id":"https:\/\/www.huntbee.com\/resources\/#website"},"datePublished":"2018-11-16T16:22:00+00:00","dateModified":"2024-10-16T21:06:59+00:00","breadcrumb":{"@id":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/notification-css-customization\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.huntbee.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Recent Sales Popup Alert","item":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/"},{"@type":"ListItem","position":3,"name":"Notification CSS Customization"}]},{"@type":"WebSite","@id":"https:\/\/www.huntbee.com\/resources\/#website","url":"https:\/\/www.huntbee.com\/resources\/","name":"HuntBee Resources","description":"OpenCart Extension Documentations - Guides - Blogs - Projects","publisher":{"@id":"https:\/\/www.huntbee.com\/resources\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.huntbee.com\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.huntbee.com\/resources\/#organization","name":"HuntBee OpenCart","url":"https:\/\/www.huntbee.com\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.huntbee.com\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/www.huntbee.com\/resources\/wp-content\/uploads\/2020\/04\/cropped-mobile-logo-new.png","contentUrl":"https:\/\/www.huntbee.com\/resources\/wp-content\/uploads\/2020\/04\/cropped-mobile-logo-new.png","width":945,"height":200,"caption":"HuntBee OpenCart"},"image":{"@id":"https:\/\/www.huntbee.com\/resources\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/huntbee.opencart","https:\/\/www.instagram.com\/opencart.huntbee\/"]}]}},"comment_count":0,"_links":{"self":[{"href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/docs\/858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/types\/docs"}],"replies":[{"embeddable":true,"href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/comments?post=858"}],"version-history":[{"count":5,"href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/docs\/858\/revisions"}],"predecessor-version":[{"id":4070,"href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/docs\/858\/revisions\/4070"}],"up":[{"embeddable":true,"href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/docs\/846"}],"prev":[{"title":"Options \/ Setup","link":"https:\/\/www.huntbee.com\/resources\/docs\/recent-sales-popup-alert\/options-setup\/","href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/docs\/851"}],"wp:attachment":[{"href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/media?parent=858"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.huntbee.com\/resources\/wp-json\/wp\/v2\/doc_tag?post=858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}