1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

General Template Doesn't Display Properly

Discussion in 'General' started by Tizzy_10, Jun 17, 2011.

  1. Tizzy_10

    Tizzy_10 New Member

    Hi all,

    I downloaded the template fashionhut earlier today and also installed WampServer so I could view it as I make adjustments. The problem is though that instead of the nice template I saw all i'm getting is a white page with all the words sprawled down the left hand side of the page, resembling nothing of the original template.

    Is it reading the style sheet wrong?
    I made a few minor adjustments to it while following a tutorial to convert it to php, replacing the interior links with the ending php but I don't think that's caused it.

    Thanks for reading, all help's appreciated :)

    Tizzy_10
     
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    "Is it reading the style sheet wrong?"

    Sounds like it is not reading it at all.
     
  3. Tizzy_10

    Tizzy_10 New Member

    I don't think there's anything else there for it to be reading though, it gets the words just not the layout and backgrounds and things like that.
     
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Which is what the style sheet is. The words are from the html or the php page.
    edited -
    Try this open the original template before you modded it, remove the link to the style sheet, view it.
    It will look just like you explained in post #1.

    Sounds like you conversion to php just isn't 100% yet. Try reviewing your code for the error.
     
  5. Tizzy_10

    Tizzy_10 New Member

    Thanks, will do.
     
  6. djwilson

    djwilson New Member

    Drop a link so we can have a look at the source code, maybe the CSS isn't where the page thinks it is?
     
  7. Tizzy_10

    Tizzy_10 New Member

    It would be "http://localhost/" but I don't think your able to see it since i'm only seeing it through WampServer.
     
  8. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    Unless you put WAMPSERVER - On-line, which really wouldn't be a good idea, and unless you really understand what opening up your PC will do to you. No only you can see localhost, as it is your PC.

    You could click the GO ADVANCE button For Posting here on the forum and use the menu selection to post up the code.
     
  9. Tizzy_10

    Tizzy_10 New Member

    Here it is :)

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
        <title>Fashion Hut</title>
        <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
        
    </head>
    
    <body>
      <div id="wrapper">
    
        
        <div id="header">
          <div id="logo">
            <h1>Fashion Hut</h1>
            <p>Celebrity Brands</p>
          </div>
          <div id="cart">
            <div id="cart-top">
              <div id="cart-bot">
    
                <div id="cart-cart">
                  <p>Shopping Cart</p>
                  <p class="orange">Lorem ipsum dolor sit</p>
                  <p><a href="http://www.freewebsitetemplates.com">click here</a></p>
                </div>
              </div>
            </div>
    
          </div>
          <div id="nav">
            <ul>
              <li><a href="http://www.freewebsitetemplates.com">MEN</a> | </li>
              <li><a href="http://www.freewebsitetemplates.com">WOMEN</a> | </li>
              <li><a href="http://www.freewebsitetemplates.com">GIRLS</a> | </li>
    
              <li><a href="http://www.freewebsitetemplates.com">BOYS</a> | </li>
              <li><a href="http://www.freewebsitetemplates.com">ACCESSORIES</a> | </li>
              <li><a href="http://www.freewebsitetemplates.com">CONTACT US</a></li>
            </ul>
          </div>
    
          <div id="gallery">
            <ul>
              <li class="gwomen"><a href="http://www.freewebsitetemplates.com">Women</a></li>
              <li class="gkids"><a href="http://www.freewebsitetemplates.com">Kids</a></li>
              <li class="gmen"><a href="http://www.freewebsitetemplates.com">Men</a></li>
            </ul>
          </div>
    
        </div>
        <div id="body">
          <div id="categories">
            <h2>Categories</h2>
            <ul>
              <li><a href="http://www.freewebsitetemplates.com">Formal Dresses</a></li>
              <li><a href="http://www.freewebsitetemplates.com">Party Dresses</a></li>
    
              <li><a href="http://www.freewebsitetemplates.com">Summer Special</a></li>
              <li><a href="http://www.freewebsitetemplates.com">Cocktail Dresses</a></li>
              <li><a href="http://www.freewebsitetemplates.com">Formal Ware</a></li>
              <li><a href="http://www.freewebsitetemplates.com">Winter Special</a></li>
              <li><a href="http://www.freewebsitetemplates.com">Regular Ware</a></li>
              <li><a href="http://www.freewebsitetemplates.com">Night Dress</a></li>
    
              <li><a href="http://www.freewebsitetemplates.com">Sports Dress</a></li>
              <li><a href="http://www.freewebsitetemplates.com">Wedding Dress</a></li>
              <li><a href="http://www.freewebsitetemplates.com">Jeans</a></li>
            </ul>
          </div>
          <div id="seasonal">
            <div class="inner">
    
              <h2>Fashion Seasonal</h2>
              <h3>Welcome</h3>
               <p>Don't forget to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add  a new free website template almost daily.</p>
               <p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
            <p>Professionally made templates you can find them at <a rel="nofollow" href="http://www.templatebeauty.com">Template Beauty</a>.</p>
    
                <p>If you're having problems editing the template please don't hesitate to ask for help on <a href="http://www.freewebsitetemplates.com/forum/">the forum</a>.</p>
                
               <p class="more"><a href="http://www.freewebsitetemplates.com">more</a></p>          
            </div>
          </div>
          <div id="collection">
            <div class="inner">
              <div id="minigal">
    
                <div><img src="http://www.freewebsitetemplates.com/forum/images/pic_4.jpg" width="57" height="53" alt="Pic" /></div>
                <div><img src="http://www.freewebsitetemplates.com/forum/images/pic_5.jpg" width="57" height="53" alt="Pic" /></div>
                <div><img src="http://www.freewebsitetemplates.com/forum/images/pic_6.jpg" width="57" height="53" alt="Pic" /></div>
                <div><img src="http://www.freewebsitetemplates.com/forum/images/pic_7.jpg" width="57" height="53" alt="Pic" /></div>
                <div><img src="http://www.freewebsitetemplates.com/forum/images/pic_8.jpg" width="57" height="53" alt="Pic" /></div>
                <div><img src="http://www.freewebsitetemplates.com/forum/images/pic_9.jpg" width="57" height="53" alt="Pic" /></div>
              </div>
              <h2>New Collection</h2>
    
              <ul>
                <li>New Arrivals</li>
                <li>50% discount</li>
              </ul>
              <p>Websites about templates on <a rel="nofollow" href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
            </div>
    
          </div>
          <div class="clear"> </div>
          <div id="seas">
            <div id="seas-one">
              <p>Men's</p>
              <p class="date">Collection</p>
            </div>
    
            <div id="seas-two">
              <p>Women's</p>
              <p class="date">Collection</p>
            </div>
            <div id="seas-three">
              <p>Teens</p>
              <p class="date">Collection</p>
    
            </div>
            <div class="clear"> </div>
          </div>
        </div>
        <div id="copyright">
          <p>Copyright &copy; 2007. Company name all rights reserved</p>
        </div>
    
      </div>
    </body>
    </html>
    
     
  10. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    That looks like the template you downloaded here, which works.
    I think djwilson meant for you to post your work, since you stated that you made several changes. That way members can look it over for you.
     
  11. Tizzy_10

    Tizzy_10 New Member

    Ah ok, be prepared though, i'm a total newbie :S

    PHP:
    htmlbodyh1h2h3h4ulli {
        
    margin0;
        
    padding0;
    }
    h1 img {
        
    displayblock;
    }
    img {
        
    border0;
    }
    {
        
    color#464544;
    }
    a:hover {
        
    color#FFA405;
    }
    .
    left {
        
    floatleft;
    }
    .
    right {
        
    floatright;
    }
    .
    more {
        
    text-alignright;
    }
    .
    clear {
        
    clearboth;
    }

    body {
        
    background#504634;
        
    text-aligncenter;
        
    font11px verdanaarialsans-serif;
        
    color#695F4C;
        
    padding-bottom10px;
    }

    /** layout **/
    #wrapper {
        
    text-alignleft;
        
    margin37px auto;
        
    width672px;
        
    background#ffffff;
      
    positionrelative;
    }

    #header {
      
    background#f4eddb url(images/header.php) no-repeat;
      
    height266px;
    }
    #logo {
      
    positionabsolute;
      
    top12px;
      
    left300px;
      
    width170px;
      
    color#52616E;
    }
    #logo h1 {
      
    fontbold 24px "arial narrow"arialsans-serif;
    }
    #logo p {
      
    margin0;
      
    font-weightbold;
    }

    #cart {
      
    positionabsolute;
      
    top10px;
      
    left454px;
      
    width208px;
      
    background#4B5360;
      
    width209px;
    }
    #cart-top { background: url(images/cart_top.php) no-repeat; }
    #cart-bot { background: bottom left url(images/cart_bot.php) no-repeat; }
    #cart-cart { background: 9px 11px url(images/cart.php) no-repeat; }
    #cart-cart {
      
    padding8px 8px 8px 60px;
      
    colorwhite;
    }
    #cart p {
      
    margin0;
    }
    #cart .orange {
      
    color#FFB400;
      
    font-size10px;
    }
    #cart a {
      
    colorwhite;
      
    font-size10px;
    }

    #nav {
      
    background#4B5360;
      
    positionabsolute;
      
    top101px;
      
    left287px;
      
    width385px;
      
    padding9px 0;
      
    text-aligncenter;
    }
    #nav li {
      
    list-stylenone;
      
    displayinline;
      
    color#fff;
    }
    #nav a {
      
    text-decorationnone;
      
    color#fff;
    }
    #gallery {
      
    positionabsolute;
      
    top155px;
      
    left287px;
      
    width385px;
    }
    #gallery li {
      
    list-stylenone;
      
    text-indent: -999px;
      
    floatleft;
      
    overflowhidden;
      
    height111px;
    }
    #gallery .gwomen {
      
    backgroundurl(images/pic_1.phpno-repeat;
      
    width127px;
    }
    #gallery .gkids {
      
    backgroundurl(images/pic_2.phpno-repeat;
      
    width130px;
    }
    #gallery .gmen {
      
    backgroundurl(images/pic_3.phpno-repeat;
      
    width128px;
    }

    #body {
      
    padding-top3px;
      
    background-color:#FFF;
    }
    #categories {
      
    floatleft;
      
    width195px;
    }
    #seasonal, #collection {
      
    floatright;
      
    width474px;
      
    background#D4CAB6;
      
    margin-bottom2px;
    }
    #seasonal .inner, #collection .inner {
      
    padding6px 12px;
    }
    #seasonal p, #collection p {
      
    margin0.9em 0;
    }

    .
    more a {
      
    font-size12px;
      
    color#000;
      
    text-decorationnone;
    }
    .
    more a:hover {
      
    text-decorationunderline;
    }

    h3 {
      
    fontbold 14px "arial narrow"arialsans-serif
      
    color#1B1812;
    }

    h2 {
      
    font18px "arial narrow"arialsans-serif
      
    color#695F4C;
      
    padding-bottom10px;
    }
    #categories h2 {
      
    color#fff;
      
    padding4px 0 5px 39px;
      
    background#847A67;
    }
    #categories li {
      
    background#D4CAB6 left url(images/bullet.php) no-repeat;
      
    border-top1px solid #F4EFDF;
      
    list-stylenone;
      
    font-size12px;
      
    padding7px 0 8px 35px;
    }
    #categories a {
      
    text-decorationnone;
      
    color#000000;
    }
    #categories a:hover {
      
    text-decorationunderline;
    }

    #collection {
      
    background#D4CAB6 bottom right url(images/person_bg.php) no-repeat;
    }
    #collection .inner {
      
    padding-right98px;
    }
    #minigal {
      
    floatright;
      
    width222px;
      
    margin-top1em;
      
    margin-bottom1em;
    }
    #minigal div {
      
    floatleft;
      
    margin6px;
    }
    #collection ul {
      
    margin-left1.5em;
    }
    #collection li {
      
    margin0.2em 0;
      
    color#463F32;
      
    font-size16px;
      
    font-weightbold;
      
    font-family"arial narrow"arialsans-serif;
    }
    #collection p {
      
    width103px;
      
    margin-left1.5em;
    }

    #seas-one, #seas-two, #seas-three {
      
    height146px;
      
    }



    #seas-one {
      
    floatleft;
      
    width195px;
      
    margin-right3px;
      
    backgroundurl(images/foot_1.phpno-repeat;
    }

    #seas-two {
      
    floatleft;
      
    width249px;
      
    margin-right3px;
      
    backgroundurl(images/foot_2.phpno-repeat;
    }


    #seas-three {
      
    floatleft;
      
    width222px;
      
    backgroundurl(images/foot_3.phpno-repeat;
    }

    #seas p {
      
    text-alignright;
      
    color#000;
      
    margin80px 15px 0 0;
      
    font-size23px;
      
    font-weightbold;
    }
    #seas p.date {
      
    margin-top0;
      
    font-size16px;
    }

    #copyright {
      
    text-aligncenter;
      
    font-size9px;
      
    padding3px;
    }
     
  12. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    I have to ask being you are a total newbie, what set you out on the road of trying to convert a template to php? I admire your wanting to learn but it looks like you mixed a bit of information up. Easy to do with all the info that is out there.

    Your problem is the renaming of the image files to php
    example - (images/header.php)
    php is a general-purpose scripting language, not a image file extension.
    Here is a list of image file formats Image file formats - Wikipedia, the free encyclopedia
     
  13. Tizzy_10

    Tizzy_10 New Member

    Well I read somewhere that HTML templates can't be used with osCommerce but php could and the conversion was simple so I went for that. I read how to convert it and it said for every URL change the ending to 'php' although I probably misread it slightly and as it might have said 'only the interior links' rather than including all URLs.

    So is there anything I should keep or should I scrap it and go back to the unchanged version?
     
  14. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    You might have misunderstood it.
    Scrap it and go back to original.
    Start at W3Schools Online Web Tutorials for a easy learning process of html, css, php and more.
    Not quite right as you can include html in php which oscommerce does.

    Simple example - load up WampServer, then open the index.html in your browser.
    Rename index.html to index.php now open that file in your browser.

    PHP: Hypertext Preprocessor
    Server-side HTML embedded scripting language. It provides web developers with a full suite of tools for building dynamic websites.
     
  15. Tizzy_10

    Tizzy_10 New Member

    Thanks you for all your help, i'll certainly be checking out those tutorials, in fact one last question if you don't mind - if I didn't give up two days after starting how long do you reckon it would take for a fully fledged newbie to design their own website? 6 months? A year?

    The website would have to be compatible with osCommerce and look fairly attractive of course.
     
  16. tomw

    tomw Member

    If you want to see this template to display properly you may want to try out w-CMS. See this thread on how to install it. Once it is installed I can help you to modify the template and perhaps add functions you have in mind. Maybe you will learn HTML, CSS, and PHP along the way.
     
  17. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    osCommerce has been around for a very long time and is well documented..
    Since you like this template it should be pretty easy to read the section in osCommerce on how to integrate it. I would say 2 weeks tops. The first couple of days being the confusing ones. To learn the rest could take a month to a lifetime. It all depends on you and your interest. Looking at different html/css templates code a couple of weeks to have a good understanding as to what is going on. To become a coder now that takes dedication and more time.
     
  18. Tizzy_10

    Tizzy_10 New Member

    Upon further thought i'm not sure I would be able to keep up with making my own website, maybe thinking that was a tad too ambitious seeing as I am struggling to install a template already.

    Hey tomw, I took a look at the page and downladed the installer but i'm not sure which folder I should put it in after extracting the files, I use WAMPSERVER so i'm guessing I should put it in the folder which that goes in?
     
  19. tomw

    tomw Member

    If you don’t have anything installed at the ROOT level you could put it in the www folder; otherwise create a folder and name it something like wcms and put install.php and dnload.php there. Run install.php and it will let you download w-CMS automatically. If the installation is successful then proceed to download the template using dnload.php. First select FreeWebsiteTemplates for the Designer and then select fashion for the Template and it will download the template and create a site named fwt_fashion. If the process went well enter index.php?site=fwt_fashion and you should see something like this.
     
  20. Tizzy_10

    Tizzy_10 New Member

    I think I get everything your saying apart from one thing, what is the ROOT level?