Change Bootstrap Variable Using Custom Scss - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

Change Bootstrap Variable Using Custom Scss

PB

Petr Benes

Helix Framework 3 years ago

Hello,

how I can change Bootstrap variable using custom scss file? For example variable $accordion-button-icon.

I have created custom.scss file in /templates/shaper_helixultimate/scss and add this line:

$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/></svg>");

But this error occurred:

Undefined variable $accordion-icon-color: templates/shaper_helixultimate/scss/custom.scss on line 2, at column 1 Call Stack: #0 import templates/shaper_helixultimate/scss/custom.scss (unknown file) on line 1

Thanks

0
5 Answers
Order by
Oldest Newest Votes
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #54339

Hi there,

Thanks for contacting us. Sorry for the inconvenience. You can declare your variable on custom.scss file.

like 

$base-color: #c6538c;

#sp-header{
    background-color: $base-color;
}

-Thanks

0
PB
Petr Benes
Accepted Answer
3 years ago #54343

Hi, thank you, but $accordion-button-icon is default Bootstrap variable, how I can replace it?

Thanks, Petr

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #54348

Sorry! you can't replace default class or variable

0
PB
Petr Benes
Accepted Answer
3 years ago #54352

Ahh :(, ok, thanks for your answer!

0
Toufiq
Toufiq
Accepted Answer
Senior Staff 3 years ago #54453

You are most welcome. Will you please spend some to write a review about our product and support quality? 

https://extensions.joomla.org/extension/sp-page-builder/

0