Centered page template screws up the designer. - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Centered page template screws up the designer.

  • Centered page template screws up the designer.
  • 389760_sitefinity-screenshot.png
    My CSS that centers my page and sets the width also screws up the backend designer. Help!

    Here's the CSS:
        margin: 0;
        padding: 0;
        height: 100%;
        background-color: silver;
        font-size: 90%; /* default 1.0em = 16px, so 62.5% of 16 = 10. Therefore, 1.0em now = 10px, 1.2em now = 12px etc. */
        font-family: Verdana, Arial, "Lucida Grande", sans-serif;
        min-height: 100%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        background-color: white;
        background: #ff0;
        padding: 10px;
        background: url(/styles/olympia/header.png) no-repeat;
        margin-left: 173px;
        padding-bottom: 30px; /* Height of the footer */
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px; /* Height of the footer */
        #footer ul
            margin: 0;
            padding: 0;
            font-size: 0.8em;
            color: #999;
            white-space: nowrap;
        #footer li
            list-style-type: none;
            color: #999;
            display: inline;
            vertical-align: middle;
        #footer img
            #footer li a
                text-decoration: none;
                #footer li a:hover
                    text-decoration: underline;
        height: 300px;
        float: left;
        position: absolute;
        left: 0;
        top: 0;   
        border-right:1px solid silver;
        background: url(/styles/olympia/nav-background.png) no-repeat;
        background-color: yellow;
        line-height: 30px;
        height: 33px;
        padding-left: 50px;
    And the master page:
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="olympia.master.cs" Inherits="KeilWeb.App_Master.Olympia" %>
    <!DOCTYPE html>
    <head runat="server">
        <link href="/Styles/olympia/olympia.css" rel="stylesheet" />
        <form id="pageForm" class="container" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
            <div id="body">
                <div id="left-column">
                    <img src="/styles/olympia/layout_logo.png" style="display: block;" />
                    <div id="left-column-content">
                        <asp:ContentPlaceHolder ID="leftColumnContent" runat="server" />
                <div id="header">
                    <asp:ContentPlaceHolder ID="headerLeft" runat="server"></asp:ContentPlaceHolder>
                    <div id="header-right">
                        <asp:ContentPlaceHolder ID="headerRight" runat="server"></asp:ContentPlaceHolder>
                <div id="breadcrumbs">
                    <asp:ContentPlaceHolder ID="breadcrumbBar" runat="server"/>
                <div id="content">
                    <asp:ContentPlaceHolder ID="contentArea" runat="server">
            <div id="footer">
                    <li><a href="/about">About Keil</a></li>
                    <li> | <a href="/site_map">Site Map</a></li>
                    <li> | <a href="/news_and_events">Press</a></li>
                    <li> | <a href="/about/privacy_statement">Privacy</a></li>
                    <li> | <a href="/about/terms_conditions">Terms & Conditions</a></li>
                    <li> | <a href="/about/sales_support">Sales & Support</a></li>
                    <li> | <a href="/about/copyright">Copyright© 2007 -
                        <img src="/styles/olympia/arm_text_page_footer.png" alt="ARM"></a></li>
    Screenshot atached.
  • Dave,

    You could either add some specificity to the CSS so that it doesn't target the page editor or create a new css file to fix the issues caused by the theme. To load a page in the editor, you could do something like this in Page_Load:

    if (this.IsDesignMode())
        HtmlLink css = new HtmlLink();
        css.Href = "/Sitefinity/WebsiteTemplates/Custom/App_Themes/Custom/CSS/DesignView.css";
        css.Attributes["rel"] = "stylesheet";
        css.Attributes["type"] = "text/css";
        css.Attributes["media"] = "all";

  • Ah - hadn't thought of that! Thanks!

  • No problem!

    If you get a second, could you mark my post as helpful?