HotDoodle Logo
What are Framesets

A frameset is a set of images that can wrap or frame the content area of a website. They are very simple to use. For example, in a custom look add the following line at the very end:

{include file="frames/standard.tpl" frame_source=46d4576bcb778/gallery27}

Just including this one line will add the frame around the site.


frameset_before.gif

Before

 

 

Apply the

"Rounded"

frameset

frameset_applied.gif

After


Finding and Applying Framesets

A set of standard framesets may be found at http://imagelib.hotdoodle.com/?section=borders

Each comes with specific inclusion instructions such as "{include file="frames/standard.tpl" ..."


 

 




 

Using framesets is easy. Creating them takes more effort. If all you want to do is use a frameset, then you can stop reading.




 


Creating Your Own Frameset

When a frameset is present a table is constructed as follows with the normal website content in middle cell.

table class="bodyframe" cellpadding="0" cellspacing="0" border="0" align="center"
   All of the below are the classes used in the various td cells.

bodyframe bodyframe_top bodyframe_topleft bodyframe bodyframe_top bodyframe bodyframe_top bodyframe_topright
bodyframe bodyframe_left bodyframe bodyframe_main bodyframe bodyframe_right
bodyframe bodyframe_bottom bodyframe_bottomleft bodyframe bodyframe_bottom bodyframe bodyframe_bottom bodyframe_bottomright

Low Level Mechanics

The presence of the following declaration in the TPL causes the code generator to draw a frameset.
    {declare_layout var=frames val=1}

Additionally, the top or bottom rows can be made into one big colspan=3 cell (with no corners) by the following declarations:
    {declare_layout var=frame_bottom val=1}
   
{declare_layout var=frame_top val=1}

You can even have that one big colspan=3 cell contain a table with 3 cols. While this may seem to put you right back to the val=1 case, this time the corners are not forced to be the same width as are the sides.:
{declare_layout var=frame_bottom val=3p}
{declare_layout var=frame_top val=3p}

Now all you have to do is declare the CSS for each cell including width, colors, background images, background repeat, etc.  Do it for all of the cells -- td.bodyframe_left, td.bodyframe_right, td.bodyframe_bottom, td.bodyframe_bottomright, etc.


Standard Abstraction

Declaring the CSS for all of the cells can be tedious, but the include "frames/standard.tpl" will generate these for you following a standard pattern.

It takes arguments for the width of the various elements, but has logic to default them. For example, the default width for the topleft is the width for the left, the default for the left is the base frame width.  So you you set only what differs.  For example, this uses all of the standard widths:
    {include file="frames/standard.tpl" frame_source=46d4576bcb778/gallery27}
while this sets more options
    {include file="frames/standard.tpl" frame_source='46d4576bcb778/gallery26' frame_suffix=png
        frame_width=25 
        frame_width_top=78
        frame_width_bottom=122
        frame_width_topleft=70 
        frame_width_topright=70
        frame_width_bottomleft=70
        frame_width_bottomright=70
        frame_top='3p'
        frame_bottom='3p'}


Background Image Names in the Standard Frameset Abstraction

Rather than requiring the passing in of 8 image names, the standard abstraction takes the path to an image gallery and presumes that files of the proper names exist there.  It will refer to
    {image_gallerypath}/right.gif
    {image_gallerypath}/rightbottom.gif
etc. See the imagelib.hotdoodle.galleries for examples.

The optional argument frame_suffix can set if the images are gifs, pngs, etc.


Standard FrameSet Arguments

Here are the arguments you might pass to the standard frameset abstraction:

  • image_path -- the path to the image gallery with the images.
  • frame_source -- if the gallery is in imagelib.hotdoodle.com this gives its name and constructs image_path accordingly.
  • frame_suffix -- the suffix of the images. Defaults to ".gif"
    The images will be referenced as follows: background: url({image_path}/right.{$frame_suffix})

The following are all optional:

  • frame_width -- defaults to 30
  • frame_width_top -- defaults to frame_width
  • frame_width_bottom-- defaults to frame_width
  • frame_width_left-- defaults to frame_width
  • frame_width_right-- defaults to frame_width
     
  • frame_width_topleft -- defaults to frame_width_left
  • frame_width_topright -- defaults to frame_width_lright
  • frame_width_bottomleft -- defaults to frame_width_left
  • frame_width_bottomright -- defaults to frame_width_right

  • frame_top -- sets the value for declare_layout var=frame_top
  • frame_bottom -- sets the value for declare_layout var=frame_bottom 

 


How to Add a New FrameSet
Instructions if the frame is of constant thickness:
Upload a .gif, .jpg. or .png file with the following names
    left, top, right, bottom
and, if applicable,
    topleft, topright, bottomleft, bottomright
(All image names need the same suffix, and all should be properly sized)
 
Edit the album properties and put in a how to use statement.
The line you need is
     {include file="frames/standard.tpl" frame_source=46d4576bcb778/gallery27}
or
     {include file="frames/standard.tpl" fraimage_path='files/imagegallery/...'}
To get this value, click on an image in the gallery and show its URL.
 
If your width is not 30, add a
    frame_width=45
declaration, or set the widths of the individual elements.
If you do not have corners, add frame_top=1 and frame_bottom=1
      {include file="frames/standard.tpl" source=46d4576bcb778/gallery27 frame_width=45 frame_top=1 frame_bottom=1 }
You can also disappear the top or bottom by setting it to 0.
 
Edit the album properties and put in a how to use statement.
Test the frame by using it in a look.
Take a Sample and upload it to the album.
Move the sample to be the first pic in the album
Edit the album properties and set it to 1 pic per row, 15 rows per page, 1 rows on cover, and for 200x200

© 2006 - 2015 Metabyte, Inc., All Rights Reserved, Patents Pending

http://www.hotdoodle.com, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Powered by http://www.hotdoodle.com, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Custom Website designs for Self-edit Sites Site Map