The Website Saga - Layout...

If you are following along with the story, you'll remember where I left off. A basic CMS Made Simple 1.4-beta2 install, with pretty urls enabled. And on a free web host to boot, so far this was going well. The next thing I needed to do was get some content in, and choose a decent layout.

I started with the content. I had originally written some content on my old dyndns site, and I thought that I would copy that stuff over. At least for a while, it should be fine.

So I proceeded to bring up my trusty firefox browser, and opened two tabs. In the first tab I logged into the admin section of my new site (the new NCleanGrey admin theme is suhweet compared to what we had before). In the second tab, I logged into the admin section of my old site, and brought up the respective content listing pages in each tab.

The first thing I did was to select all of the pages (except Home) in my new install and de-activate them. I didn't need them in my new layout, but still wanted to have them available for reference for a while. This way I could just edit the various pages, and read the content, or if necessary re-activate them.

The next thing I did was to create some content pages in the new site, and copy/paste the appropriate content from my old site. They weren't necessarily styled the way I wanted, but at least the content was there. Styling can come later.

So now, I had a few pages in my new site, with a reasonably drawn facsimile of content. It was a good start.

Next I needed to do something with layout. The default templates and stylesheets that come with CMS Made Simple are powerful, and explain the power of the system quite well, but it is a bit... uhm, bland. I needed something a little bit more snazzy or professional looking. Now I'm no website designer, and I struggle my way through CSS stuff, even though I do understand the principles. But there is a solution, the themes site!

I browsed the site, and found something that looked professional, and that it would be pretty close to serving my needs: The Sinorca theme, an OSWD theme generously converted to CMS and donated by Dee. Installation was a breeze, I downloaded the XML file, and then went into the Theme Manager (under the Layout menu), selected the Import tab, and uploaded my file. It went smoothly.

Theme manager marks imported templates as 'inactive' by default, so I went into the templates page (also under the layout menu) and marked the new template as active. and as the default template for all new pages. Then back in the content listing page, I edited each page (thankfully there were only four or 5) and changed each page to use the newly imported template.

Now my site looks relatively cool. The breadcrumbs are in the top left corner, there's a nice big title section, News is down the left column, and even the colors look decent enough.

Now getting a little fancy, I wanted to add a sitemap and contact form, and all that jaz. So I originally created a new page called "SiteMap", that just had one tag on it {site_mapper}, and placed it as a child of the Home Page. I also created a "Contact Us" page, included the {contact_form} tag on that page (it's a good start, later I'll use formbuilder) and set it on the top level.

Here's where I noticed something a little strange.... well, something I didn't like anyways. When I was on the home page, because it now had a child page, I noticed a sub navigation on the left column (above News) as well as in the top right part of the page. That's not what I wanted, so I could either delete that sub navigation in the top right part of the page, or make it do something else.

I decided that I didn't want to do that, and that I wanted some static links up there for the sitemap, the contact us page, and other important things that should always be visible, but are secondary to the content of the site. To accomplish this, I created a new section header called 'Tools' (I couldn't think of a better name at the time)... and unchecked the 'show in menu' checkbox. I then edited the Sitemap page, and changed it's parent to be 'Tools', and did the same with the 'Contact Us' page. I then edited the template and changed the menu call for the top right menu to:

{menu' template='Sinorca_2.0 : Sinorca topmenu'   number_of_levels='1'  
   start_page='tools' start_level='2'}

Excellent, now I have the SiteMap, and Contact Us page in the top left of the page at all times, I think I'm well on my way to getting things setup just nicely.

At this time, because I'm working on a site hosted by the free host 000webhost.com, I thought it'd be cool to put a banner in to advertise them a little bit. So I signed up for their affiliate program and selected a banner to go below the news on the left column of each page. Their site presented me with some HTML code to paste into my template, so I created a global content block (under the Content menu) called it 000webhost_left_banner, and pasted in the code that they supplied. Next I edited my template, and directly after the call to the News module, I placed the call to that global content block:

{global_content name='000webhost_left_banner'}

I found that there was a style I needed to use in order for the background color and margins, etc, to be setup properly, so I re-edited the template, and added a <div class="sideBarText">...</div> around the call to the global content block. Woot, it looks reasonably good now.

Okay, so now I have some content, though I need more... and layout is coming along quite well.... Next I can start on SEO and expanding content, then finish styling. But that's a story for another day.