how-to-add-linear-gradient-shading-to-text-box

"Add the following code manually to your text box 'style=' if you don't use SiteSpinner": style=background-color:transparent;

A question came up on the Forum about linear shading in a text box, the question was 'Can anyone help me to create a linear shade on my text box'?

In SiteSpinner you can easily change the colour of the text box background as you wish but when you try to apply gradient settings to the colours the changes don't show.
So how do you ad linear shade to the background inside of a text box when SiteSpinner doesn't have a strait forward way of doing this? The answer is you don't, you place a linear coloured rectangle object the same size as the text box behind your text box, then you make the back of your text box transparent so to colour shows, see my example here.

But this is were it gets a little tricky. Because you made the background of your text box transparent when you click in the box to type something no courser appears, this happens because your technically clicking on the gradient rectangle in the background and when you normally click on a rectangle object it doesn't call a cursor to type, so the curser doesn't appear. So you need to use the MouseFx editor to correct this, we will go through this step by step after I fully explain how to ad transparency to you text box. So lets go through this step by step below.

Step1: Add transparency to a text box in SiteSpinner. Highlight your text box by clicking on it and press enter, the 'Form Editor' will appear, at the top click on the 'Form' tab, then in the code section enter the following code: style=background-color:transparent;

Then press ok and you have a text box with a transparent back ground. Now I no what your thinking, "why don't you just go into the colour editor within the 'Form Editor' and set the colour to no colour or transparent"? That's a good thought but it doesn't work for some reason, so adding this code seems to fill this gap.

Step3: Create a rectangle object with linear gradient colour. Click on the 'Object' tab on the top of your work screen, in the drop down box go to 'Shapes' then click 'Rectangle', then place your pointer on the work window, left click and hold and drag the edges of the box to the same size as your text box or go into object editor and change the size in there. Once you have your size add the gradient colour you like by highlighting the object, clicking on it or choosing it from the 'object drop down menu' at the top of the work page, press enter and the 'object editor' will appear in the 'components' tab click on the shading button and the 'shading editor' will appear, now click the linear button and then set your gradient mixtures to your liking, for more info on how to use the shading editor click here.

Step:4 Adding 'Mouse Fx' so the cursor appears. At the top of the work window click on the 'Special Fx' tab, in the drop down menu click 'Mouse Effects' the 'Mouse Trigger Effect' dialogue box will appear. You will need to add two effects to make this work, set the effects exactly to the needed settings using the pictures below:

Now for the names of my objects are most probably different to the names of yours, the name of your text box might be something like 'obj102', but for the purpose of this exercise I named my text box 'textbox' and I name my linear coloured rectangle 'gradient'.

First effect: Set exactly the same as below then press the 'apply' button.

How to add linear shading to a text box.

One method for adding linear gradient to a text box.