Website Redesign

[Nullig]

Here is a website I've done a redesign on. The original website was done by one of the company's in-house tech staff. There is still a lot of content to add, but the basic design is done.

New site --> http://www.bipurewater.ca/
Old site --> http://www.bipurewater.com/

Nullig

[RonnyK]

Nullig,

I can't access the new site.

Ronny

[Nullig]

@RonnyK

I tried the link and it works for me in FF and IE. What browser are you using?

Nullig

[RonnyK]

Nullig,

it works now, it might have been a problem with my system earlier. I like the clean look of the site. Nice headerimage, what did you use for that?

Ronny

[Nullig]

It's a flash movie. It's their trademark, from their old site, which I updated to match the colour scheme of the new site.

Nullig

[asfahaan]

Hi Nullig,

Great work 

Whcih template did you start off with? is there anyone which is avilable online? I wanted to create a website with that sort of menu structure.

Can you please help me out?

I wanted a 3 level menu and also wanted to display link like you have on the left hand side.

E.g.    info
Sub Navigation

    *
          o 2.1: Catalogues
          o 2.2: Brochures
          o 2.3: Case Studies
          o 2.4: Technical Info
          o 2.5: Links
          o 2.6: Glossary

Did you use some sort of module to build it?

Also how easy is it to stick icons with the navigation menu?

Thanks heaps,
Asfahaan

[RonnyK]

You can create a menu-entry in the content-area, give it a prefix and use the "includeprefix" to call the menu on the left. Also the "excludeprefix" should be used then to make sure that this left-menu isn't visible in the top menu. You can call {menu} as many times as you want with different parameters, showing different menus on different places.

For inserting an image, you can use something like:

Code: Select all

<li style="list-style-image: url('/images/icons/{$icon}.png') ">

Ronny

[Nullig]

I used the "Top simple navigation + left subnavigation + 1 column" template and my menu was created with two section headers:

1.0 top-menu
  1.1 Home
  1.2 Products
  ...
2.0 side-menu
  2.1 Catalogues
  2.2 Brochures
  ...

The menu calls are:

Code: Select all

{menu template='cssmenu.tpl' start_level='2' start_element='1.1' show_root_siblings='1'} <-- top-menu
{menu template='simple_navigation.tpl' start_level='2' start_element="2.1" show_root_siblings='1'} <-- side-menu

The styling for the side-menu is contained in the "Navigation: Simple - Vertical" stylesheet and is:

Code: Select all

/* first level links */
div#menu_vert a {
   text-decoration:none; /* no underline for links */
   display: block; /* IE has problems with this, fixed above */
   padding: 0.8em 1em 0.8em 1.5em; /* some air for it */
   color: #18507C; /* this will be link color for all levels */
   background: url(images/bipure/book.gif) no-repeat 0.5em center; 
   min-height:1em; /* Fixes IE7 whitespace bug */ 
}

Hope that helps to point you in the right direction. I'm sure there are more elegant ways to accomplish this, but it was one of the first sites I created and I was still learning the ins and outs of CMSMS.

Nullig

[asfahaan]

Thanks Ronny and Nullig for your direction.