Why does my template look broken?

If you built your website using WebSite Tonight 2.0 and now you are working with Website Tonight 4 or newer, then your template may appear incorrectly. This issue only affects certain version 2.0 templates. Most users with this problem reported that their template seemed to go beyond the end of the page, and that different parts of the site were not aligned correctly. The fix is simple, re-publish.

How to Re-Publish Your Website in WebSite Tonight 4.0

  1. Log into Website Tonight.
  2. Click the Publish button in the upper right.
  3. Click Publish All.

If these steps do not resolve the issue then contact your Website Tonight provider so that someone can review your site to determine the cause of the problem.

Tags: ,

4 Replies to Why does my template look broken?

  1. Thank you so much for your help Kirkland. It solved all my issues and improved the look of my site.

  2. My web page has a large gap on the home page. I cannot remove this and i see it during the design view. I also have changed templates recently from an old one. The old one has carried over part of its design to my new template and has made a freak of a template. I have selected publish all but no help. I also want to make my home page header at the very top larger and cannot make it go any further horizontally.

    • Kirkland says:

      Hello Jacob,

      Your template is using the advanced CSS option. When you use the advanced CSS option any modifications you make will override the defaults in the template. My guess is that you customized the CSS on the old template then switched to a new template. When you do that the custom CSS doesn’t get thrown out, so the CSS modifications you made for the old template are now applying to the new template. It’s an easy fix, follow these steps…

      1. Log in to Website Tonight
      2. Make sure the Site tab is selected (upper left).
      3. Hover over Design and select Advanced Style Options from the drop-down menu.
      4. Remove the check from the box that says Use modified CSS.
      5. Click Apply and Okay.

      Now look at your template. If it still doesn’t look right then the database supporting your Website Tonight needs to be re-synced. Only your Website Tonight provider can do that for you and I highly recommend that you make a backup of everything in the Edit view of CSS file box before you call them (copy everything in that box, paste it in a notepad on your computer, and save it), but chances are it looks a lot better. If these instructions fixed some of the problem and also removed styles you wanted to keep then some of the code in the “Edit view of CSS file” box was wrong, but not all of it. If everything changed for the better then all the code in the “Edit view of CSS file” box can be deleted. I’m assuming you will want to delete everything that’s currently in that box.

      Before I address the gap issue I need to explain how the advanced CSS feature works. It looks like someone copied all the code from the Read-only view of CSS file (top box), pasted it in the Edit view of CSS file (bottom box), and then started making changes. You do not need to copy all of the code, only the code you are making changes to.

      To fix the gap issue first go to the page designer and double click the content block with “SkullBone Cabinets” and “Custom Built Quality Cabinets” in it. Right now there are a few blank spaces and <br> tags where they shouldn’t be. Click to edit the HTML and replace everything you see with this…

      <font style="font-size: 36px;">SkullBone Cabinets</font><br><font style="font-size: 18px;">"Custom Built Quality Cabinets"</font>

      This should tighten up the name of the company and the slogan. Now go back to the Advanced Style Options and put this in the bottom box…

      .sf_main_header {

      You can change 80 to whatever you think looks best. Personally, I would also add…

      .sf_navigation {

      …to get the navigation bar to stick to the right side, but thats just my personal opinion. If you add both then all you will see in the Edit view of CSS file box will be this…

      .sf_main_header {
      .sf_navigation {

      I hope I understood your question correctly and was able to give you the answer you’re looking for. Good luck!
      ~ Kirkland

Leave a Reply