Template changed after upgrade.

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.

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.

Thank you! that did the trick :)

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.

Hello John,

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

All the best,
Katia
the Telerik team

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;

margin:  0px 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;

 

 

 

 

 

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

I figured it out. It was as simple as changing the size of the header column to 94%. :/

Thanks!

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

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;

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

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:

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

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