How to apply styles in widget code

Hi Team,

I would like to know, how can include .css files in widget code (or) how to apply styles directly in widget code.

Please provide me one example, that will help.

Thanks in advance,

Krishna

  • Hi KrishnaSandeep,

    I am not 100% sure what you mean by this. Do you mean:

    1) how do I add a new style sheet to telligent (which contains css classes that apply to your widet)?

    or

    2) how do I apply a css class to some of the html elements in my widget?

    or

    3) how do I add extra css styles to the existing style sheet?

    If 1 then there are ways to dynamically load a style in widget code, however this is generally only done in special cases where you want to conditionally apply css based on logic. if you are just styling an existing or new widget then you are best just adding the new styles to the existing screen.css in the theme (or modifying existing styles).

    hope this helps.

  • Hi KrishnaSandeep,

    If you put your css in the same folder as your widget velocity file. You can include a css file using the api call.

     $core_v2_page.AddLink("stylesheet",$core_v2_widget.GetFileUrl("widget.css"))

    This will add a new css link to the top of your html page.

    I hope that helps.

    -Steven

  • In reply to Steven Thomas:

    Doesn't Telligent advise against this (except for special circumstances)?

  • In reply to Luke D:

    Hi Luke,

    I don't think there are any issues doing what Steven says as long as you are (as I stated above) "dynamically loading a style in widget code, for a special cases where you want to conditionally apply css based on logic. ". Thats what I was alluding to with my response above.

    I think in most cases you can just add new styles to the existing style sheet or alter the existing styles.

    Thats why I was asking what KrishnaSandeep was trying to do to get some context and suggest the correct approach.

    thanks

    Adam

Related