Muti Widget Page

Topics: Themes
May 3, 2011 at 8:54 PM

Has anyone created a widget page layout with 3 or 4 widgets across a page with the ability to add more widgets below and no other content on the page other than the Header /Nav bar?

Coordinator
May 4, 2011 at 1:24 PM

I haven't done that, but it sounds interesting.  It should work as-is.  By putting a widget zone on an ASPX page where the main content area is.  You could then add widgets.  You probably would need to add some CSS styles to the widgets so they lay out as you want them to ... perhaps by floating them, etc.

May 4, 2011 at 8:04 PM

Hi, I'm new to BE, please can you give me some more guidance on how to do this or send link to any reference materials that may help. 

 

Thank you

Coordinator
May 6, 2011 at 1:44 PM

As an example, if you create a new ASPX page in your blog (e.g. widgets.aspx), and put the content below in it, you'll have a widget zone in the main content area.  If you are logged into the blog, you'll see the dropdown list to add new widgets on this new page.  As you add each widget, they are going to appear one on top of the other.  With a little CSS, you could have it styled so each widget is lets say 300px wide and you float them so they are side by side.  There's a few possibilities here.

The widget zone in the example here has a "ZoneName" of "Widgets_Page".  If you create another .ASPX page and put a widgetzone on that page with the same ZoneName, you'll see the last list of widgets from widgets.aspx.  Or, you can give that widget zone on a different page its own ZoneName and it will have its own set of widgets (it'll be its own zone).

<%@ Page Language="C#" AutoEventWireup="true" Inherits="BlogEngine.Core.Web.Controls.BlogBasePage" %>
<%@ Import Namespace="BlogEngine.Core" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphBody" Runat="Server">
  
  <blog:WidgetZone runat="server" ZoneName="Widgets_Page" />
  
</asp:Content>

May 6, 2011 at 7:54 PM

Thanks for getting me started.    Worked great with the following css.

.sp_Left
{
    float: left;
    padding-Right: 10px;
    width: 33%;
    /*position: relative; */
}

.sp_Mid
{
    float: left;
    width: 32%;
    /*position: relative; */
}

.sp_Right

{
    float: Right;
    padding-Left: 5px;
    width: 33%;
    /*position: relative; */
}