html / CSS (SOLVED)

[electrifire]

Hi

I currently have a website www.electrifire.co.uk

How would I go about importing my current design into a cms ms layout?

What is the difference between a theme and a template?

Im using version 1.6.6

Thanks

[replytomk3]

Search the forum. There is even a video somewhere. Basically, you just take the html source of the website, replace some sections with tags found in the "minimal template", and save that as your template.

[electrifire]

ok great thanks

[Rolf]

Perhaps:
http://wiki.cmsmadesimple.org/index.php ... ade_Simple

Rolf

[electrifire]

Thanks that link was helpful, it does lead me to another couple of questions though:

On my current website the pages are made out of 5 separate pages, by this I mean; all pages have includes.php so as an example the index page would consist of this:

index.php
sidebar.php
header.php
flash.php
footer.php

When I coded the website initially I did this so it would be easy to edit without having to edit every page, however this is making it hard for me to transfer this to cms ms - I think and could do with some guidance.

Does cms ms allow me to make a page up from a number of different pages, currently If wanted to edit the special offer side bar, I have to edit 1 file and it changes on every page, I'm sure i'm missing something quite simple but i'm new to cms and believe this will make life easy with modules etc so want to stick with it

[Peciura]

...I have to edit 1 file and it changes on every page...

I think you have missed "Global Content Blocks". Some help is here http://wiki.cmsmadesimple.org/index.php ... ent_Blocks

[electrifire]

ah thanks, thought there had to be a way for doing this

[electrifire]

Ok I'm slowly getting there, the trouble I have now is the color's from the style sheet dont appear in cms ms, see the difference:

www.electrifire.co.uk

compared to

www.electrifire.co.uk/test

Any ideas?

[Peciura]

Address "www.electrifire.co.uk/test" requires different relative paths to images than  "www.electrifire.co.uk" does.
E.g.:
"../images/index_images/electrical.jpg"
or make it relative to site root "/images/index_images/electrical.jpg"

[electrifire]

yep you got me there  must have been late and wasn't thinking straight.

I have the image folder uploaded and it looks better but still not right, the main body should have a white background not just the header and the edge of the page should be shadowed so it stands out a little.

Advice welcome

[Nullig]

Perhaps if you post your page template code, we could see the problem.

Nullig

[electrifire]

no problem, I have got it looking a little close but not perfect so I have pasted my template code and content from my index page  to see where Im going wrong:

For reference the site looks like this www.electrifire.co.uk/test but should look like this www.electrifire.co.uk

This is the template code:





Electrical, Fire & Security





{stylesheet}
{metadata}





   




   
   
       

       
     
         
     
       
     
        Call Now:    01622 470204
            E-Mail us Now!!
     
           
   


{cms_module module="menumanager"}

       
   
     
   

{content}   

{global_content name='Special Offer'}

   

  {global_content name='footer'}





This is the content from the index page:







Electrifire - Electrical, Fire & Security - All Under One Roof
ElectriFire Limited offer an efficient friendly service and cost effective solutions for both domestic and comercial customers. Based in Maidstone Kent, we specialise in Electrical, Fire Alarm, Intruder Alarm, Access Control, and CCTV, ElectriFire Ltd is the only company you'll need.




Electrical
Electrifire Limited offer a design, installation and inspection & testing service for domestic and commercial premises. Once the installation is complete we produce a certificate to say the installation complies with the British Standard and is safe, if you never recieved an certificate when you last employed an electrician how do you know its safe?
 



Fire Alarm

Conventional or Analogue Addressable Fire Alarm Systems? This will generally depend on the size of the building or maybe you have a personal prefrence. Electrifire Limited work with a number of Fire Alarm manufacturers for commercial and domestic buildings.



Intruder Alarm

Intruder Alarms help protect your property from theft, as time goes by Intruder Alarm systems have become more sophisticated but remain simple to use. If the alarm is activated an auto dialer can be programmed to dial up to 3 phone numbers to inform you the system has been activated - these have proven to be cost effective yet priceless!
 


Access Control

Networked or just a single door, Access Control Systems let you control who can enter a building preventing unauthorised access is the key in fighting crime



CCTV

CCTV Systems have proved to be an asset in crime prevention, not only do they act as a visual deterrent but the images recorded will aid the police in catching the criminals.



Maintenance

Electrifire Limited offer tailor made maintenance packages to suit your requirements. Our skills allow us to work on a number of different systems and your benefit is having all your systems maintained by one company.

[Peciura]

You have repeated divs twice :

and
.

Try this template

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type"
  content="text/html; charset=us-ascii" />
  <title>Electrical, Fire & Security</title>
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <meta name="description"
  content="ElectriFire based in Kent specialise in Electrical, Intruder Alarm, Access Control CCTV & Fire Alarm systems." />
  <meta name="keywords"
  content="electrifire, Kent, fire alarm, electrical, intruder alarm, access control, cctv, fire alarm system," />
  <meta name="google-site-verification"
  content="AySUx_Liut2JVIh--1KPz0_O2zBAQnfH00rJXrZF1LM" />{stylesheet}
  {metadata}</head>
  </__body>
    <div>
      <div id="bodyTop"></div>
      <div id="mainwrap">
        <div id="wrap">
          <div id="head">
            <!--This is For Logo only-->
            <div class="logo">
              <a href="index.php">
                <img src="/images/logo.jpg" width="230"
                height="115" alt="Electrifire Logo"
                longdesc="http://www.electrifire.co.uk/images/logo.jpg"" />
              </a>
            </div>
            <!--This is for blank space -->
            <div class="head_blank">
            <!--Add anything If needed--> </div>
            <!--This is Mail Part-->
            <div class="mail">
              <div class="call">Call Now: 
              <span class="number">01622 470204</span></div>
              <div class="mailtxt">
                <a href="contact.php">E-Mail us Now!!</a>
              </div>
              <img src="images/mailImg.gif" alt="Mail" width="66"
              height="53" class="mailImg" />
            </div>
            <div class="clear"></div>
          </div>
          <div id="menu">{cms_module module="menumanager"}</div>
          
          <div id="pattern"></div>{content} {global_content
          name='Special Offer'} 
          <!--Footer part Start here-->
          {global_content name='footer'}</div>
        </div>
      </div>
    </div>
  <__body>
</__html>

and this content

Code: Select all

<div id="container">
  <div id="containLeft">
    <div>
      <p class="mainheading">Electrifire - Electrical, 
      <span class="fire">Fire</span>& Security - All Under One
      Roof</p>
      <p class="boldcol">ElectriFire Limited offer an efficient
      friendly service and cost effective solutions for both
      domestic and comercial customers. Based in Maidstone Kent, we
      specialise in Electrical, Fire Alarm, Intruder Alarm, Access
      Control, and CCTV, ElectriFire Ltd is the only company you'll
      need.</p>
      <br />
      <div class="lists">
        <div class="IL">
          <img src="images/index_images/electrical.jpg"
          alt="Electrical" width="115" height="127" />
        </div>
        <h5>
          <a href="electrical.php">Electrical</a>
        </h5>
        <p>Electrifire Limited offer a design, installation and
        inspection & testing service for domestic and
        commercial premises. Once the installation is complete we
        produce a certificate to say the installation complies with
        the British Standard and is safe, if you never recieved an
        certificate when you last employed an electrician how do
        you know its safe?</p>
        <p></p>
      </div>
      <div class="lists">
        <div class="IL">
          <img src="images/index_images/firealarm.jpg"
          alt="Fire Alarm" width="115" height="127" />
        </div>
        <h5>
          <a href="fire.php">Fire Alarm</a>
        </h5>
        <br class="LH" />
        <p>Conventional or Analogue Addressable Fire Alarm Systems?
        This will generally depend on the size of the building or
        maybe you have a personal prefrence. Electrifire Limited
        work with a number of Fire Alarm manufacturers for
        commercial and domestic buildings.</p>
      </div>
      <div class="lists">
        <div class="IL">
          <img src="images/index_images/intruderalarm.jpg"
          alt="Intruder Alarm" width="115" height="127" />
        </div>
        <h5>
          <a href="intruder.php">Intruder Alarm</a>
        </h5>
        <br class="LH" />
        <p>Intruder Alarms help protect your property from theft,
        as time goes by Intruder Alarm systems have become more
        sophisticated but remain simple to use. If the alarm is
        activated an auto dialer can be programmed to dial up to 3
        phone numbers to inform you the system has been activated -
        these have proven to be cost effective yet priceless!</p>
        <p></p>
        <div class="lists">
          <div class="IL">
            <img src="images/index_images/accesscontrol.png"
            alt="Access Control" width="115" height="127" />
          </div>
          <h5>
            <a href="access.php">Access Control</a>
          </h5>
          <br class="LH" />
          <p>Networked or just a single door, Access Control
          Systems let you control who can enter a building
          preventing unauthorised access is the key in fighting
          crime</p>
          <br class="LH" />
        </div>
        <div class="lists">
          <div class="IL">
            <img src="images/index_images/cctv.jpg" alt="CCTV"
            width="115" height="127" />
          </div>
          <h5>
            <a href="cctv.php">CCTV</a>
          </h5>
          <br class="LH" />
          <p>CCTV Systems have proved to be an asset in crime
          prevention, not only do they act as a visual deterrent
          but the images recorded will aid the police in catching
          the criminals.</p>
          <br class="LH" />
        </div>
        <div class="lists">
          <div class="IL">
            <img src="images/index_images/maintenance.jpg"
            alt="Maintenance" width="115" height="127" />
          </div>
          <h5>
            <a href="maintenance.php">Maintenance</a>
          </h5>
          <br class="LH" />
          <p>Electrifire Limited offer tailor made maintenance
          packages to suit your requirements. Our skills allow us
          to work on a number of different systems and your benefit
          is having all your systems maintained by one company.</p>
          <br class="LH" />
        </div>
      </div>
    </div>
  </div>
</div>

Though it is strange why both div "container" and "containLeft" are parts of content and not template. Notepad++ has good function "TextFX > TextFX HTML Tidy > Tidy: Reindent XML". Try it it might prevent from some mistakes.

[electrifire]

Perfect!

I think the footer is set to wide maybe as there are 2 break lines which extend over the page but thanks for your help

[Peciura]

Modify subject of the first post to "[SOLVED] html / CSS".