How to put color behind text, and how to have an animated gif rollover button

[Artyboots]

Hello

I am struggling today with two things. What is the best way to put color automatically behind lines of text. I can't find any way to do it with the limited text paragraph properties. Not sure whether to apply CSS or a Span or where these might go.

Also, what is the best way to have an animated rollover button, please? If I have a static image on mouseoff, an animated gif on mouseover, softgroup them, link, and preview, the rollover is working but not with the animation. However, other animated gifs will show on the page.

All thoughts and ideas welcome.

Many thanks in advance.

Ali

[Acorn]

Ali, it depends on how sophisticated you want it to become.
The simplest is to add a Glow Shadow and change the Blur, Transparency and Colour to suit.

You can also Clone your textbox or text line and for each Clone apply a different effect: displacement, feather, shadow, fill and transparency type.
You then Soft Group them all and as you amend the text all the effects follow.

I'll have a think about the second question when I find a suitable animated GIF.
I take it the GIF does it business when not Soft Grouped and is on the MouseOff layer?

Acorn

[Acorn]

I'll have a think about the second question when I find a suitable animated GIF.
I take it the GIF does it business when not Soft Grouped and is on the MouseOff layer?

Acorn

OK, here's what I did.
I double clicked on the Get in Gear Animated Banner in designs and exported it as an animated GIF.
On my main page I dropped it onto MouseOver Layer.
I then locked this Layer, set my active Layer to MouseOff and covered the GIF Placeholder with a static box, added a few colours and highlights.
I selected both objects on both Layers and Soft Grouped them.
I added a MouseOver text and a # for the Link.

When I previewed, it all worked.

Back to you Ali.

Acorn

[Artyboots]

OK, here's what I did.
I double clicked on the Get in Gear Animated Banner in designs and exported it as an animated GIF.
On my main page I dropped it onto MouseOver Layer.
I then locked this Layer, set my active Layer to MouseOff and covered the GIF Placeholder with a static box, added a few colours and highlights.
I selected both objects on both Layers and Soft Grouped them.
I added a MouseOver text and a # for the Link.

When I previewed, it all worked.

Back to you Ali.

Acorn

Hey Acorn,

Thanks for the excellent replies. I have been having a lot of fun playing with Xara WEb Designer 9 today. There aren't many paragraph settings, so I was experimenting with faking it, probably using code, to put in backgrounds to the text, borders around. I don't know what I did to the code, but even having named the text I couldnt get it to work. But it was fun trying. It is all crazy, really, because it is so quick to do anything another way in Xara. But sometimes it's nice to keep text with whatever is going on behind it.

Re the animated rollover. Interesting. I will give that a try tomorrow. Bedtime here in the UK. I really appreciate your taking the time to figure out my problem and experiment with me. Thanks Acorn. More tomorrow.

Gnight from England.

Ali

[zaphodeist]

Won't a coloured rectangle behind the text do?

[Acorn]

zaphodeist, I took the slant of the questions to be dynamic colouring.

The other approach it to place a box behind and make it stretch as with dynamic buttons.

Ali, the trick with text is each line is a span so you much add a special Name to the text block.
Have a look in one of the Stickies here for Advanced Features.

Acorn

[Artyboots]

zaphodeist, I took the slant of the questions to be dynamic colouring.

The other approach it to place a box behind and make it stretch as with dynamic buttons.

Ali, the trick with text is each line is a span so you much add a special Name to the text block.
Have a look in one of the Stickies here for Advanced Features.

Acorn

Thanks Acorn. I don't need to be able to do it, but a friend is considering a switch from another web program, so it made me explore what might compensate her for losing more extensive paragraph styles. The answer of course is well, XARA! The whole thing.

It is nice to be able to stick background colours or tiles to paragraphs. You can then achieve interesting effects by varying the line spacing. But doing it graphically in xara is, as you say, also quick.

Work today. No time to play. But thanks for all the tips. Appreciated.

Ali

[Acorn]

Ali, you could explore adding CSS3 effects:

1. Add a Name "HTMLBlockText" to a text block.
2. Also name it "mySomethingOrOther".
3. Create a Page Placeholder, in the head, add:

<style>
#mySomethingOrOther
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>

Better than Xara (!) as it is still text.

Acorn

[Artyboots]

Ali, you could explore adding CSS3 effects:

1. Add a Name "HTMLBlockText" to a text block.
2. Also name it "mySomethingOrOther".
3. Create a Page Placeholder, in the head, add:

<style>
#mySomethingOrOther
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>

Better than Xara (!) as it is still text.

Acorn

Hi Acorn,
This is what I tried yesterday, before posting. But it just makes the text disappear from the page. I wonder whether it only works if you set the color and font etc alongside the shadow ie set ALL the CSS properties, not just one. If so I can't be bothered can you?

There is a chance I have done something wrong - WOULDNT BE THE FIRST TIME! LOL But I have checked and double checked and can't get the text to appear.

Thanks, though. I am sure it is something simple, but I am nearly there.

Ali

[Acorn]

Ali, I copied and pasted my own instructions just and it all worked.
The <style> goes into the Web Properties > Page > HTML code (head), the Names are attached to the block of text...

If you put it in the Web Properties > Page > HTML code (body), it still works.

Acorn