Close

How to use selected color in Header bar

devmittera
9 months ago
#22252 Quote
Avatar
  • 3
Hello,

I am very new to nopCommerce.  The project I am working on is using the 7Spikes Native Theme. One of the plug-ins we have written has a header bar. It is a solid color hard coded. I would like that header bar to pick up the color selected in the Native Theme under Nop-Templates -> Themes -> Native -> Settings -> Preset.

How can I get my code to use that selected color?


<div style="width:100%;height:30px;background-color:#f17e06"></div>
hristo
9 months ago
#22255 Quote
Avatar
  • Moderator
  • 172
"I would like that header bar to pick up the color selected in the Native Theme"

To do that, you have to add your element's class name into the Color Presets selectors file.
The file for Native theme is here:

Plugins\SevenSpikes.Theme.Native\Styles\Less\preset.less

Pay attention that there are different sections in that file, some are for text color, others for background color, some for border-color. If you need to change background color only, then add your element only in the "background color" section.
Regards,
Hristo Gospodinov
Nop-Templates.com
devmittera
9 months ago
#22257 Quote
Avatar
  • 3
Thank you for your response I will give this a try.
devmittera
9 months ago
#22258 Quote
Avatar
  • 3
Hello,

On my local computer I installed the Native theme and then I updated the file:
C:\Repos\nopcommerce\src\Presentation\Nop.Web\Plugins\SevenSpikes.Theme.Native\Styles\Less\preset.less

I put my class name in the backgrounds section:

.myPluginHeaderBar {
    background-color: @color;
}


I am not seeing the color appear in my header bar.  Is this the correct location for me to make this change?  Do I need to compile the less file?
hristo
9 months ago
#22260 Quote
Avatar
  • Moderator
  • 172
That's the correct file you are editing. Also your code seems correct.
The .less file is compiled by clicking the "Save" button in the theme administration (on the Native Settings page where the color presets are), you don't have to do anything else.
So if you didn't click the save button, do it now and see if the change will apply.
Regards,
Hristo Gospodinov
Nop-Templates.com