More in this section
Forums / Designing & Styling / Centered page template screws up the designer.

Centered page template screws up the designer.

The forums are in read-only mode. In case that you want to directly contact the Progress Sitefinity team use the support center. In our Google Plus group you can find more than one thousand Sitefinity developers discussing different topics. For the Stack Overflow threads don’t forget to use the “Sitefinity” tag.
4 posts, 1 answered
  1. Dave
    Dave avatar
    29 posts
    Registered:
    31 Oct 2011
    13 Sep 2012
    Link to this post
    My CSS that centers my page and sets the width also screws up the backend designer. Help!

    Here's the CSS:
    html,
    body {
        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-width:999px;
    }
     
    form#pageForm {
        min-height: 100%;
        margin-left: auto;
        margin-right: auto;
        width:1000px;
        position: relative;
        background-color: white;
    }
     
    #header {
        background: #ff0;
        padding: 10px;
        background: url(/styles/olympia/header.png) no-repeat;
    }
     
    #header-right {
        float:right;
     
    }
     
    #body {
        margin-left: 173px;
        padding-bottom: 30px; /* Height of the footer */
    }
     
    #content {
        padding:10px;
    }
     
    #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px; /* Height of the footer */
        text-align:center;
    }
     
        #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 {
            border:none;
        }
     
            #footer li a {
                text-decoration: none;
            }
     
                #footer li a:hover {
                    text-decoration: underline;
                }
     
    #left-column {
        height: 300px;
        float: left;
        position: absolute;
        left: 0;
        top: 0;   
    }
    #left-column-content {
        position:relative;
        width:143px;
        float:left;
        padding-left:20px;
        padding-right:10px;
        padding-top:10px;
        padding-bottom:10px;
        border-right:1px solid silver;
    }
     
    #breadcrumbs {
        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">
        <title></title>
        <link href="/Styles/olympia/olympia.css" rel="stylesheet" />
    </head>
    <body>
        <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>
                </div>
                <div id="header">
                    <asp:ContentPlaceHolder ID="headerLeft" runat="server"></asp:ContentPlaceHolder>
                    <div id="header-right">
                        <asp:ContentPlaceHolder ID="headerRight" runat="server"></asp:ContentPlaceHolder>
                    </div>
                </div>
                <div id="breadcrumbs">
                    <asp:ContentPlaceHolder ID="breadcrumbBar" runat="server"/>
                </div>
                <div id="content">
                    <asp:ContentPlaceHolder ID="contentArea" runat="server">
                    </asp:ContentPlaceHolder>
     
     
                </div>
            </div>
            <div id="footer">
                <ul>
                    <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>
                </ul>
            </div>
        </form>
    </body>
    </html>
    Screenshot atached.
  2. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    17 Sep 2012
    Link to this post
    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";
        Page.Header.Controls.Add(css);
    }
    Answered
  3. Dave
    Dave avatar
    29 posts
    Registered:
    31 Oct 2011
    17 Sep 2012
    Link to this post
    Ah - hadn't thought of that! Thanks!

  4. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    17 Sep 2012
    Link to this post
    No problem!

    If you get a second, could you mark my post as helpful?
4 posts, 1 answered