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

Forums / Designing with Sitefinity / CSS not applying style images

CSS not applying style images

4 posts, 0 answered
  1. David
    David avatar
    3 posts
    Registered:
    18 Jun 2009
    27 Jul 2009
    Link to this post
    I created a new template and theme and when all the style information (css file, images directory) are in the same directory as the master page all the images are applied to the classes as expected.  When I break the templates up into the SiteFinity structure and try to create a new page I do not see any of the graphics referenced in my CSS.  Below is my CSS and master page markup.  Is there something I am missing or not defining properly?

    body {  
        margin:0px;  
        padding:0px;  
        font-familyverdana;  
        font-size11px;  
        color#FFFFFF;  
        background:#72a2d0 url(images/bg.jpg) repeat-x;  
        text-align:justify;  
        line-height:13px;  
    }  
    #wrapper {  
        margin:0 auto;  
        padding:35px 0 0 0;  
        width:1003px;  
    }  
    #clear {  
        clear:both;  
    }  
    #main_logo {  
        margin:0px;  
        padding:0px;  
        float:left;  
        width:1003px;  
    }  
    #logo {  
        margin:0 0 0 -500px;  
        padding:0px 0 0 14px;  
        width:330px;  
        position:absolute;  
        left:50%;  
        z-index:1;  
    }  
     
     
    /*------------------------------- Navigation Bar --------------------------------*/ 
     
    #nav {  
        margin:0px;  
        padding:0 3px 0 0px;  
        width:621px;  
        float:rightright;  
        height:42px;  
        position:relative;  
    }  
    #mainnav{  
        margin:0;  
        padding:0;  
        position:absolute;  
        width:621px;  
        height:42px;  
        list-style-type:none;  
        float:rightright;  
    }  
     
    #mainnav li {  
        float:left;  
        display:inline;  
        list-style-typenone;  
    }  
     
    #mainnav li img {  
        border0px;  
    }  
     
    #mainnav li, #mainnav li a {  
        display:block;  
        overflow:hidden;  
        height:42px;  
    }  
     
    #mainnav li a.products {  
        width:110px;  
    }  
     
    #mainnav li a.products:hover {  
        text-indent:-110px;  
    }  
     
    #mainnav li a.faq {  
        width:91px;  
    }  
    #mainnav li a.faq:hover {  
        text-indent:-91px;  
    }  
     
    #mainnav li a.contact {  
        width:108px;  
    }  
    #mainnav li a.contact:hover {  
        text-indent:-108px;  
    }  
     
    #mainnav li a.customer_service {  
        width:186px;  
    }  
    #mainnav li a.customer_service:hover {  
        text-indent:-186px;  
    }  
    #mainnav li a.quote_req {  
        width:126px;  
    }  
    #mainnav li a.quote_req:hover {  
        text-indent:-126px;  
    }  
     
    /*------------------------------ Header -----------------------------------*/ 
     
    #header_top {  
        margin:0px;  
        padding:43px 6px 0 0px;  
        width:483px;  
        float:rightright;  
    }  
    #header {  
        margin:0px;  
        padding:0px;  
        width:1003px;  
        float:left;  
    }  
    #header img {  
        margin:0px;  
        padding:0px;  
        float:left;  
    }  
    #header img.sep {  
        margin:0px;  
        padding:18px 0 0 0px;  
        float:left;  
    }  
     
    /*------------------------------- Body -------------------------------------*/ 
     
    #body_main {  
        margin:0px;  
        padding:23px 0 0 17px;  
        width:986px;  
        float:left;  
    }  
    #wel_main {  
        margin:0px;  
        padding:0 35px 0 0px;  
        width:622px;  
        float:left;  
    }  
    #wel_txt_pad {  
        margin:0px;  
        padding:0 0 0 15px;  
        background:url(images/wel_bg_1px.jpg) repeat-y 15px 0px;  
        width:592px;  
        float:left;  
    }  
    #wel_txt_bg {  
        margin:0px;  
        padding:0px;  
        background:url(images/wel_bg.jpg) no-repeat 0px 0px;  
        width:592px;  
        float:left;  
        min-height:312px;  
        height:auto !important;  
        height:312px;  
    }  
    #wel_txt_bg img {  
        margin:16px 0 0 16px;  
        padding:0px;  
        float:left;  
    }  
    #wel_txt_bg p {  
        margin:0px;  
        padding:14px 21px 0 0px;  
        width:338px;  
        float:rightright;  
    }  
    #wel_txt_bg p.color {  
        margin:0px;  
        padding:22px 0 0 16px;  
        color:#091466;  
        font-weight:bold;  
        float:left;  
    }  
    #wel_txt_bg p.sec {  
        margin:0px;  
        padding:14px 0 0 19px;  
        width:551px;  
        float:left;  
    }  
    #wel_txt_bg ul {  
        margin:0;  
        padding:11px 0 0 0px;  
        list-style-type:none;  
        float:left;  
    }  
    #wel_txt_bg li {  
        padding:0 0 0 37px;  
        margin:0;  
        background:url(images/bullet.gif) no-repeat 20px 7px;  
        width:520px;  
        font-family:verdana;  
        font-size:11px;  
        color:#091466;  
        line-height:18px;  
        text-align:justify;  
    }  
    #image_btm {  
        margin:0px;  
        padding:0px;  
        width:592px;  
        float:left;  
    }  
    #image_btm img {  
        margin:0px;  
        padding:0px;  
        width:592px;  
        float:left;  
    }  
     
    /*------------------ Right Panel-----------------------------*/ 
     
    #main_right {  
        margin:0px;  
        padding:5px 0 0 0px;  
        width:323px;  
        float:left;  
    }  
    #right_panel {  
        margin:0px;  
        padding:0px;  
        width:323px;  
        float:left;  
        background:url(images/right_1px.jpg) repeat-y;  
    }  
    #right_panel_img {  
        margin:0px;  
        padding:0px;  
        width:323px;  
        float:left;  
        background:url(images/right_pan_bg.jpg) no-repeat;  
        min-height:357px;  
        height:auto !important;  
        height:357px;  
    }  
    #panal_div {  
        margin:0px;  
        padding:13px 0 0 14px;  
        width:299px;  
        float:left;  
    }  
    #panal_img {  
        margin:0px;  
        padding:0px;  
        width:299px;  
        background:url(images/panal_01.jpg) no-repeat;  
        min-height:187px;  
        height:auto !important;  
        height:187px;  
        float:left;  
    }  
    #panal_img img {  
        margin:14px 0 0 6px;  
        padding:0px;  
        float:left;  
    }  
    #panal_img img.sam {  
        margin:21px 0 0 5px;  
        padding:0px;  
        float:left;  
    }  
    #panal_img img.txt {  
        margin:16px 0 0 8px;  
        padding:0px;  
        float:left;  
    }  
    #panal_img img.btn {  
        margin:0px 0 0 16px;  
        padding:0px;  
        float:left;  
    }  
     
    #sec_panal_div {  
        margin:0px;  
        padding:12px 0 0 13px;  
        width:299px;  
        float:left;  
    }  
    #panal_second {  
        margin:0px;  
        padding:0px;  
        width:298px;  
        background:url(images/sec_pan.jpg) no-repeat;  
    /*  min-height:142px;
        height:auto !important;
        */height:142px;  
        float:left;  
    }  
    #panal_second img {  
        margin:7px 0 0 11px;  
        padding:0px;  
        float:left;  
    }  
    #panal_second img.samp2 {  
        margin:14px 0 0 15px;  
        padding:0px;  
        float:left;  
    }  
    #panal_second img.txt2 {  
        margin:7px 0 0 18px;  
        padding:0px;  
        float:left;  
    }  
    #panal_second img.click2 {  
        margin:0px 0 0 17px;  
        padding:0px;  
        float:left;  
    }  
    #rght_pan_btm {  
        margin:0px;  
        padding:0px;  
        width:323px;  
        float:left;  
    }  
     
    /*-------------------------- Footer ---------------------------*/ 
     
    #separator {  
        margin:0px;  
        padding:0px;  
        width:1003px;  
        float:left;  
    }  
    #separator img {  
        margin:0px;  
        padding:23px 0 0 0px;  
        float:left;  
    }  
    #footer {  
        margin:0px;  
        padding:0px;  
        width:1003px;  
        float:left;  
    }  
    #footer p {  
        margin:0px;  
        padding:11px 0 15px 2px;  
        width:1001px;  
        text-align:center;  
        line-height:14px;  
        font-size:10px;  
        float:left;  
    }  
    #footer a {  
        color:#FFFFFF;  
        text-decoration:underline;  
    }  
    #footer a:hover {  
        color:#FFFFFF;  
        text-decoration:none;  

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="IDSync.master.cs" Inherits="App_Master_IDSync" %> 
     
    <!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 runat="server">  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>Welcome To IDENTITY SYNCRONIZER</title> 
        <script type="text/javascript">  
            function MM_preloadImages() { //v3.0  
                var d = document; if (d.images) {  
                    if (!d.MM_p) d.MM_p = new Array();  
                    var i, j = d.MM_p.length, a = MM_preloadImages.arguments; for (i = 0; i < a.length; i++)  
                        if (a[i].indexOf("#") != 0) { d.MM_p[j] = new Image; d.MM_p[j++].src = a[i]; }  
                }  
            }  
     
            function MM_swapImgRestore() { //v3.0  
                var i, x, a = document.MM_sr; for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) xx.src = x.oSrc;  
            }  
     
            function MM_findObj(n, d) { //v4.01  
                var p, i, x; if (!d) d = document; if ((p = n.indexOf("?")) > 0 && parent.frames.length) {  
                    d = parent.frames[n.substring(p + 1)].document; nn = n.substring(0, p);  
                }  
                if (!(x = d[n]) && d.all) x = d.all[n]; for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];  
                for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);  
                if (!x && d.getElementById) x = d.getElementById(n); return x;  
            }  
     
            function MM_swapImage() { //v3.0  
                var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i < (a.length - 2); i += 3)  
                    if ((x = MM_findObj(a[i])) != null) { document.MM_sr[j++] = x; if (!x.oSrc) xx.oSrc = x.src; x.src = a[i + 2]; }  
            }  
        </script> 
     
        <asp:ContentPlaceHolder ID="head" runat="server">  
        </asp:ContentPlaceHolder> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <div id="wrapper">  
            <div id="main_logo">  
                <div id="logo">  
                    <asp:ContentPlaceHolder ID="flashlogo" runat="server">  
                    </asp:ContentPlaceHolder> 
                </div> 
                <div id="nav">  
                    <ul id="mainnav">  
                        <asp:ContentPlaceHolder ID="menu" runat="server">  
                    </asp:ContentPlaceHolder> 
                    </ul> 
                </div> 
            </div> 
            <div id="header_top">  
            </div> 
            <div id="header">  
                <div id="header_text1">  
                    <asp:ContentPlaceHolder ID="headertext1" runat="server">  
                    </asp:ContentPlaceHolder> 
                </div> 
                <div id="header_text2">  
                    <asp:ContentPlaceHolder ID="headertext2" runat="server">  
                    </asp:ContentPlaceHolder> 
                </div> 
            </div> 
            <div id="header_seperator">  
            </div> 
            <div id="body_main">  
                <div id="wel_main">  
                    <div id="wel_hdr_img">  
                    </div> 
                    <div id="wel_txt_pad">  
                        <div id="wel_txt_bg">  
                            <asp:ContentPlaceHolder ID="body" runat="server">  
                            </asp:ContentPlaceHolder> 
                        </div> 
                        <div id="image_btm">  
                        </div> 
                    </div> 
                </div> 
                <div id="main_right">  
                    <div id="right_panel">  
                        <div id="right_panel_img">  
                            <asp:ContentPlaceHolder ID="rightpanel" runat="server">  
                            </asp:ContentPlaceHolder> 
                        </div> 
                    </div> 
                    <div id="rght_pan_btm">  
                    </div> 
                </div> 
            </div> 
            <div id="separator">  
                <div id="footer">  
                    <asp:ContentPlaceHolder ID="footercph" runat="server">  
                    </asp:ContentPlaceHolder> 
                </div> 
            </div> 
            <div id="clear">  
            </div> 
        </div> 
        </form> 
    </body> 
    </html> 
     
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    28 Jul 2009
    Link to this post
    Hello David,

    Thank you for using our services.

    I have tested your CSS and master page and it works fine. It loads the style images in, defined in your style sheet. Here are the steps I took in testing your masterpage an styles.

    1) Created a new master page (~/App_Master/IDSync.master) in VS. Copied the master page
    2) In my ~/App_Themes/ I created a new theme folder, named it Custom, and created created a style sheet called custom.css.
    3) In the theme folder (~/App_Themes/Custom/) I created a folder called images and copied some images with names, specified in your CSS. So images are located in ~/App_Themes/Custom/images/
    4) Logged in my Sitefinity site and went to the templates section, too see if Sitefinity could automatically detect my new template. It was there. I opened the template and specified its default theme to be Custom.
    5) Created a page, that uses this template, and left the Theme property to [Template Theme]. It used the specified style images.

    I have also tried to set the page to use my default template, with the Custom template. It also worked as expected.

    The only thing I found that you are missing in your master page is a ScriptManager tag. Note that you need it in order for your controls to work. I added it right after the form tag like this:
    <form id="form1" runat="server">   
        <asp:ScriptManager ID="ScriptManager1" runat="server"
            </asp:ScriptManager> 

    Can you please see if I am taking the same steps as you are. If not can you try with the steps I have used, and get back to me if the problem persists.

    Regards,
    Rado
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. David
    David avatar
    3 posts
    Registered:
    18 Jun 2009
    28 Jul 2009
    Link to this post
    It must have been the missing script manager.  I deleted everything from the test web server and copied everything back over from my dev machine (with the script manager defined) and it worked as expected.  Thanks for the help!

    David Terry
    Tranztec Solutions, Inc.
    www.tranztec.com
  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    29 Jul 2009
    Link to this post
    Hello David,

    We are glad you were able to sort this issue out. Please feel free to contact us, if you come across any other problems.

    Regards,
    Rado
    the Telerik team

    Instantly find answers to your questions on the newTelerik Support Portal.
    Check out the tipsfor optimizing your support resource searches.
Register for webinar
4 posts, 0 answered