How do I Change Or Remove The Images Floating Above The Footer? - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

How do I Change Or Remove The Images Floating Above The Footer?

N

Neil

Template 1 year ago

Using Nuron template.

The footer has squares floating on both sides of the footer and I can't see how to change them or in the worst case remove them?

Please can someone help?

0
4 Answers
Order by
Oldest Newest Votes
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #141073

Hi Neil,

both of them are based on CSS, here is default code, now is your turn to customize it.

#sp-footer .container-inner::after {
  content: "";
  position: absolute;
  top: -50px;
  right: -105px;
  z-index: 1;
  background: rgba(135, 118, 255, 0.3);
  backdrop-filter: blur(4px);
  width: 80px;
  height: 100px;
}


#sp-footer .container-inner::before {
  content: url("../images/footer-shape-1.svg");
  position: absolute;
  left: -240px;
  top: -123px;
  z-index: 1;
}
0
N
Neil
Accepted Answer
1 year ago #141185

Thanks Paul. This helped a lot. In the end I used the following CSS that worked for me.

#sp-footer .container-inner::after {
  content: ""; /* Set content to empty */
  position: absolute;
  top: 63px;
  right: 0px;
  z-index: 999;
  background: transparent url("./images/example1.png") no-repeat center / contain;
  backdrop-filter: blur(4px);
  width: 150px;
  height: 150px;
}

#sp-footer .container-inner::before {
content: ""; /* Set content to empty */
  position: absolute;
  left: -240px;
  top: 63px;
  z-index: 999;
  background: transparent url("./images/example2.png") no-repeat center / contain;
  backdrop-filter: blur(4px);
  width: 150px;
  height: 150px;
}
0
E
Eleanora
Accepted Answer
1 year ago #141198

Hi Neil,

[ I don't work for Joomshaper ]

Be careful to :

  1. optimize your images after having saved them to size, not let the browser do the resizing
  2. rename the images to be SEO friendly
  3. since there are no Alt text for background images via CSS make sure that you put a Title description for the image in your HTML.

[This will help with making your site accessible as well]

And turn on the accessibility plugin in Joomla 4.x or 5.x.

Cheers,

E.

0
N
Neil
Accepted Answer
1 year ago #141221

Thanks for your comments Eleanora,

Have done 1 and 2.

These images are purley decorative so there's nothing needed here. Also, because there's no <IMG> tag I don't know how I could add ALT and TITLE. Is that possible in the CSS?

Cheers Neil

0