Is there a way to add a graphic to a widget header or footer in the basic paid version

Ask the Community General Questions
1

  • Issue description: Is there a way to add a graphic to a widget heading or footing in the basic paid version

  • Link to the page with the widget in question: Elfsight

1 Like
2

Hi @user18191, happy to see you in the community!

Iā€™m afraid I didnā€™t quite understand your idea, could you please elaborate on what graphic youā€™d love to add and to which part of the widget? What should this graphic display?

Thank you :slight_smile:

4

I am using the event calendar widget template here and want to put our logo somewhere on the page ā€“ thank you ā€“ perhaps I need to use a different template?

image001.png957Ɨ594 85.7 KB

6

Hey @user18191, thanks for your clarifications! :raised_hands:

To help you with your request, I need to consult with our developers first. Iā€™ve contacted them regarding your query, and Iā€™ll get back to you as soon as I hear from them :pray:

8

@user18191 thanks for waiting! :pray:

Our devs have prepared the CSS code for you:

.eapp-events-calendar-events-calendar-header:after {
  content: '';
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmAKc2JMCsy9CXkbMM5jOGUWB3nBBSVphzyw&s');
  position: absolute;
  right: 0;
  bottom: -90px;
  width: 300px;
  height: 55px;
  background-position: center right;
  background-size: contain;
  background-repeat: no-repeat;
  margin-bottom: 30px;
}

.eapp-events-calendar-events-calendar-header {
  position: relative;
}

@media(max-width: 400px) {
  [class*="WidgetBackground__Container-sc"] {
    padding: 24px 20px !important;
  }
}

Instead of the added URL, you need to put the link to your logo. Once you do it, please add this code to the Custom CSS section:

image
image400Ɨ382 8.53 KB

Could you please check how the CS works and let me know if you like it? :innocent:

9

Thank you Renata ā€“ the Custom CSS didnā€™t work for me but I probably didnā€™t do it right. However, I figured out a way to get my logo on the page, so I am good. Grateful for your help!

.eapp-events-calendar-events-calendar-header:after {

content: ā€˜ā€™;

background-image: url(Sign in to your account);

position: absolute;

right: 0;

bottom: -90px;

width: 300px;

height: 55px;

background-position: center right;

background-size: contain;

background-repeat: no-repeat;

margin-bottom: 30px;

}

.eapp-events-calendar-events-calendar-header {

position: relative;

}

@media(max-width: 400px) {

[class*=ā€œWidgetBackground__Container-scā€] {

padding: 24px 20px !important;

}

}

2 Likes
10

Dear @user18191, Iā€™m very happy to know that you are fine now :star_struck:

Please let us know if you need any other assistance!

11

I did get the code to work after I changed the padding - thank you to the devs! It is way better than my workaround for sure.

2 Likes