Prior to SiteSpinner version 2.7e, if you wanted to frame an image with a background color or image, you had to use the rectangle shape. An example:

With v2.7e, an improvement was made that allowed code objects to be resized in the same manner as a text object; i.e., resizing the code object now shows what the object would look like if it were visible on the page. How is this useful?

For one thing, you now have access to a transparent rectangle that IS NOT an image! The new and improved code object can have a border, and can be filled with a background color or image. And all this is done in a few bytes of code via CSS rather than using an image.

To use this feature, use the Code icon tool button to open the code editor. Then save and close the editor. Yes, leave it empty. Now use the Geometry Editor or drag the code box edge to your desired size. Add a border it you want. Use the Shading tool to add a background color or image.

Code objects can also be stacked and grouped.

Hi Larry!

Sadly your example image doesn't show, but I am going to go play with this straight away.

Well found!

Ali

Hi Larry

I think I am doing something wrong. When I make the code object, if I give it a border outline and then choose to tile the border with an image, only a colour shows up, and the centre of the image goes white.

Have I missed a step? I have made sure the CSS code stripper is not pressed.

Thanks in advance.

Ali

Hi

I think I have got it now. I tried to put an image in the border. Silly me. I just realised that it is working when you preview or go to the published page. For me, nothing is displaying in SiteSpinner itself to show that the image is there. Does yours?

I do find that you can assign a colour as well as the image, so that would at least mark that the code box had been filled.

I think we can all imagine the feature requests flowing from this one So easy for a non-coder to ask this kind of thing!

Ali

PS I know. I realise how dumb I am. It says quite clearly that you won't see code until the page is published.

I got carried away for a minute there!

Thanks for this tip. It is a great one.

Ali

This is fun.

Once you make the code box as per Larry's instructions, if you lock it you can then go back in and change the object from being just code. This allows you to type in a caption for your photo. Alignment is limited, and you have to remember to clear any border you've included, but this could be quite useful even so.

If you don't lock the object before working with it, when you add text the former code object snaps to the size of the text you have just entered.

A/

Erm and you can also do this with text boxes without having a code object. Larry or someone clever, please could you advise what is best for various uses?

I am so new I don't remember the d version so am not sure what is the impact of changes in e. I am very grateful for your patience while I am getting to grips. I am coming to SiteSpinner from something very different. We are changing to this to empower our clients rather than have them struggle with content management systems.

Many thanks.

Ali

LOL - that should read Larry or someone else as clever! Absolutely no insult intended, Larry.

I am so loving this program. I am going to give myself a whole day off next week just to play with SiteSpinner. Every time I open a menu I see something else splendiforous.

Have a great weekend all.

Ali

Since the code object is designed to hold text and not images, an image used for the background will not appear in the code object while on the work page. A text object behaves the same way. A rectangle however, is an image object and is capable of displaying is filler whether it's an image or color.

Although you can use a code object as a text object, the text object provides many font design features not available in a code object (unless you want to enter the HTML/CSS codes yourself). If you want to use captions, it would be better to use a text object and take advantage of SiteSpinner's built-in font features.

The usefulness of this trick is limited to framing other objects; its only benefit over a rectangle shape is that you do not have to use images, thus speeding up page loading.

Hi Larry!

Thanks so much for this. All points taken. In reality I won't be doing anything very evil to SiteSpinner because I want my clients to have templates that they can understand and follow. The more customisations that get made, the harder it is for someone else to maintain the integrity of the design.

But for my own stuff, well it matters a great deal less what evil things I have stuffed into poor old code containers! This is all your fault, Larry. I was minding my own business, but then I read your site and all about the special things SiteSpinner can do. You have corrupted me.

And I was a newbie. Shame on you!

Have a nice weekend.

Ali

Make sure you visit Bruce's site:

http://www.bruceee.com/SS/

It's full of useful information on many subject areas.

I hate to be a party pooper, but...

Most of this you can do with rectangle objects -- the key is putting anti-alias and re-render both off. That also does not generate image files, and the code is very similar to that you get with a code object. The rectangle has the advantage of being WYSIWYG.

As far as I can see, there is one case in which the Code Object is superior to the Rectangle. The Code Object allows thick borders of more than two pixels. If you try that with a Rectangle, an image file is created.

Here's Larry's image that didn't show in his first post. As you can see there's lots of scope for creativity.

Thanks Bruce. I figured I was probably over-looking something, but didn't know what. You are the Master.

Another advantage (?) is that the code object can serve two purposes at once. It can contain script code and act as a frame at the same time, as long as the script is not being used to display a page object itself. Of course, the downside to this is if you decide to cut/delete the frame, you just lost your script!

Hello everybody,

This is really interesting. Larry, how did you do the wooden background - or was that a case of inserting a the plane code object into another code object. Or have I disappeared into a fantasy world........ which is always likely.

While we are at it, would anyone know what I can do to get dotted or dashed borders? Presumably javascript somewhere? Polite suggestions only please.

I am SO going to have to read ALL the manual, but I am using this wonderful program to develop a live site so I have to learn on the hoof. Thanks for helping me.

A/

The example can be achieved by using 2 rectangle shape objects around an image. As Bruce pointed out, if you turn off anti-alias and re-render (via the Quick Editor), it is the same as using the code object. Just fill one shape with a color and the other with a tiled image (the wood grain).

Borders other than solid width (dashed, dotted, double. etc), have to be inserted by using CSS. Start by locating the object you want to have a border around; note its name (usually objXX, where XX is a number). Then open a code object and enter the CSS code. For example:

<style type="text/css">
#OobjXX { border: dashed 1px black; }
</style>  

where "objXX" is the object name of your object to border as noted earlier (do not forget the prefixed capital "O"); dashed is the border style; 1px is the size in pixels; and black is the color. Save and close the code object, and preview your project.

Larry, it's official. You are a superstar.

Thanks so much for this.

Ali

Spoke too soon. Cannot get this to work. Back to the drawing board.

This border stuff is very cool

Taking Larry's idea of putting CSS code into a borderless Code Object, you can set a non-standard border. Like this:
1. Create a fresh Code Object
2. Paste this code into it

<style type="text/css">
#Oobxx { border: inset 20px #C0C0C0}
</style>  

where the xx is the object number as Larry described.
3. Save and Close the Code Object
4. Resize and position the Code Object
5. Preview.

There are 8 border styles available -- details at W3Schools

Can't get this to work. Have tried both ways - yours has different syntax to Larry's. If I fiddle with the code either the box doesn't show at all or it shows with no customisations.

Any idea what I am missing. It should be really easy.

thanks all.

Ali

The most often error with using CSS code is that the wrong page element is being referenced. Also, make sure you are using a code object and not a text object. A text object filters special HTML character codes which will break CSS, HTML and scripts.

The "OobjXX" in the code is an id name which identifies the page object that should have the CSS code applied. On your work page, there is a object name box on the top toolbar; it says things like "obj1", "obj43", etc. You need to find the name of the object you want a border around. The easiest way is to click on it; the name pops up in the object name window. When you enter this name in the CSS code box, you MUST PREFIX the name with a capital "O" (no quotes). When SiteSpinner publishes your project, it always puts an "O" in front of object id names and a "G" in front of geometry id names.

You cannot use a geometry id name for border CSS code, because SiteSpinner always controls the border at this level. So you need to use the object id name, which is one level up from the geometry object.