Forums › Forums › OroCommerce › How to change the color of new arrival icon
This topic contains 6 replies, has 2 voices, and was last updated by 
Michael 6 years, 2 months ago.
Starting from March 1, 2020 the forum has been switched to the read-only mode. Please head to StackOverflow for support.
- CreatorTopic
- February 14, 2018 at 6:22 pm #32737
Hi,
Can anyone please show me how to change the colour of the new arrival icon.
Thank you!
Jake He
- CreatorTopic
- AuthorReplies
- February 14, 2018 at 9:33 pm #32738
In your custom theme set different value to the $product-sticker-icon-new-arrival-background scss variable, e.g.
Sass1$product-sticker-icon-new-arrival-background: url('#{$global-url}/mycustombundle/mycustomtheme/images/sticker-of-different-color.png') 0 0 no-repeat;February 15, 2018 at 2:14 pm #32739Thank you!
I have made the change in my custom theme. It worked.
I ran the following commands
app/console oro:assets:install –env=prod –symlink
app/console assetic:dump –env=prod
app/console oro:requirejs:build –env=prodCSS123456789//MENA/Bundle/MENAThemeBundle/Resources/public/mena/scss/settings/global-settings.scss// @theme: mena;$global-url: 'bundles' !default;@import './product-sticker-config';@import './_colors';@import './_typography';@import './_variables';CSS1234567891011121314151617181920212223242526272829303132333435//MENA/Bundle/MENAThemeBundle/Resources/public/mena/scss/settings/product-sticker-config.scss// @theme: mena;$product-sticker-inner-offset: null !default;$product-sticker-icon-top-left-pos-top: 0 !default;$product-sticker-icon-top-left-pos-left: 0 !default;$product-sticker-icon-top-right-pos-top: 0 !default;$product-sticker-icon-top-right-pos-right: 0 !default;$product-sticker-icon-bottom-right-pos-bottom: 0 !default;$product-sticker-icon-bottom-right-pos-right: 0 !default;$product-sticker-icon-bottom-left-pos-bottom: 0 !default;$product-sticker-icon-bottom-left-pos-left: 0 !default;$product-sticker-text-font-weight: bold !default;$product-sticker-text-new-arrival-color: get-color('primary', 'dark') !default;$product-sticker-icon-top-right-pos-top: update-default($product-sticker-icon-top-right-pos-top, $offset-y);$product-sticker-icon-top-right-pos-right: update-default($product-sticker-icon-top-right-pos-right, $offset-x);$product-sticker-icon-new-arrival-background: url('#{$global-url}/menatheme/frontendbundle/images/sticker-new.svg') 0 0 no-repeat !default;$product-sticker-icon-new-arrival-background-size: 100% 100% !default;$product-sticker-icon-static-size: 60px !default;$product-sticker-icon-size: 20% !default;$product-sticker-icon-top-right-tablet-small-pos-top: 12px !default;$product-sticker-icon-top-right-tablet-small-pos-right: 12px !default;$product-sticker-icon-size-mobile-landscape: 33% !default;$product-sticker-icon-top-right-mobile-landscape-pos-top: 8px !default;$product-sticker-icon-top-right-mobile-landscape-pos-right: 8px !default;PHP1234567891011121314151617181920212223242526272829303132#MENA/Bundle/MENAThemeBundle/Resources/views/layouts/mena/config/assets.ymlstyles:inputs:- 'bundles/menatheme/mena/scss/settings/global-settings.scss'- 'bundles/orofrontend/default/vendors/slick/slick.css'- 'bundles/orofrontend/default/scss/settings/global-settings.scss'- 'bundles/orofrontend/default/scss/variables/base-config.scss'- 'bundles/orofrontend/default/scss/variables/breadcrumbs-config.scss'- 'bundles/orofrontend/default/scss/variables/link-config.scss'- 'bundles/orofrontend/default/scss/variables/page-title-config.scss'- 'bundles/orofrontend/default/scss/variables/page-subtitle-config.scss'- 'bundles/orofrontend/default/scss/variables/page-main-config.scss'- 'bundles/orofrontend/default/scss/variables/page-container-config.scss'- 'bundles/orofrontend/default/scss/variables/page-content-config.scss'- 'bundles/orofrontend/default/scss/variables/page-header-config.scss'- 'bundles/orofrontend/default/scss/variables/page-footer-config.scss'- 'bundles/orofrontend/default/scss/variables/page-sidebar-config.scss'- 'bundles/orofrontend/default/scss/variables/copyright-config.scss'- 'bundles/orofrontend/default/scss/variables/section-title-config.scss'- 'bundles/orofrontend/default/scss/variables/notifications-config.scss'- 'bundles/orofrontend/default/scss/variables/primary-menu-config.scss'- 'bundles/orofrontend/default/scss/variables/notification-config.scss'- 'bundles/orofrontend/default/scss/variables/notification-flash-config.scss'- 'bundles/orofrontend/default/scss/variables/loader-mask-config.scss'- 'bundles/orofrontend/default/scss/variables/embedded-list/embedded-list-config.scss'- 'bundles/orofrontend/default/scss/variables/embedded-list/embedded-list-slider-config.scss'- 'bundles/orofrontend/default/scss/variables/datagrid-manager-config.scss'- 'bundles/orofrontend/default/scss/variables/ui/dialog-config.scss'- 'bundles/orofrontend/default/scss/styles.scss'- 'bundles/oroproduct/default/scss/variables/product-sticker-config.scss' : '/bundles/menatheme/mena/scss/product-sticker-config.scss'output: 'css/layout/mena/styles.css'February 15, 2018 at 2:57 pm #32740What have you got in css/layout/mena/styles.css ? Search this generated file for product-sticker–icon-new_arrival
And is this the correct path to the image file – /menatheme/frontendbundle/images/sticker-new.svg ?
February 15, 2018 at 3:20 pm #32741Thank you for your reply. I have posted the working code.
February 15, 2018 at 3:21 pm #32742Are you able to look at this issue?
https://oroinc.com/b2b-ecommerce/forums/topic/change-on-sale-imageFebruary 15, 2018 at 3:59 pm #32743Perfect! I thought it didn’t work :-)
- AuthorReplies
The forum ‘OroCommerce’ is closed to new topics and replies.