Theme navigation

Topics: Developer Forum, User Forum
Oct 5, 2008 at 6:15 PM
Hello

I would like to use the theme "ElasticOrange" with Top-Navigation instead of Left-Navigation.
Is it complicated to change that ?
I am new in CSS and Skin design.....so any help would be very nice.

Thank you very much.
Urs
Oct 7, 2008 at 4:19 AM
Edited Oct 7, 2008 at 4:22 AM

Here are the 2 files need to be changed, They were modified with code from the SwirlRed theme. This is not a 100%
solution you will need change colors and such to meet your needs.

/*  Save this as Pagelayout.css in you orange theme */

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: 0;
    border: none;
    width: 100%;
}

td#left
{
    width: 198px;
}

td#right
{
    width: 100%;
}

/*

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

 

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;
}

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

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

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

#contentContainer div.sectionsettings
{
    margin-top: 11px;
    margin-bottom: 5px;
    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;
}

/* added from SwirlRed theme*/

div#navigationWrapper
{
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
}

div#navigationContainer
{
    padding: 0px;
    margin: 0px;
 width: 100%;
 height: 33px;
 background-color: #663200;
 opacity: 0.60;
 filter: alpha(opacity=60);
    -moz-opacity: 0.60;
}

div#navigation
{
    position: absolute;
    top: 9px;
    left: 5px;
    z-index: 2;
}

div#navigationContainer img
{
    display: none;
}




<!-- save this file as Skin.skin in you orange theme -->

<%@ 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 id="navigationWrapper">
                    <div id="navigationContainer"></div>
                 <div id="navigation">
                        <asp:Menu ID="Menu1" runat="server" DataSourceID="menuDataSource" DynamicHorizontalOffset="-3" DynamicVerticalOffset="10" StaticEnableDefaultPopOutImage="false" DynamicEnableDefaultPopOutImage="false" Orientation="horizontal">
                            <StaticMenuItemStyle CssClass="nav" ItemSpacing="0px" />
                            <StaticSelectedStyle CssClass="nav_selected" />
                            <DynamicMenuStyle CssClass="sublevelwrapper" />
                            <DynamicMenuItemStyle CssClass="sublevel" Width="200px" />
                            <DynamicSelectedStyle CssClass="sublevel_selected" />
                        </asp:Menu>
                        <asp:SiteMapDataSource runat="server" ID="menuDataSource" ShowStartingNode="false" />
                    </div>
               
               
                </div>
                <table id="mainTable" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                       
                         <cc1:SidebarControl runat="server" ID="SidebarControl1"/>
                        </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">
                               
                               
    </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>
                    </tr>
                </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" />

 

Oct 7, 2008 at 8:21 AM
Hello THEFAV

Thank you very much, I will try to integrate it.....
Best regards
Urs