Custom Footer with Image

  • 22 March 2024
  • 8 replies
  • 60 views
SamBWillans
Rank
Userlevel 2

Hi there

Please could some one help me out with how we could edit the footer on the home page to add an image? and how I figure out recommended sizes for the images please?

Ideally I'm trying to adjust the whitespace at the bottom?

 

Any help appreciated!!!

 

Thanks

Sam 

8 replies

lrnlab
Rank
Userlevel 7
Badge +7

Not sure about how to decrease or remove the white background but I have been successful using a custom created image and if you have access to a server, you can also use an iFrame to load an image.

SamBWillans
Rank
Userlevel 2

@lrnlab I got so far with it using the following CSS:

 

/**code for footer**/

div.doc-layout-common-footer {

  height: 100px;

  background-image:

  url(https://XXXXX);

  background-position: center;

  background-repeat: no-repeat, repeat;

  opacity: 0.6;

 

}

Ill have to play around with image sizing and position I think :)

 

Sam 

lrnlab
Rank
Userlevel 7
Badge +7

yes it’s a lot of trial an error when it comes to configuring these areas...especially seeing as you don't to this type work often...

Bfarkas
Rank
Userlevel 7
Badge +3

I’m curious about your usecase here, seems like jumping to CSS when there might be some built in options for you first.

You say footer, are you using the actual footer at all in your platform? If so is it just trying to be different on this page? Are you actually adding a visual image below? Could you instead just add a row with 1 image widget as the bottom?

If you are using the CSS to essentially hide the footer entirely, why do you need the image at all? Just do a display:none; in the class you had above?

SamBWillans
Rank
Userlevel 2

@Bfarkas the team dont want a widget (I did suggest this)  they want to utilize the white space in the footer (Docebo support also said I would have to utilize ccs for this too) ultimately they would like a large image across the bottom with a multi brand graphic in it.  im just trying to find out what sizing may work best

Thanks

Sam 

 

 

Bfarkas
Rank
Userlevel 7
Badge +3

@Bfarkas the team dont want a widget (I did suggest this)  they want to utilize the white space in the footer (Docebo support also said I would have to utilize ccs for this too) ultimately they would like a large image across the bottom with a multi brand graphic in it.  im just trying to find out what sizing may work best

Thanks

Sam 

 

 

I hear you, but based on your screenshot, you don’t actually have a footer defined, you can add an image directly to that setting instead of injecting via CSS or using a widget, and then at most use the CSS to remove any buffer space. See here, the gradient box is coming in via the system settings area for the footer:

System area:

 

Some advantages of this:

  • You can change the image based on language selection (not sure if relevant to you or not)
  • You can add proper alt text to the image instead of adding as a background.
  • You can link the image to a URL if you wanted.
  • It’s more accessible to your users.
  • It works on mobile where CSS methods will not.

I added a much smaller amount of CSS:

.doc-layout-common-footer {
    padding: 0 !important;
}

and it brings that footer image flush:

except this degrades nicer for non-supported custom CSS usage.

SamBWillans
Rank
Userlevel 2

@Bfarkas Thank you ill take a look :)

SamBWillans
Rank
Userlevel 2

@Bfarkas how do I stop the image from adding white space when I zoom? eg sized to 70%

ive tried adding width etc but nothing working

Thanks!!!

 

 

Reply


Terms & ConditionsCookie settings