LINKS

Web Studio Next Scrolling Text & Images

This tutorial is going to show you how you can get a manual scrollbar for TEXT and IMAGES inside web studio.

If you are not familiar with web studio refer to the instruction page

Getting Text to scroll in Web Studio

Make sure you use web safe fonts see the google fonts page for more

Paste this code in above all of the text

We have to trick web studio a bit here, but it will add the closing div tag for you

<P></P><DIV style="OVERFLOW-X:hidden; OVERFLOW:auto; WIDTH:100%; HEIGHT:100px">

Web Studio Next

$5.00 to help keep this site up and running would be very much appreciated

Lorem Ipsum Paragraph
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Changing the height & width

Select the text object and Click on edit html again then you can
change the height in this part of the code: 
HEIGHT:100px; to HEIGHT:245px;
For the width you just drag it wider using web studio

When you preview the page you will see the scrollbar like above

To edit the text again

The easiest way is to remove the code, edit the text then paste the code back in again.
To remove it highlight it and use "delete" or "cut" on your keyboard.
If you use cut or delete in edit html it deletes the entire object

Lorem Ipsum Paragraph
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Added spacing around the text

Add some spacing around the text

<P></P><DIV style="Padding:6px; OVERFLOW-X:hidden; OVERFLOW:auto; WIDTH:100%; HEIGHT:100px">

Web studio does some weird stuff to the code after you add it with these but they still work okay.

Add spacing and a border around the text

<P></P><DIV style="Border:1px solid black; Padding:6px; OVERFLOW-X:hidden; OVERFLOW:auto; WIDTH:100%; HEIGHT:100px">

Lorem Ipsum Paragraph
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.

Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Added spacing and border around the text

Put your text on the page format it, add the colors etc. like you always do
When completed go to the TEXT TAB in clipboard select Edit HTML

Manual Image scrolling

READ THIS FIRST
Now this is only one way of doing this but it uses web studio for the most part so it's fairly easy.

There is a couple of things to watch for though...
If your pictures when lined up are wider than the page it will create a horizontal scroll on the page.
When you merge pictures it'll create a white
background so put a "shape" from draw behind them
and merge it all then it uses that color.

Getting images to manual scroll in web studio

Put the pictures on the page, put a shape from draw behind them if you don't want white.
Line them up with Page Layout then go to the create tab and in group select merge
Once merged double click on it and in the ID number text box erase what's there and type scroll
Make a note of the height.

Requires a minimum update to build 22

To be able to re-name the ID you need to use build 22 or above.

Paste this code inside HEAD

Go to the HTML TAB in Insert Page HTML select Inside Head



Change the height and width

Play around with the width to match your images
width:200px to width:220px

Add 20px to the height you made a note of for the scrollbar
height:200px to height220px

Preview to see the scrolling images
Not the best but at least it gives you this option
aaaaaaaaaaaaiii