Help in customizing template to fit website requirement

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
asfahaan
Forum Members
Forum Members
Posts: 43
Joined: Wed Aug 15, 2007 11:28 am

Help in customizing template to fit website requirement

Post by asfahaan »

Hi Guys,

Currently using:
PHP version 4.4.6
MySQL version 4.1.22-standard-log
CMSMS Version 1.1.2

I wanted your help / direction on how to acheive the below objective. Its for a company I work for, and I have suggested them to use CMSMS and check out how easy it is to administer a website. Currently its in html fully with java script.

I have attached a screen shot with the image border lines. I used the web developer addon on firefox to capture it.

I used the default "Top simple navigation + left subnavigation + 1 column" templated and removed the left subnavigation to create ->  "Top simple navigation + 1 column" .  It doesnt have any major changes yet. Just wanted to get some hints from the experts before going ahead with it.

Below is the code for the template "Top simple navigation + 1 column"

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" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

<head>

<title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}



{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
	var nw="auto",w=document.documentElement.clientWidth;
	if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
{/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}


</head>

</__body>

<div id="pagewrapper">

    {* start accessibility skip links *}
    <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    {* end accessibility skip links *}


    <hr class="accessibility" />
    {* Horizontal ruler that is hidden for visual browsers by CSS *}


   {* Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Top menu + left submenu + 1 column" *}
   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>
   {* End Header *}


   {* Start Navigation *}
   <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
      {menu template='simple_navigation.tpl' number_of_levels='1'}
   <hr class="accessibility" />
   </div>
   {* End Navigation *}


   {* Start Search *}
   <div id="search">
          {search}
   </div>
   {* End Search *}

   {* Start Breadcrumbs *}
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   {* End Breadcrumbs *}


   {* Start Content (Navigation and Content columns) *}
   <div id="content">

      {* Start Content Area *}
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true}</div>
         <h2>{title}</h2>
         {content} <br />

         {* Start relational links *}
	 <div class="hr"></div>
	 <div class="right49">
	 	<p>{anchor anchor='main' text='^ Top'}</p>
	 </div>
         <div class="left49">
            <p>{cms_selflink dir="previous" label="Previous page: "} <br />
            {cms_selflink dir="next"}</p>
         </div>
         {* The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" *}
	 {* End relational links *}

      <hr class="accessibility" />
      </div>
	  {* End Content Area *}


   </div>
   {* End Content *}


   {* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   <div id="footer">
      {global_content name='footer'}
   </div>   
   {* End Footer  *}


</div>{* end pagewrapper *}
<__body>
</__html>
Everything is sweeet but how i need to alter it so those dots (Label C) on the right hand side of the logo (Lablel B) and sticking out like that?

Also I was planning to leave it liek the standard template and move the menu under the larger banner (Label D).

Left hand side of Medtech logo (Label B), i will be probably placing flags so user can change countries if required.

Please help me out in altering the template. Or please give me directions.. so i can try my best.

Thanks heaps in advance.  :)
AM
Attachments
futurelayout.jpg
currentlayout.jpg
Asfahaan Mirza
Auckland, New Zealand
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Help in customizing template to fit website requirement

Post by Dr.CSS »

I would just use the existing template and replace your existing menu structure with the {menu} tag and depending on how you style the menu items you may need to customize a menu manager file template...

Then replace your current content area info with the {content} tag, {news} for the right hand, that is the great thing about CMSMS, use existing template with a few tags thrown in to call the menu and content...
asfahaan
Forum Members
Forum Members
Posts: 43
Joined: Wed Aug 15, 2007 11:28 am

Re: Help in customizing template to fit website requirement

Post by asfahaan »

Hi Mark,

So you are saying that i should just use the existing html file which iam working on?

Wouldnt it create problems of any sort?

How about the alignment of the logos?

Cheers,
Asfahaan
Asfahaan Mirza
Auckland, New Zealand
streever

Re: Help in customizing template to fit website requirement

Post by streever »

Hey friend,

it should be very easy to move the menu. Simply place the call to {menu} per mark's suggestion beneath your banner image.

As for the dots. I would make that ONE image. It is the whole logo, yes?

Then you simply need a "div"--that wraps around the page. Set it to "position: relative".

Set your logo to "position: absolute; right: -VALUE; top: 0;"

In VALUE, you need to set it to be equal to how much of the logo should be BEYONd the rest of the page. So, if that is 25 pixels of dots, you need it to be -25px.

Does that make sense? Do you know how to use "CSS"?
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Help in customizing template to fit website requirement

Post by Dr.CSS »

Can you show your existing template, an HTML page, or link to working example?...
asfahaan
Forum Members
Forum Members
Posts: 43
Joined: Wed Aug 15, 2007 11:28 am

Re: Help in customizing template to fit website requirement

Post by asfahaan »

Hi,

Yeah sure.  Well currently I am at work and caught up with something else. Thats why was slow in replying back :)

I will attach an Html version of the website.

Thanks for your help. I am sort of getting it. And yes i know a lil bit of CSS but not alot.... esp with the DIV stuff can get tricky!

I do have good enough HTML skills lol... dont know if that is off any use. But the existing html file they were using lots of javascript to populate the menu. I have stripped out lot of complicated table structure and have created a very simple looking html file. Hope you can help me configure cmsms tags.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<__html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>MedTech Global</title>
  <style type="text/css">
<!--
body {
background-color: #CCD2D1;
}
-->
  </style>
  
  <style type="text/css">

  </style>
  
  <__script__ language="JavaScript1.2" src="dropdown.js"></__script>
  
  <__script__ language="JavaScript1.2" src="../mm_menu.js"></__script>
</head>


</__body>


<table align="center" border="0" cellpadding="0" cellspacing="0" width="854">


  <tbody>


    <tr>


      <td valign="bottom" width="602">
      
      <__script__ language="JavaScript1.2">mmLoadMenus();</__script>
      
      <table border="0" cellpadding="0" cellspacing="0" width="600">


<!-- fwtable fwsrc="aulink.png" fwbase="aulink.gif" fwstyle="Dreamweaver" fwdocid = "618426958" fwnested="0" -->
        <tbody>


          <tr>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="49"></td>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="67"></td>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="67"></td>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="64"></td>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="64"></td>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="61"></td>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="86"></td>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="79"></td>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="63"></td>


            <td><img src="spacer.gif" alt="" border="0" height="1" width="1"></td>
          </tr>


          <tr>


            <td><a href="../NZ/nz_Home.htm"><img name="nzlink_r1_c1" src="images/nzlink_r1_c1.gif" alt="" border="0" height="24" width="49"></a></td>


            <td><a href="../NZ/nz_aboutus.htm"><img name="nzlink_r1_c2" src="images/nzlink_r1_c2.gif" alt="" border="0" height="24" width="67"></a></td>


            <td><a href="../NZ/nz_products.htm" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1108223248_0,0,24,null,'nzlink_r1_c3');"><img name="nzlink_r1_c3" src="images/nzlink_r1_c3.gif" alt="" border="0" height="24" width="67"></a></td>


            <td><a href="../NZ/nz_Services.htm" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1108223602_1,0,24,null,'nzlink_r1_c4');"><img name="nzlink_r1_c4" src="images/nzlink_r1_c4.gif" alt="" border="0" height="24" width="64"></a></td>


            <td><a href="../NZ/nz_Partners.htm"><img name="nzlink_r1_c5" src="images/nzlink_r1_c5.gif" alt="" border="0" height="24" width="64"></a></td>


            <td><a href="../NZ/nz_Careers.htm"><img name="nzlink_r1_c6" src="images/nzlink_r1_c6.gif" alt="" border="0" height="24" width="61"></a></td>


            <td><a href="../NZ/nz_Testimonials.htm"><img name="nzlink_r1_c7" src="images/nzlink_r1_c7.gif" alt="" border="0" height="24" width="86"></a></td>


            <td><a href="../NZ/nz_ContactUs.htm" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1108223731_2,0,24,null,'nzlink_r1_c8');"><img name="nzlink_r1_c8" src="images/nzlink_r1_c8.gif" alt="" border="0" height="24" width="79"></a></td>


            <td><img name="nzlink_r1_c9" src="images/nzlink_r1_c9.gif" alt="" border="0" height="24" width="63"></td>


            <td><img src="spacer.gif" alt="" border="0" height="24" width="1"></td>
          </tr>
        </tbody>
      </table>      </td>


      <td width="180">
      
      <div align="right"><img src="images/medtech_logo_01.gif" height="63" width="180"></div>      </td>


      <td rowspan="2" valign="top" width="60"><img src="images/medtech_logo_02.gif" height="89" width="72"></td>
    </tr>


    <tr>


      <td colspan="2"><table width="782" border="0" cellpadding="0">
        <tr>
          <td><img src="images/nz_content_masthead.jpg" height="160" width="780"></td>
        </tr>
        <tr>
          <td>CONTENT</td>
        </tr>
        <tr>
          <td bgcolor="#416181"><table border="0" cellpadding="0" cellspacing="5" width="100%">
              <tbody>
                <tr>
                  <td class="white8">© 2007 MedTech Ltd. All Rights Reserved. <a href="../corp_termsandconditions.htm" class="white8"> Terms & Conditions </a>| <a href="../index.htm" class="white8">Corporate</a> </td>
                </tr>
              </tbody>
          </table></td>
        </tr>
      </table></td>
    </tr>
  </tbody>
</table>


<__body>
</__html>
Well you can view the current website at www.medtechglobal.com

Thats the website I am rebuilding into CMSMS. but there wont be any menus other than the top menu.
Last edited by asfahaan on Mon Sep 10, 2007 3:50 am, edited 1 time in total.
Asfahaan Mirza
Auckland, New Zealand
asfahaan
Forum Members
Forum Members
Posts: 43
Joined: Wed Aug 15, 2007 11:28 am

Re: Help in customizing template to fit website requirement

Post by asfahaan »

Hey friend,
it should be very easy to move the menu. Simply place the call to {menu} per mark's suggestion beneath your banner image.
I will give this a go. You the as above the html file which i have posted. Idealy i wanted tthat but to make life simple i was going to put the menu at the bottom.... will play around with it. thanks.
As for the dots. I would make that ONE image. It is the whole logo, yes?
Yes it is one logo.
Then you simply need a "div"--that wraps around the page. Set it to "position: relative".

Set your logo to "position: absolute; right: -VALUE; top: 0;"

In VALUE, you need to set it to be equal to how much of the logo should be BEYONd the rest of the page. So, if that is 25 pixels of dots, you need it to be -25px.
This part is a lil tricky for me. Do i do that in CSS or Template file?
Asfahaan Mirza
Auckland, New Zealand
asfahaan
Forum Members
Forum Members
Posts: 43
Joined: Wed Aug 15, 2007 11:28 am

Re: Help in customizing template to fit website requirement

Post by asfahaan »

I just realised my existing template is with full of tables. Any easy way to convert them into div tags?

I have posted the code above.

THanks
Asfahaan Mirza
Auckland, New Zealand
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Help in customizing template to fit website requirement

Post by Dr.CSS »

Sorry I didn't know it was table based layout, if you need the side bar on the right you can use this to start with...

http://cmsmsdemo.multiintech.com/index. ... -menu.html

Go to home page to login...

Go to Content > Theme manager and export it...
asfahaan
Forum Members
Forum Members
Posts: 43
Joined: Wed Aug 15, 2007 11:28 am

Re: Help in customizing template to fit website requirement

Post by asfahaan »

You are a legend!!!

This is how far I got up to so far.

http://wipsite.medtechglobal.com/

But will do the export now and work on the one you have provided.

THanks so so much.
Asfahaan Mirza
Auckland, New Zealand
streever

Re: Help in customizing template to fit website requirement

Post by streever »

you have come a long way!!!

i got your e-mails from last night, I am happy to give you some help with the rest of the template & divs.

You can e-mail me or just post here--I know you said you were willing to pay, but I'm happy to give you some (free!) help on it, it's the least I can do to give back to this community.

Just let me know what type of things you are looking to do, and I'll take a look.
asfahaan
Forum Members
Forum Members
Posts: 43
Joined: Wed Aug 15, 2007 11:28 am

Re: Help in customizing template to fit website requirement

Post by asfahaan »

Hi streever,

Thanks for your generous help. And also big ups to Mark to help me kick start the template.

Code: Select all

/*****************
basic layout 
*****************/
body {
   background-color: #ccd2d1;
   color: #333;
   margin:1em; /* gives some air for the pagewrapper */
}

/* center wrapper, min max width */
div#pagewrapper {
   border: 0px solid black;
   margin: 0 auto;     /* this centers wrapper */
   max-width: 65em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background-color: #fff;
   color: black;
}

/* center wrapper, min max width */
div#pagewrapper1 {
   border: 0px solid black;
   margin: 0 auto;     /* this centers wrapper */
   padding:42px 72px 0px 0px;
   max-width: 65em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background: #ccd2d1 url(uploads/images/medtechlogo.gif) no-repeat top right;;
   color: black;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#header {
   height: 160px; /* adjust according your image size */
   background: #385C72;           
}

div#header h1{
/* you can set your own image here */
   background: #385C72 url(uploads/images/corp_content_masthead.jpg) no-repeat 0 0px; 
   display: block; 
   height: 160px;             /* adjust according your image size */
   text-indent: -999em;  /* this hides the text */
   text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
}

div#search {
   float: right;
   width: 23em;     /* enough width for the search input box */
   text-align: right;
   padding: 0.6em 0 0.2em 0;
   margin: 0 1em;
   background #fff;
}

div.breadcrumbs {
   padding: 1em 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   margin: 0 1em;              /* css shorthand rule will be opened to be "0 1em 0 1em" */
   border-bottom: 1px dotted #000;
   background #fff;
}

div#content {
   margin: 1.5em auto 2em 0; /* some air abobe and under menu and content */
   background: #ffffff;
}

div#main {
   margin-left: 29%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 2%; /* and some air on the right */
}


div#sidebar {
   float: left;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;    /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX ie doublemargin bug */
   margin-left: 0;
}

div#leftmain {
   margin-left: 2%; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   margin-right: 29%; /* and some air on the right */
}


div#rightsidebar {
   float: right;  /* set sidebar on the left side. Change to right to float it right instead. */
   width: 26%;    /* sidebar width, if you change this please also change #main margins */
   display: inline;  /* FIX ie doublemargin bug */
   margin-left: 0;
}

/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
   padding: 0 1%;
   width: 24%;  /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}

div#footer {
   clear:both;       /* keep footer below content and menu */
   color: #fff;
   background-color: #385C72; /* same bg color as in header */
}

div#footer p {
   font-size: 0.8em;
   padding: 1.5em;      /* some air for footer */
   text-align: center; /* centered text */
   margin:0;
}

div#footer p a {
   color: #fff; /* needed becouse footer link would be same color as background otherwise */
}
If you visit the work in progress website http://wipsite.medtechglobal.com/

Can you please help me reduce the spacing in between the Footer and the main content?

I wanted that space to be white rather than the blue.

And also the part where the Breadcrums and Search bar is placed. I wanted that to be white as well. and all around it should be the light blue.

Code: Select all

/* center wrapper, min max width */
div#pagewrapper1 {
   border: 0px solid black;
   margin: 0 auto;     /* this centers wrapper */
   padding:42px 72px 0px 0px;
   max-width: 65em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background: #ccd2d1 url(uploads/images/medtechlogo.gif) no-repeat top right;;
   color: black;
}
This is triggering that colour    background: #ccd2d1;

But i dont want it to render the Search, breadcrums and also eliminate the space between main content and footer.  I tried deleting lot of things. but the space still remains. should i post the template code as well?

Also -> If you visit the website and mouse over NZ menu. It expands everyything.
NZ -> Company -> About Us
and
NZ -> Company -> Investor Relations
are getting mixed up. How can i alter the menu so it only expands when the parent node is being hovered? Can I add any effects to it, in terms of slowing the hover speed?

Thanks in advance,
Last edited by asfahaan on Mon Sep 10, 2007 11:29 pm, edited 1 time in total.
Asfahaan Mirza
Auckland, New Zealand
asfahaan
Forum Members
Forum Members
Posts: 43
Joined: Wed Aug 15, 2007 11:28 am

Re: Help in customizing template to fit website requirement

Post by asfahaan »

I wanted to ask few questions.

It seems to be appearing good in Mozilla but not in IE 6.

The Header image you see is fitting in well in mozilla. But In IE, I have a dark background, I wanted to reduce the width of the pagewrappers -> I have done that part - but it doesnt seem to appearing all that well in IE. Can you guys please have a look?

Also I wanted to center align the flags to the search submit button or move the flags on top of the horizontal menu.

Also, The two areas:
1) Breadcrums/Search/Flags -> I wanted to colour that white so it looks part of the main content block.
2) Above the footer and Below content area - I am getting the lightblue background coming through.. I wanted make this white as well inline with the above content area.

I have attached two screen shots one from Mozilla and one from IE.

I have explained what I am trying to achieve in those two screen shots.

Can you please help me. :) Appreaciate it.

Thanking you,
AM
Attachments
mozilla_view_goals.png
ie_view_goals.png
Asfahaan Mirza
Auckland, New Zealand
asfahaan
Forum Members
Forum Members
Posts: 43
Joined: Wed Aug 15, 2007 11:28 am

Re: Help in customizing template to fit website requirement

Post by asfahaan »

Hi Guys,

Edited the template to fix the width problem in IE6. My template had 2 pagewrappers - pagewrapper and pagewrapper1.

So, I included:

Code: Select all

#pagewrapper1 {width:expression(P7_MinMaxW(720,780));}
and restricted the width according to the header image.

My problem of changing colour to white for two areas stil remains:
Also, The two areas:
1) Breadcrums/Search/Flags -> I wanted to colour that white so it looks part of the main content block.
2) Above the footer and Below content area - I am getting the lightblue background coming through.. I wanted make this white as well inline with the above content area.

Also Menu problem which i am working on solving from -> http://forum.cmsmadesimple.org/index.php/topic,12475.msg74336.html#new

But I ran into a new problem with the menu - before hovering was very smooth but I edited the template to include the flags and make the menu start from level 2. Now I need to click on the menu then only it will show its child nodes? Any quick fix for this?

Code: Select all

      <!-- Start Navigation   original - {menu template='cssmenu.tpl'} -->
      <div id="menu_vert">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl' start_level='2' collapse='1'}
      <hr class="accessibility" />
      </div>
      <!-- End Navigation -->
Please some body help me out.

thanx
Asfahaan Mirza
Auckland, New Zealand
Post Reply

Return to “Layout and Design (CSS & HTML)”