Modifying Themes

Oct 6, 2008 at 9:02 PM
Edited Oct 6, 2008 at 9:05 PM
Working with Elastic Orange template, I would like to add a side bar on the right so that there are 3 fields across.Left sidebar, Main and Right sidebar. I am using MS Web developer 2008 and can do this on a regular asp page, but so far I cant figure out how to do this in MWPSK 1.2.  I would like it to work just like the left, no menu but want to easily drop controls on it.
If I knew which pages to modify , I could probably figure it out. but any help is appreciated
Oct 8, 2008 at 2:49 AM
Hey Jazv,
                  These 2 Files should get you started on the right track. Be sure to "send to bar" this will show the right colum. Also search this site for an extension called DropZone I think that was the name of it I have not used it yet, however it should allow droping controls any where on the page

THEFAV


----------Start below this line for Skin.skin-----------------------

 

<%@ Register TagPrefix="cc1" Namespace="MyWebPagesStarterKit.Controls" %>
<%@ Register TagPrefix="RJS" Namespace="RJS.Web.WebControl" Assembly="RJS.Web.WebControl.PopCalendar" %>
<cc1:TemplatedContent runat="server" SkinID="Top">
    <ContentTemplate>
                <div id="head">
                    <div class="titleBG">&nbsp;<div id="websiteTitle"><cc1:WebSiteTitle ID="WebSiteTitle1" runat="server"></cc1:WebSiteTitle></div></div>
                    <div id="utilities"><cc1:LoginStatus runat="Server" id="LoginStatus1" />&nbsp;&nbsp;&nbsp;<cc1:SearchLink runat="Server" id="SearchLink1" /></div>
                </div>
                <table id="mainTable" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td id="left">
                            <div id="navigation">
                                <asp:Menu ID="Menu1"
                                    runat="server"
                                    DataSourceID="menuDataSource"
                                    DynamicHorizontalOffset="0"
                                    DynamicVerticalOffset="0"
                                    StaticEnableDefaultPopOutImage="false"
                                    DynamicEnableDefaultPopOutImage="false"
                                    ItemWrap="false"
                                >
                                    <StaticMenuItemStyle CssClass="nav" Width="188px" />
                                    <StaticSelectedStyle CssClass="nav_selected" Width="188" />
                                    <DynamicMenuItemStyle CssClass="sublevel" />
                                    <DynamicSelectedStyle CssClass="sublevel_selected" />
                                    <DynamicMenuStyle CssClass="sublevel" />
                                </asp:Menu>
                                <asp:SiteMapDataSource runat="server" ID="menuDataSource" ShowStartingNode="false" />
                            </div>
                        
                        </td>
                        <td id="right">
                       
                            <div id="breadcrumbs">
                                <asp:SiteMapPath runat="server" ID="sitemapPath" ShowToolTips="false">
                                    <RootNodeTemplate></RootNodeTemplate>
                                    <CurrentNodeStyle CssClass="currentNode" />
                                    <NodeStyle CssClass="node" />
                                    <PathSeparatorStyle CssClass="separator" />
                                    <PathSeparatorTemplate>&gt;</PathSeparatorTemplate>
                                </asp:SiteMapPath>
                            </div>
                             <div id="contentContainer">
                                <div id="sidebar"><cc1:SidebarControl runat="server" ID="sidebarControl" /></div>
    </ContentTemplate>
</cc1:TemplatedContent>
                           
<cc1:TemplatedContent runat="server" SkinID="Bottom">
    <ContentTemplate>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                       
                        <td><div id="footer"><cc1:WebSiteFooter runat="server" ID="WebSiteFooter1" /></div></td>
                       
                </table>
    </ContentTemplate>
</cc1:TemplatedContent>

<cc1:Pager
    runat="server"
    PageSize="20"
    FirstImageUrl="_images/icon_to_start.gif"
    PreviousImageUrl="_images/icon_back.gif"
    NextImageUrl="_images/icon_next.gif"
    LastImageUrl="_images/icon_to_end.gif"
    Mode="FirstPreviousNextLast"
    CssClass="pager"
/>

<RJS:PopCalendar
    runat="server"
    MessageAlignment="RightCalendarControl"
    RequiredDate="True"
    SelectHoliday="True"
    SelectWeekend="True"
    ShowHolidays="False"
    ShowSpecialDay="False"
    ShowWeekend="True"
    ShowWeekNumber="True"
/>

<asp:TextBox runat="server" CssClass="textbox"/>
<asp:TextBox runat="server" CssClass="textbox" Width="100px" SkinID="datepicker"/>
<asp:TextBox runat="server" CssClass="textbox" SkinID="timepicker" />
<asp:TextBox runat="server" CssClass="textboxAdmin" SkinID="admin"/>
<asp:TextBox runat="server" CssClass="textboxBlog" SkinID="blog"/>

<asp:Calendar runat="server" SkinID="blogCalendar" 
    DayNameFormat="FirstTwoLetters"
    CellPadding="3"
    CellSpacing="0"
    CssClass="calendarStyle"
    TitleStyle-CssClass="calendarTitle"
    TitleStyle-BackColor="Transparent"
    DayHeaderStyle-CssClass="calendarHeader"
    DayStyle-CssClass="calendarDay"
    SelectedDayStyle-BackColor="White"
    SelectedDayStyle-Font-Bold="true"
    SelectedDayStyle-ForeColor="black" />
   
<asp:FileUpload runat="server" CssClass="textbox" />

<asp:GridView runat="server" AllowPaging="false" AllowSorting="false" BorderStyle="none" BorderWidth="0px" Width="100%" GridLines="none"></asp:GridView>

<%-- Buttons --%>
<asp:Button runat="server" CssClass="button" />
<asp:LinkButton runat="server" CssClass="btnRight" SkinID="Right"></asp:LinkButton>
<asp:LinkButton runat="server" CssClass="btnLeft" SkinID="Left"></asp:LinkButton>
<asp:LinkButton runat="server" CssClass="btnUp" SkinID="Up"></asp:LinkButton>
<asp:LinkButton runat="server" CssClass="btnDown" SkinID="Down"></asp:LinkButton>
<asp:LinkButton runat="server" CssClass="btnEdit" SkinID="Edit"></asp:LinkButton>
<asp:LinkButton runat="server" CssClass="btnDelete" SkinID="Delete"></asp:LinkButton>

<%-- Gallery --%>
<asp:DataList runat="server" SkinID="gallery" RepeatDirection="Horizontal" RepeatColumns="4">
    <ItemStyle CssClass="gallerycell" />
</asp:DataList>
<asp:DataList runat="server" SkinID="galleryEdit" RepeatDirection="Horizontal" RepeatColumns="4">
    <ItemStyle CssClass="gallerycell" />
</asp:DataList>

<%-- BLOG --%>
<asp:DataList runat="server" SkinID="blog" RepeatDirection="Vertical">
    <ItemStyle CssClass="blogcell" />
</asp:DataList>
<asp:DataList runat="server" SkinID="blogEdit" RepeatDirection="Vertical">
    <ItemStyle CssClass="blogcell" />
</asp:DataList>
<asp:DataList runat="server" SkinID="comments" RepeatDirection="Vertical">
    <ItemStyle CssClass="commentcell" />
</asp:DataList>

<cc1:Pager
    Width="100%"
    runat="server"
    SkinID="gallery"
    PageSize="8"
    FirstImageUrl="_images/icon_to_start.gif"
    PreviousImageUrl="_images/icon_back.gif"
    NextImageUrl="_images/icon_next.gif"
    LastImageUrl="_images/icon_to_end.gif"
    Mode="FirstPreviousNextLast"
    CssClass="pager"
/>
  
<cc1:ResizedImage runat="server" SkinID="galleryThumbnail" MaxWidth="101" MaxHeight="101" ImageAlign="Middle"/>
<cc1:ResizedImage runat="server" SkinID="galleryBigView" MaxWidth="442" MaxHeight="442" ImageAlign="top"/>

<%-- Validators --%>
<asp:CompareValidator runat="server" CssClass="error" />
<asp:CustomValidator runat="server" CssClass="error" />
<asp:RangeValidator runat="server" CssClass="error" />
<asp:RegularExpressionValidator runat="server" CssClass="error" />
<asp:RequiredFieldValidator runat="server" CssClass="error" />

--------------------Stop above this line for Skin.skin-----------------------



--------------------Start below this line for PageLayOut.css-----------------------

div#head
{
    position: relative;
    top: 0;
    left: 0;
    height: 91px;
    width: 100%;
    margin-bottom: 26px;
    border-bottom: solid 1px #663200;
    background: #FFFFFF url(_images/header_bg.jpg) repeat-x top left;
}

div.titleBG
{
  background: #FFFFFF url(_images/img_header.jpg) no-repeat top left;
  height: 91px;
  width: 542px;
}

div#websiteTitle
{
 position: absolute;
 top: 38px;
 left: 234px;
 color: #663200;
 font-size: 22px;
}

div#utilities
{
 position: absolute;
 top: 4px;
 right: 26px;
}

div#utilities a
{
    color: #666666;
    text-decoration: none;
    text-transform: uppercase;
}

table#mainTable
{
    padding: 0;
    margin-left: 0px;
    border: none;
    width: 100%;
}

td#left
{
    width: 200px;
}

td#right
{
    width: 100%;
}

div#navigation
{
 position: relative;
 top: 0px;
 left: 10px;
 color: #FFFFFF;
 width: 70%;
 
}

div#navigation a img
{
    display: none;
}

/*div.sidebartop
{
    padding-top: 20px;
}

div.sidebar
{
 position: relative;
 top: 0px;
 margin-left: 10px;
    border: solid 1px #7f7f7f;
}

*/
div.sidebar h2
{
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    height: 23px;
    color: #663200;
    background: #FFFFFF url(_images/title_bg.gif) repeat-x top left;
}

div.sidebar ul
{
    margin: 0;
    padding: 0;
}

div.sidebar ul li.item
{
    padding: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-left: 0px;
    list-style-type: none;
}

div.sidebar ul li.item a
{
    text-decoration: none;
    color: #663200;
    padding-left: 7px;
}

div.sidebar ul li.sidebaritemseparator
{
 list-style-type: none;
 margin-left: 7px;
 margin-right: 7px;
 border-bottom: solid 1px #7f7f7f;
 margin-bottom: 5px;
 width: 174px;
 height: 5px;
}

td#right
{
    margin: 0;
    padding-left: 36px;
 padding-right: 23px;
 padding-bottom: 20px;
 vertical-align: top;
 background-color: #FFFFFF;
}

div#footer
{
    width: 500px;
    height: 26px;
    padding-left: 36px;
    padding-right: 21px;
    padding-top: 7px;
    font-size: 10px;
    color: #663200;
}

div#breadcrumbs
{
 font-size: 13px;
 font-weight: bold;
 font-family: Verdana;
 padding-top: 2px;
    background: #FFFFFF url(_images/title_bg.gif) repeat-x top left;
    height: 23px;
    width:100%;
}

div#breadcrumbs .node
{
    color: #663200;
    text-decoration: none;
    padding-right: 0px;
}

div#breadcrumbs .currentNode
{
    color: #663200;
}

div#breadcrumbs .separator
{
    color: #663200;
    padding-right: 5px;
}

#contentContainer div.sectionsettings
{
    margin-top: 11px;
    margin-bottom: 5px;
    margin-left: 50px;
    background-color: #F1DCBE;
    width: 100%;
    /*border: solid 1px #898989;*/
    /*padding: 3px;*/
}

#contentContainer div.sectionsettings table
{

}

#contentContainer div.sectionsettings table td
{
 padding: 0px 18px 8px 18px;
    vertical-align: Middle;
}

#contentContainer
{
 width: 100%;
}

/* added from Swirl Red*/

#sidebarCell
{
    padding-top: 100px;
    padding-left: 0px;
    padding-bottom: 20px;
    padding-right: 0px;
    width: 100px;
}

div.sidebartop
{
    display: none;
}

#sidebar
{
    width: 200px;
    /*margin-left: 300px;*/
    /*clear: both;*/
    float:right;
    margin-right: 0px;
}

div.sidebarbottom
{
    display: none;
}

 

 ---------------------Stop above this line for PageLayOut.css ----------------------------------

 

 

 

 

 

Oct 9, 2008 at 3:37 AM
Thanks Fav;
I made a copy of Elastic Orange and replaced these 2 files with the code. I did not get the third bar. I am pretty sure the 'send to bar' is going there but I cant see it. I tried resizing the main table since it was at 100%, thinking maybe it was hiding the right column. No luck. At least now I am starting to understand how this is working. I will advise when I get it.
Oct 9, 2008 at 3:49 AM
Hey Jazv,
                Sorry for the issues your having, here is a link to my Orange theme folder just in case I missed something. Please let me know if you still have issues.



http://www.favtek.net/ElasticOrange.zip

THEFAV
Oct 11, 2008 at 2:39 AM

Fav, Thanks, your help was great. I studied the changes you made to figure out how this was done. I actually ended up using business_black and modifying that to what I wanted. Check my work, if you like: www.jamesvessels.com . When I get it right I will be moving it over to my wife's site judyvessels.com.

I am trying to get an  image on the left side bar now.

 

thanks for all your help.

Oct 11, 2008 at 2:24 PM
Edited Oct 11, 2008 at 2:25 PM
I figured out the image thing by reading the 'insert Flash' discussion. I also renamed the Theme RedDream.  I have yet to find that 'DropZone'
Oct 14, 2008 at 12:13 AM
Hey jazv,
                 Here is the link to the DropZone control.

http://www.codeplex.com/MyWebPagesStarterKit/WorkItem/View.aspx?WorkItemId=15179
Oct 24, 2008 at 2:02 PM
Hi.
I have made a complete solution that can be downloaded. SEE http://www.codeplex.com/MyWebPagesStarterKit/WorkItem/View.aspx?WorkItemId=19141