Embeddable badge left alignment

Ask the Community Customization
1

Hello, I would like to align the badge to the left. How can I do that?

* Link to the page with the widget in question:

1 Like
3

Hello @deb8able and welcome aboard the aircraft called Elfsight Community :airplane:. Please fasten your seat belts :seat: because you are going to be stormed by our friendliness and incredible support :heart_hands:.

I’ve added the following CSS code to the Custom CSS section:

[class*="BadgeContainer__Inner-sc"] {
	margin-left: 0;
	padding: 0;
}

image
image544×690 11.9 KB

Could you please check it and let me know if you like what you see?

4

That’s great. Thank you so much!

5

You are welcome :open_hands:

If anything comes up, please feel free to contact us.

Have a nice day :wink:

6

I just changed the color of something and it looks like it reset. Can you look at it again please?

1 Like
7

I’ve restored it.

It seems that you’ve just removed the CSS code from the Custom CSS section

8

Ah, sorry about that, I thought that was the code I put. Thank you!

1 Like
9

Hello, and how about to align as well all items of the badge, like text align left ? thanks !

1 Like
10

Hello @user2521 and welcome to Elfsight Community :heart: :wave:

We’ve added the CSS code below to the Custom CSS field on the Appearance tab of your widget settings:

[class*="BadgeContainer__Inner"] {
  align-items: flex-start;
}

image
image1650×776 28.3 KB

Please check it and let me know if you like what you see :slightly_smiling_face:

11

Hello this is great ! is it possible to make that widget clickable to a customized link on blank page ?

Thanks !

1 Like
12

@user2521 Could please describe in more detail how it should work? The screenshots would be highly appreciated :pray:

13

Sure,

We would like that when we click on the widget :

It doesnt open the left bar, it just open a link that we will decide to open on a blank page

1 Like
14

@user2521 Could you please provide me with a link you want to use?

Our devs will try to find a proper solution.

15

Sure, is there an email where i can send it to you without it being public shown ?

~WRD0000.jpg

1 Like
16

Sure thing!

I’ll contact you in direct messages :slightly_smiling_face:

17

@user2521 I’ve forwarded your request to our devs and, hopefully, they’ll come up with a solution really soon!

Please do not worry, I’ll keep you updated :wink:

19

Hi @user2521!

I am happy to provide you with a script for your customization request:

<script>
window.addEventListener("DOMContentLoaded", () => {
  
  const interval = setInterval(() => {
    const reviewsBage = document.querySelector(
      "[class^='BadgeContainer__Inner']"
    );
    

    if (!!reviewsBage) {
      clearInterval(interval);
      reviewsBage.addEventListener('click', (e) => {
      	e.preventDefault();
      	window.open('https://mantel.world/pages/cada-cuatro', '_self');
      })
    }
  }, 250);
});
</script>

Please add this script right after the installation code and let me know.

If you want the link to be opened in new tab, please remove , ‘self’ from the 14th line of the code.

So, the 14th line will look the following way: window.open('https://mantel.world/pages/cada-cuatro');

1 Like
20

Thank you !

It works well but it doesnt change the cursor to let the visitor understand its a clickable link

Can we make it ?

Thanks !!

~WRD0000.jpg

1 Like
21

@user2521 Could you please provide me with a link where the badge is installed?

We’ll be happy to check things for you!

22

https://v6lpmcdmwbc.c.updraftclone.com/blog/produit/boite-de-vitesses-hyundai-ix35-1-7-cdi-6-vitesses/

~WRD0000.jpg

1 Like