I started my website out in the website wizard, but now I'm working in file manager with visual and text editor. I'd like to make my template wider from what it was set at in the wizard setup but I'm not sure where to find the text in HTML or how to do it in visual editor...

Any one know how I can make the width of my website to fit most 17 inch standard monitor? When I open my website the template has so much white space on the side you can tell that I just plugged text into a website wizard. I'd like to change that...

How?

1. Learn html
2. Learn css
3. Learn advanced css
4. Download the site to your PC
5. Edit the stylesheet in a text editor
6. Buy photoshop
7. Learn photoshop
8. Edit the graphics to make them fit the new layout
9. Upload everything back to your site

OR you could just find yourself a different template and paste your content into the new layout.

Creating layouts with css requires skill and experience and isn't an exercise for a beginner.

Yes, many users start out with the Wizard and then switch to using the Visual/Text editors. It is almost always a disaster. That particular Wizard Theme relies on a "DOCTYPE" tag to make it display well in all browsers. When you save your editing with the Visual editor, that line is deleted. The pages will display fine in Firefox, but are a total mess in Internet Explorer. The whole layout is blocked left, the navigation menu is offset, and the main content moved to below the navigation menu. The "DOCTYPE" tag fixes those issues by taking IE out of the "quarks" mode and defining a standard to work with.

This can be fixed by adding the "DOCTYPE" tag back in using the Text editor. But that also means, anytime you use the Visual editor and save your work, you will need to go back in using the Text editor, and add the "DOCTYPE" tag back in. If you don't have too many pages, this isn't much of a problem.

The overall width of the template, and each of the content areas, is managed from the style sheet, "style.css". But making it wider may be a tough issue. The Visual editor does not contain the utilities to manage a style sheet. The "style.css" file can be edited with the Text editor, but unless you know how to interpret HTML and CSS, it may be tough making all the adjustments that are needed.

Just to give you an idea, try opening the "style.css" file in the Text editor. The style "#pageWrapper" defines the overall width. But then there are six other with adjustments to widen the content areas. Then you find out that all the images on the page are too small. You can make them bigger, or replace them, but now you have a vertical size issue. And all the time you need to be careful of margin and padding settings. Getting the sizes wrong, will make some of the content move to a different area on the screen

If you don't want to go through all that, I would recommend that you go back to using the Wizard. If you need a wider display, use a different Theme or switch to the Layouts. The layouts are not as fancy as the Themes, but some of the adjust to a visitors browser, and don't waste space on the sides. You can switch to a Layout from a Theme, without losing any data.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Philo K,

Thanks for the explanation. I don't in fact have too many pages so I think I'll just put in the "DOCTYPE" tag for every page whenever I use the editor. That seems to be the easiest answer in my case.

After using visual editor on a specific page do I only have to go back and reinsert the "DOCTYPE" into that page I just edited? Or all of them?

Thanks again for the reply. It's a lot of help :)

Browser: Firefox, Internet Explorer

If you only edited one of the pages with the Visual editor, that is the only page you need to replace the "DOCTYPE" tag. The Visual editor is not like the Wizard, and does not save all your pages at the same time. Just FYI, the "DOCTYPE" tag should be the first line on the page and looks like the following code.

If you really want to learn how to widen your existing Theme, try downloading this Widen Theme Zip File. It contains a modified style sheet and three resized images. To try them out, UnZip the file on your PC, and upload the images to the "theme_images" folder on your web site. Then upload the "style_new.css" file to the root directory of your web site. That is the same directory you will see "style.css" in. Then open your "index.html" page in the Text editor, and modify the line at the top of the page that looks like the following:



Change it to look like this:



Then view your web site from a browser. If you don't see the changes width right away, force a couple of browser refreshes (F5 or Ctrl-R). The changes make the Theme 100 pixels wider than the original. If you view the "style_new.css" file in a Text editor, on your PC or your web site, you should easily see my changes.

I marked each change by putting comments around the original attribute and my name next to the changed attribute. There should be 14 changes overall. The images were resized specifically for this widening. If you want to make it wider, you will need to resize the images. Of course, you could always replace the images if you have the tools. Just note that the rounded corners are part of the image, and is not done with code.

If you want all of your pages to see the same style sheet, modify the "link" tag in each one of them using the Text editor. They they will all see the same styles. The style sheet contains definitions for everything on your web pages, and should be used to make modifications to your Theme. This is another thing that the Visual editor does not take care of for you.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

This was a big help!!! Thank you so much for taking the time to help me!!! I really appreciate it and pretty much think you're a saint :) Thanks again.

Philo is a bit of a "guru" when it comes to answers to any issues. NOT to give him a big head, he is a bit of a GOD.

Browser: FireFox

OS: windows xp