Author Topic: customizing and adding pages  (Read 31637 times)

August 18, 2003, 07:38:27 AM
  • Guest

Hi.  I downloaded and paid for your ongen06 template.  Although this template is great looking I have found it very difficult to customize.  I use Dreamweaver for my customization.  Because there were so many sapcer images and such it was very tough spawning new pages off of that and adjusting heights and such.  Now I am running in to the problem, at crunchtime, of all of the tables being a certain size.  Therefor the tables to do contract and expand due to the screen resolution of the user.  I never thought of it throughout creating the entire website.  I finally finished and tested it on another computer with different screen resolution and it looks a little silly.  Also if there was a js file for the menus it would help tremendously, even if it would cosy a little bit more.  The designs are great and inexpensive, it's just tough to customize.  Any suggestions?  Thanks. :idea:


August 19, 2003, 05:49:11 AM
Reply #1
  • Administrator
  • Expert
  • *****
  • Posts: 90
    • View Profile
    • Ossoba Studio

Hi,
From your explanation I see that you trying to make redesign not just customization. The template ognen06 (and most other templates) is highly structured site designed primarily for 800 x 600 screen resolution. (Current stat shows 24.4% of surfers are browsing using a screen resolution of 800x600 or bigger.
1024 x 768 - 44.97%
800 x 600 - 24.4%
1280 x 1024 - 13.63%
1152 x 864 - 6.45%)

You have several solutions to solve that problem with different screen resolutions:
1. Make fluid design by setting the table width to 100%. I  wouldn't use this method for the current template (ognen06), because the slices and the design of the template are not suitable for liquid pages. You should make new slices from the original .psd file (that one we supply you) and put specific images as a background to fill extra space on the table.
 2. Use a java script file to redirect to 3 different frames sets, 800x600, 1024x768, 1152x864.  Example:
<SCRIPT LANGUAGE="JavaScript">
function redirectPage() {
var url800x600 = "http://yoursite.com/800/index.html";
var url1024x768 = "http://yoursite.com/1024/index.html";
var url1152x864 = "http://yoursite.com/1152/index.html";
 if ((screen.width == 800) && (screen.height == 600))
window.location.href= url800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url1024x768;
else if ((screen.width == 1152) && (screen.height == 864))
window.location.href=url1152x864;
else window.location.href= url800x600;
}
window.onload = redirectPage;
</script>
3.Also have similar method to redirect to different Style Sheets (CSS).
<SCRIPT LANGUAGE="JavaScript">
if (screen.width == 800) {
document.write('<link rel="stylesheet" type="text/css" href="800x600.css">');
}
if (screen.width == 1024) {
document.write('<link rel="stylesheet" type="text/css" href="1024x768.css">');
}
if (screen.width == 1152) {
document.write('<link rel="stylesheet" type="text/css" href="1152x864.css">');
}
</script>
You should use the .psd file to export 3 different size of the template in above methods.

Good luck!

Ognen


Ossoba Design Studio

different screen resolution
« Reply #1 on: August 19, 2003, 05:49:11 AM »
Improve your website with our free web resources.