How to make a scroll text box in Xara

[jamesd]

Here is an SEO friendly way to create a scroll text box in Xara.

First create your text box as normal making the box the width you want and to accommodate the text in length. Then select it with the selector tool, using the yellow tag icon give it a name eg:scroll1 also give it the name HTMLBlockText.



Next create a rectangle, then using the placeholder tab select 'HTML code (head)' and paste the following code:

<style type="text/css">
#scroll1 {
height: 100px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
overflow: auto;
}
</style>

The text(above) colored in red must be the same name that you first gave the text box in this case its 'scroll1'. Everything colored in green can be changed to suit, scroll box height etc..




Here is the xar file: scroll_text_box.xar

[angelize]

Thank You James, I'm sure this will come in handy.

[nowequa]

GREAT!!!!
Very nice solution. Now the following challenge!!!
When I incorporate a picture in the text (even when anchored) the picture stays on its spot in the page and not the scroll box.
I would like to scroll with the picture staying in place relevant to the text
Is that possible?

[jamesd]

Hi nowequa,

You will need to use another placeholder.
Have a look at the attached .xar file you will see the word *image* I have highlighted this and then placed the following img tag using a placeholder.

<img src="http://www.talkgraphics.com/images/styles/CrystalClean/style/logo.png"/>



Change the red text to your image file path.

scroll_text_box_with_image.xar

[nowequa]

Thank you Jamesd.
Great!
Sorry for late answer due to company trip.
Coming holiday will be perfect to experiment
Seasons Greetings to you and all other members

[gwpriester]

Excellent James. This comes up very frequently. I hope you added a keyword(s) to the thread so it can be found quickly in a search of TG.

[Albert1952]

GREAT!!!!
Very nice solution. Now the following challenge!!!
When I incorporate a picture in the text (even when anchored) the picture stays on its spot in the page and not the scroll box.
I would like to scroll with the picture staying in place relevant to the text
Is that possible?

Hello my engels not good sorry
How do I put it in xara designer pro x
Do you tell me
Thank you
Greetings Albert

[gwpriester]

Welcome to TalkGraphics Albert

This thread is 6 years old.

Please start a new thread in this forum.

[PaulD]

Next create a rectangle, then using the placeholder tab select 'HTML code (head)' and paste the following code...

Problem: Can't see any "HTML code (head)" buttons. Wherever I look in the various Web Properties tags they are "HTML code (body)" only.

In your xar file, when I click on the placeholder the "widget - edit" menu pops up but clicking on edit does nothing. If I forcibly call up Web Properties, under the Placeholder tag the "Replace with HTML code" radio button is activated, as if something is present, but clicking HTML code (body) produces an empty window.

Never seen this before. What goes on? Is there a connection between this and the fact that no HTML code (head) button is showing?

(Sorry - just noticed this is an old post. Hope someone can help as I'd like to study this more closely.)

[jamesd]

Problem: Can't see any "HTML code (head)" buttons. Wherever I look in the various Web Properties tags they are "HTML code (body)" only.

In your xar file, when I click on the placeholder the "widget - edit" menu pops up but clicking on edit does nothing. If I forcibly call up Web Properties, under the Placeholder tag the "Replace with HTML code" radio button is activated, as if something is present, but clicking HTML code (body) produces an empty window.

Never seen this before. What goes on? Is there a connection between this and the fact that no HTML code (head) button is showing?

(Sorry - just noticed this is an old post. Hope someone can help as I'd like to study this more closely.)

Hi Paul, If you are using WDMX (not premium) you won't find the "replace with HTML code (head)" instead using the name tag you will need to give the name <head> to the placeholder.

I think I only have the premium version, can someone else confirm?