Custom widget creation

pandeyved
Tera Contributor

Hi All,
I need a widget to display the following content like this, whether any OOB widget present or need to create custom one. If custom, then how I can create.

This is widget to display image and when we click it takes up to cat item

pandeyved_0-1700554855116.png

 

Similarly like this one more

pandeyved_1-1700554855118.png

 

Please guide

Thanks

1 ACCEPTED SOLUTION

@pandeyved You can try out card size as 'small' to get the below kind of design with OOB widget. 

SajalGupta_4-1700561348995.png

 

 

If you still want to achieve that design. The space is too small to show 2 cards back to back, you can customize the widget and update the size in the below widget code from 20 rem to 8 rem to achieve that.

SajalGupta_2-1700561211865.png

SajalGupta_3-1700561269997.png

 

 

View solution in original post

19 REPLIES 19

Hi @Sajal Gupta 

Thanks for solving my doubts. I have one more query

I am trying to maintain some space between two widgets on Portal. I have created one custom widget, but as I placed the widget it is overlapping the existing widget. at the same place out of box widget is placed properly. Please guide thanks

pandeyved_0-1700626126410.png

 

Thanks In Advance

@pandeyved There should be a page-level CSS ".rt-margin", that should be applied on the widget and have a margin around it.

You can find the class present as part of the container.

SajalGupta_0-1700627238589.png

 

In this case, it looks like something removed the margin either at the widget level or page level while you were customizing the widget.

You will have to inspect and find the root cause or use the OOB version of the widget and re-do your changes one step at a time (The issue should not be present with OOB).

Regards

@Sajal Gupta 
Can you please elaborate, as I have cloned this widget from oob version only

Thanks

@pandeyved Can you place the OOB widget instead of the cloned widget and share the screenshot?

Hi @Sajal Gupta 


I have a requirement to display the name of quick link below the image not on the image.

pandeyved_0-1700648131372.png

 

Example Password reset should be present below the image, please guide what can I do?
Thanks