Solved Templates

How do I change or remove the images floating above the footer?

Asked by Neil 2 years ago Last activity 2 years 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?

Accepted answer

Marked as the solution

Paul Frankowski Senior Staff

2 years ago

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;
}

3 more replies

Neil Asked this

2 years ago

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;
}

Eleanora

2 years ago

Hi Neil,

[ I don't work for Joomshaper ]

Be careful to :

optimize your images after having saved them to size, not let the browser do the resizing
rename the images to be SEO friendly
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,

Neil Asked this

2 years ago · edited

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