Spehre Drop Shadow Color - Question | JoomShaper

Spehre Drop Shadow Color

A

Arno Bück

Template 1 year ago

Hi, how can i change the color of Home Heading at sphere, it´s orange and i want to turn them in red?

Thx and regards, Arno

0
9 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 year ago #168334

Hi there!

Did you mean this line?

https://share.cleanshot.com/QhJ1CZlS

If yes, then put the following code in your custom CSS:

.sp-megamenu-parent>li:after {
    background: red;
}

Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Best Regards

0
A
Arno Bück
Accepted Answer
1 year ago #168373

Hello, thank you. No the animation on screen shot.

https://trockenbau-koeln-wichterich.de/images/css-screen-shot.jpg

Best regards

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #168375

@Rasidha shared color fix for menu items under line

.sp-megamenu-parent > li::after {background: #A12829;}

About Animation orange > red vine, use also that in Custom CSS area:

0% {
  filter: drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6));
}
25% {
  filter: drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6));
}
50% {
  filter: drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6));
}
75% {
  filter: drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6));
}
100% {
  filter: drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6));
}
0
A
Arno Bück
Accepted Answer
1 year ago #168386

Hi, it dosen´t work, what is the problem?

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #168376

About Oragne buttons , that should transform them into red (#A12829)

 body .sppb-btn.sppb-btn-default, body .sppb-btn.sppb-btn-primary, body .sppb-btn.btn-primary, body .btn.sppb-btn-default, body .btn.sppb-btn-primary, body .btn.btn-primary 
{background-color: #A12829;} 

Set red color also for ":hover"

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #168411

Can you in Template Options > Presets > choose "red" box.

@Rashida - can you ask developer, it's weird.

0
A
Arno Bück
Accepted Answer
1 year ago #168576

Hi, there is no option in Helix at presets red?

I try it with css:

addonId .sppb-addon-title{

text-transform:uppercase; animation: drop-shadow 5s; animation-delay: .6s; animation-timing-function: linear; } @keyframes drop-shadow { 0% { filter: drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)); } 25% { filter: drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)); } 50% { filter: drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)); } 75% { filter: drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(-10px -10px 0px #f8f8f8) drop-shadow(-1px -1px 0px rgba(161,40,41, 0.6)); } 100% { filter: drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)) drop-shadow(0px 0px 0px #f8f8f8) drop-shadow(0px 0px 0px rgba(161,40,41, 0.6)); }}

but it don´t work ...
0
A
Arno Bück
Accepted Answer
1 year ago #168582

Hi, i solved the problem, Thanks! :-)

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 1 year ago #168905

Hello,

Glad that you have solved it already:)

Would you like to share your experience with us about, how did you solve it?

Best Regards

0