ROUND BOXES, WRAPPERS, DIV CONTAINERS, ETC. & WS 4.0
Now open the PAGE PROPERTIES,
PAGE HTML tab,
"Inside Page Header" radio button,
and copy & paste this stylesheet for the previous code:
You can change the color codes. One is for the border and the other is for the background color. The border color code is highlighted in RED and the background color code is highlighted in blue .
You may also change other attributes of the code, like border width and style, but be careful. (It's a good idea to have a backup copy of the codes in case you need to start over).
After customizing the code the way you want it, you may then "stretch" it to any height or width you desire by simply resizing the "HTML OBJECT" with the drag bars or the size attributes in OBJECT's Properties. Then provide whatever content you may want and position it over top of the placeholder graphic.
It's as simple as that once you know how!
Another few nifty tips is to remember to use COMMENT so that you can find your code easier when editing the HTML and to place content INSIDE THE CODE so that your box will seem as a true container when you create your site. You can accomplish this by placing comments above and your code within the <div> tags of our box model like so:
<!-- COMMENT -->
<b class="Xtop">
<b class="X1"></b>
<b class="X2"></b>
<b class="X3"></b>
<b class="X4"></b>
</b>
<div class="X
YOURCLASS
">
PLACE CODE HERE TO BE "INSIDE" CONTAINER
</div>
<b class="Xbottom">
<b class="X4"></b>
<b class="X3"></b>
<b class="X2"></b>
<b class="X1"></b>
</b>
<!-- END COMMENT -->
Want to have nice round boxes of content on your site? Here is how to manage that with Web Studio 4.0 using a little CSS and HTML.
Drag an HTML Object Box from "Cool Stuff" tab in galleries onto the page.
Open the Object Properties and click the "HTML Content" tab.
Copy and paste the HTML code on the right into the box and SAVE:
IF you want to have more than one container and a different style for each, simply replace the "x" in the codes with a unique name for each container that you plan to have, and in the corresponding stylesheet code for each. Be careful when using search/replace in editors.
ex.
"xtop, xbottom, x, etc." should become "box1top, box1bottom, box1, etc." and the corresponding stylesheet would be "box1.css",
The next box would be "box2top, box2bottom, box2, etc." and a corresponding stylesheet of "box2.css".
<style type="text/css">
.Xtop, .Xbottom {display:block; background:transparent; font-size:1px;}
.X1, .X2, .X3, .X4 {display:block; overflow:hidden; height:1px;}
.X2, .X3, .X4 {
background:
#FFFFAA
; border-left:1px solid
#000000
; border-right:1px solid
#000000
;}
.X1 {margin:0 5px; background:
#000000
;}
.X2 {margin:0 3px; border-width:0 2px;}
.X3 {margin:0 2px;}
.X4 {height:2px; margin:0 1px;}
br {margin:0;padding:0;border:0}
.X {width: 100%; height; 100%;
background:
#FFFFAA
; border:0 solid
#000000
; border-width:0 1px;}
</style>
UWX Webmaster Tips, Tricks, & Tools
Web Studio 4.0
