How to make a scroll text box in Xara

**Big Frank** · 09 September 2012, 12:04 AM

Originally Posted by SuperDave

3. I did find out that FF doesn't support scrollbar styling... interesting for a browser that typically leads the way on functionality

That's not entirely true. Firefox champions open standards, not pretty styling changes that override user preferences.

However, here's a script that promises to do just that:

http://www.hesido.com/web.php?page=customscrollbar

**paraggadhia** · 30 October 2012, 01:41 PM

Hi,

Even after placing the code given by I am not able to get the scroll bar.

I tried using
<style>
div
{
overflow:scroll;
}
</style>

it works but the scroll bars vertical and horizontal is quite weird.
Not proper.
Also I have a text which is extending the size of my page..WHat to do as it gets truncated.

**jamesd** · 30 October 2012, 06:44 PM

Hi paraggadhia,
Welcome to Talk Graphics

Can you post a link so we can see whats happening?

**maarten82** · 05 January 2014, 02:54 PM

Hai Jamesd, I see this is a very old post but i don't find the answer that i need in the searchbar. i hope you can help me.

I have worked with the information from this post and it works perfect. How can I use a picture that is already on one of my pages as a picture in the scrollbar.
i have tryed this: i have the word *image* and then i can set the <img src="http://www.talkgraphics.com/images/styles/CrystalClean/style/logo.png"/> in the body <body> and then it wil show up in the scrolbar. just like the example, but i would like to use one of my pictures that is already on my website in the scrollbar.
if I do it now then i have to make a folder with very small pictures in a folder and then the program places the pictures in the scrollbar. my problem is if I want to place new pictures or change my pictures in the scrolbar, every single time i have to create small pictures.

in webdesigner automaticly the pictures will change when a place a new picture above the other one.. so it would be easyer to have one page were my pictures are placed and then by drag and drop i can change them or replace them. this way i do'nt have to do allot of work everytime i have new pictures to ad.

this is my idea: i have a scrolbar on the rightside of my website and it shows difrent pictures. when guest who visit my page can click them and then they wil be enlarged on the left side but in the middle of the website. so first they have a small picture and when they want to see them it wil automaticly enlarge. but it's important that the rest of my information doesn't move.

i Hope you can help me, sorry for my dutchie english..

**jamesd** · 05 January 2014, 06:10 PM

Hi Maarten82, there is a way to do this!

First of all select the image that is already on your page(the one you would like in the scroll box) then using the name tag give it the name filename="image1"

Click image for larger version.

Name: 87.jpg
Views: 223
Size: 64.8 KB
ID: 100155

Depending on your settings or image type this will export the image as either image1.png or image1.jpg to your index_htm_files folder.
So highlight the placeholder text in your textbox and change the code to
<img src="index_htm_files/image1.png" width="150px"/> changing the extension and size appropriately.

Click image for larger version.

Name: 88.jpg
Views: 219
Size: 38.1 KB
ID: 100154

You can then just drag and drop to replace the image and the image in the scrollbox will change with it

**jamesd** · 07 January 2014, 09:04 PM

Hi Maarten82, just realized I did not answer the last part of your post

this is my idea: i have a scrolbar on the rightside of my website and it shows difrent pictures. when guest who visit my page can click them and then they wil be enlarged on the left side but in the middle of the website. so first they have a small picture and when they want to see them it wil automaticly enlarge. but it's important that the rest of my information doesn't move.

You can do this also!

Create a layer for each of the large pictures and place them on their layers in the place you want them to be viewed.
Then using the Name tag give the image the name filename="image1" then give the next image the name filename="image2" and so on...
You can then hide the layers using the eye icon beside the layer names.

Now highlight the placeholder text in the textbox and change the code to <img src="index_htm_files/image1.jpg" width="75px" border="0px"/>
To add more pictures just add <img src="index_htm_files/image2.jpg" width="75px" border="0px"/> to the next placeholder and so on...
While the placeholder text is highlighted click link and then popup layer and choose the layer for that photo.

**maarten82** · 08 January 2014, 12:44 PM

Hi James,

thanks for your reply! and thank you very much for your help! i am very happy! i wil gve this a try and then il get back to you if i have any problem or if it works i wil show some result! thansk allot!

greets maarten

**jamesd** · 09 January 2014, 06:16 AM

You are very welcome

**maarten82** · 13 January 2014, 02:49 PM

Hai Jamesd.

I have another question but i don't know how ask it directly to you..

when i create a nav bar and i have 4 menu buttons and i create sub buttons under the all 4 menu buttons, always when i have exported the site to check if it works you get when placing your mouse on a menu button a square behind the text of you sub button? how can i make this transparant? i only want to see text as a button the backround of the button needs to be transparant.. can you help me?

Click image for larger version.

Name: Naamloos.jpg
Views: 233
Size: 75.6 KB
ID: 100244

can you see on the picture what i mean? the word testikel is a submenu button but always there wil be that white backround...
i have tryed in the Pop-upmenu style button to change the backround but it doesn't work..

do you have an answer?