website new look and feel – the meat of the story

Website Update

Since I posted on Matthew Campagna's The Turning Gate website that I had modified his TTG Pages to use my own contact page and modified TTG Pages and TTG HighSlide gallery to work with my WordPress blog, I have frequently been asked how I did this.

Before I get into this too deep let me reaffirm that Matthew's work has saved me a ton of time and effort. I had to make some major site design decisions to achieve what I wanted, but the base that TTG Pages and TTG HighSlide Gallery provided me made moving ahead easy.

I had quite a few goals in mind ...

  1. extend TTG Pages to include more than the four menu options TTG Pages includes "out of the can"  (i.e. add additional pages other than the canned home, galleries, about and contact pages), allowing  me to add the blog and links menu choices,
  2. change the canned contact form to use one that I had developed a year ago and had used successfully in the previous version of my site (one I consider much more user friendly and much more secure than the TTG Pages 3.1 version),
  3. continue to support the auto-index feature of TTG Pages and to continue to use the Lightroom TTG HighSlide Gallery plugin to build and publish my photo galleries,
  4. allow me to migrate to TTG HighSlide Gallery Pro when I was ready (i.e. enable e-commerce, etc.),
  5. develop a WordPress theme to match the TTG Pages theme, and finally,
  6. merge my WordPress blog into the menu structure.

Been before embedding the  blog option into the TTG Pages menu bar, I had to develop a WordPress theme that would match the TTG Pages look and feel.  See extending WordPress themes for details.  Check off number 5.

Note that I have also developed a DaDa Mail newsletter set of pages that, again, have a consistent look and feel to the rest of the site.

The lions share of the work to make WordPress and DaDa Mail look and feel like the TTG Pages output meant modifying the needed CSS definitions.  If you don't understand CSS, I strongly recommend lynda.com's courses on CSS.  It takes a while and not all browsers render the same CSS the same way. It can be a bit daunting at first and sometimes it take a lot of mucking around to get things right, but the results are clearly obvious.

Once that was done, I had to manually modify the output from TTG Pages in order to add the additional menu choices. This was the critical decision point. Once I had TTG Pages, TTG HighSlide Gallery, WordPress and DaDa Mail all looking the same, I would have to abandon TTG Pages and maintain the sites root pages in Dreamweaver (home, galleries, about and contact). For me this was an easy decision to make.  I had the skills and tools needed to make that decision with confidence. Onward and forward!

Maintaining the root set of TTG Pages output isn't a big deal. It is quite easy to change the images and text contents of the TTG Pages output in Dreamweaver. As long as I use the same TTG HighSlide Gallery template, I can add new gallery pages and the TTG Pages auto-index feature finds them all dynamically. Check off number 3.

This has allowed me to enhance these root pages to

  1. include an affiliate link to lynda.com,
  2. include a footer link to a site search page,
  3. include a footer link to a site links map page, and
  4. include a footer link to the about-copyrights page.

Check off numbers 1 and 6.

Note that I have not modified the TTG HighSlide Gallery pages, so migrating to TTG HighSlide Gallery Pro should be a fairly simple matter of dropping the Pro plugin into Lighroom and away we go! Check off number 4 - I hope.

That just left goal number 2 - my new and improved contact page.  The main features of my version over Matthew's are

  1. the use of a GPL Captcha to prevent bots collecting my email address from my sites pages and then spamming my contact email address,
  2. the input and output pages (both success and failure pages) have the same look and feel, and
  3. modified telephone and website form fields to use LiveValidation to check the format of the data entered, if any. Remember that these are optional, so it took a bit of doing to get the correct RegEx expressions to work.

I understand that Matthew has also changed the contact form in TTG Pages to more closely resemble mine.

All in all, this has been a very successful site upgrade. My previous version had some serious design limitations that I needed to get past, and I needed some initial help to do that.  The Turning Gate's Lightroom plugins not only made this something I could do, it made doing so quite enjoyable (yes, I enjoy coding HTML, PHP and CSS -- can you say "geek")!

I hope this answers most of the queries I've had.  If not, leave me a comment or get in touch and I'll do my best to help you out!

;-j


4 responses to “website new look and feel – the meat of the story

  1. Hello John,
    I came upon you while reading the TTG Wiki (Using phplugins). I’m trying to finish a project and there is something I can’t quite fix : the site’s main page has a two button navigation (french & english). I placed them center top, over the masthead. In portrait orientation, they line up fine on tablet and phone. But when switched around to landscape, they line up to the left of the screen. Can I ask you for an idea as to how to fix this? The sit’s URL is the one listed in the website box. I realize that you are not into TTG support, but I am taking a chance that you might have a few moments for me.
    Thank you.

    • Hi Pierre,

      I suspect the problem centres around responsive CSS and @media queries. If, while browsing the website’s front page on a desktop browser, you simply drag the right side of the window towards the left, when the window gets to about 600px wide or less, it repaints, shifting the menu items in question over to the left (as well as changing some of the other elements on the page).

      I see in your custom CSS the following code …

      p.p-nav a:first-child {
      padding-left: 60px; /* stabilité des menus et alignement latéral des menus
      }

      This is embedded inside a media query that triggers with @media screen and (max-width: 600px).

      Notice also that when you hover over the word “français” the menu shifts to the left. Further, the hover colour does not react the same way as it does when the window is above 600px wide.

      Without being able to see under the cover on your site, I have two suggestions for you to explore;

      1) Style the menu in a fashion that doesn’t reply on absolute pixel based padding or margin values. This is what is causing it not to centre in both orientations (i.e. when it is taller than wider or vice-versa).

      2) Add a :hover definition in your custom CSS by inserting p.p-nav a:first-child:hover { ... } and replace … with whatever you use to solve the above issue as well as adding a color: value to set the hover colour to match.

      Hope this helps!

      ;-j

  2. Hi,
    Great result !
    I would like to do the same, with a fluid menu and top.
    Which theme did you choose ?

    Regards,

    pierre

Leave a Comment

Your email address will not be published. Required fields are marked *


Get Email Updates

Support

It takes money to run a website. If we have been of assistance to you, if you have found useful information on our website, or if you have enjoyed using the free Photoshop Creative Commons plugin, please consider helping to defray our costs by making a secure PayPal donation. We do not receive any of your personal information or financial data.

Disclosure

john bishop images receives a small portion of affiliate sales. This costs you nothing extra, but helps to support our work. Though compensated by affiliate relationships, john bishop images carefully chooses affiliates based upon the quality of services and products these entities provide to our users. They must provide significant value-add. john bishop images is independently owned and the opinions expressed here are our own.