custom widget css

In this Article we will show you how to use your own custom css for the traedsmarter widgets.

Using your own Css gives you flexibility and allow you do design the widget the way you want.
Also as you will see the Css file for your own design will be on your side\server so you can easily change it when you want without being dependent on our deployments.

In this example we will handle the registration widget

As you know you can use a widget several times in several places on your site and you might want to have design changes between on page to another.
E.G you have the registration widget on your home page and in one of oyur inner pages and you want to have a different design for every page.

The way to edit the design of a widget per page is by using the custom css parameter when you call the widget iframe,

All you need to add this parameter to the iframe link:

customCss=Tradesmarter-widget&css=http://www.tradesmarter.com/css/tradesmarter-widgtes.css?v=5

Tradesmarter -widget - will be the name of the css file you can use to run over the default css

http://www.ggbinary.com/css/ggbinary-widgtes.css - this is how you set the url so it will point the folder where your css file is located

This way when you call the widget, you tell it to use your own custom css file where you can run over the tradesmarter css with yours according to your needs.

so your iframe link for the registration widget should look like this:

This way you can adjust every tradesmarter widget with your own design

*One More Tip:

When creating your own css file you need to base your css code on the original tradesmarter design.
Best way to do that is to look in your site code and look for the css part that handles the widget you want to edit.

Second step will be to copy the relevant css code to your own new css file and then start rnign over the original code, using more spesifics css selctors or the "!important" tag when you want to run over an exsiting css code.

E.G – lets say we have this code:
#registraion-widget {color=#red;} – this is the original tradesmarter code for your widget.

If you want to run it over do:
#registraion-widget {color=#green !important;}

This is where you can see and copy the original css code for your widget (in Chrome browser you look for the relevant css by right clicking any of the widget element and selecting "inspect element").

If you click on any of the next css call you will get to the all css section you need and this is how it will look like, as you can see all of the relevant css code for the registration widget will be under the "/*registration widget*/" comment

and will stop where the next widget css starts: