-
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
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
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?
Hey @user18191, thanks for your clarifications!
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
@user18191 thanks for waiting!
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:
Could you please check how the CS works and let me know if you like it?
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;
}
}
Dear @user18191, Iām very happy to know that you are fine now
Please let us know if you need any other assistance!
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.