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

Forums / General Discussions / Template changed after upgrade.

Template changed after upgrade.

14 posts, 0 answered
  1. John
    John avatar
    12 posts
    Registered:
    01 Nov 2010
    25 Jan 2011
    Link to this post
    Hello,

    I had completed a template using a custom theme in the previous version of Sitefinity 4.0, and it was working perfectly. I used the following css structure with it:

    <container>
    <header>
    <masthead></masthead>
    <main-nav></main-nav>
    </header>
    <content>
    <sidebar></sidebar>
    </content>
    </container>
    <footer></footer>

    I specified the classes on the wrapper and column names on the edit layout windows. Once I upgraded to the latest version, the spacing got completely out of sync as if there was no "container" class.  All the font, color, and background stylings work perfectly including the container class background, but the position of the divs are completely off and move around when resizing the window. All the divs should be within the container window and they are covering the whole page as if I did not place them within the container. Any idea of what can be causing this? as I said before, it was working perfectly before the upgrade, I havent changed anything, so I dont think this it is just my CSS file. I attached what the website should/used to look like, and how it looks now.

    Thank you.
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    26 Jan 2011
    Link to this post
    Hi John,

    We have removed the CSS rule set for sfPublicWrapper from the CSS rules which are linked to the pages by default. Set width to sfPublicWrapper to see if that will do the trick.

    .sfPublicWrapper
    {
        margin: 20px auto;
        padding: 0;
        width: 900px;
    }

    Let us know if you need further help.


    Regards,
    Katia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. John
    John avatar
    12 posts
    Registered:
    01 Nov 2010
    26 Jan 2011
    Link to this post
    Thank you! that did the trick :)
  4. John
    John avatar
    12 posts
    Registered:
    01 Nov 2010
    09 Feb 2011
    Link to this post
    HI,

    I have another related problem. Using .sfPublicWrapper helped, but I still had to change a lot of the css to make the page look correctly. I have everything back except the header. I have attached a screenshot, It looks like its too big. the header takes the whole space including the shadows in the borders when its supposed to just take up the middle white space and have its own shadow border. I was able to fix the left side by using margins, but for some reason the right margin wont budge. I also tried to change the width with no luck. any idea why the margin/width wont cooperate??
    this is the css that is used by the header and navigation menu.

    .sfPublicWrapper 
    width: 1016px;
    margin: 0 auto;
    background: transparent url("/NewSiteTest/images/layout/2010/12/27/shadow-container.png") repeat-y center;
    min-height: 525px;
      
    }
      
      
     * {  
    margin:0
    padding:0
      
    head{   
    background: #fff url("/NewSiteTest/images/layout/2010/12/27/bg-header.png") repeat-x 0 0;       
    width: 80px;
    margin0px 0px 0px 33px;
    padding: 20px 0px 40px 0px;
      
    }
      
    .masthead 
    {   
    width: 18px;    
    height: 50px;   
    border-right: 1px solid #cacaca;        
    float: left;
    }

    changing the margin on .head helped, but it will not do anything if I change the right side, and changing the width doesnt make a difference.
  5. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    09 Feb 2011
    Link to this post
    Hello John,

    I could not reproduce your problem. Can you send your masterpage and theme, please.

    All the best,
    Katia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. John
    John avatar
    12 posts
    Registered:
    01 Nov 2010
    09 Feb 2011
    Link to this post
    Katia,

    Sorry about that, This is the whole css file I use on the theme, I just set the theme and use the css file. Im not sure how to send you the template, but I have a container class that includes everything but the footer, within that I have the head class which includes classes main-nav and masthead on a 25/75 layout block, and I have another layout block with the sidebar class and an empty column.I also attached the background pictures which is what has to line up (the header), I have no problem with the content I add later so as long as the backgrounds match it will work. 

    Thanks
    @import "main.css";  
      
     * {  
    margin:0
    padding:0
      
    .sfPublicWrapper 
        width: 1016px;
        margin: 0 auto;
        min-height: 525px;
    }
      
    .container
    {
        width: 880px;
            background: transparent url("/NewSiteTest/images/layout/2010/12/27/shadow-container.png") repeat-y center;
          
    }
      
    body {
        background: #fff url("/NewSiteTest/images/layout/2010/12/27/bg-body-gradient.png") repeat-x 0 0;
        font: 76%/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
      
    }
      
    dl, ol, p, blockquote, table, ul {
        margin: 0 0 1.5em 0;
    }
      
    #wrapper {
        width: 880px;
        margin: 0 auto;
        padding: 0px 35px 20px 68px;        
    }
      
    .head{  
    background: #fff url("/NewSiteTest/images/layout/2010/12/27/bg-header.png") repeat-x 0 0;       
    width: 10px;
    margin0px 0px 0px 33px;
    padding: 20px 0px 40px 0px;
      
    }
      
    .masthead { width: 18px;    height: 50px;   border-right: 1px solid #cacaca;        float: left;}
      
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
        color: #034c8e;
    }
      
    h1 {
        font-size: 1.6em;
        line-height: 1.5;
        margin: 0 60px 17px 60px;
        background: transparent url("/NewSiteTest/images/layout/2010/12/27/bg-h1-bottom.gif") repeat-x bottom;
        padding-bottom: 7px;
    }
      
    a img {
        border: none;
    }
      
    #main {
        float: right;
        width: 675px;
        border-left: 1px solid #ccc;
        padding: 0 90px 25px 25px;
        color: #636466;
        /*font-size: .95em;*/
        text-align: justify;
    }
      
    #content {
        float: left;
        width: 410px;
        padding-right: 40px;
    }
      
    #content.full {
        width: 675px;
    }
    /* - Main Navigation - */   
      
    .main-nav { float: right; }
      
    .main-nav ul {
        float: left;
        margin: 0;
        padding: 0;
    }
      
    .main-nav li {
        float: left;
        list-style-type: none;
        margin: 0;
        padding: 0 10px;
    }
      
    .main-nav li a {
        text-decoration: none;
        color: #333;
        font-size: 1em;
        display: block;
    }
      
    .main-nav li.last {
        padding-right: 0;
    }
      
    .main-nav li:last-child {
        padding-right: 0;
    }
      
    .main-nav li.last a {
        color: #00529b;
    }
      
    .main-nav li:last-child a {
        color: #00529b;
    }
      
    .main-nav ul li ul, .main-nav ul ul li  {
        /*width: 125px;*/
        width: 175px;
        margin: 0;
        padding: 0;
    }
      
    .main-nav ul li ul li, .main-nav ul ul li {
        display: block;
    }
      
    .main-nav ul ul li a {
        border: none;
        color: #00529b;
        font-weight: normal;
        padding-bottom: .25em;
        padding-left: 25px;
        /*width: 100x;*/
        width: 140px;
        font-size: .9em;
    }
      
    .main-nav ul li ul {
        background-image: none;
        position: absolute;
        z-index: 999;
        display: none;
        background-color: #e6e6e6;
        border: none;
        text-align: left;
        padding: 15px 0;
    }
      
    .main-nav ul li:hover ul, .main-nav ul li.iehover ul {
        display: block;
    }
      
    .main-nav ul li:hover ul a, .main-nav ul li.iehover ul a {
        background-color: #e6e6e6;
        display: block;
        padding: 5px 10px 5px 25px;
        text-decoration: none;
    }
      
    .main-nav ul ul a:hover {
        background-color: #e6e6e6!important;
        color: #00529b!important;
        text-decoration: underline;
        background: #e6e6e6 url("/NewSiteTest/images/layout/2010/12/27/arrow-right-gray-gray.gif") no-repeat 10px 7px;!important;
    }
      
    /* - Sub Navigations - */   
      
    .sub-nav li {   
    list-style-type: none;  
    background: #fff url("/NewSiteTest/images/layout/2010/12/27/arrow-right-gray-white.gif") no-repeat ;
    background-position: right;
      
      
    }
      
    .sub-nav li a {
    margin-left: 40px;
    display: block
    padding: 6px 0
    text-decoration: none;  
    color: #231f20
    font-size: .9em;
    text-align: left !important;
    border-bottom: 1px solid #e5e5e5;
    width: 135px;
    }
      
    .sub-nav li a:hover,.sub-nav li a:focus,.sub-nav li a.active {  
    background: #fff url("/NewSiteTest/images/layout/2010/12/27/arrow-right-blue-white.gif") no-repeat right 8px;   
    color: #034C8E;
    }
      
    .level-three-nav {  
    border-bottom: 1px solid #e5e5e5;   padding-bottom: 1.5em;  
    margin-bottom: 15px;
    }
      
    .content .level-three-nav li {  
    list-style-type: none;  
    margin: 0;  
    padding: 3px 0
    text-align: left;
    }
      
    .level-three-nav li a,.main .level-three-nav li a 
    {   text-decoration: none;  
    color: #231f20
    font-size: 1.1em;   
    background: #fff url("/NewSiteTest/images/layout/2010/12/27/arrow-right-gray-white.gif") no-repeat right 5px;   
    padding-right: 12px;    
    text-align: left !important;
    }
      
    .level-three-nav li a:hover,.level-three-nav li a:focus {   
    color: #034c8e
    background: #fff url("/NewSiteTest/images/layout/2010/12/27/arrow-right-blue-white.gif") no-repeat right 5px;
    }
     .test
    {
      
    }
      
    /* - Sidebar- */
          
    .sidebar h2 {
        font-size: 1.3em;
        border-bottom: 1px solid #ccc;
         margin-left: 60px
        padding-bottom: 7px;
        margin-bottom: 12px;
     margin-left: 35px;
    margin-right: 65px
    }
    .sidebar h3 {
        text-transform: uppercase;
        color: #939598;
        background: transparent url("/NewSiteTest/images/layout/2010/12/27/bg-h1-bottom.gif") repeat-x bottom;
        margin-left: 35px;
        margin-right: 65px
        padding-bottom: 12px;
        font-size: .85em;
        font-weight: bold;
    }
    .sidebar ul#press-releases li {
        list-style-type: none;
        margin: 0;
        padding: 0;
     margin-left: 35px;
    margin-right: 65px
        border-bottom: 1px solid #e5e5e5;
      
    }
      
    .sidebar ul#press-releases li a:hover,
    .sidebar ul.press-releases li a:focus {
        background: #fff url("NewSiteTest/images/layout/2010/12/27/arrow-right-blue-white.gif") no-repeat 215px 8px;
        color: #034C8E;
    }
      
    .sidebar ul#press-releases li.last a {
        color: #034C8E;
        text-transform: uppercase;
    }
      
    .sidebar ul#sponsors {
     margin-left: 50px
    }
      
    .sidebar ul#sponsors li {
        list-style-type: none;
        float: left;
    margin: 0;
    padding: 0;
    }
      
    .sidebar {  float: left;    width: 150px;   margin-top: 0px;
         }
      
    /* - footer - */    
      
    .footer {   
    width: 950px;   
    margin: 0 auto
    background: transparent url("/NewSiteTest/images/layout/2010/12/27/bg-container-bottom.png") no-repeat 0 0
    padding: 10px 33px
    }
      
    .footer ul {    
    float: left;    margin-left: 200px;
    }
      
    .footer ul li { 
    float: left;    list-style-type: none;  
    margin: 0;  
    padding: 0 5px
    font-size: .85em;   
    color: #939598
    border-right: 1px solid #939598;    
    height: 10px;   
    line-height: 10px;
    }
      
    .footer ul li.last, .footer ul li.first {   
    border-right: none;
    }
      
    .footer ul li:last-child {  
    border-right: none;
    }
      
    .footer ul li a {   
    text-decoration: none;  
    color: #939598
    font-size: .85em;
    }
      
    .footer ul li a:hover { 
    color: #034C8E;
    }
      
    .footer ul#badges { 
    float: right;   
    margin: 0;}
      
    .footer ul#badges li {  
    border-right: none
    padding: 0;}
      
    .footer ul#badges li img {  
    margin-left: 15px;}
  7. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    10 Feb 2011
    Link to this post
    Hello John,

    I couldn't reproduce the problem this time either. Can you save the page and send it to me. In IE click "File" > "Save as" and  choose  "Webpage, Complete (*.htm,*.html)" for "Save as type". Send the html file and the folder with the same name plus "_files".


    Kind regards,
    Katia
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. John
    John avatar
    12 posts
    Registered:
    01 Nov 2010
    11 Feb 2011
    Link to this post
    I figured it out. It was as simple as changing the size of the header column to 94%. :/

    Thanks!
  9. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    27 Apr 2011
    Link to this post
    hi,

    after upgrading to 4.1 instead of the white background i used to have, i now have a more grey background. what happened? is the same fix applicable here too?

    thanks,
    andrei
  10. Momchil
    Momchil avatar
    2 posts
    Registered:
    03 Apr 2017
    29 Apr 2011
    Link to this post
    Hello Andrei,

    In Sitefinity 4.1, we change the background of the Basic theme to improve usability by outlining layout of the web site.

    You can change the background as you define a CSS rule to override the body tag background color.
    You can add the rule to the CSS files your have linked to the site or via the CSS widget from the toolbox.

    body{
    background:#ffffff;
    }

    Kind regards,
    Momchil
    the Telerik team

  11. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    03 May 2011
    Link to this post
    Momchil,

    Its not working. I have done what you said. The grey background is still there and it seems to have added some width
    to the page as well, which is messing with my printing set-up.

    Thanks,
    Andrei
  12. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    05 May 2011
    Link to this post
    Hello again Andrei,

    The rule for the background-color works fine for me, but if there is still a problem with it you can always use:

    body {
    background-color: #fff !important;
    }

    I think that the better approach for the print-ready pages is to use your own separate theme - first because if our front-end team decide to change something on the default theme you should override it again when upgrade and second because you will be able to set-up specific rules/options for the print layout.


    Best wishes,
    Jordan
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    05 May 2011
    Link to this post
    Jordan,

    Thank you for the suggestion. I shall try it with the '!important' attribute as well.

    As far as the approach you are suggesting, I think I am already doing it. I have two Stylesheets (separate files)
    for each Master Page (Template). One for displaying (media="screen") and the other for printing (media="print"). I
    think that is what you meant...

    I will try that and let you know.

    Many thanks,
    Andrei
  14. Andrei
    Andrei avatar
    553 posts
    Registered:
    27 Nov 2008
    06 May 2011
    Link to this post
    Jordan,

    After re-reading your comments I realised that I misunderstood you. You were talking about themes and not CSS files.
    I guess for now, I will just stick with the CSS solution, but if the "front-end" team become a real pain in the back-side then I will consider a custom theme.

    Your suggestion seems to work, many thanks.
    Andrei 
14 posts, 0 answered