Set Viewport Background color or image

  1. #1

    Set Viewport Background color or image

    Hi everyone,

    I need to set the background color of all panels in the viewport to "transparent", so that I can see my background image underneath. It is an image of a globe which covers the entire extent of the window...which should appear under the viewport. I tried setting the "Cls" property on the viewPort, but it set the background of all the borders also...any ideas?

    thanks,
    Dan
  2. #2

    RE: Set Viewport Background color or image



    Ok, here is my code for the Default.aspx, it's using a master page (which has an image that resizes to the extent of the window). The Coolite Viewport is effectively "on top" of that.

    If you look at the "Center" panel area, I'm using the "BodyStyle" attribute to set the image background of the center panel...but of course it doesn't resize.

    I'd like to have an image background to the center panel, or the ability have a transparent color background, so the image in the master page shows through. I guess ideally i'd have an image background underneath the entire Viewport.

    When I try the different "Cls" "ct-cls",etc,etc none of it does what i'm looking for.

    any thoughts?
    
    
    
    <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    
    <%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
    
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    
    <asp:Content ID="Content1" ContentPlaceHolderID="HeaderContentPlaceHolder" Runat="Server">
    
    
    <style type="text/css">
    
    
    .style1
    
    
    {
    
    
    width: 240px;
    
    
    }
    
    
    </style>
    
    
    
    
    
    </asp:Content>
    
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server">
    
    
    
    
    
    
    
    
    <ext:ViewPort ID="ViewPort1" runat="server">
    
    
    <Body>
    
    
    <ext:BorderLayout ID="BorderLayout1" runat="server">
    
    
    <North UseSplitTips="true">
    
    
    
    
    
    <ext:Panel ID="Panel1" Collapsible="false" Draggable="false" Header="false" runat="server" Height="40px">
    
    
    
    
    
    <Body>
    
    
    <%-- <Buttons>
    
    
    <ext:Button ID="Button1" runat="server" Text="XML WebMethod">
    
    
    <Listeners>
    
    
    <Click Handler="selectAllCategories();" />
    
    
    </Listeners>
    
    
    </ext:Button>
    
    
    
    
    
    
    
    
    </Buttons>--%>
    
    
    <table id="headerBar" class="header" cellspacing="0px" cellpadding="0px" width="100%">
    
    
    <tr>
    
    
    <td style="width:35%;text-align:left;vertical-align:middle;font-weight:bold;color:White;">
    
    
    <div style="text-align:right;width:100%;">
    
    
    <asp:HyperLink Visible="false" NavigateUrl="~/AdminOptions.aspx" Text="Admin" style="color:Yellow;font-size:12px;" ID="AdminLink" runat="server">[ Admin ]</asp:HyperLink>
    
    
    
    
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="modeHome" href="setMode('modeHome',true);">Home</a>
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="modeAE" id="modeAddEntry" href="setMode('modeAddEntry',true);">Add Entry!</a>
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="modeCalendar" href="setMode('modeCalendar',true);">Calendar</a>
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="modeDiscuss" href="setMode('modeDiscuss',true);">Discuss</a>
    
    
    </td>
    
    
    <%--<td style="width:8%;text-align:center;vertical-align:middle;line-height:35px;">
    
    
    <a class="mode" id="modeClassroom" href="setMode('modeClassroom',true);">Classroom</a>
    
    
    </td>--%>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="modeAbout" href="setMode('modeAbout',true);">About</a>
    
    
    </td>
    
    
    <td style="display:table-cell;line-height:30px;width:25%;color:White;font-size:small;vertical-align:middle;text-align:right;">
    
    
    
    
    
    <asp:LoginView ID="LoginView1" runat="server">
    
    
    <AnonymousTemplate>
    
    
    
    
    
    <%-- <a class="loginOrSignup" &#111;nmouseover="hideStatus()" href="clientLogin();">Login</a>--%>
    
    
    <a class="loginOrSignup" onmouseover="hideStatus()" href="goLogin();">Login</a>
    
    
    <%-- <asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="loginOrSignup" LogoutPageUrl="Default.aspx" LogoutAction="Redirect" />--%>
    
    
    <%--<asp:HyperLink ID="LoginLink" runat="server" Text="Login" NavigateUrl = "~/Login.aspx" />--%> &amp;nbsp;&amp;nbsp;|&amp;nbsp;&amp;nbsp;
    
    
    <a class="loginOrSignup" onmouseover="hideStatus()" href="goCreateUser();">Sign Up</a>&amp;nbsp;&amp;nbsp;
    
    
    <%--<asp:HyperLink ID="SignUpLink" runat="server" CssClass="loginOrSignup" Text="Sign Up" NavigateUrl = "~/CreateUser.aspx" />&amp;nbsp;&amp;nbsp;--%>
    
    
    </AnonymousTemplate>
    
    
    <LoggedInTemplate>
    
    
    <div style="vertical-align:top;line-height:12px;display:inline;height:100%;width:100%;">
    
    
    <asp:HyperLink ID="HyperLink1" runat="server" Text="" CssClass="loginName" ToolTip="Account Settings" NavigateUrl="MyAccount.aspx"><asp:LoginName ID="MasterLoginName" runat="server" /></asp:HyperLink>
    
    
    <asp:HyperLink ID="HyperLink3" NavigateUrl="~/MyProfile.aspx" runat="server"><asp:Image ID="Image1" ImageAlign="Middle" AlternateText="My Profile" ToolTip="My Profile" ImageUrl="~/Images/personIcon.png" Height="21px" Width="21px" runat="server" /></asp:HyperLink>
    
    
    ,&amp;nbsp;
    
    
    <asp:LoginStatus ID="LoginStatus2" runat="server" CssClass="loginStatus" LogoutPageUrl="Default.aspx" LogoutAction="Redirect" LogoutText="[ Logout ]" />&amp;nbsp;&amp;nbsp;
    
    
    <%--<a class="loginStatus" href="OnClickLogout();">[ Logout ]</a>&amp;nbsp;&amp;nbsp;--%>
    
    
    
    
    
    
    
    
    
    </LoggedInTemplate>
    
    
    </asp:LoginView>
    
    
    
    
    
    </td>
    
    
    </tr>
    
    
    </table>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </North>
    
    
    
    
    
    <Center>
    
    
    <ext:Panel ID="CommunityPanel" BodyStyle="background: url(Images/earthwashoutblue.jpg)" runat="server" Title="<img style='display:block;margin-left:auto;margin-right:auto;' src='Images/communityTitle.png' width='142px' height='20px' border='0'/>" AutoScroll="True">
    
    
    
    
    
    <Body>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </Center>
    
    
    <East Collapsible="true" MinWidth="50" UseSplitTips="true" Split="true">
    
    
    <ext:Panel ID="EastPanel" CtCls="east-panel" runat="server" Width="350" Title="<img style='display:block;margin-left:auto;margin-right:auto;' src='Images/newsAndBookmarksTitleHorizontal.png' width='226px' height='20px' border='0'/>" AutoScroll="True">
    
    
    <Body>
    
    
    <ext:FitLayout ID="FitLayout1" runat="server">
    
    
    <ext:TabPanel ID="TabPanel1" runat="server" AutoScroll="true" ActiveTabIndex="0" Border="false" 
    
    
    TabPosition="Top">
    
    
    <Tabs>
    
    
    <ext:Tab ID="NewsFeedsTab" BodyStyle="background-color:#EBF0FA;" runat="server" AutoScroll="true" Title="News Feeds">
    
    
    <Body>
    
    
    
    
    
    </Body>
    
    
    </ext:Tab>
    
    
    <ext:Tab ID="BookmarksTab" BodyStyle="background-color:#EBF0FA;" runat="server" AutoScroll="true" Title="Bookmarks">
    
    
    <Body>
    
    
    
    
    
    </Body>
    
    
    </ext:Tab> 
    
    
    </Tabs> 
    
    
    </ext:TabPanel> 
    
    
    </ext:FitLayout>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </East>
    
    
    <West UseSplitTips="true" Collapsible="true" Split="true">
    
    
    <ext:Panel CtCls="west-panel" BodyStyle="background-color:#EBF0FA;" ID="WestPanel" runat="server" Title="<img style='display:block;margin-left:auto;margin-right:auto;' src='Images/InfoSearchTitleHorizontal.png' width='207px' height='20px' border='0'/>" AutoScroll="true" Width="300">
    
    
    <%-- <Listeners>
    
    
    <Resize Handler="Ext.Msg.alert('Confirm', 'You resized the west');" />
    
    
    </Listeners>--%>
    
    
    <Body>
    
    
    <ext:FitLayout ID="FitLayout2" runat="server">
    
    
    <ext:Panel ID="Panel2" runat="server" Header="false" >
    
    
    <Body>
    
    
    
    
    
    <ext:Accordion ID="Accordion2" Animate="true" runat="server" >
    
    
    <ext:Panel ID="SimpleSearchPanel" runat="server" Border="false" Collapsed="false" 
    
    
    Title="Simple Search" AutoScroll="True">
    
    
    <Listeners>
    
    
    <Collapse Handler="onCollapseSimpleSearch(this);" />
    
    
    </Listeners>
    
    
    <Body>
    
    
    <table cellpadding="0px" cellspacing="0px" style="width:100%;font-size:8pt;vertical-align:middle;">
    
    
    <%--Put the text search first--%>
    
    
    <tr>
    
    
    <td style="padding-top:7px;text-align:center;vertical-align:bottom;padding-right:15px;" colspan="2">
    
    
    <asp:Label ID="Label1" CssClass="StepText" runat="server" Text="Keyword Search"></asp:Label><%--<asp:Label ID="step5Question" CssClass="StepQuestion" runat="server" Text="Keyword Search"></asp:Label>--%>
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td colspan="2" style="vertical-align:middle;text-align:center;padding-left:5px;padding-right:5px;">
    
    
    <input id="entryKWSimple" maxlength="150" onkeypress="checkEnterSimpleSearch();" style="vertical-align:middle;width:80%;" type="text" />
    
    
    <img src="Images/searchy.png" style="cursor:pointer;vertical-align:middle;width:40px;height:40px;border:none;" alt="Quick Search!" title="Quick Search!" id='Img1' onmouseover='hideStatus();' onclick='validateSimpleSearch();'/>
    
    
    </td>
    
    
    <%--<td colspan="1" style="vertical-align:middle;text-align:left;">
    
    
    <img src="Images/searchy.png" style="cursor:pointer;vertical-align:middle;width:40px;height:40px;border:none;" alt="Search!" title="Search!" id='mainSearchButton' &#111;nmouseover='hideStatus();' &#111;nclick='validateSearch();'/>
    
    
    </td>--%>
    
    
    
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-top:0px;padding-left:10px;text-align:left;vertical-align:top;" colspan="2">
    
    
    <asp:Label ID="Label2" Font-Italic="true" Font-Size="Small" runat="server" Text="i.e. maps and visualizations"></asp:Label><%--<asp:Label ID="step5Question" CssClass="StepQuestion" runat="server" Text="Keyword Search"></asp:Label>--%>
    
    
    </td>
    
    
    </tr>
    
    
    </table>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    <ext:Panel ID="AdvancedSearchPanel" runat="server" Border="false" Collapsed="true" 
    
    
    Title="Advanced Search" AutoScroll="True">
    
    
    <Listeners>
    
    
    <Collapse Handler="onCollapseAdvancedSearch();" />
    
    
    </Listeners>
    
    
    <Body>
    
    
    <table cellpadding="0px" cellspacing="0px" style="width:100%;font-size:8pt;vertical-align:middle;">
    
    
    <%--Put the text search first--%>
    
    
    <tr>
    
    
    <td style="padding-top:7px;text-align:center;vertical-align:bottom;padding-right:15px;" colspan="2">
    
    
    <asp:Label ID="step5Text" CssClass="StepText" runat="server" Text="Keyword Search"></asp:Label><%--<asp:Label ID="step5Question" CssClass="StepQuestion" runat="server" Text="Keyword Search"></asp:Label>--%>
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td colspan="2" style="vertical-align:middle;text-align:center;padding-left:5px;padding-right:5px;">
    
    
    <input id="entryKW" maxlength="150" onkeypress="checkEnterSearch();" style="vertical-align:middle;width:80%;" type="text" />
    
    
    <img src="Images/searchy.png" style="cursor:pointer;vertical-align:middle;width:40px;height:40px;border:none;" alt="Quick Search!" title="Quick Search!" id='quickSearchButton' onmouseover='hideStatus();' onclick='validateSearch();'/>
    
    
    </td>
    
    
    
    
    
    <%--Extra Filters--%>
    
    
    <tr>
    
    
    <td style="padding-bottom:5px;padding-top:5px;text-align:center;vertical-align:middle;" colspan="2">
    
    
    <%--<asp:Label ID="Step1Text" CssClass="StepText" runat="server" Text="*Step 1: "></asp:Label>--%><asp:Label ID="Step1QuestionsLbl" CssClass="StepQuestion" runat="server" Text="Filter by Category"></asp:Label>
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkPeople" onclick="clickCategoryBox(this);" name="CategoryChkBox" value="13" type="checkbox" />&amp;nbsp;People
    
    
    </td>
    
    
    <td>
    
    
    <input id="chkDiscussion" onclick="clickCategoryBox(this);" name="CategoryChkBox" value="2" type="checkbox" />&amp;nbsp;Discussion/Q&amp;amp;A
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkOrg" onclick="clickCategoryBox(this);" name="CategoryChkBox" value="10" type="checkbox" />&amp;nbsp;Organizations</td>
    
    
    <td>
    
    
    <input id="chkEvent" onclick="clickCategoryBox(this);" name="CategoryChkBox" value="6" type="checkbox" />&amp;nbsp;Events</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkPresentation" onclick="clickCategoryBox(this);" value="11" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Presentation/Video</td>
    
    
    <td>
    
    
    <input id="chkFeed" onclick="clickCategoryBox(this);" value="7" name="CategoryChkBox" type="checkbox" />&amp;nbsp;News Feeds</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkData" onclick="clickCategoryBox(this);" value="5" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Data</td>
    
    
    <td>
    
    
    <input id="chkArticle" onclick="clickCategoryBox(this);" value="1" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Articles/Documents</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkTool" onclick="clickCategoryBox(this);" value="12" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Tools/Guidance</td>
    
    
    <td>
    
    
    <input id="chkFunding" onclick="clickCategoryBox(this);" value="8" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Funding</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkProject" onclick="clickCategoryBox(this);" value="3" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Project/Case Study</td>
    
    
    <td>
    
    
    <input id="chkJob" onclick="clickCategoryBox(this);" value="9" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Job Listings</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkWebsite" onclick="clickCategoryBox(this);" value="4" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Websites</td>
    
    
    <td>
    
    
    &amp;nbsp;</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkEducation" onclick="clickCategoryBox(this);" value="14" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Education</td>
    
    
    
    
    
    <td style="font-weight:bold;">
    
    
    <input id="chkAll" onclick="selectAllCategories(this);" checked="checked" type="checkbox" />&amp;nbsp;ALL</td>
    
    
    
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-bottom:5px;padding-top:10px;text-align:center;vertical-align:bottom;" colspan="2">
    
    
    
    
    
    <%--<asp:Label ID="Step2Lbl" CssClass="StepText" runat="server" Text="Step 2: "></asp:Label>--%><asp:Label ID="step2Question" CssClass="StepQuestion" runat="server" Text="Filter By Organization"></asp:Label>
    
    
    </td>
    
    
    </tr>
    
    
    <tr align="center">
    
    
    <td align="center" style="padding-right:5px;"colspan="2">
    
    
    <asp:DropDownList ID="OrgAffiliation" runat="server" 
    
    
    DataSourceID="SqlDataSource1" DataTextField="OrgDisplayName" 
    
    
    DataValueField="OrgID" Font-Size="Small" Height="22px" Width="90%"
    
    
    AppendDataBoundItems="True" Enabled="True">
    
    
    <asp:ListItem Selected="True" Value="-1">Listed Organizations</asp:ListItem>
    
    
    </asp:DropDownList>
    
    
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    
    
    ConnectionString="<%$ ConnectionStrings:Climate1StopConnString %>" 
    
    
    
    
    
    SelectCommand="SELECT [OrgID], [OrgDisplayName], [OrganizationName] FROM [Organizations] ORDER BY [OrgDisplayName]">
    
    
    </asp:SqlDataSource>
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-left:2px;padding-right:10px;padding-bottom:7px;padding-top:15px;text-align:center;vertical-align:bottom;" colspan="2">
    
    
    <%--<asp:Label ID="geogLocationStepText" CssClass="StepText" runat="server" Text="Step 3: "></asp:Label>--%>
    
    
    <asp:Label ID="geogLocationLbl" CssClass="StepQuestion" runat="server" 
    
    
    Text="Filter by Location"></asp:Label>
    
    
    </td>
    
    
    <%--<td style="padding-bottom:7px;padding-top:15px;text-align:center;vertical-align:bottom;" colspan="1">
    
    
    <asp:Label ID="Label4" CssClass="StepQuestion" runat="server" 
    
    
    Text="Specify Country?"></asp:Label>
    
    
    </td>--%>
    
    
    </tr>
    
    
    <tr>
    
    
    <td align="center" style="padding-left:5px;padding-right:2px;width:50%;" colspan="1">
    
    
    <select id="selContinent" style="width:100%;" onchange='updateCountriesDropDown(this.options[this.selectedIndex].value,"selCountry");' name="selContinent">
    
    
    <option selected="selected" value="default">Choose Continent...</option>
    
    
    <option value='AF'>Africa</option>
    
    
    <option value='AS'>Asia</option>
    
    
    <option value='EU'>Europe</option>
    
    
    <option value='NA'>North America</option>
    
    
    <option value='SA'>South America</option>
    
    
    <option value='OC'>Oceania</option>
    
    
    <option value='AN'>Antarctica</option>
    
    
    </select></td>
    
    
    <td align="center" style="padding-right:17px;padding-left:2px;width:50%;" colspan="1">
    
    
    <select id="selCountry" style="width:100%;"name="selCountry">
    
    
    <option selected="selected" value="-1">Countries</option>
    
    
    </select></td>
    
    
    
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-bottom:7px;padding-top:15px;text-align:center;vertical-align:bottom;" colspan="2">
    
    
    <%--<asp:Label ID="step4lbl" CssClass="StepText" runat="server" Text="Step 4: "></asp:Label>--%><asp:Label ID="step4question" CssClass="StepQuestion" runat="server" Text="Filter by Time Period?"></asp:Label>
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td colspan="2" style="text-align:center;padding-left:5px;padding-right:5px;font-size:115%;vertical-align:middle;">
    
    
    Start:
    
    
    <input id="startDate" readonly="readonly" style="font-size:smaller;width:60px;"/>
    
    
    
    
    
    <img alt="Choose a start date" id="startCalendarImg" class="calendar" src="Images/calendar.jpg" onclick="toggleCalendar('STARTDATE');"/" />
    
    
    &amp;nbsp;&amp;nbsp; End:
    
    
    <input id="endDate" readonly="readonly" style="font-size:smaller;width:60px;"/>
    
    
    <img alt="Choose an end date" id="endCalendarImg" class="calendar" src="Images/calendar.jpg" onclick="toggleCalendar('ENDDATE');"/" />
    
    
    </td>
    
    
    
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-top:10px;vertical-align:middle;text-align:center;line-height:30px;" colspan="2" >
    
    
    <input type="button" id='mainSearchButton' value='Search!' onmouseover='hideStatus();' onclick='validateSearch();' class='cssTextButton'/>
    
    
    </td>
    
    
    </tr>
    
    
    </table>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </ext:Accordion>
    
    
    
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </ext:FitLayout> 
    
    
    </Body>
    
    
    </ext:Panel> 
    
    
    </West>
    
    
    <South UseSplitTips="true" Collapsible="true" Split="true">
    
    
    <ext:Panel ID="LatestEntriesPanel" BodyStyle="background-color:#EBF0FA;" Collapsible="true" AutoScroll="true" TitleCollapse="true"
    
    
    Title="<img style='display:block;margin-left:auto;margin-right:auto;' src='Images/latestEntriesTitle.png' width='142px' height='20px' border='0'/>" 
    
    
    runat="server" 
    
    
    Height="190" 
    
    
    CtCls="south-panel">
    
    
    <Body>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </South>
    
    
    </ext:BorderLayout>
    
    
    </Body>
    
    
    </ext:ViewPort>
    
    
    
    
    
    
    
    
    
    </asp:Content>
  3. #3

    RE: Set Viewport Background color or image

    Hi Dan,

    I spent about 5 minutes trying to get your sample to a state I could run it in a browser, but gave up.


    Please create a simplified .aspx code sample demonstrating the scenario. Please do not set a MasterPage. Remove all code/markup that is not required for the sample.


    p.s. remove all <table>'s


    Geoffrey McGill
    Founder
  4. #4

    RE: Set Viewport Background color or image

    Hi Geoffrey,

    Ok, I will widdle it down and post sometime this morning...

    thanks,
    Dan
  5. #5

    RE: Set Viewport Background color or image

    Ok, below is my aspx page and Stylesheet. I tested it separately from my project and it runs...it's really just an empty viewport with the BodyStyle (background image) set.

    I've also attached a zip file with the entire sample project, so you can get it working faster.

    thanks for the help!

    Dan

    Default.aspx
    
    
    
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head id="Head1" runat="server">
    
    
    <title>Untitled Page</title>
    
    
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
    
    
    </head>
    
    
    <body id="MyBody" runat="server">
    
    
    <img class="source-image" src="http://arcserver4.iagt.org/climate1stopcoolite/Images/earthwashoutblue.jpg" alt="" />
    
    
    
    
    
    <form name="mainForm" id="masterForm" runat="server">
    
    
    <ext:ScriptManager ID="ScriptManager1" runat="server" HideInDesign="True">
    
    
    <%-- <Listeners>
    
    
    <DocumentReady Handler="bodyOnLoad();" />
    
    
    </Listeners>--%>
    
    
    </ext:ScriptManager>
    
    
    
    
    
    
    
    
    <table id="Table1" class="header" cellspacing="0px" cellpadding="0px" width="100%">
    
    
    <tr>
    
    
    <td style="width:35%;text-align:left;vertical-align:middle;font-weight:bold;color:White;">
    
    
    <div style="text-align:right;width:100%;">
    
    
    <asp:HyperLink Visible="false" NavigateUrl="~/AdminOptions.aspx" Text="Admin" style="color:Yellow;font-size:12px;" ID="HyperLink2" runat="server">[ Admin ]</asp:HyperLink>
    
    
    
    
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="A1" href="setMode('modeHome',true);">Home</a>
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="modeAE" id="A2" href="setMode('modeAddEntry',true);">Add Entry!</a>
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="A3" href="setMode('modeCalendar',true);">Calendar</a>
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="A4" href="setMode('modeDiscuss',true);">Discuss</a>
    
    
    </td>
    
    
    <%--<td style="width:8%;text-align:center;vertical-align:middle;line-height:35px;">
    
    
    <a class="mode" id="modeClassroom" href="setMode('modeClassroom',true);">Classroom</a>
    
    
    </td>--%>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="A5" href="setMode('modeAbout',true);">About</a>
    
    
    </td>
    
    
    <td style="display:table-cell;line-height:30px;width:25%;color:White;font-size:small;vertical-align:middle;text-align:right;">
    
    
    
    
    
    </td>
    
    
    </tr>
    
    
    </table>
    
    
    <table cellspacing="0px" cellpadding="0px" style="width: 100%;">
    
    
    <tr>
    
    
    
    
    
    <td align="center" style="vertical-align:top;width: 75%;">
    
    
    <div class="middle">
    
    
    
    
    
    <ext:ViewPort ID="ViewPort1" runat="server">
    
    
    <Body>
    
    
    <ext:BorderLayout ID="BorderLayout1" runat="server">
    
    
    <North UseSplitTips="true">
    
    
    
    
    
    <ext:Panel ID="Panel1" Collapsible="false" Draggable="false" Header="false" runat="server" Height="40px">
    
    
    
    
    
    <Body>
    
    
    <%-- <Buttons>
    
    
    <ext:Button ID="Button1" runat="server" Text="XML WebMethod">
    
    
    <Listeners>
    
    
    <Click Handler="selectAllCategories();" />
    
    
    </Listeners>
    
    
    </ext:Button>
    
    
    
    
    
    
    
    
    </Buttons>--%>
    
    
    <table id="headerBar" class="header" cellspacing="0px" cellpadding="0px" width="100%">
    
    
    <tr>
    
    
    <td style="width:35%;text-align:left;vertical-align:middle;font-weight:bold;color:White;">
    
    
    <div style="text-align:right;width:100%;">
    
    
    <asp:HyperLink Visible="false" NavigateUrl="~/AdminOptions.aspx" Text="Admin" style="color:Yellow;font-size:12px;" ID="AdminLink" runat="server">[ Admin ]</asp:HyperLink>
    
    
    
    
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="modeHome" href="setMode('modeHome',true);">Home</a>
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="modeAE" id="modeAddEntry" href="setMode('modeAddEntry',true);">Add Entry!</a>
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="modeCalendar" href="setMode('modeCalendar',true);">Calendar</a>
    
    
    </td>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="modeDiscuss" href="setMode('modeDiscuss',true);">Discuss</a>
    
    
    </td>
    
    
    <%--<td style="width:8%;text-align:center;vertical-align:middle;line-height:35px;">
    
    
    <a class="mode" id="modeClassroom" href="setMode('modeClassroom',true);">Classroom</a>
    
    
    </td>--%>
    
    
    <td style="width:8%;text-align:center;vertical-align:middle;line-height:30px;">
    
    
    <a class="mode" id="modeAbout" href="setMode('modeAbout',true);">About</a>
    
    
    </td>
    
    
    <td style="display:table-cell;line-height:30px;width:25%;color:White;font-size:small;vertical-align:middle;text-align:right;">
    
    
    
    
    
    </td>
    
    
    </tr>
    
    
    </table>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </North>
    
    
    
    
    
    <Center>
    
    
    <ext:Panel ID="CommunityPanel" BodyStyle="background: url(http://arcserver4.iagt.org/climate1s...ashoutblue.jpg)" runat="server" Title="<img style='display:block;margin-left:auto;margin-right:auto;' src='Images/communityTitle.png' width='142px' height='20px' border='0'/>" AutoScroll="True">
    
    
    
    
    
    <Body>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </Center>
    
    
    <East Collapsible="true" MinWidth="50" UseSplitTips="true" Split="true">
    
    
    <ext:Panel ID="EastPanel" CtCls="east-panel" runat="server" Width="350" Title="<img style='display:block;margin-left:auto;margin-right:auto;' src='Images/newsAndBookmarksTitleHorizontal.png' width='226px' height='20px' border='0'/>" AutoScroll="True">
    
    
    <Body>
    
    
    <ext:FitLayout ID="FitLayout1" runat="server">
    
    
    <ext:TabPanel ID="TabPanel1" runat="server" AutoScroll="true" ActiveTabIndex="0" Border="false" 
    
    
    TabPosition="Top">
    
    
    <Tabs>
    
    
    <ext:Tab ID="NewsFeedsTab" BodyStyle="background-color:#EBF0FA;" runat="server" AutoScroll="true" Title="News Feeds">
    
    
    <Body>
    
    
    
    
    
    </Body>
    
    
    </ext:Tab>
    
    
    <ext:Tab ID="BookmarksTab" BodyStyle="background-color:#EBF0FA;" runat="server" AutoScroll="true" Title="Bookmarks">
    
    
    <Body>
    
    
    
    
    
    </Body>
    
    
    </ext:Tab> 
    
    
    </Tabs> 
    
    
    </ext:TabPanel> 
    
    
    </ext:FitLayout>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </East>
    
    
    <West UseSplitTips="true" Collapsible="true" Split="true">
    
    
    <ext:Panel CtCls="west-panel" BodyStyle="background-color:#EBF0FA;" ID="WestPanel" runat="server" Title="<img style='display:block;margin-left:auto;margin-right:auto;' src='Images/InfoSearchTitleHorizontal.png' width='207px' height='20px' border='0'/>" AutoScroll="true" Width="300">
    
    
    <%-- <Listeners>
    
    
    <Resize Handler="Ext.Msg.alert('Confirm', 'You resized the west');" />
    
    
    </Listeners>--%>
    
    
    <Body>
    
    
    <ext:FitLayout ID="FitLayout2" runat="server">
    
    
    <ext:Panel ID="Panel2" runat="server" Header="false" >
    
    
    <Body>
    
    
    
    
    
    <ext:Accordion ID="Accordion2" Animate="true" runat="server" >
    
    
    <ext:Panel ID="SimpleSearchPanel" runat="server" Border="false" Collapsed="false" 
    
    
    Title="Simple Search" AutoScroll="True">
    
    
    
    
    
    <Body>
    
    
    <table cellpadding="0px" cellspacing="0px" style="width:100%;font-size:8pt;vertical-align:middle;">
    
    
    <%--Put the text search first--%>
    
    
    <tr>
    
    
    <td style="padding-top:7px;text-align:center;vertical-align:bottom;padding-right:15px;" colspan="2">
    
    
    <asp:Label ID="Label1" CssClass="StepText" runat="server" Text="Keyword Search"></asp:Label><%--<asp:Label ID="step5Question" CssClass="StepQuestion" runat="server" Text="Keyword Search"></asp:Label>--%>
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td colspan="2" style="vertical-align:middle;text-align:center;padding-left:5px;padding-right:5px;">
    
    
    <input id="entryKWSimple" maxlength="150" onkeypress="checkEnterSimpleSearch();" style="vertical-align:middle;width:80%;" type="text" />
    
    
    <img src="Images/searchy.png" style="cursor:pointer;vertical-align:middle;width:40px;height:40px;border:none;" alt="Quick Search!" title="Quick Search!" id='Img1' onmouseover='hideStatus();' onclick='validateSimpleSearch();'/>
    
    
    </td>
    
    
    <%--<td colspan="1" style="vertical-align:middle;text-align:left;">
    
    
    <img src="Images/searchy.png" style="cursor:pointer;vertical-align:middle;width:40px;height:40px;border:none;" alt="Search!" title="Search!" id='mainSearchButton' &#111;nmouseover='hideStatus();' &#111;nclick='validateSearch();'/>
    
    
    </td>--%>
    
    
    
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-top:0px;padding-left:10px;text-align:left;vertical-align:top;" colspan="2">
    
    
    <asp:Label ID="Label2" Font-Italic="true" Font-Size="Small" runat="server" Text="i.e. maps and visualizations"></asp:Label><%--<asp:Label ID="step5Question" CssClass="StepQuestion" runat="server" Text="Keyword Search"></asp:Label>--%>
    
    
    </td>
    
    
    </tr>
    
    
    </table>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    <ext:Panel ID="AdvancedSearchPanel" runat="server" Border="false" Collapsed="true" 
    
    
    Title="Advanced Search" AutoScroll="True">
    
    
    
    
    
    <Body>
    
    
    <table cellpadding="0px" cellspacing="0px" style="width:100%;font-size:8pt;vertical-align:middle;">
    
    
    <%--Put the text search first--%>
    
    
    <tr>
    
    
    <td style="padding-top:7px;text-align:center;vertical-align:bottom;padding-right:15px;" colspan="2">
    
    
    <asp:Label ID="step5Text" CssClass="StepText" runat="server" Text="Keyword Search"></asp:Label><%--<asp:Label ID="step5Question" CssClass="StepQuestion" runat="server" Text="Keyword Search"></asp:Label>--%>
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td colspan="2" style="vertical-align:middle;text-align:center;padding-left:5px;padding-right:5px;">
    
    
    <input id="entryKW" maxlength="150" onkeypress="checkEnterSearch();" style="vertical-align:middle;width:80%;" type="text" />
    
    
    <img src="Images/searchy.png" style="cursor:pointer;vertical-align:middle;width:40px;height:40px;border:none;" alt="Quick Search!" title="Quick Search!" id='quickSearchButton' onmouseover='hideStatus();' onclick='validateSearch();'/>
    
    
    </td>
    
    
    
    
    
    <%--Extra Filters--%>
    
    
    <tr>
    
    
    <td style="padding-bottom:5px;padding-top:5px;text-align:center;vertical-align:middle;" colspan="2">
    
    
    <%--<asp:Label ID="Step1Text" CssClass="StepText" runat="server" Text="*Step 1: "></asp:Label>--%><asp:Label ID="Step1QuestionsLbl" CssClass="StepQuestion" runat="server" Text="Filter by Category"></asp:Label>
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkPeople" onclick="clickCategoryBox(this);" name="CategoryChkBox" value="13" type="checkbox" />&amp;nbsp;People
    
    
    </td>
    
    
    <td>
    
    
    <input id="chkDiscussion" onclick="clickCategoryBox(this);" name="CategoryChkBox" value="2" type="checkbox" />&amp;nbsp;Discussion/Q&amp;amp;A
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkOrg" onclick="clickCategoryBox(this);" name="CategoryChkBox" value="10" type="checkbox" />&amp;nbsp;Organizations</td>
    
    
    <td>
    
    
    <input id="chkEvent" onclick="clickCategoryBox(this);" name="CategoryChkBox" value="6" type="checkbox" />&amp;nbsp;Events</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkPresentation" onclick="clickCategoryBox(this);" value="11" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Presentation/Video</td>
    
    
    <td>
    
    
    <input id="chkFeed" onclick="clickCategoryBox(this);" value="7" name="CategoryChkBox" type="checkbox" />&amp;nbsp;News Feeds</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkData" onclick="clickCategoryBox(this);" value="5" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Data</td>
    
    
    <td>
    
    
    <input id="chkArticle" onclick="clickCategoryBox(this);" value="1" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Articles/Documents</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkTool" onclick="clickCategoryBox(this);" value="12" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Tools/Guidance</td>
    
    
    <td>
    
    
    <input id="chkFunding" onclick="clickCategoryBox(this);" value="8" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Funding</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkProject" onclick="clickCategoryBox(this);" value="3" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Project/Case Study</td>
    
    
    <td>
    
    
    <input id="chkJob" onclick="clickCategoryBox(this);" value="9" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Job Listings</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkWebsite" onclick="clickCategoryBox(this);" value="4" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Websites</td>
    
    
    <td>
    
    
    &amp;nbsp;</td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td>
    
    
    &amp;nbsp;<input id="chkEducation" onclick="clickCategoryBox(this);" value="14" name="CategoryChkBox" type="checkbox" />&amp;nbsp;Education</td>
    
    
    
    
    
    <td style="font-weight:bold;">
    
    
    <input id="chkAll" onclick="selectAllCategories(this);" checked="checked" type="checkbox" />&amp;nbsp;ALL</td>
    
    
    
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-bottom:5px;padding-top:10px;text-align:center;vertical-align:bottom;" colspan="2">
    
    
    
    
    
    <%--<asp:Label ID="Step2Lbl" CssClass="StepText" runat="server" Text="Step 2: "></asp:Label>--%><asp:Label ID="step2Question" CssClass="StepQuestion" runat="server" Text="Filter By Organization"></asp:Label>
    
    
    </td>
    
    
    </tr>
    
    
    <tr align="center">
    
    
    <td align="center" style="padding-right:5px;"colspan="2">
    
    
    
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-left:2px;padding-right:10px;padding-bottom:7px;padding-top:15px;text-align:center;vertical-align:bottom;" colspan="2">
    
    
    <%--<asp:Label ID="geogLocationStepText" CssClass="StepText" runat="server" Text="Step 3: "></asp:Label>--%>
    
    
    <asp:Label ID="geogLocationLbl" CssClass="StepQuestion" runat="server" 
    
    
    Text="Filter by Location"></asp:Label>
    
    
    </td>
    
    
    <%--<td style="padding-bottom:7px;padding-top:15px;text-align:center;vertical-align:bottom;" colspan="1">
    
    
    <asp:Label ID="Label4" CssClass="StepQuestion" runat="server" 
    
    
    Text="Specify Country?"></asp:Label>
    
    
    </td>--%>
    
    
    </tr>
    
    
    <tr>
    
    
    <td align="center" style="padding-left:5px;padding-right:2px;width:50%;" colspan="1">
    
    
    <select id="selContinent" style="width:100%;" onchange='updateCountriesDropDown(this.options[this.selectedIndex].value,"selCountry");' name="selContinent">
    
    
    <option selected="selected" value="default">Choose Continent...</option>
    
    
    <option value='AF'>Africa</option>
    
    
    <option value='AS'>Asia</option>
    
    
    <option value='EU'>Europe</option>
    
    
    <option value='NA'>North America</option>
    
    
    <option value='SA'>South America</option>
    
    
    <option value='OC'>Oceania</option>
    
    
    <option value='AN'>Antarctica</option>
    
    
    </select></td>
    
    
    <td align="center" style="padding-right:17px;padding-left:2px;width:50%;" colspan="1">
    
    
    <select id="selCountry" style="width:100%;"name="selCountry">
    
    
    <option selected="selected" value="-1">Countries</option>
    
    
    </select></td>
    
    
    
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-bottom:7px;padding-top:15px;text-align:center;vertical-align:bottom;" colspan="2">
    
    
    <%--<asp:Label ID="step4lbl" CssClass="StepText" runat="server" Text="Step 4: "></asp:Label>--%><asp:Label ID="step4question" CssClass="StepQuestion" runat="server" Text="Filter by Time Period?"></asp:Label>
    
    
    </td>
    
    
    </tr>
    
    
    <tr>
    
    
    <td colspan="2" style="text-align:center;padding-left:5px;padding-right:5px;font-size:115%;vertical-align:middle;">
    
    
    Start:
    
    
    <input id="startDate" readonly="readonly" style="font-size:smaller;width:60px;"/>
    
    
    
    
    
    <img alt="Choose a start date" id="startCalendarImg" class="calendar" src="Images/calendar.jpg" onclick="toggleCalendar('STARTDATE');"/" />
    
    
    &amp;nbsp;&amp;nbsp; End:
    
    
    <input id="endDate" readonly="readonly" style="font-size:smaller;width:60px;"/>
    
    
    <img alt="Choose an end date" id="endCalendarImg" class="calendar" src="Images/calendar.jpg" onclick="toggleCalendar('ENDDATE');"/" />
    
    
    </td>
    
    
    
    
    
    </tr>
    
    
    <tr>
    
    
    <td style="padding-top:10px;vertical-align:middle;text-align:center;line-height:30px;" colspan="2" >
    
    
    <input type="button" id='mainSearchButton' value='Search!' onmouseover='hideStatus();' onclick='validateSearch();' class='cssTextButton'/>
    
    
    </td>
    
    
    </tr>
    
    
    </table>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </ext:Accordion>
    
    
    
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </ext:FitLayout> 
    
    
    </Body>
    
    
    </ext:Panel> 
    
    
    </West>
    
    
    <South UseSplitTips="true" Collapsible="true" Split="true">
    
    
    <ext:Panel ID="LatestEntriesPanel" BodyStyle="background-color:#EBF0FA;" Collapsible="true" AutoScroll="true" TitleCollapse="true"
    
    
    Title="<img style='display:block;margin-left:auto;margin-right:auto;' src='Images/latestEntriesTitle.png' width='142px' height='20px' border='0'/>" 
    
    
    runat="server" 
    
    
    Height="190" 
    
    
    CtCls="south-panel">
    
    
    <Body>
    
    
    </Body>
    
    
    </ext:Panel>
    
    
    </South>
    
    
    </ext:BorderLayout>
    
    
    </Body>
    
    
    </ext:ViewPort>
    
    
    
    
    
    
    
    
    
    </td>
    
    
    
    
    
    </tr> 
    
    
    </table>
    
    
    <input runat="server" type="hidden" id="activeMode" name="activeMode" value="" />
    
    
    </form>
    
    
    </body>
    
    
    </html>
    and Stylesheet1.css

    
    
    
    #dhtmltooltip{
    
    
    position: absolute;
    
    
    width: 150px;
    
    
    border: 2px solid black;
    
    
    padding: 2px;
    
    
    background-color:#FAFAD2;
    
    
    visibility: hidden;
    
    
    z-index: 99;
    
    
    font-family:Verdana,Arial;
    
    
    font-size:smaller;
    
    
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    
    
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    
    
    }
    
    
    
    
    
    fieldset {color:Black;} /*this is the border color*/
    
    
    legend {color:Black;font-weight:bold;} /* this is the GroupingText color */
    
    
    .communitySubtitle
    
    
    {
    
    
    height: 30px; background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/darkBlueBack.jpg') repeat-x; background-position: 0px 0px; 
    
    
    }
    
    
    .checkBoxGroupCls
    
    
    {
    
    
    margin:5px;
    
    
    }
    
    
    .east-panel .x-layout-collapsed-east
    
    
    {
    
    
    background: url(http://arcserver4.iagt.org/climate1s...leVertical.png) no-repeat center;
    
    
    }
    
    
    
    
    
    .westPanelBody
    
    
    {
    
    
    background-color:Fuchsia;
    
    
    }
    
    
    .west-panel .x-layout-collapsed-west
    
    
    {
    
    
    background: url(http://arcserver4.iagt.org/climate1s...leVertical.png) no-repeat center;
    
    
    }
    
    
    .south-panel .x-layout-collapsed-south
    
    
    {
    
    
    
    
    
    background: url(http://arcserver4.iagt.org/climate1s...riesClosed.png) no-repeat center;
    
    
    }
    
    
    .PanelTest
    
    
    {
    
    
    background-color:#EFF3FB;
    
    
    }
    
    
    .PanelTitle
    
    
    {
    
    
    letter-spacing: -1px; 
    
    
    font-family:Verdana,Arial;
    
    
    font-weight:bold;
    
    
    font-size:20px;
    
    
    width:100%;
    
    
    display:inline;
    
    
    text-align:center;
    
    
    vertical-align:middle;
    
    
    white-space:nowrap;
    
    
    }
    
    
    .featuredStoryCell
    
    
    {
    
    
    text-align:left;
    
    
    vertical-align:top;
    
    
    width:60%;
    
    
    padding-left:5px;
    
    
    padding-right:5px;
    
    
    padding-top:5px;
    
    
    padding-bottom:5px;
    
    
    
    
    
    }
    
    
    .featVizCell
    
    
    {
    
    
    text-align:center;
    
    
    vertical-align:top;
    
    
    width:40%;
    
    
    padding-left:5px;
    
    
    padding-right:5px;
    
    
    padding-top:5px;
    
    
    padding-bottom:5px;
    
    
    
    
    
    }
    
    
    .communityTable
    
    
    {
    
    
    margin-top:0px;width:100%;
    
    
    background-color:transparent;
    
    
    
    
    
    
    
    
    
    
    
    }
    
    
    .infoSpringCell
    
    
    {
    
    
    text-align:center;
    
    
    vertical-align:top;
    
    
    width:100%;
    
    
    padding-left:5px;
    
    
    padding-right:5px;
    
    
    padding-top:5px;
    
    
    padding-bottom:5px;
    
    
    
    
    
    }
    
    
    .helpfulEntriesCell
    
    
    {
    
    
    font-family:Calibri,Verdana, Arial;
    
    
    text-align:center;
    
    
    vertical-align:top;
    
    
    padding-left:5px;
    
    
    padding-right:5px;
    
    
    padding-top:3px;
    
    
    padding-bottom:5px;
    
    
    
    
    
    width:100%;
    
    
    }
    
    
    .quickLinksCell
    
    
    {
    
    
    /*border-left:2px solid navy;
    
    
    border-right:2px solid navy;
    
    
    border-bottom:2px solid navy;*/
    
    
    text-align:center;
    
    
    vertical-align:top;
    
    
    width:20%;
    
    
    padding-left:5px;
    
    
    padding-right:5px;
    
    
    padding-top:5px;
    
    
    padding-bottom:5px;
    
    
    background-color:#EFF3FB;
    
    
    
    
    
    /*background-image:url("../Images/lightGreenTrans2.png");
    
    
    background-repeat: repeat;*/
    
    
    
    
    
    /* background-image:url("../Images/metal2.gif");
    
    
    background-repeat: repeat;*/
    
    
    
    
    
    }
    
    
    .back-image {
    
    
    width: 100%;
    
    
    height:100%;
    
    
    position: absolute;
    
    
    top: 0;
    
    
    left: 0;
    
    
    z-index:0;
    
    
    }
    
    
    .source-image {
    
    
    width: 100%;
    
    
    height:100%;
    
    
    position: absolute;
    
    
    top: 0;
    
    
    left: 0;
    
    
    z-index:-1;
    
    
    }
    
    
    .commentDateText
    
    
    {
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    font-size:smaller;
    
    
    color:#A0A0A0;
    
    
    }
    
    
    .commentCellWhite
    
    
    {
    
    
    vertical-align:middle;
    
    
    border-bottom:solid 1px gray;
    
    
    border-top:solid 1px gray;
    
    
    background-color:White;
    
    
    width:100%;
    
    
    padding-bottom:4px;
    
    
    padding-left:5px;
    
    
    padding-right:5px;
    
    
    }
    
    
    .commentCellGray
    
    
    {
    
    
    vertical-align:middle;
    
    
    margin-top:5px;
    
    
    border-bottom:solid 1px gray;
    
    
    border-top:solid 1px gray;
    
    
    background-color:#F0F0F0;
    
    
    width:100%;
    
    
    padding-bottom:4px;
    
    
    padding-left:5px;
    
    
    padding-right:5px;
    
    
    }
    
    
    .commentOwnerText
    
    
    {
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    font-weight:bold;
    
    
    font-size:smaller;
    
    
    }
    
    
    .commentText
    
    
    {
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    font-size:smaller;
    
    
    }
    
    
    .commentsAddComment
    
    
    {
    
    
    text-align:right;
    
    
    width:40%;
    
    
    background-image:url("http://arcserver4.iagt.org/climate1stopcoolite/Images/gradientGray_1x1_20h.png");
    
    
    background-repeat:repeat-x;
    
    
    vertical-align: middle;
    
    
    border-bottom:solid 1px gray;
    
    
    border-right:solid 1px gray;
    
    
    border-top:solid 1px gray;
    
    
    padding-right:5px;
    
    
    }
    
    
    .commentsTitle
    
    
    {
    
    
    padding-left:5px;
    
    
    vertical-align: middle;
    
    
    background-image:url("http://arcserver4.iagt.org/climate1stopcoolite/Images/gradientGray_1x1_20h.png");
    
    
    background-repeat:repeat-x;
    
    
    text-align:left;
    
    
    width:30%;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    font-weight:bold;
    
    
    border-left:solid 1px gray;
    
    
    border-bottom:solid 1px gray;
    
    
    border-top:solid 1px gray;
    
    
    }
    
    
    .commentsNotifyArea
    
    
    {
    
    
    padding-left:5px;
    
    
    vertical-align: middle;
    
    
    background-image:url("http://arcserver4.iagt.org/climate1stopcoolite/Images/gradientGray_1x1_20h.png");
    
    
    background-repeat:repeat-x;
    
    
    text-align:center;
    
    
    width:30%;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    font-weight:bold;
    
    
    color:#347C17;
    
    
    border-bottom:solid 1px gray;
    
    
    border-top:solid 1px gray;
    
    
    }
    
    
    .commentsNotifyAreaDisabled
    
    
    {
    
    
    padding-left:5px;
    
    
    vertical-align: middle;
    
    
    background-image:url("http://arcserver4.iagt.org/climate1stopcoolite/Images/gradientGray_1x1_20h.png");
    
    
    background-repeat:repeat-x;
    
    
    text-align:center;
    
    
    width:30%;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    font-weight:bold;
    
    
    color:#736F6E;
    
    
    border-bottom:solid 1px gray;
    
    
    border-top:solid 1px gray;
    
    
    }
    
    
    .entrySubtitle
    
    
    {
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    font-weight:bold;
    
    
    font-size:8pt;
    
    
    
    
    
    }
    
    
    .entryText
    
    
    {
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    font-size:8pt;
    
    
    font-weight:normal;
    
    
    }
    
    
    .cssTextButtonSmall
    
    
    {
    
    
    background-color: #0033FF;
    
    
    border: 1px solid Navy;
    
    
    color: white;
    
    
    font-size:8pt;
    
    
    font-family:Verdana, Arial;
    
    
    font-weight: bold;
    
    
    padding: 3px 5px;
    
    
    cursor:pointer;
    
    
    
    
    
    }
    
    
    .cssTextButtonSmall:hover
    
    
    {
    
    
    background-color:#0099cc;
    
    
    border: 1px solid Navy;
    
    
    color: white;
    
    
    font-size: 8pt;
    
    
    font-family:Verdana, Arial;
    
    
    font-weight: bold;
    
    
    padding: 3px 5px;
    
    
    cursor:pointer;
    
    
    }
    
    
    .cssTextButton
    
    
    {
    
    
    vertical-align:middle;
    
    
    text-align:center;
    
    
    display:inline-block;
    
    
    font-weight:bold;
    
    
    color:White;
    
    
    font-size:15px;
    
    
    font-family:Verdana,Arial;
    
    
    border:1px solid navy;
    
    
    height: 30px; background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/cssTextButtonCombo.jpg') repeat-x; background-position: 0px 0px; 
    
    
    cursor:pointer;
    
    
    
    
    
    padding-top:3px;
    
    
    padding-bottom:3px;
    
    
    padding-left:10px;
    
    
    padding-right:10px;
    
    
    }
    
    
    .cssTextButton:hover
    
    
    {
    
    
    
    
    
    
    
    
    background-position:0px -30px;
    
    
    vertical-align:middle;
    
    
    text-align:center;
    
    
    display:inline-block;
    
    
    font-weight:bold;
    
    
    color:White;
    
    
    font-size:15px;
    
    
    font-family:Verdana,Arial;
    
    
    text-decoration:none;
    
    
    border:1px solid navy;
    
    
    cursor:pointer;
    
    
    
    
    
    padding-top:3px;
    
    
    padding-bottom:3px;
    
    
    padding-left:10px;
    
    
    padding-right:10px;
    
    
    }
    
    
    .loadingImage
    
    
    {
    
    
    width:31px;height:31px;
    
    
    background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/loader.gif');
    
    
    background-repeat:no-repeat;
    
    
    background-position: 0px 0px;
    
    
    display:inline-block;
    
    
    vertical-align:middle;
    
    
    }
    
    
    .feedsArea
    
    
    {
    
    
    text-indent:0px;
    
    
    line-height:15px;
    
    
    margin-top:4px;
    
    
    margin-left:2px;
    
    
    margin-right:2px;
    
    
    margin-bottom:4px;
    
    
    width:100%;
    
    
    }
    
    
    .headlineList
    
    
    {
    
    
    margin-left: 18px; padding-left: 0px;
    
    
    }
    
    
    .headlineRecent
    
    
    {
    
    
    font-size:11px;
    
    
    font-family:Verdana,Arial;
    
    
    color:#0000FF;
    
    
    font-weight:bold;
    
    
    line-height:11px;
    
    
    }
    
    
    .headlineRecent:hover
    
    
    {
    
    
    font-size:12px;
    
    
    font-family:Verdana,Arial;
    
    
    font-weight:bold;
    
    
    color:#0000FF;
    
    
    font-weight:bold;
    
    
    line-height:10px;
    
    
    
    
    
    }
    
    
    .headline
    
    
    {
    
    
    font-size:12px;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    color:#0000FF;
    
    
    line-height:12px;
    
    
    
    
    
    
    
    
    }
    
    
    .headline:hover
    
    
    {
    
    
    font-size:12px;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    color:#0000FF;
    
    
    
    
    
    line-height:12px;
    
    
    
    
    
    }
    
    
    .loginOrSignup
    
    
    {
    
    
    color:White;
    
    
    font-family:Arial;
    
    
    text-decoration:none;
    
    
    vertical-align:middle;
    
    
    
    
    
    }
    
    
    .loginOrSignup:hover
    
    
    {
    
    
    color:White;
    
    
    font-family:Arial;
    
    
    text-decoration:underline;
    
    
    vertical-align:middle;
    
    
    
    
    
    
    
    
    }
    
    
    .loginName
    
    
    {
    
    
    color:White;
    
    
    font-weight:bold;
    
    
    font-family:Arial;
    
    
    text-decoration:none;
    
    
    vertical-align:middle;
    
    
    
    
    
    }
    
    
    .loginName:hover
    
    
    {
    
    
    color:White;
    
    
    font-family:Arial;
    
    
    text-decoration:underline;
    
    
    vertical-align:middle;
    
    
    
    
    
    }
    
    
    .loginStatus
    
    
    {
    
    
    color:White;
    
    
    font-size:12px;
    
    
    font-family:Arial;
    
    
    text-decoration:none;
    
    
    vertical-align:middle;
    
    
    
    
    
    }
    
    
    .loginStatus:hover
    
    
    {
    
    
    color:White;
    
    
    font-size:12px;
    
    
    font-family:Arial;
    
    
    text-decoration:underline;
    
    
    vertical-align:middle;
    
    
    
    
    
    }
    
    
    *:focus { 
    
    
    outline: none; 
    
    
    }
    
    
    *::-moz-focus-inner { 
    
    
    border: none; 
    
    
    }
    
    
    
    
    
    .modeAE
    
    
    {
    
    
    vertical-align:middle;
    
    
    text-align:center;
    
    
    display:inline-block;
    
    
    font-weight:bold;
    
    
    color:White;
    
    
    font-size:17px;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    border:1px solid navy;
    
    
    width: 80px; height: 30px; background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/modeImgCombo.png') no-repeat; background-position: 0px 0px;
    
    
    }
    
    
    
    
    
    .modeAE:hover
    
    
    {
    
    
    background-position:0px -30px;
    
    
    vertical-align:middle;
    
    
    text-align:center;
    
    
    display:inline-block;
    
    
    font-weight:bold;
    
    
    color:White;
    
    
    font-size:17px;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    text-decoration:none;
    
    
    border:1px solid navy;
    
    
    }
    
    
    .mode
    
    
    {
    
    
    vertical-align:middle;
    
    
    text-align:center;
    
    
    display:inline-block;
    
    
    font-weight:bold;
    
    
    color:White;
    
    
    font-size:17px;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    border:1px solid navy;
    
    
    width: 80px; height: 30px; background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/modeImgCombo.png') no-repeat; background-position: 0px 0px;
    
    
    }
    
    
    .mode:hover
    
    
    {
    
    
    background-position:0px -30px;
    
    
    vertical-align:middle;
    
    
    text-align:center;
    
    
    display:inline-block;
    
    
    font-weight:bold;
    
    
    color:White;
    
    
    font-size:17px;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    text-decoration:none;
    
    
    border:1px solid navy;
    
    
    }
    
    
    .modeActive
    
    
    {
    
    
    vertical-align:middle;
    
    
    text-align:center;
    
    
    display:inline-block;
    
    
    font-weight:bold;
    
    
    color:White;
    
    
    font-size:17px;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    width: 80px; height: 30px; background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/modeImgActiveMode.png') no-repeat; background-position: 0px 0px;
    
    
    text-decoration:none;
    
    
    border:1px solid navy;
    
    
    }
    
    
    .modeActive:hover
    
    
    {
    
    
    vertical-align:middle;
    
    
    text-align:center;
    
    
    display:inline-block;
    
    
    font-weight:bold;
    
    
    color:White;
    
    
    font-size:17px;
    
    
    font-family:Calibri,Verdana,Arial;
    
    
    text-decoration:none;
    
    
    border:1px solid navy;
    
    
    }
    
    
    .calendar
    
    
    {
    
    
    cursor:pointer;
    
    
    vertical-align:middle;
    
    
    }
    
    
    .rightTable
    
    
    {
    
    
    width: 100%;
    
    
    border-top: 3px solid navy;
    
    
    border-left: 3px solid navy;
    
    
    border-right: 3px solid navy;
    
    
    border-bottom: 3px solid navy;
    
    
    border-collapse:collapse;
    
    
    }
    
    
    .leftTable
    
    
    {
    
    
    width: 100%;
    
    
    border-top: 3px solid navy;
    
    
    border-left: 3px solid navy;
    
    
    border-right: 3px solid navy;
    
    
    border-bottom: 3px solid navy;
    
    
    border-collapse:collapse;
    
    
    }
    
    
    .titlePanelRow
    
    
    {
    
    
    white-space:nowrap;
    
    
    }
    
    
    .StepText
    
    
    {
    
    
    color:Red;
    
    
    font-weight:bold;
    
    
    font-family:Verdana,Arial;
    
    
    font-size:small;
    
    
    }
    
    
    .StepQuestion
    
    
    {
    
    
    color:Black;
    
    
    font-weight:bold;
    
    
    font-family:Verdana,Arial;
    
    
    font-size:small;
    
    
    
    
    
    }
    
    
    .closePanelButton
    
    
    {
    
    
    vertical-align:middle;
    
    
    display:none;
    
    
    width: 21px; height: 21px; background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/closeNormal.png') no-repeat; background-position: 0px 0px;
    
    
    white-space:nowrap;
    
    
    }
    
    
    .minimize
    
    
    {
    
    
    vertical-align:middle;
    
    
    display:inline-block;
    
    
    width: 21px; height: 21px; background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/minimize.jpg') no-repeat; background-position: 0px 0px;
    
    
    }
    
    
    .minimize:hover{background-position:-21px 0px;}
    
    
    .restore
    
    
    {
    
    
    vertical-align:middle;
    
    
    display:inline-block;
    
    
    width: 21px; height: 21px; background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/restore.jpg') no-repeat; background-position: 0px 0px;
    
    
    }
    
    
    .restore:hover{background-position:-21px 0px;}
    
    
    .maximize
    
    
    {
    
    
    vertical-align:middle;
    
    
    display:inline-block;
    
    
    width: 21px; height: 21px; background: url('http://arcserver4.iagt.org/climate1stopcoolite/Images/maximize.jpg') no-repeat; background-position: 0px 0px;
    
    
    }
    
    
    .maximize:hover{background-position:-21px 0px;}
    
    
    .collapsePanel {
    
    
    width: 100%;
    
    
    
    
    
    overflow:hidden;
    
    
    text-align:left;
    
    
    background-image:url("http://arcserver4.iagt.org/climate1stopcoolite/Images/trans100.png");
    
    
    background-repeat:repeat;
    
    
    }
    
    
    .collapsePanelHeader{ 
    
    
    width:100%; 
    
    
    height:30px;
    
    
    color: White; 
    
    
    
    
    
    font-weight:bold;
    
    
    letter-spacing: -1px; 
    
    
    font-size: 18px;
    
    
    
    
    
    vertical-align: middle;
    
    
    background-image:url("http://arcserver4.iagt.org/climate1stopcoolite/Images/lightBlueGradient.png");
    
    
    background-repeat:repeat-x;
    
    
    }
    
    
    .accordionHeader
    
    
    {
    
    
    border: 1px solid #2F4F4F;
    
    
    color: white;
    
    
    background-color: #2E4d7B;
    
    
    font-family: Arial, Sans-Serif;
    
    
    font-size: 12px;
    
    
    font-weight: bold;
    
    
    padding: 5px;
    
    
    margin-top: 5px;
    
    
    cursor: pointer;
    
    
    }
    
    
    .accordionHeader
    
    
    {
    
    
    border: 1px solid #2F4F4F;
    
    
    color: white;
    
    
    background-color: #2E4d7B;
    
    
    font-family: Arial, Sans-Serif;
    
    
    font-size: 20px;
    
    
    font-weight: bold;
    
    
    padding: 5px;
    
    
    margin-top: 5px;
    
    
    cursor: pointer;
    
    
    }
    
    
    .accordionContent
    
    
    {
    
    
    background-color: #D3DEEF;
    
    
    border: 1px dashed #2F4F4F;
    
    
    border-top: none;
    
    
    padding: 5px;
    
    
    padding-top: 10px;
    
    
    }
    
    
    .accordionLink
    
    
    {
    
    
    background-color: #2E4d7B;
    
    
    color:White;
    
    
    }
    
    
    .header
    
    
    {
    
    
    height:40px;
    
    
    margin: 0px; 
    
    
    padding: 0px; 
    
    
    background-color: #5f87d0; 
    
    
    background-image:url("http://arcserver4.iagt.org/climate1stopcoolite/Images/c1stopBanner4.jpg");
    
    
    background-repeat:no-repeat;
    
    
    letter-spacing: -1px; 
    
    
    font-size: 25px;
    
    
    border-bottom:solid 3px navy;
    
    
    }
    
    
    body 
    
    
    {
    
    
    margin: 0; 
    
    
    padding: 0; 
    
    
    font-family: sans-serif; 
    
    
    background-color:Black;
    
    
    z-index:0;
    
    
    background-image:url("http://arcserver4.iagt.org/climate1stopcoolite/Images/earthwashoutblue.jpg");
    
    
    background-repeat:no-repeat;
    
    
    
    
    
    }
    
    
    table 
    
    
    {
    
    
    margin: 0px; 
    
    
    padding: 0px;
    
    
    }
    
    
    p 
    
    
    {
    
    
    margin: 0px; padding: 0px;
    
    
    
    
    
    }
    
    
    a 
    
    
    {
    
    
    
    
    
    text-decoration: none;
    
    
    color:Blue;
    
    
    }
    
    
    a:hover 
    
    
    {
    
    
    text-decoration: underline; 
    
    
    
    
    
    }
    
    
    
    
    
    .left {margin-left: 5px; margin-right: 5px; margin-top: 5px;font-size: 78%;vertical-align:middle;}
    
    
    .middle {margin-left: 5px; margin-right: 5px; margin-top: 5px;font-size: 78%;}
    
    
    .right {margin-left: 5px; margin-right: 6px; margin-top: 5px;font-size: 78%;vertical-align:middle;}
    
    
    .footer {margin: 0px; padding: 3px; background-color: #efe7cf; border-top: solid 1px #bfb8af; text-align: right; color: #777777;} 
    
    
    a.arrow {font-size: 1.25em; border: outset 2px #ffffff; background-color: #6fb86f; color: #ffffff; width: 14px; height: 1em; text-align: center; font-weight: bold; letter-spacing: -2px; text-decoration: none; padding: 0;} 
    
    
    a:hover.arrow {font-size: 1.25em; border: outset 2px #ffffff; background-color: #4fa84f; color: #ffffff; width: 14px; height: 1em; text-align: center; font-weight: bold; letter-spacing: -2px; text-decoration: none; padding: 0;}

Similar Threads

  1. Background Image
    By ausai in forum 2.x Help
    Replies: 4
    Last Post: Jun 19, 2012, 12:41 PM
  2. [CLOSED] Background color toolbar
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 14, 2011, 11:33 AM
  3. panel background color
    By unaltro2 in forum 1.x Help
    Replies: 2
    Last Post: Jan 10, 2011, 2:30 PM
  4. Background color in codebehind
    By fabiomarcos in forum 1.x Help
    Replies: 8
    Last Post: Oct 30, 2010, 3:58 PM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Posting Permissions