+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / Centered page template screws up the designer.

Centered page template screws up the designer.

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